@tspro/web-music-score 4.2.0 → 5.0.0

package/dist/instrument-DYboobMW.d.mts

@@ -0,0 +1,44 @@
+/**
+ * Instrument interface.
+ * <p>To create your own instrument just create a class that implement this simple interface.</p>
+ *
+ * ```ts
+ *   import * as Audio from "@tspro/web-music-score/audio";
+ *
+ *   class MyCoolInstrument implements Audio.Instrument {
+ *       constructor() { }
+ *       getName() { return "My Cool Instrument"; }
+ *       playNote(note: string, duration: number, linearVolume: number) { }
+ *       stop() { }
+ *   }
+ *
+ *   // Add and use my cool instrument.
+ *   Audio.addInstrument(new MyCoolInstrument());
+ * ```
+ */
+interface Instrument {
+    /**
+     * Get instrument name.
+     * @return - Instrument name.
+     */
+    getName(): string;
+    /**
+     * Play a note.
+     * @param note - Note to play (e.g. "C4").
+     * @param duration - Play duration in seconds.
+     * @param linearVolume - Linear volume in range [0, 1].
+     */
+    playNote(note: string, duration: number, linearVolume: number): void;
+    /**
+     * Stop playback.
+     */
+    stop(): void;
+}
+/**
+ * Linear volume to decibels converter.
+ * @param linearVolume - Linear volume in range [0, 1].
+ * @returns - Volume in decibels.
+ */
+declare function linearToDecibels(linearVolume: number): number;
+
+export { type Instrument as I, linearToDecibels as l };

package/dist/instrument-DYboobMW.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Instrument interface.
+ * <p>To create your own instrument just create a class that implement this simple interface.</p>
+ *
+ * ```ts
+ *   import * as Audio from "@tspro/web-music-score/audio";
+ *
+ *   class MyCoolInstrument implements Audio.Instrument {
+ *       constructor() { }
+ *       getName() { return "My Cool Instrument"; }
+ *       playNote(note: string, duration: number, linearVolume: number) { }
+ *       stop() { }
+ *   }
+ *
+ *   // Add and use my cool instrument.
+ *   Audio.addInstrument(new MyCoolInstrument());
+ * ```
+ */
+interface Instrument {
+    /**
+     * Get instrument name.
+     * @return - Instrument name.
+     */
+    getName(): string;
+    /**
+     * Play a note.
+     * @param note - Note to play (e.g. "C4").
+     * @param duration - Play duration in seconds.
+     * @param linearVolume - Linear volume in range [0, 1].
+     */
+    playNote(note: string, duration: number, linearVolume: number): void;
+    /**
+     * Stop playback.
+     */
+    stop(): void;
+}
+/**
+ * Linear volume to decibels converter.
+ * @param linearVolume - Linear volume in range [0, 1].
+ * @returns - Volume in decibels.
+ */
+declare function linearToDecibels(linearVolume: number): number;
+
+export { type Instrument as I, linearToDecibels as l };

package/dist/pieces/index.js

@@ -1,4 +1,4 @@
-/* WebMusicScore v4.2.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
+/* WebMusicScore v5.0.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/pieces/index.mjs

@@ -1,5 +1,5 @@
-/* WebMusicScore v4.2.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
-import "../chunk-5NWLGWHS.mjs";
+/* WebMusicScore v5.0.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
+import "../chunk-J3KU3U4W.mjs";
 
 // src/pieces/frere-jacques.ts
 import { DocumentBuilder } from "@tspro/web-music-score/score";

package/dist/react-ui/index.d.mts

@@ -14,7 +14,7 @@ interface CircleOfFifthsProps {
 }
 /**
  * Circle of fifths react component.
- * <pre>
+ * ```ts
  *   // Using with React TSX/JSX
  *   import * as ScoreUI from "@tspro/web-music-score/react-ui";
  *   import * as Theory from "@tspro/web-music-score/theory";
@@ -27,14 +27,14 @@ interface CircleOfFifthsProps {
  *           console.log("New scale is " + newScale.getScaleName());
  *       }
  *
- *       return &lt;&gt;
- *          &lt;ScoreUI.CircleOfFifths
+ *       return <>
+ *          <ScoreUI.CircleOfFifths
  *              style={{ position: "relative", padding: "0.5em" }}
  *              scale={curScale}
- *              onScaleChange={onChangeScale} /&gt;
- *      &lt;/&gt;;
+ *              onScaleChange={onChangeScale} />
+ *      </>;
  *   }
- * </pre>
+ * ```
  */
 declare class CircleOfFifths extends React.Component<CircleOfFifthsProps, {}> {
     constructor(props: CircleOfFifthsProps);
@@ -187,7 +187,7 @@ interface GuitarViewState {
 }
 /**
  * Guitar (neck) view react component.
- * <pre>
+ * ```ts
  *   // Using with React TSX/JSX
  *   import * as ScoreUI from "@tspro/web-music-score/react-ui";
  *   import * as Theory from "@tspro/web-music-score/theory";
@@ -204,15 +204,15 @@ interface GuitarViewState {
  *       const onUpdateFretPosition: ScoreUI.UpdateFretPositionFunc = (fretPos) => { }
  *       const onClickFretPosition: ScoreUI.ClickFretPositionFunc = (fretPos) => { }
  *
- *       return &lt;&gt;
- *           &lt;ScoreUI.GuitarView
+ *       return <>
+ *           <ScoreUI.GuitarView
  *               style={{ position: "relative", width: 640 }}
  *               guitarContext={guitarCtx}
  *               onUpdateFretPosition={onUpdateFretPosition}
- *               onClickFretPosition={onClickFretPosition} /&gt;
- *      &lt;/&gt;;
+ *               onClickFretPosition={onClickFretPosition} />
+ *      </>;
  *   }
- * </pre>
+ * ```
  */
 declare class GuitarView extends React.Component<GuitarViewProps, GuitarViewState> {
     state: GuitarViewState;
@@ -234,7 +234,7 @@ interface MusicScoreViewProps {
 }
 /**
  * Music score view react component.
- * <pre>
+ * ```ts
  *   // Using with React TSX/JSX
  *   import * as Score from "@tspro/web-music-score/react";
  *   import * as Pieces from "@tspro/web-music-score/pieces";
@@ -243,11 +243,11 @@ interface MusicScoreViewProps {
  *   render() {
  *       const doc = Pieces.createFrereJacques();
  *
- *       return &lt;&gt;
- *          &lt;Score.MusicScoreView doc=\{doc\} /&gt;
- *       &lt;/&gt;;
+ *       return <>
+ *          <Score.MusicScoreView doc=\{doc\} />
+ *       </>;
  *   }
- * </pre>
+ * ```
  */
 declare class MusicScoreView extends React.Component<MusicScoreViewProps, {}> {
     renderer: MRenderer;
@@ -273,7 +273,7 @@ interface PlaybackButtonsState {
 }
 /**
  * Usage:
- * <pre>
+ * ```ts
  *   // Using with React TSX/JSX
  *   import * as Score from "\@tspro/web-music-score/score";
  *   import * as Pieces from "@tspro/web-music-score/pieces";
@@ -282,14 +282,14 @@ interface PlaybackButtonsState {
  *   const doc = Pieces.createFrereJacques();
  *
  *   // Create default playback buttons
- *   &lt;Score.PlaybackButtons doc={doc} /&gt;
+ *   <Score.PlaybackButtons doc={doc} />
  *
  *   // Create playback buttons with custom play, pause and stop labels:
- *   &lt;Score.PlaybackButtons doc={doc} playLabel="⏵" pauseLabel="⏸" stopLabel="⏹" /&gt;
+ *   <Score.PlaybackButtons doc={doc} playLabel="⏵" pauseLabel="⏸" stopLabel="⏹" />
  *
  *   // Create playback buttons with different button layout.
- *   &lt;Score.PlaybackButtons doc={doc} buttonLayout={Score.PlaybackButtonsLayout.PlayStopSingle} /&gt;
- * </pre>
+ *   <Score.PlaybackButtons doc={doc} buttonLayout={Score.PlaybackButtonsLayout.PlayStopSingle} />
+ * ```
  */
 declare class PlaybackButtons extends React.Component<PlaybackButtonsProps, PlaybackButtonsState> {
     state: PlaybackButtonsState;

package/dist/react-ui/index.d.ts

@@ -14,7 +14,7 @@ interface CircleOfFifthsProps {
 }
 /**
  * Circle of fifths react component.
- * <pre>
+ * ```ts
  *   // Using with React TSX/JSX
  *   import * as ScoreUI from "@tspro/web-music-score/react-ui";
  *   import * as Theory from "@tspro/web-music-score/theory";
@@ -27,14 +27,14 @@ interface CircleOfFifthsProps {
  *           console.log("New scale is " + newScale.getScaleName());
  *       }
  *
- *       return &lt;&gt;
- *          &lt;ScoreUI.CircleOfFifths
+ *       return <>
+ *          <ScoreUI.CircleOfFifths
  *              style={{ position: "relative", padding: "0.5em" }}
  *              scale={curScale}
- *              onScaleChange={onChangeScale} /&gt;
- *      &lt;/&gt;;
+ *              onScaleChange={onChangeScale} />
+ *      </>;
  *   }
- * </pre>
+ * ```
  */
 declare class CircleOfFifths extends React.Component<CircleOfFifthsProps, {}> {
     constructor(props: CircleOfFifthsProps);
@@ -187,7 +187,7 @@ interface GuitarViewState {
 }
 /**
  * Guitar (neck) view react component.
- * <pre>
+ * ```ts
  *   // Using with React TSX/JSX
  *   import * as ScoreUI from "@tspro/web-music-score/react-ui";
  *   import * as Theory from "@tspro/web-music-score/theory";
@@ -204,15 +204,15 @@ interface GuitarViewState {
  *       const onUpdateFretPosition: ScoreUI.UpdateFretPositionFunc = (fretPos) => { }
  *       const onClickFretPosition: ScoreUI.ClickFretPositionFunc = (fretPos) => { }
  *
- *       return &lt;&gt;
- *           &lt;ScoreUI.GuitarView
+ *       return <>
+ *           <ScoreUI.GuitarView
  *               style={{ position: "relative", width: 640 }}
  *               guitarContext={guitarCtx}
  *               onUpdateFretPosition={onUpdateFretPosition}
- *               onClickFretPosition={onClickFretPosition} /&gt;
- *      &lt;/&gt;;
+ *               onClickFretPosition={onClickFretPosition} />
+ *      </>;
  *   }
- * </pre>
+ * ```
  */
 declare class GuitarView extends React.Component<GuitarViewProps, GuitarViewState> {
     state: GuitarViewState;
@@ -234,7 +234,7 @@ interface MusicScoreViewProps {
 }
 /**
  * Music score view react component.
- * <pre>
+ * ```ts
  *   // Using with React TSX/JSX
  *   import * as Score from "@tspro/web-music-score/react";
  *   import * as Pieces from "@tspro/web-music-score/pieces";
@@ -243,11 +243,11 @@ interface MusicScoreViewProps {
  *   render() {
  *       const doc = Pieces.createFrereJacques();
  *
- *       return &lt;&gt;
- *          &lt;Score.MusicScoreView doc=\{doc\} /&gt;
- *       &lt;/&gt;;
+ *       return <>
+ *          <Score.MusicScoreView doc=\{doc\} />
+ *       </>;
  *   }
- * </pre>
+ * ```
  */
 declare class MusicScoreView extends React.Component<MusicScoreViewProps, {}> {
     renderer: MRenderer;
@@ -273,7 +273,7 @@ interface PlaybackButtonsState {
 }
 /**
  * Usage:
- * <pre>
+ * ```ts
  *   // Using with React TSX/JSX
  *   import * as Score from "\@tspro/web-music-score/score";
  *   import * as Pieces from "@tspro/web-music-score/pieces";
@@ -282,14 +282,14 @@ interface PlaybackButtonsState {
  *   const doc = Pieces.createFrereJacques();
  *
  *   // Create default playback buttons
- *   &lt;Score.PlaybackButtons doc={doc} /&gt;
+ *   <Score.PlaybackButtons doc={doc} />
  *
  *   // Create playback buttons with custom play, pause and stop labels:
- *   &lt;Score.PlaybackButtons doc={doc} playLabel="⏵" pauseLabel="⏸" stopLabel="⏹" /&gt;
+ *   <Score.PlaybackButtons doc={doc} playLabel="⏵" pauseLabel="⏸" stopLabel="⏹" />
  *
  *   // Create playback buttons with different button layout.
- *   &lt;Score.PlaybackButtons doc={doc} buttonLayout={Score.PlaybackButtonsLayout.PlayStopSingle} /&gt;
- * </pre>
+ *   <Score.PlaybackButtons doc={doc} buttonLayout={Score.PlaybackButtonsLayout.PlayStopSingle} />
+ * ```
  */
 declare class PlaybackButtons extends React.Component<PlaybackButtonsProps, PlaybackButtonsState> {
     state: PlaybackButtonsState;

package/dist/react-ui/index.js

@@ -1,4 +1,4 @@
-/* WebMusicScore v4.2.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
+/* WebMusicScore v5.0.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;

package/dist/react-ui/index.mjs

@@ -1,7 +1,7 @@
-/* WebMusicScore v4.2.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
+/* WebMusicScore v5.0.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
 import {
   __publicField
-} from "../chunk-5NWLGWHS.mjs";
+} from "../chunk-J3KU3U4W.mjs";
 
 // src/react-ui/circle-of-fifths.tsx
 import * as React from "react";

package/dist/score/index.d.mts

@@ -59,7 +59,7 @@ type ExtensionBuilder = {
 };
 /**
  * Document builder class.
- * <pre>
+ * ```ts
  * // Example
  * let doc = new Score.DocumentBuilder()
  *     .addScoreConfiguration({ type: "staff", clef: "G", isOctavewDown: true })
@@ -70,7 +70,7 @@ type ExtensionBuilder = {
  *     .addRest(1, "4n")
  *     // etc.
  *     .getDEocument();
- * </pre>
+ * ```
  */
 declare class DocumentBuilder {
     private readonly doc;
@@ -208,13 +208,13 @@ declare class DocumentBuilder {
     addRest(voiceId: VoiceId, restLength: NoteLength | NoteLengthStr, restOptions?: RestOptions): DocumentBuilder;
     /**
      * Usage:
-     * <pre>
+     * ```ts
      * addTuplet(0, Theory.Tuplet.Triplet, notes => {
      *     notes.addNote("G3", Theory.NoteLength.Eighth);
      *     notes.addNote("B3", Theory.NoteLength.Eighth);
      *     notes.addNote("D4", Theory.NoteLength.Eighth);
      * });
-     * </pre>
+     * ```
      *
      * @param voiceId - Voice id to add tuplet to.
      * @param tupletRatio - You can also use Theory.Tuplet presets (e.g. Theory.Tuplet.Triplet).
@@ -371,13 +371,13 @@ declare class DocumentBuilder {
     addConnective(connective: Connective.Slide | `${Connective.Slide}`, notAnchor?: NoteAnchor | `${NoteAnchor}`): DocumentBuilder;
     /**
      * Add extension line to previously added annotation or label element.
-     * <pre>
+     * ```ts
      *     // Example
      *     addExtension(ext => ext.notes("1n", 2))          // length is 2 whole notes
      *     addExtension(ext => ext.measures(3).hide())      // length is 3 measures, hidden
      *     addExtension(ext => ext.measures(1).notes("8n")) // length is 1 measure + 1 eigth note
      *     addExtension(ext => ext.infinity())              // length is as long as possible
-     * </pre>
+     * ```
      * @param extensionBuilder - Extension builder function used to build exstension.
      * @returns - This document builder instance.
      */

package/dist/score/index.d.ts

@@ -59,7 +59,7 @@ type ExtensionBuilder = {
 };
 /**
  * Document builder class.
- * <pre>
+ * ```ts
  * // Example
  * let doc = new Score.DocumentBuilder()
  *     .addScoreConfiguration({ type: "staff", clef: "G", isOctavewDown: true })
@@ -70,7 +70,7 @@ type ExtensionBuilder = {
  *     .addRest(1, "4n")
  *     // etc.
  *     .getDEocument();
- * </pre>
+ * ```
  */
 declare class DocumentBuilder {
     private readonly doc;
@@ -208,13 +208,13 @@ declare class DocumentBuilder {
     addRest(voiceId: VoiceId, restLength: NoteLength | NoteLengthStr, restOptions?: RestOptions): DocumentBuilder;
     /**
      * Usage:
-     * <pre>
+     * ```ts
      * addTuplet(0, Theory.Tuplet.Triplet, notes => {
      *     notes.addNote("G3", Theory.NoteLength.Eighth);
      *     notes.addNote("B3", Theory.NoteLength.Eighth);
      *     notes.addNote("D4", Theory.NoteLength.Eighth);
      * });
-     * </pre>
+     * ```
      *
      * @param voiceId - Voice id to add tuplet to.
      * @param tupletRatio - You can also use Theory.Tuplet presets (e.g. Theory.Tuplet.Triplet).
@@ -371,13 +371,13 @@ declare class DocumentBuilder {
     addConnective(connective: Connective.Slide | `${Connective.Slide}`, notAnchor?: NoteAnchor | `${NoteAnchor}`): DocumentBuilder;
     /**
      * Add extension line to previously added annotation or label element.
-     * <pre>
+     * ```ts
      *     // Example
      *     addExtension(ext => ext.notes("1n", 2))          // length is 2 whole notes
      *     addExtension(ext => ext.measures(3).hide())      // length is 3 measures, hidden
      *     addExtension(ext => ext.measures(1).notes("8n")) // length is 1 measure + 1 eigth note
      *     addExtension(ext => ext.infinity())              // length is as long as possible
-     * </pre>
+     * ```
      * @param extensionBuilder - Extension builder function used to build exstension.
      * @returns - This document builder instance.
      */

package/dist/score/index.js

@@ -1,4 +1,4 @@
-/* WebMusicScore v4.2.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
+/* WebMusicScore v5.0.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -1816,24 +1816,24 @@ var ObjRest = class extends MusicObject {
   visibleInStaff(staff) {
     return staff.containsVoiceId(this.voiceId) && this.staffObjects.some((obj) => obj instanceof ObjStaffRest && obj.staff === staff);
   }
-  getRestDotVerticalDisplacement(noteLength) {
-    switch (noteLength) {
-      case import_theory3.NoteLength.Whole:
+  getRestDotVerticalDisplacement(noteSize) {
+    switch (noteSize) {
+      case 1:
         return 1;
-      case import_theory3.NoteLength.Half:
+      case 2:
         return -1;
-      case import_theory3.NoteLength.Quarter:
+      case 4:
         return -1;
-      case import_theory3.NoteLength.Eighth:
+      case 8:
         return -1;
-      case import_theory3.NoteLength.Sixteenth:
+      case 16:
         return -1;
-      case import_theory3.NoteLength.ThirtySecond:
+      case 32:
         return -3;
-      case import_theory3.NoteLength.SixtyFourth:
+      case 64:
         return -3;
       default:
-        throw new import_core5.MusicError(import_core5.MusicErrorType.Score, "Cannot get rest dot vertical displacement because note length is invalid.");
+        throw new import_core5.MusicError(import_core5.MusicErrorType.Score, `Get rest dot vertical displacement: Invalid note size: ${noteSize}`);
     }
   }
   updateAccidentalState(accState) {
@@ -1846,22 +1846,22 @@ var ObjRest = class extends MusicObject {
     }
     let { unitSize } = renderer;
     let { ownDiatonicId } = this;
-    let { noteLength, dotCount, flagCount } = this.rhythmProps;
+    let { noteSize, dotCount, flagCount } = this.rhythmProps;
     let leftw = 0;
     let rightw = 0;
     let toph = 0;
     let bottomh = 0;
-    if (noteLength === import_theory3.NoteLength.Whole) {
+    if (import_theory3.NoteLengthProps.equals(noteSize, import_theory3.NoteLength.Whole)) {
       leftw = unitSize;
       rightw = unitSize;
       toph = 0;
       bottomh = unitSize;
-    } else if (noteLength === import_theory3.NoteLength.Half) {
+    } else if (import_theory3.NoteLengthProps.equals(noteSize, import_theory3.NoteLength.Half)) {
       leftw = unitSize;
       rightw = unitSize;
       toph = unitSize;
       bottomh = 0;
-    } else if (noteLength === import_theory3.NoteLength.Quarter) {
+    } else if (import_theory3.NoteLengthProps.equals(noteSize, import_theory3.NoteLength.Quarter)) {
       leftw = unitSize * 1;
       rightw = unitSize * 1;
       toph = unitSize * 3.2;
@@ -1882,7 +1882,7 @@ var ObjRest = class extends MusicObject {
       for (let i = 0; i < dotCount; i++) {
         let dotWidth = DocumentSettings.DotSize * unitSize;
         let dotX = rightw + (DocumentSettings.RestDotSpace + DocumentSettings.DotSize * unitSize) + i * DocumentSettings.DotSize * unitSize * 1.5;
-        let dotY = this.getRestDotVerticalDisplacement(noteLength) * unitSize;
+        let dotY = this.getRestDotVerticalDisplacement(noteSize) * unitSize;
         obj.dotRects.push(DivRect.createCentered(dotX, dotY, dotWidth, dotWidth));
       }
       obj.offset(0, staff.getDiatonicIdY(ownDiatonicId));
@@ -1913,18 +1913,18 @@ var ObjRest = class extends MusicObject {
     renderer.drawDebugRect(this.getRect());
     let { unitSize, lineWidth } = renderer;
     let { color } = this;
-    let { noteLength, flagCount } = this.rhythmProps;
+    let { noteSize, flagCount } = this.rhythmProps;
     ctx.strokeStyle = ctx.fillStyle = color;
     ctx.lineWidth = lineWidth;
     this.staffObjects.forEach((obj) => {
       let { dotRects, restRect } = obj;
       let x = restRect.centerX;
       let y = restRect.centerY;
-      if (noteLength === import_theory3.NoteLength.Whole) {
+      if (import_theory3.NoteLengthProps.equals(noteSize, import_theory3.NoteLength.Whole)) {
         ctx.fillRect(x - unitSize, y, unitSize * 2, unitSize);
-      } else if (noteLength === import_theory3.NoteLength.Half) {
+      } else if (import_theory3.NoteLengthProps.equals(noteSize, import_theory3.NoteLength.Half)) {
         ctx.fillRect(x - unitSize, y - unitSize, unitSize * 2, unitSize);
-      } else if (noteLength === import_theory3.NoteLength.Quarter) {
+      } else if (import_theory3.NoteLengthProps.equals(noteSize, import_theory3.NoteLength.Quarter)) {
         ctx.beginPath();
         ctx.moveTo(x - unitSize * 0.6, y - unitSize * 3.2);
         ctx.lineTo(x + unitSize * 0.7, y - unitSize * 1.5);
@@ -7762,13 +7762,13 @@ var DocumentBuilder = class {
   }
   /**
    * Usage:
-   * <pre>
+   * ```ts
    * addTuplet(0, Theory.Tuplet.Triplet, notes => {
    *     notes.addNote("G3", Theory.NoteLength.Eighth);
    *     notes.addNote("B3", Theory.NoteLength.Eighth);
    *     notes.addNote("D4", Theory.NoteLength.Eighth);
    * });
-   * </pre>
+   * ```
    * 
    * @param voiceId - Voice id to add tuplet to.
    * @param tupletRatio - You can also use Theory.Tuplet presets (e.g. Theory.Tuplet.Triplet).
@@ -7983,13 +7983,13 @@ var DocumentBuilder = class {
   }
   /**
    * Add extension line to previously added annotation or label element.
-   * <pre>
+   * ```ts
    *     // Example
    *     addExtension(ext => ext.notes("1n", 2))          // length is 2 whole notes
    *     addExtension(ext => ext.measures(3).hide())      // length is 3 measures, hidden
    *     addExtension(ext => ext.measures(1).notes("8n")) // length is 1 measure + 1 eigth note
    *     addExtension(ext => ext.infinity())              // length is as long as possible
-   * </pre>
+   * ```
    * @param extensionBuilder - Extension builder function used to build exstension.
    * @returns - This document builder instance.
    */