web-music-score 6.0.0-pre.3 → 6.0.0-pre.5

package/dist/score/index.mjs

@@ -1,12 +1,12 @@
-/* WebMusicScore v6.0.0-pre.3 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
+/* WebMusicScore v6.0.0-pre.5 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
 import {
   MusicError
-} from "../chunk-SCF6ZZFQ.mjs";
+} from "../chunk-U2D4H5TI.mjs";
 import {
   NoteLengthProps,
   RhythmProps,
   validateNoteLength
-} from "../chunk-TM46RT77.mjs";
+} from "../chunk-DQFQEO6F.mjs";
 import {
   AnchoredRect,
   BiMap,
@@ -20,105 +20,12 @@ import {
   device_exports,
   guard_exports,
   utils_exports
-} from "../chunk-S5PIZUF6.mjs";
+} from "../chunk-JP3PJICN.mjs";
 import {
   __publicField,
   __spreadProps,
   __spreadValues
-} from "../chunk-QJ3X3GQ6.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.`);
-}
+} from "../chunk-G3HIPFVF.mjs";
 
 // src/score/pub/types.ts
 var StaffPreset = /* @__PURE__ */ ((StaffPreset2) => {
@@ -399,394 +306,40 @@ import { Note as Note9 } from "web-music-score/theory";
 // src/score/engine/obj-staff-and-tab.ts
 import { getTuningStrings, Note as Note8, validateTuningName } from "web-music-score/theory";
 
-// 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
+};
+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-code-format.enum.js
-var ColorCodeFormat;
-(function(ColorCodeFormat2) {
-  ColorCodeFormat2["Hex"] = "hex";
-  ColorCodeFormat2["RGB"] = "rgb";
-  ColorCodeFormat2["Array"] = "array";
-})(ColorCodeFormat = ColorCodeFormat || (ColorCodeFormat = {}));
-
-// node_modules/color-name/index.js
-var colors = {
-  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]
-};
-for (const key in colors) Object.freeze(colors[key]);
-var color_name_default = Object.freeze(colors);
-
-// 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;
-}
-
-// 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]})`;
-}
-
-// 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+gyeOaB1S0BrLHAut9iLqv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";
+// 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==";
@@ -798,14 +351,6 @@ var ImageData = new UniMap([
 ]);
 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;
@@ -827,6 +372,7 @@ var RenderContext = class {
     __publicField(this, "canvas");
     __publicField(this, "ctx");
     __publicField(this, "mdoc");
+    __publicField(this, "paint", Paint.default);
     __publicField(this, "cursorRect");
     __publicField(this, "mousePos");
     // Mouse coord in document space
@@ -879,12 +425,13 @@ var RenderContext = class {
   }
   onImageLoaded(data) {
     if (data.loaded || !data.img) return;
-    if (data.colorized || data.color === "") {
+    const color = this.paint.getColor(data.color);
+    if (data.colorized || color === "" || color === "black" || color === "#000" || color === "#0000" || color === "#000000" || color === "#00000000") {
       this.forceDraw();
       data.loaded = true;
       return;
     }
-    const [nr, ng, nb, na] = colorNameToRGBA(data.color);
+    const [nr, ng, nb, na] = Paint.colorNameToRGBA(color);
     const threshold = 40;
     if (typeof document === "undefined") {
       console.error("Failed to colorize image: document is undefined.");
@@ -934,6 +481,12 @@ var RenderContext = class {
       mdoc.getMusicObject().setRenderContext(this);
     }
   }
+  setPaint(paint) {
+    this.paint = paint != null ? paint : Paint.default;
+  }
+  getPaint() {
+    return this.paint;
+  }
   setCanvas(canvas) {
     var _a, _b;
     if (this.canvas !== canvas) {
@@ -1086,7 +639,7 @@ var RenderContext = class {
     if (!staff) {
       return;
     }
-    this.fillColor(DocumentColor.HilightStaffPos);
+    this.fillColor(this.paint.colors["hilight.staffpos"]);
     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);
@@ -1098,13 +651,13 @@ var RenderContext = class {
       return;
     }
     let rect = hilightedObj.getRect();
-    this.lineColor(DocumentColor.HilightObject);
+    this.lineColor(this.paint.colors["hilight.object"]);
     this.strokeRect(rect.left, rect.top, rect.width, rect.height);
   }
   drawPlayCursor() {
     let { cursorRect: r } = this;
     if (r) {
-      this.color(DocumentColor.PlayCursor).lineWidth(2).strokeLine(r.centerX, r.top, r.centerX, r.bottom);
+      this.color(this.paint.colors["play.cursor"]).lineWidth(2).strokeLine(r.centerX, r.top, r.centerX, r.bottom);
     }
   }
   txFromScreenCoord(screenCoord) {
@@ -1115,7 +668,7 @@ var RenderContext = class {
   }
   clearCanvas() {
     if (this.ctx) {
-      this.ctx.canvas.style.background = DocumentColor.Background;
+      this.ctx.canvas.style.background = this.getPaint().colors["background"];
       this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
     }
   }
@@ -1259,15 +812,16 @@ var RenderContext = class {
     this.stroke();
   }
   color(color) {
-    if (this.ctx) this.ctx.strokeStyle = this.ctx.fillStyle = color;
+    if (this.ctx)
+      this.ctx.strokeStyle = this.ctx.fillStyle = this.paint.getColor(color);
     return this;
   }
   lineColor(color) {
-    if (this.ctx) this.ctx.strokeStyle = color;
+    if (this.ctx) this.ctx.strokeStyle = this.paint.getColor(color);
     return this;
   }
   fillColor(color) {
-    if (this.ctx) this.ctx.fillStyle = color;
+    if (this.ctx) this.ctx.fillStyle = this.paint.getColor(color);
     return this;
   }
   lineWidth(lineWidth) {
@@ -1735,7 +1289,7 @@ var ObjStaffSignature = class extends MusicObject {
   }
   updateClefImage(ctx, showClef) {
     if (showClef) {
-      let color = DocumentColor.Staff_Signature_Clef;
+      let color = ctx.getPaint().getColor(colorKey("staff.signature.clef"));
       if (["black", "#000", "#000000"].includes(color))
         color = "";
       let img = ctx.getImageAsset(this.staff.clefImageAsset, color);
@@ -1747,7 +1301,7 @@ var ObjStaffSignature = class extends MusicObject {
   }
   updateMeasureNumber(showMeasureNumber) {
     if (showMeasureNumber) {
-      let color = DocumentColor.Staff_Signature_MeasureNum;
+      let color = colorKey("staff.signature.measurenum");
       let text = this.measure.getMeasureNumber().toString();
       this.measureNumber = new ObjText(this, { text, color }, 0, 1);
     } else {
@@ -1757,7 +1311,7 @@ var ObjStaffSignature = class extends MusicObject {
   updateKeySignature(showKeySignature) {
     if (showKeySignature) {
       let { measure } = this;
-      let color = DocumentColor.Staff_Signature_Key;
+      let color = colorKey("staff.signature.key");
       let prevMeasure = measure.getPrevMeasure();
       let prevKeySignature = prevMeasure ? prevMeasure.getKeySignature() : void 0;
       let newKeySignature = measure.getKeySignature();
@@ -1779,7 +1333,7 @@ var ObjStaffSignature = class extends MusicObject {
   updateTimeSignature(showTimeSignature) {
     if (showTimeSignature) {
       let timeSignature = this.measure.getTimeSignature();
-      let color = DocumentColor.Staff_Signature_Time;
+      let color = colorKey("staff.signature.time");
       let beatCount = timeSignature.beatCount.toString();
       this.beatCountText = new ObjText(this, { text: beatCount, color, scale: 1.4 }, 0.5, 0.5);
       let beatSize = timeSignature.beatSize.toString();
@@ -1790,7 +1344,7 @@ var ObjStaffSignature = class extends MusicObject {
   }
   updateTempo(showTempo) {
     if (showTempo) {
-      let color = DocumentColor.Staff_Signature_Tempo;
+      let color = colorKey("staff.signature.tempo");
       let text = getTempoString(this.measure.getTempo());
       this.tempoText = new ObjText(this, { text, color }, 0.5, 1);
     } else {
@@ -2002,7 +1556,7 @@ var ObjTabSignature = class extends MusicObject {
   }
   updateMeasureNumber(showMeasureNumber) {
     if (showMeasureNumber) {
-      let color = DocumentColor.Tab_Signature_MeasureNum;
+      let color = colorKey("tab.signature.measurenum");
       let text = this.measure.getMeasureNumber().toString();
       this.measureNumber = new ObjText(this, { text, color }, 0, 1);
     } else {
@@ -2012,7 +1566,7 @@ var ObjTabSignature = class extends MusicObject {
   updateTimeSignature(showTimeSignature) {
     if (showTimeSignature) {
       let timeSignature = this.measure.getTimeSignature();
-      let color = DocumentColor.Tab_Signature_Time;
+      let color = colorKey("tab.signature.time");
       let beatCount = timeSignature.beatCount.toString();
       this.beatCountText = new ObjText(this, { text: beatCount, color, scale: 1.4 }, 0.5, 0.5);
       let beatSize = timeSignature.beatSize.toString();
@@ -2023,7 +1577,7 @@ var ObjTabSignature = class extends MusicObject {
   }
   updateTempo(showTempo) {
     if (showTempo) {
-      let color = DocumentColor.Tab_Signature_Tempo;
+      let color = colorKey("tab.signature.tempo");
       let text = getTempoString(this.measure.getTempo());
       this.tempoText = new ObjText(this, { text, color }, 0, 1);
     } else {
@@ -2256,7 +1810,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 : DocumentColor.Staff_Rest;
+    this.color = (_c = options == null ? void 0 : options.color) != null ? _c : colorKey("staff.rest");
     this.hide = (_d = options == null ? void 0 : options.hide) != null ? _d : false;
     this.oldStyleTriplet = tupletRatio === void 0 && NoteLengthProps2.get(noteLength).isTriplet;
     this.rhythmProps = RhythmProps2.get(noteLength, void 0, (tupletRatio != null ? tupletRatio : this.oldStyleTriplet) ? Tuplet.Triplet : void 0);
@@ -2572,7 +2126,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 : DocumentColor.Staff_Note;
+    this.color = (_a = options == null ? void 0 : options.color) != null ? _a : colorKey("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);
@@ -2956,8 +2510,8 @@ var ObjNoteGroup = class _ObjNoteGroup extends MusicObject {
         return;
       }
       let obj = new ObjTabNoteGroup(tab, this);
-      const bgcolor = DocumentColor.Background;
-      const color = DocumentColor.Tab_Note;
+      const bgcolor = colorKey("background");
+      const color = colorKey("tab.note");
       this.notes.forEach((note, noteIndex) => {
         let stringNumber = this.runningStringNumbers[noteIndex];
         if (guard_exports.isIntegerBetween(stringNumber, 1, 6)) {
@@ -3421,7 +2975,7 @@ var ObjRhythmColumn = class extends MusicObject {
     this.rect.offsetInPlace(dx, dy);
   }
   draw(ctx) {
-    ctx.color(DocumentColor.Staff_Frame);
+    ctx.color(colorKey("staff.frame"));
     this.row.getStaves().forEach((staff) => {
       let minDiatonicId = this.staffMinDiatonicId.get(staff);
       let maxDiatonicId = this.staffMaxDiatonicId.get(staff);
@@ -5168,10 +4722,8 @@ var ObjConnective = class extends MusicObject {
     ctx.drawDebugRect(rect);
     let t = _lineWidth * 1.5;
     let s = _lineWidth * 0.25;
+    ctx.color(this.line instanceof ObjTab ? colorKey("tab.connective") : colorKey("staff.connective"));
     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);
@@ -5470,7 +5022,7 @@ var ObjTabRhythm = class extends MusicObject {
         let colX = sym.col.getRect().anchorX;
         if (sym instanceof ObjNoteGroup) {
           ctx.lineWidth(1);
-          ctx.color(DocumentColor.Tab_Note);
+          ctx.color(colorKey("tab.note"));
           if (sym.rhythmProps.noteSize >= 2) {
             ctx.lineWidth(sym.rhythmProps.noteSize === 4 ? 2 : 1);
             ctx.strokeLine(colX, stemBottom, colX, stemTop);
@@ -5485,7 +5037,7 @@ var ObjTabRhythm = class extends MusicObject {
           }
         } else if (sym instanceof ObjRest) {
           ctx.lineWidth(1);
-          ctx.color(DocumentColor.Tab_Rest);
+          ctx.color(colorKey("tab.rest"));
           let cx = colX;
           let cy = (stemTop + stemBottom) / 2;
           let scale = 0.65;
@@ -5506,7 +5058,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.color(colorKey("tab.note"));
           ctx.lineWidth(2);
           for (let i = 0; i < maxBeamCount; i++) {
             let leftT = rightBeamCount > leftBeamCount && i >= leftBeamCount ? 0.75 : 0;
@@ -5522,7 +5074,7 @@ var ObjTabRhythm = class extends MusicObject {
           }
         }
         if (beamGroup && beamGroup.isTuplet()) {
-          ctx.color(DocumentColor.Tab_Note);
+          ctx.color(colorKey("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);
@@ -6008,7 +5560,7 @@ var ObjMeasure = class extends MusicObject {
       throw new MusicError11(MusicErrorType11.Score, "Cannot add Fermata because anchor is undefined.");
     }
     this.forEachStaffGroup(staffTabOrGroups, 0 /* Above */, (line, vpos) => {
-      const color = line instanceof ObjTab ? DocumentColor.Staff_Element_Fermata : DocumentColor.Tab_Element_Fermata;
+      const color = line instanceof ObjTab ? colorKey("staff.element.fermata") : colorKey("tab.element.fermata");
       this.addLayoutObject(new ObjFermata(anchor, vpos, color), line, 1 /* Fermata */, vpos);
     });
     this.disableExtension();
@@ -6028,7 +5580,7 @@ var ObjMeasure = class extends MusicObject {
         let passages = args;
         addLayoutObjectProps = {
           createObj: (line) => {
-            const color = line instanceof ObjTab ? DocumentColor.Staff_Element_Navigation : DocumentColor.Tab_Element_Navigation;
+            const color = line instanceof ObjTab ? colorKey("staff.element.navigation") : colorKey("tab.element.navigation");
             return new ObjEnding(anchor, color, passages);
           },
           layoutGroupId: 4 /* Ending */,
@@ -6043,7 +5595,7 @@ var ObjMeasure = class extends MusicObject {
         let text = getNavigationString(navigation);
         addLayoutObjectProps = {
           createObj: (line) => {
-            const color = line instanceof ObjTab ? DocumentColor.Staff_Element_Navigation : DocumentColor.Tab_Element_Navigation;
+            const color = line instanceof ObjTab ? colorKey("staff.element.navigation") : colorKey("tab.element.navigation");
             return new ObjText(anchor2, { text, color }, 1, 1);
           },
           layoutGroupId: 3 /* Navigation */,
@@ -6058,7 +5610,7 @@ var ObjMeasure = class extends MusicObject {
         let text = getNavigationString(navigation);
         addLayoutObjectProps = {
           createObj: (line) => {
-            const color = line instanceof ObjTab ? DocumentColor.Staff_Element_Navigation : DocumentColor.Tab_Element_Navigation;
+            const color = line instanceof ObjTab ? colorKey("staff.element.navigation") : colorKey("tab.element.navigation");
             return new ObjText(anchor2, { text, color }, 1, 1);
           },
           layoutGroupId: 3 /* Navigation */,
@@ -6072,7 +5624,7 @@ var ObjMeasure = class extends MusicObject {
         let text = getNavigationString(navigation);
         addLayoutObjectProps = {
           createObj: (line) => {
-            const color = line instanceof ObjTab ? DocumentColor.Staff_Element_Navigation : DocumentColor.Tab_Element_Navigation;
+            const color = line instanceof ObjTab ? colorKey("staff.element.navigation") : colorKey("tab.element.navigation");
             return new ObjSpecialText(anchor2, text, color);
           },
           layoutGroupId: 3 /* Navigation */,
@@ -6085,7 +5637,7 @@ var ObjMeasure = class extends MusicObject {
         let text = getNavigationString(navigation);
         addLayoutObjectProps = {
           createObj: (line) => {
-            const color = line instanceof ObjTab ? DocumentColor.Staff_Element_Navigation : DocumentColor.Tab_Element_Navigation;
+            const color = line instanceof ObjTab ? colorKey("staff.element.navigation") : colorKey("tab.element.navigation");
             return new ObjSpecialText(anchor2, text, color);
           },
           layoutGroupId: 3 /* Navigation */,
@@ -6106,7 +5658,7 @@ var ObjMeasure = class extends MusicObject {
           const textProps = {
             text,
             scale: 0.8,
-            color: DocumentColor.Staff_Frame
+            color: colorKey("staff.frame")
           };
           this.endRepeatPlayCountText = new ObjText(this, textProps, 0.5, 1);
         }
@@ -6152,7 +5704,7 @@ var ObjMeasure = class extends MusicObject {
     const anchorY = getExtensionAnchorY(linePos);
     this.disableExtension();
     this.forEachStaffGroup(staffTabOrGroups, defaultVerticalPos, (line, vpos) => {
-      const color = line instanceof ObjTab ? DocumentColor.Staff_Element_Annotation : DocumentColor.Tab_Element_Annotation;
+      const color = line instanceof ObjTab ? colorKey("tab.element.annotation") : colorKey("staff.element.annotation");
       textProps.color = color;
       let textObj = new ObjText(anchor, textProps, anchorX, anchorY);
       const layoutObj = this.addLayoutObject(textObj, line, layoutGroupId, vpos);
@@ -6181,7 +5733,7 @@ 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;
+      const color = line instanceof ObjTab ? colorKey("staff.element.label") : colorKey("tab.element.label");
       textProps.color = color;
       let textObj = new ObjText(anchor, textProps, 0.5, 1);
       const layoutObj = this.addLayoutObject(textObj, line, layoutGroupId, vpos);
@@ -6543,21 +6095,22 @@ var ObjMeasure = class extends MusicObject {
   getVoiceSymbols(voiceId) {
     return this.voiceSymbols.getAll(voiceId);
   }
-  completeRests(voiceId) {
-    if (voiceId === void 0) {
+  fillWithRests(...voiceId) {
+    if (voiceId.length === 0) {
       if (this.getConsumedTicks() === 0) {
-        this.completeRests(0);
+        this.fillWithRests(0);
       } else {
-        this.completeRests(getVoiceIds().filter((id) => this.getConsumedTicks(id) > 0));
+        this.fillWithRests(...getVoiceIds().filter((id) => this.getConsumedTicks(id) > 0));
       }
       return;
-    } else if (guard_exports.isArray(voiceId)) {
-      voiceId.forEach((id) => this.completeRests(id));
+    } else if (voiceId.length > 1) {
+      voiceId.forEach((id) => this.fillWithRests(id));
       return;
     } else {
-      validateVoiceId(voiceId);
+      const id = voiceId[0];
+      validateVoiceId(id);
       let measureTicks = this.getMeasureTicks();
-      let consumedTicks = this.getConsumedTicks(voiceId);
+      let consumedTicks = this.getConsumedTicks(id);
       let remainingTicks = measureTicks - consumedTicks;
       let rests = [];
       while (remainingTicks > 0) {
@@ -6572,7 +6125,7 @@ var ObjMeasure = class extends MusicObject {
           }
         }
       }
-      rests.reverse().forEach((rest) => this.addRest(voiceId, NoteLengthProps5.create(rest.noteLength, rest.dotCount).noteLength));
+      rests.reverse().forEach((rest) => this.addRest(id, NoteLengthProps5.create(rest.noteLength, rest.dotCount).noteLength));
     }
   }
   requestLayout() {
@@ -6627,8 +6180,7 @@ var ObjMeasure = class extends MusicObject {
       this.row.getTabs().forEach((tab) => {
         for (let stringId = 0; stringId < 6; stringId++) {
           let note = tab.getTuningStrings()[stringId].format(PitchNotation.Helmholtz, SymbolSet.Unicode);
-          let color = DocumentColor.Tab_Tuning;
-          let obj = new ObjText(this, { text: note, scale: 0.8, color }, 1, 0.5);
+          let obj = new ObjText(this, { text: note, scale: 0.8, color: colorKey("tab.tuning") }, 1, 0.5);
           obj.layout(ctx);
           obj.setRight(this.regions.tabTuning_0 * 0.8);
           obj.setCenterY(tab.getStringY(stringId));
@@ -6781,11 +6333,11 @@ var ObjMeasure = class extends MusicObject {
     this.row.getNotationLines().forEach((line) => {
       if (line instanceof ObjStaff) {
         for (let p = line.bottomLineDiatonicId; p <= line.topLineDiatonicId; p += 2) {
-          drawLine(line.getDiatonicIdY(p), DocumentColor.Staff_Frame);
+          drawLine(line.getDiatonicIdY(p), colorKey("staff.frame"));
         }
       } else if (line instanceof ObjTab) {
         for (let stringId = 0; stringId < 6; stringId++) {
-          drawLine(line.getStringY(stringId), DocumentColor.Tab_Frame);
+          drawLine(line.getStringY(stringId), colorKey("tab.frame"));
         }
       }
     });
@@ -6796,7 +6348,7 @@ var ObjMeasure = class extends MusicObject {
         const left2 = this.getStaffLineLeft();
         const top = tab.getTopLineY();
         const bottom = tab.getBottomLineY();
-        ctx.color(DocumentColor.Tab_Frame).lineWidth(1).strokeLine(left2, top, left2, bottom);
+        ctx.color(colorKey("tab.frame")).lineWidth(1).strokeLine(left2, top, left2, bottom);
       });
     }
     this.signatures.forEach((signature) => signature.draw(ctx));
@@ -7031,7 +6583,7 @@ var ObjNotationLine6 = class extends MusicObject {
     }
   }
   drawVerticalLine(ctx, left, width, isSystemBarLine = false) {
-    ctx.color(this.getConfig().type === "tab" ? DocumentColor.Tab_Frame : DocumentColor.Staff_Frame);
+    ctx.color(this.getConfig().type === "tab" ? colorKey("tab.frame") : colorKey("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;
@@ -7324,7 +6876,7 @@ var ObjScoreRowGroup = class extends MusicObject {
     __publicField(this, "instrText");
     __publicField(this, "braceRect", new AnchoredRect());
     __publicField(this, "mi");
-    const color = DocumentColor.RowGroup_Instrument;
+    const color = colorKey("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;
@@ -7379,7 +6931,7 @@ var ObjScoreRowGroup = class extends MusicObject {
     this.instrText.draw(ctx);
     if (this.hasBrace) {
       const r = this.braceRect;
-      ctx.color(DocumentColor.RowGroup_Frame).lineWidth(1).drawBracket(r, "{");
+      ctx.color(colorKey("rowgroup.frame")).lineWidth(1).drawBracket(r, "{");
     }
   }
 };
@@ -7757,12 +7309,9 @@ var ObjHeader = class extends MusicObject {
     __publicField(this, "arrangerText");
     __publicField(this, "mi");
     this.mi = new MHeader(this);
-    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;
+    this.titleText = this.title ? new ObjText(this, { text: this.title, color: colorKey("header.title"), scale: 2 }, 0.5, 0) : void 0;
+    this.composerText = this.composer ? new ObjText(this, { text: this.composer, color: colorKey("header.composer") }, 1, 0) : void 0;
+    this.arrangerText = this.arranger ? new ObjText(this, { text: "Arr.: " + this.arranger, color: colorKey("header.arranger") }, 1, 0) : void 0;
   }
   getMusicInterface() {
     return this.mi;
@@ -8736,14 +8285,14 @@ var _DocumentBuilder = class _DocumentBuilder {
     return this;
   }
   /**
-   * Add rests to fill current measure.
+   * Fill current measure with rests.
    * @param voiceId - Voice id to add rests to. Single value, array or all if omitted.
    * @returns - This document builder instance.
    */
-  completeRests(voiceId) {
-    setAssertFunction("completeRests", voiceId);
-    assertArg(guard_exports.isUndefined(voiceId) || isVoiceId(voiceId) || guard_exports.isArray(voiceId) && voiceId.every((id) => isVoiceId(id)));
-    this.getMeasure().completeRests(voiceId);
+  fillWithRests(...voiceId) {
+    setAssertFunction("fillWithRests", ...voiceId);
+    assertArg(guard_exports.isArray(voiceId) && (voiceId.length === 0 || voiceId.every((id) => isVoiceId(id))));
+    this.getMeasure().fillWithRests(...voiceId);
     return this;
   }
   /**
@@ -8771,6 +8320,22 @@ var _DocumentBuilder = class _DocumentBuilder {
     }
     return this;
   }
+  /**
+   * Add and repeat builder section.
+   * @param times - Repeat count.
+   * @param repeatCreator - Repeat creator function.
+   * @returns - This document builder instance.
+   */
+  repeat(times, repeatCreator) {
+    setAssertFunction("repeat", repeatCreator);
+    assertArg(
+      guard_exports.isIntegerGte(times, 0),
+      guard_exports.isFunction(repeatCreator)
+    );
+    for (let i = 0; i < times; i++)
+      repeatCreator(this);
+    return this;
+  }
 };
 __publicField(_DocumentBuilder, "DefaultMeasureOptions", {});
 var DocumentBuilder = _DocumentBuilder;
@@ -9720,51 +9285,592 @@ var MExtensionLine = _MExtensionLine;
 
 // src/score/pub/music-interface.ts
 import { MusicError as MusicError19, MusicErrorType as MusicErrorType19 } from "web-music-score/core";
-function assertArg3(condition, argName, argValue) {
-  if (!condition) {
-    throw new MusicError19(MusicErrorType19.Score, `Invalid arg: ${argName} = ${argValue}`);
-  }
-}
-function require_t(t, message) {
-  if (t === void 0 || t === null) {
-    throw new TypeError(message);
-  } else {
-    return t;
-  }
-}
-var _MPlayer = class _MPlayer {
-  /**
-   * Create new music player.
-   * @param doc - Music document to play.
-   * @param playStateChangeListener - Play state change listener.
-   */
-  constructor(doc, playStateChangeListener) {
-    __publicField(this, "player");
-    assertArg3(doc instanceof MDocument2, "doc", doc);
-    assertArg3(guard_exports.isFunctionOrUndefined(playStateChangeListener), "playStateChangeListener", playStateChangeListener);
-    this.player = new Player();
-    this.player.setDocument(doc.getMusicObject());
-    this.player.setCursorPositionChangeListener((cursorRect) => {
-      doc.getMusicObject().updateCursorRect(cursorRect);
-    });
-    if (playStateChangeListener) {
-      this.player.setPlayStateChnageListener(playStateChangeListener);
-    }
-  }
-  /**
-   * Stop all playing.
-   */
-  static stopAll() {
-    this.currentlyPlaying.forEach((p) => p.stop());
-    Audio2.stop();
-  }
-  /**
-   * Playe attached document.
-   * @returns - This player instance.
-   */
-  play() {
-    _MPlayer.currentlyPlaying.add(this);
-    this.player.play();
+
+// 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 = {}));
+
+// 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/index.js
+var colors = {
+  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]
+};
+for (const key in colors) Object.freeze(colors[key]);
+var color_name_default = Object.freeze(colors);
+
+// 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;
+}
+
+// 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]})`;
+}
+
+// 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/pub/paint.ts
+var norm = (s) => s.toLowerCase();
+function colorKey(colorKey2) {
+  return colorKey2;
+}
+var _Paint = class _Paint {
+  constructor() {
+    __publicField(this, "colors", {
+      "hilight.staffpos": "#55cc55",
+      "hilight.object": "#55cc55",
+      "play.cursor": "#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.lyrics": "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.lyrics": "black",
+      "tab.connective": "black",
+      "tab.tuning": "black",
+      "tab.signature.clef": "black",
+      // not needed
+      "tab.signature.key": "black",
+      // not needed
+      "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"
+    });
+  }
+  /**
+   * Set color of any score document element. Use combination of color key parts to set color of specific elements.
+   * ```ts
+   * setColor("all", "red");                          // Set color of everything except background.
+   * setColor("staff", "red");                        // Set color of all staff elements.
+   * setColor(["staff", "signature"], "red");         // Set color of all staff signature elements.
+   * setColor(["staff", "signature", "key"], "red");  // Set color of staff key signature.
+   * setColor(["staff", "signature", "time"], "red"); // Set color of staff time signature.
+   * setColor("staff.signature.time", "red");         // Set color of staff time signature.
+   * // etc.
+   * ```
+   * 
+   * @param colorKeyOrParts - Color key parts to set color for.
+   * @param color - Color (HTML color code e.g. "green", "#AA6644", etc.)
+   */
+  setColor(colorKeyOrParts, color) {
+    if (colorKeyOrParts === "all") {
+      for (const key of Object.keys(this.colors)) {
+        if (key !== "background" && key !== "hilight.object" && key !== "hilight.staffpos" && key !== "play.cursor")
+          this.colors[key] = color || "black";
+      }
+      return;
+    }
+    const isBackground = typeof colorKeyOrParts === "string" && norm(colorKeyOrParts) === "background" || guard_exports.isArray(colorKeyOrParts) && colorKeyOrParts.length === 1 && norm(colorKeyOrParts[0]) === "background";
+    const finalColor = color || (isBackground ? "white" : "black");
+    if (isBackground) {
+      this.colors.background = finalColor;
+      return;
+    }
+    if (typeof colorKeyOrParts === "string" && colorKeyOrParts in this.colors) {
+      this.colors[colorKeyOrParts] = finalColor;
+      return;
+    }
+    const colorKeyParts = guard_exports.isArray(colorKeyOrParts) ? colorKeyOrParts : colorKeyOrParts.split(".");
+    if (colorKeyParts.length === 0)
+      return;
+    const normalizedParts = colorKeyParts.map(norm);
+    let matched = false;
+    for (const key of Object.keys(this.colors)) {
+      const parts = key.split(".").map(norm);
+      const match = normalizedParts.every((a) => parts.includes(a));
+      if (match) {
+        this.colors[key] = finalColor;
+        matched = true;
+      }
+    }
+    if (!matched) {
+      console.error(
+        `Color attrs ${utils_exports.Str.stringify(colorKeyParts)} did not match any color.`
+      );
+    }
+  }
+  /**
+   * Get color.
+   * @param colorKeyOrColor - ColorKey or color.
+   * @returns - Color value (e.g. "white" or "#FFFFFF").
+   */
+  getColor(colorKeyOrColor) {
+    var _a;
+    return (_a = this.colors[colorKeyOrColor]) != null ? _a : colorKeyOrColor;
+  }
+  /**
+   * Get color code.
+   * @param colorKeyOrColor - ColorKey or color.
+   * @returns - Color code (e.g. "#FFFFFF").
+   */
+  getColorCode(colorKeyOrColor) {
+    return _Paint.colorNameToCode(this.getColor(colorKeyOrColor));
+  }
+  /**
+   * Get color RGBA.
+   * @param colorKeyOrColor - ColorKey or color.
+   * @returns - Color RGBA (e.g. [1, 1, 1, 1]).
+   */
+  getColorRGBA(colorKeyOrColor) {
+    return _Paint.colorNameToRGBA(this.getColor(colorKeyOrColor));
+  }
+  /**
+   * Convert color name to color code.
+   * @param colorName - Color name (e.g. "white").
+   * @returns - Color code (e.g. "#FFFFFF")
+   */
+  static colorNameToCode(colorName) {
+    return colorNameToCode(colorName);
+  }
+  /**
+   * Convert color name ro RGBA.
+   * @param colorName - Color name (e.g. "white").
+   * @param alpha - Alpha value 0..1 (default is 1).
+   * @returns - RGBA (e.g. [1, 1, 1, 1]).
+   */
+  static colorNameToRGBA(colorName, alpha = 1) {
+    const hex = colorNameToCode(colorName).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];
+  }
+};
+__publicField(_Paint, "default", new _Paint());
+var Paint = _Paint;
+
+// src/score/pub/music-interface.ts
+function assertArg3(condition, argName, argValue) {
+  if (!condition) {
+    throw new MusicError19(MusicErrorType19.Score, `Invalid arg: ${argName} = ${argValue}`);
+  }
+}
+function require_t(t, message) {
+  if (t === void 0 || t === null) {
+    throw new TypeError(message);
+  } else {
+    return t;
+  }
+}
+var _MPlayer = class _MPlayer {
+  /**
+   * Create new music player.
+   * @param doc - Music document to play.
+   * @param playStateChangeListener - Play state change listener.
+   */
+  constructor(doc, playStateChangeListener) {
+    __publicField(this, "player");
+    assertArg3(doc instanceof MDocument2, "doc", doc);
+    assertArg3(guard_exports.isFunctionOrUndefined(playStateChangeListener), "playStateChangeListener", playStateChangeListener);
+    this.player = new Player();
+    this.player.setDocument(doc.getMusicObject());
+    this.player.setCursorPositionChangeListener((cursorRect) => {
+      doc.getMusicObject().updateCursorRect(cursorRect);
+    });
+    if (playStateChangeListener) {
+      this.player.setPlayStateChnageListener(playStateChangeListener);
+    }
+  }
+  /**
+   * Stop all playing.
+   */
+  static stopAll() {
+    this.currentlyPlaying.forEach((p) => p.stop());
+    Audio2.stop();
+  }
+  /**
+   * Playe attached document.
+   * @returns - This player instance.
+   */
+  play() {
+    _MPlayer.currentlyPlaying.add(this);
+    this.player.play();
     return this;
   }
   /**
@@ -9795,6 +9901,16 @@ var MRenderContext2 = class {
     __publicField(this, "ctx");
     this.ctx = new RenderContext(this);
   }
+  /**
+   * Set Paint for this render context.
+   * @param paint - Paint.
+   * @returns - This render context instance.
+   */
+  setPaint(paint) {
+    assertArg3(guard_exports.isUndefined(paint) || paint instanceof Paint, "paint", paint);
+    this.ctx.setPaint(paint);
+    return this;
+  }
   /**
    * Attach music document to this render context.
    * @param doc - Music document.
@@ -10070,6 +10186,7 @@ export {
   MusicInterface5 as MusicInterface,
   Navigation,
   NoteAnchor,
+  Paint,
   PlayState,
   ScoreEvent,
   ScoreObjectEvent,
@@ -10079,13 +10196,13 @@ export {
   TempoAnnotation,
   TieType,
   VerticalPosition,
+  colorKey,
   getStringNumbers,
   getVerseNumbers,
   getVoiceIds,
   isStringNumber,
   isVerseNumber,
   isVoiceId,
-  setColor,
   validateStringNumber,
   validateVerseNumber,
   validateVoiceId