@coderline/alphatab 1.8.0-alpha.1646 → 1.8.0-alpha.1647

package/dist/alphaTab.core.mjs

@@ -1,5 +1,5 @@
 /*!
- * alphaTab v1.8.0-alpha.1646 (develop, build 1646)
+ * alphaTab v1.8.0-alpha.1647 (develop, build 1647)
  *
  * Copyright © 2025, Daniel Kuschny and Contributors, All rights reserved.
  *
@@ -203,9 +203,9 @@ class AlphaTabError extends Error {
  * @internal
  */
 class VersionInfo {
-    static version = '1.8.0-alpha.1646';
-    static date = '2025-12-16T02:20:58.271Z';
-    static commit = 'b7dacb7f9d4f3f9e6d83e9fc2f52c4d63f378a49';
+    static version = '1.8.0-alpha.1647';
+    static date = '2025-12-17T02:10:13.730Z';
+    static commit = 'a1bd11d4a3eef22409f1f49a5dd172ace16108cc';
     static print(print) {
         print(`alphaTab ${VersionInfo.version}`);
         print(`commit: ${VersionInfo.commit}`);
@@ -1311,6 +1311,10 @@ var NotationElement;
      * The whammy bar line effect shown above the tab staff
      */
     NotationElement[NotationElement["EffectWhammyBarLine"] = 50] = "EffectWhammyBarLine";
+    /**
+     * The key signature for numbered notation staff.
+     */
+    NotationElement[NotationElement["EffectNumberedNotationKeySignature"] = 51] = "EffectNumberedNotationKeySignature";
 })(NotationElement || (NotationElement = {}));
 /**
  * The notation settings control how various music notation elements are shown and behaving
@@ -39715,7 +39719,7 @@ class EngravingSettings {
         //
         // custom alphatab sizes
         this.numberedBarRendererBarSize = this.staffLineThickness * 2;
-        this.numberedBarRendererBarSpacing = this.beamSpacing + this.numberedBarRendererBarSize;
+        this.numberedBarRendererBarSpacing = this.beamSpacing;
         this.preNoteEffectPadding = 0.4 * this.oneStaffSpace;
         this.postNoteEffectPadding = 0.2 * this.oneStaffSpace;
         this.lineRangedGlyphDashGap = 0.5 * this.oneStaffSpace;
@@ -39784,7 +39788,7 @@ class EngravingSettings {
      */
     numberedBarRendererBarSpacing = 0;
     /**
-     * The size of the dashed drawn in numbered notation to indicate the durations.
+     * The padding minimum between the duration dashes.
      */
     numberedDashGlyphPadding = 0;
     /**
@@ -48565,10 +48569,13 @@ class BeatContainerGlyphBase extends Glyph {
  */
 class BeatContainerGlyph extends BeatContainerGlyphBase {
     _ties = [];
+    _tieWidth = 0;
     beat;
     preNotes;
     onNotes;
-    minWidth = 0;
+    get beatId() {
+        return this.beat.id;
+    }
     get isLastOfVoice() {
         return this.beat.isLastOfVoice;
     }
@@ -48629,7 +48636,7 @@ class BeatContainerGlyph extends BeatContainerGlyphBase {
         return helper.hasFlag(false, undefined);
     }
     get postBeatStretch() {
-        return this.onNotes.computedWidth - this.onNotes.onTimeX;
+        return (this.onNotes.computedWidth + this._tieWidth) - this.onNotes.onTimeX;
     }
     registerLayoutingInfo(layoutings) {
         const preBeatStretch = this.preNotes.computedWidth + this.onNotes.onTimeX;
@@ -48659,16 +48666,19 @@ class BeatContainerGlyph extends BeatContainerGlyphBase {
         this.onNotes.renderer = this.renderer;
         this.onNotes.container = this;
         this.onNotes.doLayout();
+        this.createBeatTies();
+        this.updateWidth();
+    }
+    createBeatTies() {
         let i = this.beat.notes.length - 1;
         while (i >= 0) {
             this.createTies(this.beat.notes[i--]);
         }
-        this.updateWidth();
     }
     doMultiVoiceLayout() {
     }
     updateWidth() {
-        this.minWidth = this.preNotes.width + this.onNotes.width;
+        let width = this.preNotes.width + this.onNotes.width;
         let tieWidth = 0;
         for (const tie of this._ties) {
             const tg = tie;
@@ -48676,8 +48686,9 @@ class BeatContainerGlyph extends BeatContainerGlyphBase {
                 tieWidth = tg.width;
             }
         }
-        this.minWidth += tieWidth;
-        this.width = this.minWidth;
+        this._tieWidth = tieWidth;
+        width += tieWidth;
+        this.width = width;
     }
     createTies(_n) {
     }
@@ -58583,6 +58594,244 @@ class NoteOrnamentEffectInfo extends EffectInfo {
     }
 }
 
+/**
+ * @internal
+ */
+class AccidentalGlyph extends MusicFontGlyph {
+    constructor(x, y, accidentalType, scale) {
+        super(x, y, scale, AccidentalGlyph.getMusicSymbol(accidentalType));
+    }
+    static getMusicSymbol(accidentalType) {
+        switch (accidentalType) {
+            case AccidentalType.Natural:
+                return MusicFontSymbol.AccidentalNatural;
+            case AccidentalType.Sharp:
+                return MusicFontSymbol.AccidentalSharp;
+            case AccidentalType.Flat:
+                return MusicFontSymbol.AccidentalFlat;
+            case AccidentalType.NaturalQuarterNoteUp:
+                return MusicFontSymbol.AccidentalQuarterToneSharpNaturalArrowUp;
+            case AccidentalType.SharpQuarterNoteUp:
+                return MusicFontSymbol.AccidentalThreeQuarterTonesSharpArrowUp;
+            case AccidentalType.FlatQuarterNoteUp:
+                return MusicFontSymbol.AccidentalQuarterToneFlatArrowUp;
+            case AccidentalType.DoubleSharp:
+                return MusicFontSymbol.AccidentalDoubleSharp;
+            case AccidentalType.DoubleFlat:
+                return MusicFontSymbol.AccidentalDoubleFlat;
+        }
+        return MusicFontSymbol.None;
+    }
+}
+
+/**
+ * @internal
+ */
+class NumberedKeySignatureGlyph extends EffectGlyph {
+    _keySignature;
+    _keySignatureType;
+    _text = '';
+    _accidental = AccidentalType.None;
+    _accidentalOffset = 0;
+    _padding = 0;
+    constructor(x, y, keySignature, keySignatureType) {
+        super(x, y);
+        this._keySignature = keySignature;
+        this._keySignatureType = keySignatureType;
+    }
+    doLayout() {
+        super.doLayout();
+        const text = '1 = ';
+        let text2 = '';
+        let accidental = AccidentalType.None;
+        switch (this._keySignatureType) {
+            case KeySignatureType.Major:
+                switch (this._keySignature) {
+                    case KeySignature.Cb:
+                        text2 = '  C';
+                        accidental = AccidentalType.Flat;
+                        break;
+                    case KeySignature.Gb:
+                        text2 = '  G';
+                        accidental = AccidentalType.Flat;
+                        break;
+                    case KeySignature.Db:
+                        text2 = '  D';
+                        accidental = AccidentalType.Flat;
+                        break;
+                    case KeySignature.Ab:
+                        text2 = '  A';
+                        accidental = AccidentalType.Flat;
+                        break;
+                    case KeySignature.Eb:
+                        text2 = '  E';
+                        accidental = AccidentalType.Flat;
+                        break;
+                    case KeySignature.Bb:
+                        text2 = '  B';
+                        accidental = AccidentalType.Flat;
+                        break;
+                    case KeySignature.F:
+                        text2 = 'F';
+                        break;
+                    case KeySignature.C:
+                        text2 = 'C';
+                        accidental = AccidentalType.None;
+                        break;
+                    case KeySignature.G:
+                        text2 = 'G';
+                        accidental = AccidentalType.None;
+                        break;
+                    case KeySignature.D:
+                        text2 = 'D';
+                        accidental = AccidentalType.None;
+                        break;
+                    case KeySignature.A:
+                        text2 = 'A';
+                        accidental = AccidentalType.None;
+                        break;
+                    case KeySignature.E:
+                        text2 = 'E';
+                        accidental = AccidentalType.None;
+                        break;
+                    case KeySignature.B:
+                        text2 = 'B';
+                        accidental = AccidentalType.None;
+                        break;
+                    case KeySignature.FSharp:
+                        text2 = '  F';
+                        accidental = AccidentalType.Sharp;
+                        break;
+                    case KeySignature.CSharp:
+                        text2 = '  C';
+                        accidental = AccidentalType.Sharp;
+                        break;
+                }
+                break;
+            case KeySignatureType.Minor:
+                switch (this._keySignature) {
+                    case KeySignature.Cb:
+                        text2 = '  a';
+                        accidental = AccidentalType.Flat;
+                        break;
+                    case KeySignature.Gb:
+                        text2 = '  e';
+                        accidental = AccidentalType.Flat;
+                        break;
+                    case KeySignature.Db:
+                        text2 = '  b';
+                        accidental = AccidentalType.Flat;
+                        break;
+                    case KeySignature.Ab:
+                        text2 = 'f';
+                        accidental = AccidentalType.None;
+                        break;
+                    case KeySignature.Eb:
+                        text2 = 'c';
+                        accidental = AccidentalType.None;
+                        break;
+                    case KeySignature.Bb:
+                        text2 = 'g';
+                        accidental = AccidentalType.None;
+                        break;
+                    case KeySignature.F:
+                        text2 = 'd';
+                        break;
+                    case KeySignature.C:
+                        text2 = 'a';
+                        accidental = AccidentalType.None;
+                        break;
+                    case KeySignature.G:
+                        text2 = 'e';
+                        accidental = AccidentalType.None;
+                        break;
+                    case KeySignature.D:
+                        text2 = 'b';
+                        accidental = AccidentalType.None;
+                        break;
+                    case KeySignature.A:
+                        text2 = '  f';
+                        accidental = AccidentalType.Sharp;
+                        break;
+                    case KeySignature.E:
+                        text2 = '  c';
+                        accidental = AccidentalType.Sharp;
+                        break;
+                    case KeySignature.B:
+                        text2 = '  g';
+                        accidental = AccidentalType.Sharp;
+                        break;
+                    case KeySignature.FSharp:
+                        text2 = '  d';
+                        accidental = AccidentalType.Sharp;
+                        break;
+                    case KeySignature.CSharp:
+                        text2 = '  a';
+                        accidental = AccidentalType.Sharp;
+                        break;
+                }
+                break;
+        }
+        this._text = text + text2;
+        this._accidental = accidental;
+        const c = this.renderer.scoreRenderer.canvas;
+        const settings = this.renderer.settings;
+        const res = settings.display.resources;
+        c.font = res.numberedNotationFont;
+        this._accidentalOffset = c.measureText(text).width;
+        const fullSize = c.measureText(text + text2);
+        this._padding =
+            this.renderer.index === 0 ? settings.display.firstStaffPaddingLeft : settings.display.staffPaddingLeft;
+        this.width = this._padding + fullSize.width;
+        this.height = fullSize.height;
+    }
+    paint(cx, cy, canvas) {
+        const _ = ElementStyleHelper.bar(canvas, BarSubElement.NumberedKeySignature, this.renderer.bar);
+        try {
+            const res = this.renderer.resources;
+            canvas.font = res.numberedNotationFont;
+            canvas.textBaseline = TextBaseline.Alphabetic;
+            canvas.fillText(this._text, cx + this.x + this._padding, cy + this.y + this.height);
+            if (this._accidental !== AccidentalType.None) {
+                CanvasHelper.fillMusicFontSymbolSafe(canvas, cx + this.x + this._padding + this._accidentalOffset, cy + this.y + this.height, 1, AccidentalGlyph.getMusicSymbol(this._accidental), false);
+            }
+        }
+        finally {
+            _?.[Symbol.dispose]?.();
+        }
+    }
+}
+
+/**
+ * @internal
+ */
+class NumberedBarKeySignatureEffectInfo extends EffectInfo {
+    get notationElement() {
+        return NotationElement.EffectNumberedNotationKeySignature;
+    }
+    get hideOnMultiTrack() {
+        return false;
+    }
+    get canShareBand() {
+        return false;
+    }
+    get sizingMode() {
+        return EffectBarGlyphSizing.FullBar;
+    }
+    shouldCreateGlyph(_settings, beat) {
+        const bar = beat.voice.bar;
+        return (beat.index === 0 &&
+            beat.voice.index === 0 &&
+            (!bar.previousBar || bar.keySignature !== bar.previousBar.keySignature));
+    }
+    createNewGlyph(renderer, _beat) {
+        return new NumberedKeySignatureGlyph(0, 0, renderer.bar.keySignature, renderer.bar.keySignatureType);
+    }
+    canExpand(_from, _to) {
+        return false;
+    }
+}
+
 /**
  * @internal
  */
@@ -59335,6 +59584,7 @@ class LeftToRightLayoutingGlyphGroup extends GlyphGroup {
 class MultiVoiceContainerGlyph extends Glyph {
     static KeySizeBeat = 'Beat';
     voiceDrawOrder;
+    _beatGlyphLookup = new Map();
     beatGlyphs = new Map();
     tupletGroups = new Map();
     constructor() {
@@ -59467,6 +59717,10 @@ class MultiVoiceContainerGlyph extends Glyph {
             beatGlyphs.length === 0 ? 0 : beatGlyphs[beatGlyphs.length - 1].x + beatGlyphs[beatGlyphs.length - 1].width;
         bg.renderer = this.renderer;
         beatGlyphs.push(bg);
+        const id = bg.beatId;
+        if (id >= 0) {
+            this._beatGlyphLookup.set(id, bg);
+        }
         const newWidth = bg.x + bg.width;
         if (newWidth > this.width) {
             this.width = newWidth;
@@ -59512,11 +59766,10 @@ class MultiVoiceContainerGlyph extends Glyph {
         return Number.NaN;
     }
     getBeatContainer(beat) {
-        if (!this.beatGlyphs.has(beat.voice.index)) {
+        if (!this._beatGlyphLookup.has(beat.id)) {
             return undefined;
         }
-        const beats = this.beatGlyphs.get(beat.voice.index);
-        return beat.index < beats.length ? beats[beat.index] : undefined;
+        return this._beatGlyphLookup.get(beat.id);
     }
     buildBoundingsLookup(barBounds, cx, cy) {
         for (const [index, c] of this.beatGlyphs) {
@@ -62139,6 +62392,9 @@ class MultiBarRestBeatContainerGlyph extends BeatContainerGlyphBase {
     get absoluteDisplayStart() {
         return this.renderer.bar.masterBar.start;
     }
+    get beatId() {
+        return -1;
+    }
     get onTimeX() {
         return 0;
     }
@@ -62210,7 +62466,6 @@ class MultiBarRestBeatContainerGlyph extends BeatContainerGlyphBase {
                 case BeatXPosition.OnNotes:
                 case BeatXPosition.MiddleNotes:
                 case BeatXPosition.Stem:
-                    return g.x + g.width / 2;
                 case BeatXPosition.PostNotes:
                     return g.x + g.width;
                 case BeatXPosition.EndBeat:
@@ -63302,13 +63557,13 @@ class BarRendererBase {
     getBeatX(beat, requestedPosition = BeatXPosition.PreNotes, useSharedSizes = false) {
         return this.beatGlyphsStart + this.voiceContainer.getBeatX(beat, requestedPosition, useSharedSizes);
     }
-    getRatioPositionX(ticks) {
+    getRatioPositionX(ratio) {
         const firstOnNoteX = this.bar.isEmpty
             ? this.beatGlyphsStart
             : this.getBeatX(this.bar.voices[0].beats[0], BeatXPosition.MiddleNotes);
         const x = firstOnNoteX;
         const w = this.postBeatGlyphsStart - firstOnNoteX;
-        return x + w * ticks;
+        return x + w * ratio;
     }
     getNoteX(note, requestedPosition) {
         return this.beatGlyphsStart + this.voiceContainer.getNoteX(note, requestedPosition);
@@ -63995,6 +64250,7 @@ class TabWhammyBarGlyph extends EffectGlyph {
         this.originalTopOffset = topY;
         this.originalBottomOffset = bottomY;
         this.height = topY + bottomY;
+        this.width = 0;
     }
     _getOffset(value) {
         if (value === 0) {
@@ -65821,6 +66077,12 @@ class BarNumberGlyph extends Glyph {
         this._number = `${num}  `;
     }
     doLayout() {
+        // TODO: activate this and update paddings accordingly.
+        // if (!this.renderer.staff!.isFirstInSystem) {
+        //     this.width = 0;
+        //     this.height = 0;
+        //     return;
+        // }
         this.renderer.scoreRenderer.canvas.font = this.renderer.resources.barNumberFont;
         const size = this.renderer.scoreRenderer.canvas.measureText(this._number);
         this.width = size.width;
@@ -65836,6 +66098,7 @@ class BarNumberGlyph extends Glyph {
             const res = this.renderer.resources;
             const baseline = canvas.textBaseline;
             canvas.font = res.barNumberFont;
+            canvas.textBaseline = TextBaseline.Top;
             canvas.fillText(this._number, cx + this.x, cy + this.y);
             canvas.textBaseline = baseline;
         }
@@ -65848,47 +66111,87 @@ class BarNumberGlyph extends Glyph {
 /**
  * @internal
  */
-class FlagGlyph extends MusicFontGlyph {
-    constructor(x, y, duration, direction, isGrace) {
-        super(x, y, isGrace ? EngravingSettings.GraceScale : 1, FlagGlyph.getSymbol(duration, direction, isGrace));
+class NumberedTieGlyph extends NoteTieGlyph {
+    shouldDrawBendSlur() {
+        return (this.renderer.settings.notation.extendBendArrowsOnTiedNotes &&
+            !!this.startNote.bendOrigin &&
+            this.startNote.isTieOrigin);
     }
-    static getSymbol(duration, direction, isGrace) {
-        if (isGrace) {
-            duration = Duration.Eighth;
+    calculateTieDirection() {
+        return BeamDirection.Up;
+    }
+}
+
+/**
+ * @internal
+ */
+class AccidentalColumnInfo {
+    x = 0;
+    y = -3e3;
+    width = 0;
+}
+/**
+ * @internal
+ */
+class AccidentalGroupGlyph extends GlyphGroup {
+    constructor() {
+        super(0, 0);
+    }
+    doLayout() {
+        if (!this.glyphs || this.glyphs.length === 0) {
+            this.width = 0;
+            return;
         }
-        if (direction === BeamDirection.Up) {
-            switch (duration) {
-                case Duration.Eighth:
-                    return MusicFontSymbol.Flag8thUp;
-                case Duration.Sixteenth:
-                    return MusicFontSymbol.Flag16thUp;
-                case Duration.ThirtySecond:
-                    return MusicFontSymbol.Flag32ndUp;
-                case Duration.SixtyFourth:
-                    return MusicFontSymbol.Flag64thUp;
-                case Duration.OneHundredTwentyEighth:
-                    return MusicFontSymbol.Flag128thUp;
-                case Duration.TwoHundredFiftySixth:
-                    return MusicFontSymbol.Flag256thUp;
-                default:
-                    return MusicFontSymbol.Flag8thUp;
+        //
+        // Determine Columns for accidentals
+        //
+        this.glyphs.sort((a, b) => {
+            if (a.y < b.y) {
+                return -1;
+            }
+            if (a.y > b.y) {
+                return 1;
+            }
+            return 0;
+        });
+        // defines the reserved y position of the columns
+        const columns = [];
+        columns.push(new AccidentalColumnInfo());
+        for (let i = 0, j = this.glyphs.length; i < j; i++) {
+            const g = this.glyphs[i];
+            g.renderer = this.renderer;
+            g.doLayout();
+            // find column where glyph fits into
+            // as long the glyph does not fit into the current column
+            let gColumn = 0;
+            while (columns[gColumn].y > g.y) {
+                // move to next column
+                gColumn++;
+                // and create the new column if needed
+                if (gColumn === columns.length) {
+                    columns.push(new AccidentalColumnInfo());
+                }
+            }
+            // temporary save column as X
+            g.x = gColumn;
+            columns[gColumn].y = g.y + g.height;
+            if (columns[gColumn].width < g.width) {
+                columns[gColumn].width = g.width;
             }
         }
-        switch (duration) {
-            case Duration.Eighth:
-                return MusicFontSymbol.Flag8thDown;
-            case Duration.Sixteenth:
-                return MusicFontSymbol.Flag16thDown;
-            case Duration.ThirtySecond:
-                return MusicFontSymbol.Flag32ndDown;
-            case Duration.SixtyFourth:
-                return MusicFontSymbol.Flag64thDown;
-            case Duration.OneHundredTwentyEighth:
-                return MusicFontSymbol.Flag128thDown;
-            case Duration.TwoHundredFiftySixth:
-                return MusicFontSymbol.Flag128thDown;
-            default:
-                return MusicFontSymbol.Flag8thDown;
+        //
+        // Place accidentals in columns
+        //
+        this.width = 0;
+        const padding = this.renderer.smuflMetrics.accidentalPadding;
+        for (const column of columns) {
+            this.width += column.width + padding;
+            column.x = this.width;
+        }
+        for (let i = 0, j = this.glyphs.length; i < j; i++) {
+            const g = this.glyphs[i];
+            const column = columns[g.x];
+            g.x = this.width - column.x;
         }
     }
 }
@@ -65896,31 +66199,76 @@ class FlagGlyph extends MusicFontGlyph {
 /**
  * @internal
  */
-class RepeatCountGlyph extends Glyph {
-    _count = 0;
-    constructor(x, y, count) {
-        super(x, y);
-        this._count = 0;
-        this._count = count;
+class AugmentationDotGlyph extends MusicFontGlyph {
+    constructor(x, y) {
+        super(x, y, 1, MusicFontSymbol.AugmentationDot);
     }
     doLayout() {
-        this.renderer.scoreRenderer.canvas.font = this.renderer.resources.barNumberFont;
-        const size = this.renderer.scoreRenderer.canvas.measureText(`x${this._count}`);
-        this.width = 0; // do not account width
-        this.height = size.height;
-        this.y -= size.height;
+        super.doLayout();
+        this.offsetX = this.width / 2;
+        this.width *= 1.5;
+    }
+}
+
+/**
+ * @internal
+ */
+class BeatGlyphBase extends GlyphGroup {
+    _effectGlyphs = [];
+    _normalGlyphs = [];
+    container;
+    computedWidth = 0;
+    constructor() {
+        super(0, 0);
+    }
+    doLayout() {
+        // left to right layout
+        let w = 0;
+        if (this.glyphs) {
+            for (let i = 0, j = this.glyphs.length; i < j; i++) {
+                const g = this.glyphs[i];
+                g.x = w;
+                g.renderer = this.renderer;
+                g.doLayout();
+                w += g.width;
+            }
+        }
+        this.width = w;
+        this.computedWidth = w;
+    }
+    noteLoop(action) {
+        for (let i = this.container.beat.notes.length - 1; i >= 0; i--) {
+            action(this.container.beat.notes[i]);
+        }
+    }
+    addEffect(g) {
+        super.addGlyph(g);
+        this._effectGlyphs.push(g);
+    }
+    addNormal(g) {
+        super.addGlyph(g);
+        this._normalGlyphs.push(g);
+    }
+    get effectElement() {
+        return undefined;
     }
     paint(cx, cy, canvas) {
-        const _ = ElementStyleHelper.bar(canvas, this.renderer.repeatsBarSubElement, this.renderer.bar);
+        this._paintEffects(cx, cy, canvas);
+        this._paintNormal(cx, cy, canvas);
+    }
+    _paintNormal(cx, cy, canvas) {
+        for (const g of this._normalGlyphs) {
+            g.paint(cx + this.x, cy + this.y, canvas);
+        }
+    }
+    _paintEffects(cx, cy, canvas) {
+        const _ = this.effectElement
+            ? ElementStyleHelper.beat(canvas, this.effectElement, this.container.beat)
+            : undefined;
         try {
-            const res = this.renderer.resources;
-            const oldAlign = canvas.textAlign;
-            canvas.font = res.barNumberFont;
-            canvas.textAlign = TextAlign.Right;
-            const s = `x${this._count}`;
-            const w = canvas.measureText(s).width / 1.5;
-            canvas.fillText(s, cx + this.x - w, cy + this.y);
-            canvas.textAlign = oldAlign;
+            for (const g of this._effectGlyphs) {
+                g.paint(cx + this.x, cy + this.y, canvas);
+            }
         }
         finally {
             _?.[Symbol.dispose]?.();
@@ -65929,1847 +66277,1789 @@ class RepeatCountGlyph extends Glyph {
 }
 
 /**
- * This simple glyph allows to put an empty region in to a BarRenderer.
  * @internal
  */
-class SpacingGlyph extends Glyph {
-    constructor(x, y, width) {
-        super(x, y);
-        this.width = width;
+class BeatOnNoteGlyphBase extends BeatGlyphBase {
+    onTimeX = 0;
+    middleX = 0;
+    stemX = 0;
+}
+
+/**
+ * @internal
+ */
+class DeadSlappedBeatGlyph extends Glyph {
+    _topY = 0;
+    constructor() {
+        super(0, 0);
     }
     getBoundingBoxTop() {
-        return Number.NaN;
+        return this._topY;
     }
     getBoundingBoxBottom() {
-        return Number.NaN;
+        return this._topY + this.height;
+    }
+    doLayout() {
+        this.width = this.renderer.smuflMetrics.glyphWidths.get(MusicFontSymbol.NoteheadSlashWhiteHalf);
+        const renderer = this.renderer;
+        const crossHeight = renderer.getLineHeight(renderer.heightLineCount - 1);
+        const staffTop = renderer.getLineY(0);
+        const staffHeight = renderer.drawnLineCount > 0 ? renderer.getLineHeight(renderer.drawnLineCount - 1) : 0;
+        const topY = staffTop + staffHeight / 2 - crossHeight / 2;
+        this.height = crossHeight;
+        this._topY = topY;
+    }
+    paint(cx, cy, canvas) {
+        const crossHeight = this.height;
+        const topY = this._topY;
+        const lw = canvas.lineWidth;
+        canvas.lineWidth = this.renderer.smuflMetrics.deadSlappedLineWidth;
+        canvas.moveTo(cx + this.x, cy + topY);
+        canvas.lineTo(cx + this.x + this.width, cy + topY + crossHeight);
+        canvas.moveTo(cx + this.x, cy + topY + crossHeight);
+        canvas.lineTo(cx + this.x + this.width, cy + topY);
+        canvas.stroke();
+        canvas.lineWidth = lw;
     }
 }
 
 /**
- * This is a base class for any bar renderer which renders music notation on a staff
- * with lines like Standard Notation, Guitar Tablatures and Slash Notation.
- *
- * This base class takes care of the typical bits like drawing lines,
- * allowing note positioning and creating glyphs like repeats, bar numbers etc..
  * @internal
  */
-class LineBarRenderer extends BarRendererBase {
-    firstLineY = 0;
-    _startSpacing = false;
-    tupletSize = 0;
-    get lineOffset() {
-        return this.lineSpacing;
-    }
-    get tupletOffset() {
-        return this.smuflMetrics.oneStaffSpace * 0.5;
-    }
-    get topGlyphOverflow() {
-        return 0;
-    }
-    get bottomGlyphOverflow() {
-        return 0;
-    }
-    initLineBasedSizes() {
-        this.height = this.lineOffset * (this.heightLineCount - 1);
+class NumberedNoteHeadGlyph extends Glyph {
+    _isGrace;
+    _beat;
+    _number;
+    _octaveDots;
+    _octaveDotsY = 0;
+    _octaveDotHeight = 0;
+    constructor(x, y, number, isGrace, beat, octaveDots) {
+        super(x, y);
+        this._isGrace = isGrace;
+        this._number = number;
+        this._beat = beat;
+        this._octaveDots = octaveDots;
     }
-    updateSizes() {
-        this.initLineBasedSizes();
-        this.adjustSizes();
-        this.updateFirstLineY();
-        super.updateSizes();
+    getBoundingBoxTop() {
+        let y = -this.height / 2;
+        if (this._octaveDots > 0 && this._octaveDotsY < y) {
+            y = this._octaveDotsY;
+        }
+        return this.y + y;
     }
-    adjustSizes() {
+    getBoundingBoxBottom() {
+        let y = this.height / 2;
+        const dotsBottom = this._octaveDotsY + Math.abs(this._octaveDots) * this._octaveDotHeight * 2;
+        if (this._octaveDots < 0 && y < dotsBottom) {
+            y = dotsBottom;
+        }
+        return this.y + y;
     }
-    updateFirstLineY() {
-        const fullLineHeight = this.lineOffset * (this.heightLineCount - 1);
-        const actualLineHeight = (this.drawnLineCount - 1) * this.lineOffset;
-        const lineYOffset = this.smuflMetrics.staffLineThickness / 2;
-        this.firstLineY = (((fullLineHeight - actualLineHeight) / 2) | 0) - lineYOffset;
-    }
-    doLayout() {
-        this.initLineBasedSizes();
-        this.updateFirstLineY();
-        this.tupletSize = this.smuflMetrics.glyphHeights.get(MusicFontSymbol.Tuplet0);
-        super.doLayout();
-    }
-    getLineY(line) {
-        return this.firstLineY + this.getLineHeight(line);
-    }
-    getLineHeight(line) {
-        return this.lineOffset * line;
-    }
-    paintContent(cx, cy, canvas) {
-        super.paintContent(cx, cy, canvas);
-        this.paintBeams(cx, cy, canvas, this.flagsSubElement, this.beamsSubElement);
-        this.paintTuplets(cx, cy, canvas, this.tupletSubElement);
-    }
-    paintBackground(cx, cy, canvas) {
-        super.paintBackground(cx, cy, canvas);
-        // canvas.color = Color.random(100);
-        // canvas.fillRect(cx + this.x, cy + this.y, this.width, this.height);
-        //
-        // draw string lines
-        //
-        this.paintStaffLines(cx, cy, canvas);
-        this.paintSimileMark(cx, cy, canvas);
-    }
-    paintStaffLines(cx, cy, canvas) {
-        const _ = ElementStyleHelper.bar(canvas, this.staffLineBarSubElement, this.bar, true);
+    paint(cx, cy, canvas) {
+        const _ = this._beat.isRest
+            ? ElementStyleHelper.beat(canvas, BeatSubElement.NumberedRests, this._beat)
+            : this._beat.notes.length > 0
+                ? ElementStyleHelper.note(canvas, NoteSubElement.NumberedNumber, this._beat.notes[0])
+                : undefined;
         try {
-            // collect tab note position for spaces
-            const spaces = [];
-            for (let i = 0, j = this.drawnLineCount; i < j; i++) {
-                spaces.push([]);
-            }
-            // on multibar rest glyphs we don't have spaces as they are empty
-            if (!this.additionalMultiRestBars) {
-                this.collectSpaces(spaces);
-            }
-            // if we have multiple voices we need to sort by X-position, otherwise have a wild mix in the list
-            // but painting relies on ascending X-position
-            for (const line of spaces) {
-                line.sort((a, b) => {
-                    return a[0] > b[0] ? 1 : a[0] < b[0] ? -1 : 0;
-                });
-            }
-            // during system fitting it can happen that we have fraction widths
-            // but to have lines until the full end-pixel we round up.
-            // this way we avoid holes,
-            const lineWidth = this.width;
-            // we want the lines to be exactly virtually aligned with the respective Y-position
-            // for note heads to align correctly
-            const lineYOffset = this.smuflMetrics.staffLineThickness / 2;
-            for (let i = 0; i < this.drawnLineCount; i++) {
-                const lineY = this.getLineY(i) - lineYOffset;
-                let lineX = 0;
-                for (const line of spaces[i]) {
-                    canvas.fillRect(cx + this.x + lineX, cy + this.y + lineY, line[0] - lineX, this.smuflMetrics.staffLineThickness);
-                    lineX = line[0] + line[1];
-                }
-                canvas.fillRect(cx + this.x + lineX, cy + this.y + lineY, lineWidth - lineX, this.smuflMetrics.staffLineThickness);
+            const res = this.renderer.resources;
+            canvas.font = this._isGrace ? res.numberedNotationGraceFont : res.numberedNotationFont;
+            const baseline = canvas.textBaseline;
+            canvas.textBaseline = TextBaseline.Middle;
+            canvas.textAlign = TextAlign.Left;
+            canvas.fillText(this._number.toString(), cx + this.x, cy + this.y);
+            canvas.textBaseline = baseline;
+            const dotCount = Math.abs(this._octaveDots);
+            let dotsY = this._octaveDotsY + res.engravingSettings.glyphTop.get(MusicFontSymbol.AugmentationDot);
+            for (let d = 0; d < dotCount; d++) {
+                CanvasHelper.fillMusicFontSymbolSafe(canvas, cx + this.x + this.width / 2, cy + this.y + dotsY, 1, MusicFontSymbol.AugmentationDot, true);
+                dotsY += this._octaveDotHeight * 2;
             }
         }
         finally {
             _?.[Symbol.dispose]?.();
         }
     }
-    collectSpaces(_spaces) {
+    doLayout() {
+        const res = this.renderer.resources;
+        const font = this._isGrace ? res.numberedNotationGraceFont : res.numberedNotationFont;
+        const c = this.renderer.scoreRenderer.canvas;
+        c.font = font;
+        const size = c.measureText(`${this._number}`);
+        this.height = size.height;
+        this.width = size.width;
+        const dotCount = this._octaveDots;
+        const dotHeight = res.engravingSettings.glyphHeights.get(MusicFontSymbol.AugmentationDot);
+        const allDotsHeight = Math.abs(dotCount) * dotHeight * 2;
+        if (dotCount > 0) {
+            this._octaveDotsY =
+                -(this.height / 2) -
+                    allDotsHeight -
+                    res.engravingSettings.glyphTop.get(MusicFontSymbol.AugmentationDot);
+        }
+        else if (dotCount < 0) {
+            this._octaveDotsY =
+                this.height / 2 +
+                    // one for the padding
+                    dotHeight +
+                    // align the dots
+                    res.engravingSettings.glyphTop.get(MusicFontSymbol.AugmentationDot);
+        }
+        this._octaveDotHeight = dotHeight;
     }
-    createStartSpacing() {
-        if (this._startSpacing) {
+}
+
+/**
+ * This simple glyph allows to put an empty region in to a BarRenderer.
+ * @internal
+ */
+class SpacingGlyph extends Glyph {
+    constructor(x, y, width) {
+        super(x, y);
+        this.width = width;
+    }
+    getBoundingBoxTop() {
+        return Number.NaN;
+    }
+    getBoundingBoxBottom() {
+        return Number.NaN;
+    }
+}
+
+/**
+ * @internal
+ */
+class NumberedBeatPreNotesGlyph extends BeatGlyphBase {
+    isNaturalizeAccidental = false;
+    accidental = AccidentalType.None;
+    skipLayout = false;
+    get effectElement() {
+        return BeatSubElement.NumberedEffects;
+    }
+    doLayout() {
+        if (this.skipLayout) {
             return;
         }
-        const padding = this.index === 0 ? this.settings.display.firstStaffPaddingLeft : this.settings.display.staffPaddingLeft;
-        this.addPreBeatGlyph(new SpacingGlyph(0, 0, padding));
-        this._startSpacing = true;
-    }
-    paintTuplets(cx, cy, canvas, beatElement, bracketsAsArcs = false) {
-        for (const v of this.voiceContainer.voiceDrawOrder) {
-            if (this.voiceContainer.tupletGroups.has(v)) {
-                const voice = this.voiceContainer.tupletGroups.get(v);
-                for (const tupletGroup of voice) {
-                    this._paintTupletHelper(cx, cy, canvas, tupletGroup, beatElement, bracketsAsArcs);
+        if (!this.container.beat.isRest && !this.container.beat.isEmpty) {
+            const accidentals = new AccidentalGroupGlyph();
+            accidentals.renderer = this.renderer;
+            if (this.container.beat.notes.length > 0) {
+                const note = this.container.beat.notes[0];
+                // Notes
+                // - Compared to standard notation accidentals:
+                //   - Flat keysigs: When there is a naturalize symbol (against key signature, not naturalizing same line) we have a # in Numbered notation
+                //   - Flat keysigs: When there is a flat symbol standard notation we also have a flat in Numbered notation
+                //   - C keysig: A sharp on standard notation is a sharp on numbered notation
+                //   - # keysigs:  When there is a # symbol on standard notation we also a sharp in numbered notation
+                //   - # keysigs:  When there is a naturalize symbol (against key signature, not naturalizing same line) we have a flat in Numbered notation
+                // Or generally:
+                //  - numbered notation has the same accidentals as standard notation if applied
+                //  - when the standard notation naturalizes the accidental from the key signature, the numbered notation has the reversed accidental
+                const accidentalMode = note ? note.accidentalMode : NoteAccidentalMode.Default;
+                const noteValue = AccidentalHelper.getNoteValue(note);
+                let accidentalToSet = ModelUtils.computeAccidental(this.renderer.bar.keySignature, accidentalMode, noteValue, note.hasQuarterToneOffset);
+                if (accidentalToSet === AccidentalType.Natural) {
+                    const ks = this.renderer.bar.keySignature;
+                    const ksi = ks + 7;
+                    const naturalizeAccidentalForKeySignature = ksi < 7 ? AccidentalType.Sharp : AccidentalType.Flat;
+                    accidentalToSet = naturalizeAccidentalForKeySignature;
+                    this.isNaturalizeAccidental = true;
+                }
+                // do we need an accidental on the note?
+                if (accidentalToSet !== AccidentalType.None) {
+                    this.accidental = accidentalToSet;
+                    const sr = this.renderer;
+                    const color = ElementStyleHelper.noteColor(sr.resources, NoteSubElement.NumberedAccidentals, note);
+                    const g = new AccidentalGlyph(0, sr.getLineY(0), accidentalToSet, note.beat.graceType !== GraceType.None
+                        ? EngravingSettings.GraceScale * EngravingSettings.GraceScale
+                        : EngravingSettings.GraceScale);
+                    g.colorOverride = color;
+                    g.renderer = this.renderer;
+                    accidentals.addGlyph(g);
+                    this.addNormal(accidentals);
+                    this.addNormal(new SpacingGlyph(0, 0, this.renderer.smuflMetrics.preNoteEffectPadding));
                 }
             }
         }
+        super.doLayout();
     }
-    getTupletBeamDirection(helper) {
-        return this.getBeamDirection(helper);
+}
+/**
+ * @internal
+ */
+class NumberedBeatGlyph extends BeatOnNoteGlyphBase {
+    noteHeads = null;
+    deadSlapped = null;
+    get effectElement() {
+        return BeatSubElement.NumberedEffects;
     }
-    _paintTupletHelper(cx, cy, canvas, h, beatElement, bracketsAsArcs) {
-        const res = this.resources;
-        const oldAlign = canvas.textAlign;
-        const oldBaseLine = canvas.textBaseline;
-        canvas.color = h.voice.index === 0 ? this.resources.mainGlyphColor : this.resources.secondaryGlyphColor;
-        canvas.textAlign = TextAlign.Center;
-        canvas.textBaseline = TextBaseline.Middle;
-        let s;
-        const num = h.beats[0].tupletNumerator;
-        const den = h.beats[0].tupletDenominator;
-        // list as in Guitar Pro 7. for certain tuplets only the numerator is shown
-        if (num === 2 && den === 3) {
-            s = [MusicFontSymbol.Tuplet2];
-        }
-        else if (num === 3 && den === 2) {
-            s = [MusicFontSymbol.Tuplet3];
-        }
-        else if (num === 4 && den === 6) {
-            s = [MusicFontSymbol.Tuplet4];
-        }
-        else if (num === 5 && den === 4) {
-            s = [MusicFontSymbol.Tuplet5];
-        }
-        else if (num === 6 && den === 4) {
-            s = [MusicFontSymbol.Tuplet6];
-        }
-        else if (num === 7 && den === 4) {
-            s = [MusicFontSymbol.Tuplet7];
+    getNoteX(_note, requestedPosition) {
+        let g = null;
+        if (this.noteHeads) {
+            g = this.noteHeads;
         }
-        else if (num === 9 && den === 8) {
-            s = [MusicFontSymbol.Tuplet9];
+        else if (this.deadSlapped) {
+            g = this.deadSlapped;
         }
-        else if (num === 10 && den === 8) {
-            s = [MusicFontSymbol.Tuplet1, MusicFontSymbol.Tuplet0];
+        if (g) {
+            let pos = g.x;
+            switch (requestedPosition) {
+                case NoteXPosition.Left:
+                    break;
+                case NoteXPosition.Center:
+                    pos += g.width / 2;
+                    break;
+                case NoteXPosition.Right:
+                    pos += g.width;
+                    break;
+            }
+            return pos;
         }
-        else if (num === 11 && den === 8) {
-            s = [MusicFontSymbol.Tuplet1, MusicFontSymbol.Tuplet1];
+        return 0;
+    }
+    buildBoundingsLookup(beatBounds, cx, cy) {
+        if (this.noteHeads && this.container.beat.notes.length > 0) {
+            const noteBounds = new NoteBounds();
+            noteBounds.note = this.container.beat.notes[0];
+            noteBounds.noteHeadBounds = new Bounds();
+            noteBounds.noteHeadBounds.x = cx + this.x + this.noteHeads.x;
+            noteBounds.noteHeadBounds.y = cy + this.y + this.noteHeads.y - this.noteHeads.height / 2;
+            noteBounds.noteHeadBounds.w = this.width;
+            noteBounds.noteHeadBounds.h = this.height;
+            beatBounds.addNote(noteBounds);
         }
-        else if (num === 12 && den === 8) {
-            s = [MusicFontSymbol.Tuplet1, MusicFontSymbol.Tuplet2];
+    }
+    getLowestNoteY() {
+        return this._internalGetNoteY(NoteYPosition.Center);
+    }
+    getHighestNoteY() {
+        return this._internalGetNoteY(NoteYPosition.Center);
+    }
+    getNoteY(_note, requestedPosition) {
+        return this._internalGetNoteY(requestedPosition);
+    }
+    getRestY(requestedPosition) {
+        return this._internalGetNoteY(requestedPosition);
+    }
+    _internalGetNoteY(requestedPosition) {
+        let g = null;
+        if (this.noteHeads) {
+            g = this.noteHeads;
         }
-        else if (num === 13 && den === 8) {
-            s = [MusicFontSymbol.Tuplet1, MusicFontSymbol.Tuplet3];
+        else if (this.deadSlapped) {
+            g = this.deadSlapped;
         }
-        else {
-            s = [];
-            const zero = MusicFontSymbol.Tuplet0;
-            if (num > 10) {
-                s.push((zero + Math.floor(num / 10)));
-                s.push((zero + (num - 10)));
-            }
-            else {
-                s.push((zero + num));
-            }
-            s.push(MusicFontSymbol.TupletColon);
-            if (den > 10) {
-                s.push((zero + Math.floor(den / 10)));
-                s.push((zero + (den - 10)));
-            }
-            else {
-                s.push((zero + den));
+        if (g) {
+            let pos = this.y + g.y;
+            switch (requestedPosition) {
+                case NoteYPosition.Top:
+                case NoteYPosition.TopWithStem:
+                    pos -= g.height / 2;
+                    break;
+                case NoteYPosition.Center:
+                    break;
+                case NoteYPosition.Bottom:
+                case NoteYPosition.BottomWithStem:
+                    pos += g.height / 2;
+                    break;
+                case NoteYPosition.StemUp:
+                case NoteYPosition.StemDown:
+                    break;
             }
+            return pos;
         }
-        // check if we need to paint simple footer
-        const offset = this.tupletOffset;
-        const size = this.tupletSize;
-        const shift = offset + size * 0.5;
-        const _ = ElementStyleHelper.beat(canvas, beatElement, h.beats[0]);
-        try {
-            const l = canvas.lineWidth;
-            canvas.lineWidth = this.smuflMetrics.tupletBracketThickness;
-            if (h.beats.length === 1 || !h.isFull) {
-                for (const beat of h.beats) {
-                    const beamingHelper = this.helpers.getBeamingHelperForBeat(beat);
-                    if (!beamingHelper) {
-                        continue;
-                    }
-                    const direction = this.getTupletBeamDirection(beamingHelper);
-                    const tupletX = this.getBeatX(beat, BeatXPosition.Stem);
-                    let tupletY = this.calculateBeamYWithDirection(beamingHelper, tupletX, direction);
-                    if (direction === BeamDirection.Down) {
-                        tupletY += shift;
+        return 0;
+    }
+    static majorKeySignatureOneValues = [
+        // Flats
+        59, 66, 61, 68, 63, 58, 65,
+        // natural
+        60,
+        // sharps  (where the value is true, a flat accidental is required for the notes)
+        67, 62, 69, 64, 71, 66, 61
+    ];
+    static minorKeySignatureOneValues = [
+        // Flats
+        71, 66, 73, 68, 63, 70, 65,
+        // natural
+        72,
+        // sharps  (where the value is true, a flat accidental is required for the notes)
+        67, 74, 69, 64, 71, 66, 73
+    ];
+    doLayout() {
+        // create glyphs
+        const sr = this.renderer;
+        if (sr.shortestDuration < this.container.beat.duration) {
+            sr.shortestDuration = this.container.beat.duration;
+        }
+        let octaveDots = 0;
+        if (!this.container.beat.isEmpty) {
+            const glyphY = sr.getLineY(0);
+            let numberWithinOctave = '0';
+            if (this.container.beat.notes.length > 0) {
+                const note = this.container.beat.notes[0];
+                const kst = this.renderer.bar.keySignatureType;
+                const ks = this.renderer.bar.keySignature;
+                const ksi = ks + 7;
+                const oneNoteValues = kst === KeySignatureType.Minor
+                    ? NumberedBeatGlyph.minorKeySignatureOneValues
+                    : NumberedBeatGlyph.majorKeySignatureOneValues;
+                const oneNoteValue = oneNoteValues[ksi];
+                if (note.isDead) {
+                    numberWithinOctave = 'X';
+                }
+                else {
+                    const noteValue = note.displayValue - oneNoteValue;
+                    const index = noteValue < 0 ? ((noteValue % 12) + 12) % 12 : noteValue % 12;
+                    octaveDots = noteValue < 0 ? ((Math.abs(noteValue) + 12) / 12) | 0 : (noteValue / 12) | 0;
+                    if (noteValue < 0) {
+                        octaveDots *= -1;
                     }
-                    else {
-                        tupletY -= shift;
+                    const stepList = ModelUtils.keySignatureIsSharp(ks) || ModelUtils.keySignatureIsNatural(ks)
+                        ? AccidentalHelper.flatNoteSteps
+                        : AccidentalHelper.sharpNoteSteps;
+                    let steps = stepList[index] + 1;
+                    const hasAccidental = ModelUtils.accidentalNotes[index];
+                    if (hasAccidental &&
+                        !this.container.preNotes.isNaturalizeAccidental) {
+                        if (ksi < 7) {
+                            steps++;
+                        }
+                        else {
+                            steps--;
+                        }
                     }
-                    canvas.fillMusicFontSymbols(cx + this.x + tupletX, cy + this.y + tupletY + size * 0.5, 1, s, true);
+                    numberWithinOctave = steps.toString();
                 }
             }
+            if (this.container.beat.deadSlapped) {
+                const deadSlapped = new DeadSlappedBeatGlyph();
+                deadSlapped.renderer = this.renderer;
+                deadSlapped.doLayout();
+                this.deadSlapped = deadSlapped;
+                this.addEffect(deadSlapped);
+            }
             else {
-                const firstBeat = h.beats[0];
-                const lastBeat = h.beats[h.beats.length - 1];
-                let firstNonRestBeat = null;
-                let lastNonRestBeat = null;
-                for (let i = 0; i < h.beats.length; i++) {
-                    if (!h.beats[i].isRest) {
-                        firstNonRestBeat = h.beats[i];
-                        break;
-                    }
-                }
-                for (let i = h.beats.length - 1; i >= 0; i--) {
-                    if (!h.beats[i].isRest) {
-                        lastNonRestBeat = h.beats[i];
-                        break;
-                    }
-                }
-                let isRestOnly = false;
-                if (!firstNonRestBeat) {
-                    firstNonRestBeat = firstBeat;
-                    isRestOnly = true;
-                }
-                if (!lastNonRestBeat) {
-                    lastNonRestBeat = lastBeat;
-                }
-                //
-                // Calculate the overall area of the tuplet bracket
-                const startX = this.getBeatX(firstBeat, BeatXPosition.OnNotes);
-                const endX = this.getBeatX(lastBeat, BeatXPosition.PostNotes);
-                //
-                // calculate the y positions for our bracket
-                const firstNonRestBeamingHelper = this.helpers.getBeamingHelperForBeat(firstNonRestBeat);
-                const lastNonRestBeamingHelper = this.helpers.getBeamingHelperForBeat(lastNonRestBeat);
-                const direction = this.getTupletBeamDirection(firstNonRestBeamingHelper);
-                let startY = this.calculateBeamYWithDirection(firstNonRestBeamingHelper, startX, direction);
-                let endY = this.calculateBeamYWithDirection(lastNonRestBeamingHelper, endX, direction);
-                if (isRestOnly) {
-                    startY = Math.max(startY, endY);
-                    endY = startY;
-                }
-                // align line centered in available space
-                if (direction === BeamDirection.Down) {
-                    startY += shift;
-                    endY += shift;
-                }
-                else {
-                    startY -= shift;
-                    endY -= shift;
-                }
-                //
-                // Calculate how many space the text will need
-                const sw = s.reduce((acc, sym) => acc + res.engravingSettings.glyphWidths.get(sym), 0);
-                const sp = res.engravingSettings.oneStaffSpace * 0.5;
-                //
-                // Calculate the offsets where to break the bracket
-                const middleX = (startX + endX) / 2;
-                const offset1X = middleX - sw / 2 - sp;
-                const offset2X = middleX + sw / 2 + sp;
-                const k = (endY - startY) / (endX - startX);
-                const d = startY - k * startX;
-                const offset1Y = k * offset1X + d;
-                const middleY = k * middleX + d;
-                const offset2Y = k * offset2X + d;
-                const angleStartY = direction === BeamDirection.Down ? startY - size * 0.5 : startY + size * 0.5;
-                const angleEndY = direction === BeamDirection.Down ? endY - size * 0.5 : endY + size * 0.5;
-                //
-                // draw the bracket
-                const pixelAlignment = canvas.lineWidth % 2 === 0 ? 0 : 0.5;
-                cx += pixelAlignment;
-                cy += pixelAlignment;
-                if (offset1X > startX) {
-                    canvas.beginPath();
-                    canvas.moveTo(cx + this.x + startX, cy + this.y + angleStartY);
-                    if (bracketsAsArcs) {
-                        canvas.quadraticCurveTo(cx + this.x + (offset1X + startX) / 2, cy + this.y + offset1Y, cx + this.x + offset1X, cy + this.y + offset1Y);
-                    }
-                    else {
-                        canvas.lineTo(cx + this.x + startX, cy + this.y + startY);
-                        canvas.lineTo(cx + this.x + offset1X, cy + this.y + offset1Y);
-                    }
-                    canvas.moveTo(cx + this.x + offset2X, cy + this.y + offset2Y);
-                    if (bracketsAsArcs) {
-                        canvas.quadraticCurveTo(cx + this.x + (endX + offset2X) / 2, cy + this.y + offset2Y, cx + this.x + endX, cy + this.y + angleEndY);
-                    }
-                    else {
-                        canvas.lineTo(cx + this.x + endX, cy + this.y + endY);
-                        canvas.lineTo(cx + this.x + endX, cy + this.y + angleEndY);
-                    }
-                    canvas.stroke();
+                const isGrace = this.container.beat.graceType !== GraceType.None;
+                const noteHeadGlyph = new NumberedNoteHeadGlyph(0, glyphY, numberWithinOctave, isGrace, this.container.beat, octaveDots);
+                this.noteHeads = noteHeadGlyph;
+                this.addNormal(noteHeadGlyph);
+            }
+            //
+            // Note dots
+            if (this.container.beat.dots > 0 && this.container.beat.duration >= Duration.Quarter) {
+                for (let i = 0; i < this.container.beat.dots; i++) {
+                    const dot = new AugmentationDotGlyph(0, glyphY);
+                    dot.renderer = this.renderer;
+                    this.addEffect(dot);
                 }
-                //
-                // Draw the string
-                canvas.fillMusicFontSymbols(cx + this.x + middleX, cy + this.y + middleY + size * 0.5, 1, s, true);
             }
-            canvas.textAlign = oldAlign;
-            canvas.textBaseline = oldBaseLine;
-            canvas.lineWidth = l;
         }
-        finally {
-            _?.[Symbol.dispose]?.();
+        super.doLayout();
+        if (this.container.beat.isEmpty) {
+            this.onTimeX = this.width / 2;
         }
-    }
-    paintBeams(cx, cy, canvas, flagsElement, beamsElement) {
-        for (const v of this.voiceContainer.voiceDrawOrder) {
-            for (const h of this.helpers.beamHelpers[v]) {
-                this.paintBeamHelper(cx, cy, canvas, h, flagsElement, beamsElement);
-            }
+        else if (this.noteHeads) {
+            this.onTimeX = this.noteHeads.x + this.noteHeads.width / 2;
         }
-    }
-    drawBeamHelperAsFlags(h) {
-        return h.beats.length === 1;
-    }
-    hasFlag(beat) {
-        if (beat.isRest) {
-            return false;
+        else if (this.deadSlapped) {
+            this.onTimeX = this.deadSlapped.x + this.deadSlapped.width / 2;
         }
-        const helper = this.helpers.getBeamingHelperForBeat(beat);
-        if (helper) {
-            return helper.hasFlag(this.drawBeamHelperAsFlags(helper), beat);
-        }
-        return BeamingHelper.beatHasFlag(beat);
+        this.middleX = this.onTimeX;
+        this.stemX = this.middleX;
     }
-    hasStem(beat) {
-        if (beat.isRest) {
-            return false;
-        }
-        const helper = this.helpers.getBeamingHelperForBeat(beat);
-        if (helper) {
-            return helper.hasStem(this.drawBeamHelperAsFlags(helper), beat);
+}
+
+/**
+ * @internal
+ */
+class TabTieGlyph extends NoteTieGlyph {
+    calculateTieDirection() {
+        if (this.isLeftHandTap) {
+            return BeamDirection.Up;
         }
-        return BeamingHelper.beatHasStem(beat);
+        return TabTieGlyph.getBeamDirectionForNote(this.startNote);
     }
-    paintBeamHelper(cx, cy, canvas, h, flagsElement, beamsElement) {
-        canvas.color = h.voice.index === 0 ? this.resources.mainGlyphColor : this.resources.secondaryGlyphColor;
-        if (!h.isRestBeamHelper) {
-            if (this.drawBeamHelperAsFlags(h)) {
-                this.paintFlag(cx, cy, canvas, h, flagsElement);
-            }
-            else {
-                this.paintBar(cx, cy, canvas, h, beamsElement);
-            }
-        }
+    static getBeamDirectionForNote(note) {
+        return note.string > 3 ? BeamDirection.Up : BeamDirection.Down;
     }
-    shouldPaintFlag(beat) {
-        // no flags for bend grace beats
-        if (beat.graceType === GraceType.BendGrace) {
+}
+
+/**
+ * @internal
+ */
+class TabSlurGlyph extends TabTieGlyph {
+    _forSlide;
+    constructor(slurEffectId, startNote, endNote, forSlide, forEnd) {
+        super(slurEffectId, startNote, endNote, forEnd);
+        this._forSlide = forSlide;
+    }
+    getTieHeight(startX, _startY, endX, _endY) {
+        return (Math.log(endX - startX + 1) * this.renderer.settings.notation.slurHeight) / 2;
+    }
+    tryExpand(startNote, endNote, forSlide, forEnd) {
+        // same type required
+        if (this._forSlide !== forSlide) {
             return false;
         }
-        if (beat.deadSlapped) {
+        // same start and endbeat
+        if (this.startNote.beat.id !== startNote.beat.id) {
             return false;
         }
-        // no flags for any grace notes on songbook mode
-        if (beat.graceType !== GraceType.None && this.settings.notation.notationMode === NotationMode.SongBook) {
+        if (this.endNote.beat.id !== endNote.beat.id) {
             return false;
         }
-        // only flags for durations with stems
-        if (beat.duration === Duration.Whole ||
-            beat.duration === Duration.DoubleWhole ||
-            beat.duration === Duration.QuadrupleWhole) {
+        const isForEnd = this.renderer === this.lookupEndBeatRenderer();
+        if (isForEnd !== forEnd) {
             return false;
         }
-        return true;
-    }
-    paintFlag(cx, cy, canvas, h, flagsElement) {
-        for (const beat of h.beats) {
-            if (!this.shouldPaintFlag(beat)) {
-                continue;
-            }
-            const isGrace = beat.graceType !== GraceType.None;
-            //
-            // draw line
-            //
-            const beatLineX = this.getBeatX(beat, BeatXPosition.Stem);
-            const direction = this.getBeamDirection(h);
-            const topY = cy + this.y + this.getFlagTopY(beat, direction);
-            const bottomY = cy + this.y + this.getFlagBottomY(beat, direction);
-            let flagY = 0;
-            if (direction === BeamDirection.Down) {
-                flagY = bottomY;
-            }
-            else {
-                flagY = topY;
-            }
-            if (!h.hasStem(true, beat)) {
-                continue;
-            }
-            this.paintBeamingStem(beat, cy + this.y, cx + this.x + beatLineX, topY, bottomY, canvas);
-            const _ = ElementStyleHelper.beat(canvas, flagsElement, beat);
-            try {
-                let flagWidth = 0;
-                //
-                // Draw flag
-                //
-                if (h.hasFlag(true, beat)) {
-                    const glyph = new FlagGlyph(cx + this.x + beatLineX, flagY, beat.duration, direction, isGrace);
-                    glyph.renderer = this;
-                    glyph.doLayout();
-                    glyph.paint(0, 0, canvas);
-                    flagWidth = glyph.width / 2;
+        // same draw direction
+        if (this.tieDirection !== TabTieGlyph.getBeamDirectionForNote(startNote)) {
+            return false;
+        }
+        // if we can expand, expand in correct direction
+        switch (this.tieDirection) {
+            case BeamDirection.Up:
+                if (startNote.realValue > this.startNote.realValue) {
+                    this.startNote = startNote;
                 }
-                if (beat.graceType === GraceType.BeforeBeat) {
-                    if (direction === BeamDirection.Down) {
-                        CanvasHelper.fillMusicFontSymbolSafe(canvas, cx + this.x + beatLineX + flagWidth / 2, (topY + bottomY - this.smuflMetrics.glyphHeights.get(MusicFontSymbol.GraceNoteSlashStemDown)) /
-                            2, EngravingSettings.GraceScale, MusicFontSymbol.GraceNoteSlashStemDown, true);
-                    }
-                    else {
-                        CanvasHelper.fillMusicFontSymbolSafe(canvas, cx + this.x + beatLineX + flagWidth / 2, (topY + bottomY + this.smuflMetrics.glyphHeights.get(MusicFontSymbol.GraceNoteSlashStemUp)) /
-                            2, EngravingSettings.GraceScale, MusicFontSymbol.GraceNoteSlashStemUp, true);
-                    }
+                if (endNote.realValue > this.endNote.realValue) {
+                    this.endNote = endNote;
                 }
-            }
-            finally {
-                _?.[Symbol.dispose]?.();
-            }
-        }
-    }
-    getFlagStemSize(duration, forceMinStem = false) {
-        let size = 0;
-        switch (duration) {
-            case Duration.QuadrupleWhole:
-            case Duration.Half:
-            case Duration.Quarter:
-            case Duration.Eighth:
-            case Duration.Sixteenth:
-            case Duration.ThirtySecond:
-            case Duration.SixtyFourth:
-            case Duration.OneHundredTwentyEighth:
-            case Duration.TwoHundredFiftySixth:
-                size = this.smuflMetrics.standardStemLength + this.smuflMetrics.stemFlagOffsets.get(duration);
                 break;
-            default:
-                size = forceMinStem ? this.smuflMetrics.standardStemLength : 0;
+            case BeamDirection.Down:
+                if (startNote.realValue < this.startNote.realValue) {
+                    this.startNote = startNote;
+                }
+                if (endNote.realValue < this.endNote.realValue) {
+                    this.endNote = endNote;
+                }
                 break;
         }
-        return size;
-    }
-    recreatePreBeatGlyphs() {
-        this._startSpacing = false;
-        super.recreatePreBeatGlyphs();
-    }
-    calculateBeamY(h, x) {
-        return this.calculateBeamYWithDirection(h, x, this.getBeamDirection(h));
-    }
-    createPreBeatGlyphs() {
-        super.createPreBeatGlyphs();
-        this.addPreBeatGlyph(new BarLineGlyph(false, this.bar.staff.track.score.stylesheet.extendBarLines));
-        this.createLinePreBeatGlyphs();
-        this.addPreBeatGlyph(new BarNumberGlyph(0, this.getLineHeight(-0.5), this.bar.index + 1));
+        return true;
     }
-    createPostBeatGlyphs() {
-        super.createPostBeatGlyphs();
-        const lastBar = this.lastBar;
-        this.addPostBeatGlyph(new BarLineGlyph(true, this.bar.staff.track.score.stylesheet.extendBarLines));
-        if (lastBar.masterBar.isRepeatEnd && lastBar.masterBar.repeatCount > 2) {
-            this.addPostBeatGlyph(new RepeatCountGlyph(0, this.getLineHeight(-0.5), this.bar.masterBar.repeatCount));
-        }
+}
+
+/**
+ * @internal
+ */
+class NumberedSlurGlyph extends TabSlurGlyph {
+    calculateTieDirection() {
+        return BeamDirection.Up;
     }
-    paintBar(cx, cy, canvas, h, beamsElement) {
-        const direction = this.getBeamDirection(h);
-        const isGrace = h.graceType !== GraceType.None;
-        const scaleMod = isGrace ? EngravingSettings.GraceScale : 1;
-        let barSpacing = (this.smuflMetrics.beamSpacing + this.smuflMetrics.beamThickness) * scaleMod;
-        let barSize = this.smuflMetrics.beamThickness * scaleMod;
-        if (direction === BeamDirection.Down) {
-            barSpacing = -barSpacing;
-            barSize = -barSize;
-        }
-        for (let i = 0, j = h.beats.length; i < j; i++) {
-            const beat = h.beats[i];
-            if (beat.deadSlapped) {
-                continue;
-            }
-            const beatLineX = this.getBeatX(beat, BeatXPosition.Stem);
-            const y1 = cy + this.y + this.getBarLineStart(beat, direction);
-            // ensure we are pixel aligned on the end of the stem to avoid anti-aliasing artifacts
-            // when combining stems and beams on sub-pixel level
-            const y2 = (cy + this.y + this.calculateBeamY(h, beatLineX)) | 0;
-            if (y1 < y2) {
-                this.paintBeamingStem(beat, cy + this.y, cx + this.x + beatLineX, y1, y2, canvas);
-            }
-            else {
-                this.paintBeamingStem(beat, cy + this.y, cx + this.x + beatLineX, y2, y1, canvas);
-            }
-            const _ = ElementStyleHelper.beat(canvas, beamsElement, beat);
-            try {
-                const brokenBarOffset = this.smuflMetrics.brokenBeamWidth * scaleMod;
-                const barCount = ModelUtils.getIndex(beat.duration) - 2;
-                const barStart = cy + this.y;
-                for (let barIndex = 0; barIndex < barCount; barIndex++) {
-                    let barStartX = 0;
-                    let barEndX = 0;
-                    let barStartY = 0;
-                    let barEndY = 0;
-                    const barY = barStart + barIndex * barSpacing;
-                    //
-                    // Bar to Next?
-                    //
-                    if (i < h.beats.length - 1) {
-                        const isFullBarJoin = BeamingHelper.isFullBarJoin(beat, h.beats[i + 1], barIndex);
-                        // force two broken bars on secondary (last) beam?
-                        if (barIndex === barCount - 1 &&
-                            isFullBarJoin &&
-                            beat.beamingMode === BeatBeamingMode.ForceSplitOnSecondaryToNext) {
-                            // start part
-                            barStartX = beatLineX;
-                            barEndX = barStartX + brokenBarOffset;
-                            barStartY = barY + this.calculateBeamY(h, barStartX);
-                            barEndY = barY + this.calculateBeamY(h, barEndX);
-                            LineBarRenderer.paintSingleBar(canvas, cx + this.x + barStartX, barStartY, cx + this.x + barEndX, barEndY, barSize);
-                            // end part
-                            barEndX = this.getBeatX(h.beats[i + 1], BeatXPosition.Stem);
-                            barStartX = barEndX - brokenBarOffset;
-                            barStartY = barY + this.calculateBeamY(h, barStartX);
-                            barEndY = barY + this.calculateBeamY(h, barEndX);
-                            LineBarRenderer.paintSingleBar(canvas, cx + this.x + barStartX, barStartY, cx + this.x + barEndX, barEndY, barSize);
-                        }
-                        else {
-                            if (isFullBarJoin) {
-                                // full bar?
-                                barStartX = beatLineX;
-                                barEndX = this.getBeatX(h.beats[i + 1], BeatXPosition.Stem);
-                            }
-                            else if (i === 0 || !BeamingHelper.isFullBarJoin(h.beats[i - 1], beat, barIndex)) {
-                                barStartX = beatLineX;
-                                barEndX = barStartX + brokenBarOffset;
-                            }
-                            else {
-                                continue;
-                            }
-                            barStartY = barY + this.calculateBeamY(h, barStartX);
-                            barEndY = barY + this.calculateBeamY(h, barEndX);
-                            // ensure we are pixel aligned on the end of the stem to avoid anti-aliasing artifacts
-                            // when combining stems and beams on sub-pixel level
-                            if (barIndex === 0) {
-                                barStartY = barStartY | 0;
-                                barEndY = barEndY | 0;
-                            }
-                            LineBarRenderer.paintSingleBar(canvas, cx + this.x + barStartX, barStartY, cx + this.x + barEndX, barEndY, barSize);
-                        }
-                    }
-                    else if (i > 0 && !BeamingHelper.isFullBarJoin(beat, h.beats[i - 1], barIndex)) {
-                        barStartX = beatLineX - brokenBarOffset;
-                        barEndX = beatLineX;
-                        barEndX = beatLineX;
-                        barStartY = barY + this.calculateBeamY(h, barStartX);
-                        barEndY = barY + this.calculateBeamY(h, barEndX);
-                        LineBarRenderer.paintSingleBar(canvas, cx + this.x + barStartX, barStartY, cx + this.x + barEndX, barEndY, barSize);
-                    }
-                }
-            }
-            finally {
-                _?.[Symbol.dispose]?.();
-            }
+}
+
+/**
+ * @internal
+ */
+class NumberedBeatContainerGlyph extends BeatContainerGlyph {
+    _slurs = new Map();
+    _effectSlurs = [];
+    _dashes;
+    hasAdditionalNumbers = false;
+    *iterateAdditionalNumbers() {
+        const dashes = this._dashes;
+        if (!dashes) {
+            return;
         }
-        if (h.graceType === GraceType.BeforeBeat) {
-            const beatLineX = this.getBeatX(h.beats[0], BeatXPosition.Stem);
-            const flagWidth = this.smuflMetrics.glyphWidths.get(MusicFontSymbol.Flag8thUp) * EngravingSettings.GraceScale;
-            let slashY = (cy + this.y + this.calculateBeamY(h, beatLineX)) | 0;
-            slashY += barSize + barSpacing;
-            if (direction === BeamDirection.Down) {
-                CanvasHelper.fillMusicFontSymbolSafe(canvas, cx + this.x + beatLineX + flagWidth / 2, slashY, EngravingSettings.GraceScale, MusicFontSymbol.GraceNoteSlashStemDown, true);
-            }
-            else {
-                CanvasHelper.fillMusicFontSymbolSafe(canvas, cx + this.x + beatLineX + flagWidth / 2, slashY, EngravingSettings.GraceScale, MusicFontSymbol.GraceNoteSlashStemUp, true);
+        for (const d of dashes) {
+            if (d instanceof NumberedNoteBeatContainerGlyphBase) {
+                yield d;
             }
         }
     }
-    static paintSingleBar(canvas, x1, y1, x2, y2, size) {
-        canvas.beginPath();
-        canvas.moveTo(x1, y1);
-        canvas.lineTo(x2, y2);
-        canvas.lineTo(x2, y2 + size);
-        canvas.lineTo(x1, y1 + size);
-        canvas.closePath();
-        canvas.fill();
+    constructor(beat) {
+        super(beat);
+        this.preNotes = new NumberedBeatPreNotesGlyph();
+        this.onNotes = new NumberedBeatGlyph();
     }
-    calculateBeamingOverflows(rendererTop, rendererBottom) {
-        let maxNoteY = 0;
-        let minNoteY = 0;
-        const noteOverflowPadding = this.getLineHeight(0.5);
-        for (const v of this.helpers.beamHelpers) {
-            for (const h of v) {
-                if (h.isRestBeamHelper) ;
-                else if (h.beats.length === 1 && h.beats[0].duration >= Duration.Half) {
-                    if (h.direction === BeamDirection.Up) {
-                        let topY = this.getFlagTopY(h.beats[0], h.direction);
-                        if (h.hasTuplet) {
-                            topY -= this.tupletSize + this.tupletOffset;
-                        }
-                        if (topY < maxNoteY) {
-                            maxNoteY = topY;
-                        }
-                    }
-                    else {
-                        let bottomY = this.getFlagBottomY(h.beats[0], h.direction);
-                        if (h.hasTuplet) {
-                            bottomY += this.tupletSize + this.tupletOffset;
-                        }
-                        if (bottomY > minNoteY) {
-                            minNoteY = bottomY;
-                        }
-                    }
-                }
-                else {
-                    this.ensureBeamDrawingInfo(h, h.direction);
-                    const drawingInfo = h.drawingInfos.get(h.direction);
-                    if (h.direction === BeamDirection.Up) {
-                        let topY = Math.min(drawingInfo.startY, drawingInfo.endY);
-                        if (h.hasTuplet) {
-                            topY -= this.tupletSize + this.tupletOffset;
-                        }
-                        if (topY < maxNoteY) {
-                            maxNoteY = topY;
-                        }
-                        const bottomY = this.getBarLineStart(h.beatOfLowestNote, h.direction) + noteOverflowPadding;
-                        if (bottomY > minNoteY) {
-                            minNoteY = bottomY;
-                        }
-                    }
-                    else {
-                        let bottomY = Math.max(drawingInfo.startY, drawingInfo.endY);
-                        if (h.hasTuplet) {
-                            bottomY += this.tupletSize + this.tupletOffset;
-                        }
-                        if (bottomY > minNoteY) {
-                            minNoteY = bottomY;
-                        }
-                        const topY = this.getBarLineStart(h.beatOfHighestNote, h.direction) - noteOverflowPadding;
-                        if (topY < maxNoteY) {
-                            maxNoteY = topY;
-                        }
-                    }
-                }
-            }
+    addDash(dash) {
+        let dashes = this._dashes;
+        if (!dashes) {
+            dashes = [];
+            this._dashes = dashes;
         }
-        if (maxNoteY < rendererTop) {
-            this.registerOverflowTop(Math.abs(maxNoteY));
+        dashes.push(dash);
+    }
+    addNotes(dash) {
+        let dashes = this._dashes;
+        if (!dashes) {
+            dashes = [];
+            this._dashes = dashes;
         }
-        if (minNoteY > rendererBottom) {
-            this.registerOverflowBottom(Math.abs(minNoteY) - rendererBottom);
+        dashes.push(dash);
+        this.hasAdditionalNumbers = true;
+    }
+    doLayout() {
+        this._slurs.clear();
+        this._effectSlurs = [];
+        super.doLayout();
+    }
+    buildBoundingsLookup(barBounds, cx, cy) {
+        super.buildBoundingsLookup(barBounds, cx, cy);
+        // extend bounds to include dashes
+        const dashes = this._dashes;
+        if (dashes) {
+            const beatBounds = barBounds.beats[barBounds.beats.length - 1];
+            const lastDash = dashes[dashes.length - 1];
+            const visualEndX = lastDash.x + lastDash.contentWidth;
+            beatBounds.visualBounds.w = visualEndX - beatBounds.visualBounds.x;
+            const realEnd = lastDash.x + lastDash.width;
+            beatBounds.realBounds.w = realEnd - beatBounds.realBounds.x;
         }
     }
-    ensureBeamDrawingInfo(h, direction) {
-        if (h.drawingInfos.has(direction)) {
+    createTies(n) {
+        // create a tie if any effect requires it
+        if (!n.isVisible) {
             return;
         }
-        const scale = h.graceType !== GraceType.None ? EngravingSettings.GraceScale : 1;
-        const barCount = ModelUtils.getIndex(h.shortestDuration) - 2;
-        const drawingInfo = new BeamingHelperDrawInfo();
-        h.drawingInfos.set(direction, drawingInfo);
-        // the beaming logic works like this:
-        // 1. we take the first and last note, add the stem, and put a diagnal line between them.
-        // 2. the height of the diagonal line must not exceed a max height,
-        //    - if this is the case, the line on the more distant note just gets longer
-        // 3. any middle elements (notes or rests) shift this diagonal line up/down to avoid overlaps
-        const firstBeat = h.beats[0];
-        const lastBeat = h.beats[h.beats.length - 1];
-        const isRest = h.isRestBeamHelper;
-        // 1. put direct diagonal line.
-        drawingInfo.startBeat = firstBeat;
-        drawingInfo.startX = this.getBeatX(firstBeat, BeatXPosition.Stem);
-        drawingInfo.startY =
-            direction === BeamDirection.Up
-                ? this.getFlagTopY(firstBeat, direction)
-                : this.getFlagBottomY(firstBeat, direction);
-        drawingInfo.endBeat = lastBeat;
-        drawingInfo.endX = this.getBeatX(lastBeat, BeatXPosition.Stem);
-        drawingInfo.endY =
-            direction === BeamDirection.Up
-                ? this.getFlagTopY(lastBeat, direction)
-                : this.getFlagBottomY(lastBeat, direction);
-        // 2. ensure max slope
-        // we use the min/max notes to place the beam along their real position
-        // we only want a maximum of 10 offset for their gradient
-        const maxSlope = this.smuflMetrics.oneStaffSpace;
-        if (direction === BeamDirection.Down &&
-            drawingInfo.startY > drawingInfo.endY &&
-            drawingInfo.startY - drawingInfo.endY > maxSlope) {
-            drawingInfo.endY = drawingInfo.startY - maxSlope;
-        }
-        if (direction === BeamDirection.Down &&
-            drawingInfo.endY > drawingInfo.startY &&
-            drawingInfo.endY - drawingInfo.startY > maxSlope) {
-            drawingInfo.startY = drawingInfo.endY - maxSlope;
+        if (n.isTieOrigin && n.tieDestination.isVisible && !this._slurs.has('numbered.tie')) {
+            const tie = new NumberedTieGlyph(`numbered.tie.${n.beat.id}`, n, n.tieDestination, false);
+            this.addTie(tie);
+            this._slurs.set(tie.slurEffectId, tie);
         }
-        if (direction === BeamDirection.Up &&
-            drawingInfo.startY < drawingInfo.endY &&
-            drawingInfo.endY - drawingInfo.startY > maxSlope) {
-            drawingInfo.endY = drawingInfo.startY + maxSlope;
+        if (n.isTieDestination) {
+            const tie = new NumberedTieGlyph(`numbered.tie.${n.tieOrigin.beat.id}`, n.tieOrigin, n, true);
+            this.addTie(tie);
         }
-        if (direction === BeamDirection.Up &&
-            drawingInfo.endY < drawingInfo.startY &&
-            drawingInfo.startY - drawingInfo.endY > maxSlope) {
-            drawingInfo.startY = drawingInfo.endY + maxSlope;
+        if (n.isLeftHandTapped &&
+            !n.isHammerPullDestination &&
+            !this._slurs.has(`numbered.tie.leftHandTap.${n.beat.id}`)) {
+            const tapSlur = new NumberedTieGlyph(`numbered.tie.leftHandTap.${n.beat.id}`, n, n, false);
+            this.addTie(tapSlur);
+            this._slurs.set(tapSlur.slurEffectId, tapSlur);
         }
-        // 3. adjust beam drawing order
-        // we can only draw up to 2 beams towards the noteheads, then we have to grow to the other side
-        // here we shift accordingly
-        let barDrawingShift = 0;
-        if (barCount > 2 && !isRest) {
-            const beamSpacing = this.smuflMetrics.beamSpacing * scale;
-            const beamThickness = this.smuflMetrics.beamThickness * scale;
-            const totalBarsHeight = barCount * beamThickness + (barCount - 1) * beamSpacing;
-            if (direction === BeamDirection.Up) {
-                const bottomBarY = drawingInfo.startY + 2 * beamThickness + beamSpacing;
-                const barTopY = bottomBarY - totalBarsHeight;
-                const diff = drawingInfo.startY - barTopY;
-                if (diff > 0) {
-                    barDrawingShift = diff * -1;
-                    drawingInfo.startY -= diff;
-                    drawingInfo.endY -= diff;
+        // start effect slur on first beat
+        if (n.isEffectSlurOrigin && n.effectSlurDestination) {
+            let expanded = false;
+            for (const slur of this._effectSlurs) {
+                if (slur.tryExpand(n, n.effectSlurDestination, false, false)) {
+                    expanded = true;
+                    break;
                 }
             }
-            else {
-                const topBarY = drawingInfo.startY - 2 * beamThickness + beamSpacing;
-                const barBottomY = topBarY + totalBarsHeight;
-                const diff = barBottomY - drawingInfo.startY;
-                if (diff > 0) {
-                    barDrawingShift = diff;
-                    drawingInfo.startY += diff;
-                    drawingInfo.endY += diff;
-                }
+            if (!expanded) {
+                const effectSlur = new NumberedSlurGlyph(`numbered.slur.effect`, n, n.effectSlurDestination, false, false);
+                this._effectSlurs.push(effectSlur);
+                this.addTie(effectSlur);
+                this._slurs.set(effectSlur.slurEffectId, effectSlur);
+                this._slurs.set('numbered.slur.effect', effectSlur);
             }
         }
-        // 4. let middle elements shift up/down
-        if (h.beats.length > 1) {
-            // check if highest note shifts bar up or down
-            if (direction === BeamDirection.Up) {
-                const yNeededForHighestNote = barDrawingShift + this.getFlagTopY(h.beatOfHighestNote, direction);
-                const yGivenByCurrentValues = drawingInfo.calcY(this.getBeatX(h.beatOfHighestNote, BeatXPosition.Stem));
-                const diff = yGivenByCurrentValues - yNeededForHighestNote;
-                if (diff > 0) {
-                    drawingInfo.startY -= diff;
-                    drawingInfo.endY -= diff;
-                }
-            }
-            else {
-                const yNeededForLowestNote = barDrawingShift + this.getFlagBottomY(h.beatOfLowestNote, direction);
-                const yGivenByCurrentValues = drawingInfo.calcY(this.getBeatX(h.beatOfLowestNote, BeatXPosition.Stem));
-                const diff = yNeededForLowestNote - yGivenByCurrentValues;
-                if (diff > 0) {
-                    drawingInfo.startY += diff;
-                    drawingInfo.endY += diff;
+        // end effect slur on last beat
+        if (n.isEffectSlurDestination && n.effectSlurOrigin) {
+            let expanded = false;
+            for (const slur of this._effectSlurs) {
+                if (slur.tryExpand(n.effectSlurOrigin, n, false, true)) {
+                    expanded = true;
+                    break;
                 }
             }
-            // check if rest shifts bar up or down
-            let barSpacing = 0;
-            if (h.restBeats.length > 0) {
-                // space needed for the bars, rests need to be below them
-                const scaleMod = h.graceType !== GraceType.None ? EngravingSettings.GraceScale : 1;
-                barSpacing = barCount * (this.smuflMetrics.beamSpacing + this.smuflMetrics.beamThickness) * scaleMod;
-            }
-            for (const b of h.restBeats) {
-                // rest beats which are "under" the beam
-                if (b.isRest && b.index < h.beats[h.beats.length - 1].index) {
-                    if (direction === BeamDirection.Up) {
-                        const yNeededForRest = this.getBeatContainer(b).getBoundingBoxTop() - barSpacing;
-                        const yGivenByCurrentValues = drawingInfo.calcY(this.getBeatX(b, BeatXPosition.Stem));
-                        const diff = yGivenByCurrentValues - yNeededForRest;
-                        if (diff > 0) {
-                            drawingInfo.startY -= diff;
-                            drawingInfo.endY -= diff;
-                        }
-                    }
-                    else if (direction === BeamDirection.Down) {
-                        const yNeededForRest = this.getBeatContainer(b).getBoundingBoxBottom() + barSpacing;
-                        const yGivenByCurrentValues = drawingInfo.calcY(this.getBeatX(b, BeatXPosition.Stem));
-                        const diff = yNeededForRest - yGivenByCurrentValues;
-                        if (diff > 0) {
-                            drawingInfo.startY += diff;
-                            drawingInfo.endY += diff;
-                        }
-                    }
-                }
-            }
-            // check if slash shifts bar up or down
-            if (h.slashBeats.length > 0) {
-                for (const b of h.slashBeats) {
-                    const yGivenByCurrentValues = drawingInfo.calcY(this.getBeatX(b, BeatXPosition.Stem));
-                    const yNeededForSlash = h.direction === BeamDirection.Up
-                        ? this.getFlagTopY(b, h.direction)
-                        : this.getFlagBottomY(b, h.direction);
-                    const diff = yNeededForSlash - yGivenByCurrentValues;
-                    if (diff > 0) {
-                        drawingInfo.startY += diff;
-                        drawingInfo.endY += diff;
-                    }
-                }
+            if (!expanded) {
+                const effectSlur = new NumberedSlurGlyph(`numbered.slur.effect`, n.effectSlurOrigin, n, false, true);
+                this._effectSlurs.push(effectSlur);
+                this.addTie(effectSlur);
+                this._slurs.set(effectSlur.slurEffectId, effectSlur);
+                this._slurs.set('numbered.slur.effect', effectSlur);
             }
         }
     }
-    getMinLineOfBeat(_beat) {
-        return 0;
-    }
-    getMaxLineOfBeat(_beat) {
-        return 0;
-    }
-}
-
-/**
- * @internal
- */
-class NumberedTieGlyph extends NoteTieGlyph {
-    shouldDrawBendSlur() {
-        return (this.renderer.settings.notation.extendBendArrowsOnTiedNotes &&
-            !!this.startNote.bendOrigin &&
-            this.startNote.isTieOrigin);
-    }
-    calculateTieDirection() {
-        return BeamDirection.Up;
-    }
 }
 
 /**
  * @internal
  */
-class AccidentalGlyph extends MusicFontGlyph {
-    constructor(x, y, accidentalType, scale) {
-        super(x, y, scale, AccidentalGlyph.getMusicSymbol(accidentalType));
+class NumberedNoteBeatContainerGlyphBase extends NumberedBeatContainerGlyph {
+    _absoluteDisplayStart;
+    _displayDuration;
+    constructor(beat, absoluteDisplayStart, displayDuration) {
+        super(beat);
+        this._absoluteDisplayStart = absoluteDisplayStart;
+        this._displayDuration = displayDuration;
+        this.preNotes.skipLayout = true;
+        this.barCount = NumberedNoteBeatContainerGlyphBase._ticksToBarCount(displayDuration);
     }
-    static getMusicSymbol(accidentalType) {
-        switch (accidentalType) {
-            case AccidentalType.Natural:
-                return MusicFontSymbol.AccidentalNatural;
-            case AccidentalType.Sharp:
-                return MusicFontSymbol.AccidentalSharp;
-            case AccidentalType.Flat:
-                return MusicFontSymbol.AccidentalFlat;
-            case AccidentalType.NaturalQuarterNoteUp:
-                return MusicFontSymbol.AccidentalQuarterToneSharpNaturalArrowUp;
-            case AccidentalType.SharpQuarterNoteUp:
-                return MusicFontSymbol.AccidentalThreeQuarterTonesSharpArrowUp;
-            case AccidentalType.FlatQuarterNoteUp:
-                return MusicFontSymbol.AccidentalQuarterToneFlatArrowUp;
-            case AccidentalType.DoubleSharp:
-                return MusicFontSymbol.AccidentalDoubleSharp;
-            case AccidentalType.DoubleFlat:
-                return MusicFontSymbol.AccidentalDoubleFlat;
+    static _ticksToBarCount(displayDuration) {
+        // we know that displayDuration < MidiUtils.QuarterTime, otherwise this glyph is not created
+        if (displayDuration >= MidiUtils.toTicks(Duration.Eighth)) {
+            return 1;
         }
-        return MusicFontSymbol.None;
-    }
-}
-
-/**
- * @internal
- */
-class AccidentalColumnInfo {
-    x = 0;
-    y = -3e3;
-    width = 0;
-}
-/**
- * @internal
- */
-class AccidentalGroupGlyph extends GlyphGroup {
-    constructor() {
-        super(0, 0);
-    }
-    doLayout() {
-        if (!this.glyphs || this.glyphs.length === 0) {
-            this.width = 0;
-            return;
+        else if (displayDuration >= MidiUtils.toTicks(Duration.Sixteenth)) {
+            return 2;
         }
-        //
-        // Determine Columns for accidentals
-        //
-        this.glyphs.sort((a, b) => {
-            if (a.y < b.y) {
-                return -1;
-            }
-            if (a.y > b.y) {
-                return 1;
-            }
-            return 0;
-        });
-        // defines the reserved y position of the columns
-        const columns = [];
-        columns.push(new AccidentalColumnInfo());
-        for (let i = 0, j = this.glyphs.length; i < j; i++) {
-            const g = this.glyphs[i];
-            g.renderer = this.renderer;
-            g.doLayout();
-            // find column where glyph fits into
-            // as long the glyph does not fit into the current column
-            let gColumn = 0;
-            while (columns[gColumn].y > g.y) {
-                // move to next column
-                gColumn++;
-                // and create the new column if needed
-                if (gColumn === columns.length) {
-                    columns.push(new AccidentalColumnInfo());
-                }
-            }
-            // temporary save column as X
-            g.x = gColumn;
-            columns[gColumn].y = g.y + g.height;
-            if (columns[gColumn].width < g.width) {
-                columns[gColumn].width = g.width;
-            }
+        else if (displayDuration >= MidiUtils.toTicks(Duration.ThirtySecond)) {
+            return 3;
         }
-        //
-        // Place accidentals in columns
-        //
-        this.width = 0;
-        const padding = this.renderer.smuflMetrics.accidentalPadding;
-        for (const column of columns) {
-            this.width += column.width + padding;
-            column.x = this.width;
+        else if (displayDuration >= MidiUtils.toTicks(Duration.SixtyFourth)) {
+            return 4;
         }
-        for (let i = 0, j = this.glyphs.length; i < j; i++) {
-            const g = this.glyphs[i];
-            const column = columns[g.x];
-            g.x = this.width - column.x;
+        else if (displayDuration >= MidiUtils.toTicks(Duration.OneHundredTwentyEighth)) {
+            return 5;
         }
+        else if (displayDuration >= MidiUtils.toTicks(Duration.TwoHundredFiftySixth)) {
+            return 6;
+        }
+        return 0;
     }
-}
-
-/**
- * @internal
- */
-class AugmentationDotGlyph extends MusicFontGlyph {
-    constructor(x, y) {
-        super(x, y, 1, MusicFontSymbol.AugmentationDot);
+    barCount;
+    get beatId() {
+        return -1;
     }
-    doLayout() {
-        super.doLayout();
-        this.offsetX = this.width / 2;
-        this.width *= 1.5;
+    get contentWidth() {
+        return this.onNotes.width;
     }
-}
-
-/**
- * @internal
- */
-class BeatGlyphBase extends GlyphGroup {
-    _effectGlyphs = [];
-    _normalGlyphs = [];
-    container;
-    computedWidth = 0;
-    constructor() {
-        super(0, 0);
+    get absoluteDisplayStart() {
+        return this._absoluteDisplayStart;
     }
-    doLayout() {
-        // left to right layout
-        let w = 0;
-        if (this.glyphs) {
-            for (let i = 0, j = this.glyphs.length; i < j; i++) {
-                const g = this.glyphs[i];
-                g.x = w;
-                g.renderer = this.renderer;
-                g.doLayout();
-                w += g.width;
-            }
-        }
-        this.width = w;
-        this.computedWidth = w;
+    get displayDuration() {
+        return this._displayDuration;
     }
-    noteLoop(action) {
-        for (let i = this.container.beat.notes.length - 1; i >= 0; i--) {
-            action(this.container.beat.notes[i]);
-        }
+    get graceType() {
+        return GraceType.None;
     }
-    addEffect(g) {
-        super.addGlyph(g);
-        this._effectGlyphs.push(g);
+    get graceIndex() {
+        return 0;
     }
-    addNormal(g) {
-        super.addGlyph(g);
-        this._normalGlyphs.push(g);
+    get graceGroup() {
+        return null;
     }
-    get effectElement() {
-        return undefined;
+    get isFirstOfTupletGroup() {
+        return false;
     }
-    paint(cx, cy, canvas) {
-        this._paintEffects(cx, cy, canvas);
-        this._paintNormal(cx, cy, canvas);
+    get tupletGroup() {
+        return null;
     }
-    _paintNormal(cx, cy, canvas) {
-        for (const g of this._normalGlyphs) {
-            g.paint(cx + this.x, cy + this.y, canvas);
-        }
+    get isLastOfVoice() {
+        return false;
     }
-    _paintEffects(cx, cy, canvas) {
-        const _ = this.effectElement
-            ? ElementStyleHelper.beat(canvas, this.effectElement, this.container.beat)
-            : undefined;
-        try {
-            for (const g of this._effectGlyphs) {
-                g.paint(cx + this.x, cy + this.y, canvas);
-            }
-        }
-        finally {
-            _?.[Symbol.dispose]?.();
-        }
+    buildBoundingsLookup(_barBounds, _cx, _cy) {
     }
 }
-
-/**
- * @internal
- */
-class BeatOnNoteGlyphBase extends BeatGlyphBase {
-    onTimeX = 0;
-    middleX = 0;
-    stemX = 0;
-}
-
 /**
  * @internal
  */
-class DeadSlappedBeatGlyph extends Glyph {
-    constructor() {
+class NumberedDashBeatContainerGlyph extends BeatContainerGlyphBase {
+    _absoluteDisplayStart;
+    _voiceIndex;
+    constructor(voiceIndex, absoluteDisplayStart) {
         super(0, 0);
+        this._absoluteDisplayStart = absoluteDisplayStart;
+        this._voiceIndex = voiceIndex;
     }
-    doLayout() {
-        this.width = this.renderer.smuflMetrics.glyphWidths.get(MusicFontSymbol.NoteheadSlashWhiteHalf);
+    get beatId() {
+        return -1;
+    }
+    get contentWidth() {
+        return this.renderer.smuflMetrics.numberedDashGlyphWidth;
+    }
+    get absoluteDisplayStart() {
+        return this._absoluteDisplayStart;
+    }
+    get displayDuration() {
+        return MidiUtils.QuarterTime;
+    }
+    get onTimeX() {
+        return this.renderer.smuflMetrics.numberedDashGlyphWidth / 2;
+    }
+    get graceType() {
+        return GraceType.None;
+    }
+    get graceIndex() {
+        return 0;
+    }
+    get graceGroup() {
+        return null;
+    }
+    get voiceIndex() {
+        return this._voiceIndex;
+    }
+    get isFirstOfTupletGroup() {
+        return false;
+    }
+    get tupletGroup() {
+        return null;
+    }
+    get isLastOfVoice() {
+        return false;
+    }
+    getNoteY(_note, _requestedPosition) {
+        return 0;
+    }
+    doMultiVoiceLayout() {
+    }
+    getRestY(_requestedPosition) {
+        return 0;
+    }
+    getNoteX(_note, _requestedPosition) {
+        return 0;
+    }
+    getBeatX(_requestedPosition, _useSharedSizes) {
+        return 0;
+    }
+    registerLayoutingInfo(layoutings) {
+        const width = this.renderer.smuflMetrics.numberedDashGlyphWidth;
+        layoutings.addBeatSpring(this, width / 2, width / 2);
+    }
+    applyLayoutingInfo(_info) {
+    }
+    buildBoundingsLookup(_barBounds, _cx, _cy) {
     }
     paint(cx, cy, canvas) {
         const renderer = this.renderer;
-        const crossHeight = renderer.getLineHeight(renderer.heightLineCount - 1);
-        const staffTop = renderer.getLineY(0);
-        const staffHeight = renderer.getLineHeight(renderer.drawnLineCount - 1);
-        // center X on staff
-        const centerY = staffTop + staffHeight / 2 - crossHeight / 2;
-        const lw = canvas.lineWidth;
-        canvas.lineWidth = this.renderer.smuflMetrics.deadSlappedLineWidth;
-        canvas.moveTo(cx + this.x, cy + centerY);
-        canvas.lineTo(cx + this.x + this.width, cy + centerY + crossHeight);
-        canvas.moveTo(cx + this.x, cy + centerY + crossHeight);
-        canvas.lineTo(cx + this.x + this.width, cy + centerY);
-        canvas.stroke();
-        canvas.lineWidth = lw;
+        const dashWidth = renderer.smuflMetrics.numberedDashGlyphWidth;
+        const dashHeight = renderer.smuflMetrics.numberedBarRendererBarSize;
+        const dashY = Math.ceil(cy + renderer.getLineY(0) - dashHeight);
+        canvas.fillRect(cx + this.x, dashY, dashWidth, dashHeight);
     }
 }
 
 /**
  * @internal
  */
-class NumberedDashGlyph extends Glyph {
-    _beat;
-    constructor(x, y, beat) {
-        super(x, y);
-        this._beat = beat;
+class GhostParenthesisGlyph extends Glyph {
+    _isOpen;
+    colorOverride;
+    constructor(isOpen) {
+        super(0, 0);
+        this._isOpen = isOpen;
     }
     doLayout() {
+        super.doLayout();
         this.width =
-            this.renderer.smuflMetrics.numberedDashGlyphWidth + this.renderer.smuflMetrics.numberedDashGlyphPadding;
-        this.height = this.renderer.smuflMetrics.numberedBarRendererBarSize;
+            this.renderer.smuflMetrics.ghostParenthesisWidth + this.renderer.smuflMetrics.ghostParenthesisPadding;
     }
     paint(cx, cy, canvas) {
-        const _ = ElementStyleHelper.beat(canvas, BeatSubElement.NumberedDuration, this._beat);
-        try {
-            const padding = this.renderer.smuflMetrics.numberedDashGlyphPadding;
-            canvas.fillRect(cx + this.x, Math.ceil(cy + this.y - this.height), this.width - padding, this.height);
+        const c = canvas.color;
+        if (this.colorOverride) {
+            canvas.color = this.colorOverride;
         }
-        finally {
-            _?.[Symbol.dispose]?.();
+        if (this._isOpen) {
+            TieGlyph.paintTie(canvas, 1, cx + this.x + this.renderer.smuflMetrics.ghostParenthesisWidth, cy + this.y + this.height, cx + this.x + this.renderer.smuflMetrics.ghostParenthesisWidth, cy + this.y, false, this.renderer.smuflMetrics.ghostParenthesisWidth / 2, this.renderer.smuflMetrics.tieMidpointThickness);
         }
+        else {
+            TieGlyph.paintTie(canvas, 1, cx + this.x + this.renderer.smuflMetrics.ghostParenthesisPadding, cy + this.y, cx + this.x + this.renderer.smuflMetrics.ghostParenthesisPadding, cy + this.y + this.height, false, this.renderer.smuflMetrics.ghostParenthesisWidth / 2, this.renderer.smuflMetrics.tieMidpointThickness);
+        }
+        canvas.color = c;
     }
 }
 
 /**
  * @internal
  */
-class NumberedNoteHeadGlyph extends Glyph {
-    _isGrace;
-    _beat;
-    _number;
-    constructor(x, y, number, isGrace, beat) {
+class TimeSignatureGlyph extends GlyphGroup {
+    _numerator = 0;
+    _denominator = 0;
+    _isCommon;
+    _isFreeTime;
+    barSubElement = BarSubElement.StandardNotationTimeSignature;
+    constructor(x, y, numerator, denominator, isCommon, isFreeTime) {
         super(x, y);
-        this._isGrace = isGrace;
-        this._number = number;
-        this._beat = beat;
+        this._numerator = numerator;
+        this._denominator = denominator;
+        this._isCommon = isCommon;
+        this._isFreeTime = isFreeTime;
     }
     paint(cx, cy, canvas) {
-        const _ = this._beat.isRest
-            ? ElementStyleHelper.beat(canvas, BeatSubElement.NumberedRests, this._beat)
-            : this._beat.notes.length > 0
-                ? ElementStyleHelper.note(canvas, NoteSubElement.NumberedNumber, this._beat.notes[0])
-                : undefined;
+        const _ = ElementStyleHelper.bar(canvas, this.barSubElement, this.renderer.bar);
         try {
-            const res = this.renderer.resources;
-            canvas.font = this._isGrace ? res.numberedNotationGraceFont : res.numberedNotationFont;
-            canvas.textBaseline = TextBaseline.Middle;
-            canvas.textAlign = TextAlign.Left;
-            canvas.fillText(this._number.toString(), cx + this.x, cy + this.y);
+            super.paint(cx, cy, canvas);
         }
         finally {
             _?.[Symbol.dispose]?.();
         }
     }
     doLayout() {
-        const res = this.renderer.resources;
-        const font = this._isGrace ? res.numberedNotationGraceFont : res.numberedNotationFont;
-        const c = this.renderer.scoreRenderer.canvas;
-        c.font = font;
-        const size = c.measureText(`${this._number}`);
-        this.height = size.height;
-        this.width = size.width;
+        if (this._isCommon && this._numerator === 2 && this._denominator === 2) {
+            const common = new MusicFontGlyph(0, 0, this.commonScale, MusicFontSymbol.TimeSigCutCommon);
+            this.addGlyph(common);
+            super.doLayout();
+        }
+        else if (this._isCommon && this._numerator === 4 && this._denominator === 4) {
+            const common = new MusicFontGlyph(0, 0, this.commonScale, MusicFontSymbol.TimeSigCommon);
+            this.addGlyph(common);
+            super.doLayout();
+        }
+        else {
+            const numerator = new NumberGlyph(0, 0, this._numerator, TextBaseline.Top, this.numberScale);
+            const denominator = new NumberGlyph(0, 0, this._denominator, TextBaseline.Bottom, this.numberScale);
+            this.addGlyph(numerator);
+            this.addGlyph(denominator);
+            super.doLayout();
+            const glyphSpace = this.width;
+            numerator.x = (glyphSpace - numerator.width) / 2;
+            denominator.x = (glyphSpace - denominator.width) / 2;
+            this.width = Math.max(numerator.x + numerator.width, denominator.x + denominator.width);
+        }
+        if (this._isFreeTime) {
+            const numberHeight = this.renderer.smuflMetrics.oneStaffSpace * 2;
+            const openParenthesis = new GhostParenthesisGlyph(true);
+            openParenthesis.renderer = this.renderer;
+            openParenthesis.y = -numberHeight;
+            openParenthesis.height = numberHeight * 2;
+            openParenthesis.doLayout();
+            for (const g of this.glyphs) {
+                g.x += openParenthesis.width;
+            }
+            this.width += openParenthesis.width;
+            this.addGlyph(openParenthesis);
+            const closeParenthesis = new GhostParenthesisGlyph(false);
+            closeParenthesis.renderer = this.renderer;
+            closeParenthesis.x = this.width;
+            closeParenthesis.y = -numberHeight;
+            closeParenthesis.height = numberHeight * 2;
+            closeParenthesis.doLayout();
+            this.addGlyph(closeParenthesis);
+            this.width += closeParenthesis.width;
+        }
     }
 }
 
 /**
  * @internal
  */
-class NumberedBeatPreNotesGlyph extends BeatGlyphBase {
-    isNaturalizeAccidental = false;
-    accidental = AccidentalType.None;
-    get effectElement() {
-        return BeatSubElement.NumberedEffects;
+class ScoreTimeSignatureGlyph extends TimeSignatureGlyph {
+    get commonScale() {
+        return 1;
     }
-    doLayout() {
-        if (!this.container.beat.isRest && !this.container.beat.isEmpty) {
-            const accidentals = new AccidentalGroupGlyph();
-            accidentals.renderer = this.renderer;
-            if (this.container.beat.notes.length > 0) {
-                const note = this.container.beat.notes[0];
-                // Notes
-                // - Compared to standard notation accidentals:
-                //   - Flat keysigs: When there is a naturalize symbol (against key signature, not naturalizing same line) we have a # in Numbered notation
-                //   - Flat keysigs: When there is a flat symbol standard notation we also have a flat in Numbered notation
-                //   - C keysig: A sharp on standard notation is a sharp on numbered notation
-                //   - # keysigs:  When there is a # symbol on standard notation we also a sharp in numbered notation
-                //   - # keysigs:  When there is a naturalize symbol (against key signature, not naturalizing same line) we have a flat in Numbered notation
-                // Or generally:
-                //  - numbered notation has the same accidentals as standard notation if applied
-                //  - when the standard notation naturalizes the accidental from the key signature, the numbered notation has the reversed accidental
-                const accidentalMode = note ? note.accidentalMode : NoteAccidentalMode.Default;
-                const noteValue = AccidentalHelper.getNoteValue(note);
-                let accidentalToSet = ModelUtils.computeAccidental(this.renderer.bar.keySignature, accidentalMode, noteValue, note.hasQuarterToneOffset);
-                if (accidentalToSet === AccidentalType.Natural) {
-                    const ks = this.renderer.bar.keySignature;
-                    const ksi = ks + 7;
-                    const naturalizeAccidentalForKeySignature = ksi < 7 ? AccidentalType.Sharp : AccidentalType.Flat;
-                    accidentalToSet = naturalizeAccidentalForKeySignature;
-                    this.isNaturalizeAccidental = true;
-                }
-                // do we need an accidental on the note?
-                if (accidentalToSet !== AccidentalType.None) {
-                    this.accidental = accidentalToSet;
-                    const sr = this.renderer;
-                    const color = ElementStyleHelper.noteColor(sr.resources, NoteSubElement.NumberedAccidentals, note);
-                    const g = new AccidentalGlyph(0, sr.getLineY(0), accidentalToSet, note.beat.graceType !== GraceType.None
-                        ? EngravingSettings.GraceScale * EngravingSettings.GraceScale
-                        : EngravingSettings.GraceScale);
-                    g.colorOverride = color;
-                    g.renderer = this.renderer;
-                    accidentals.addGlyph(g);
-                    this.addNormal(accidentals);
-                    this.addNormal(new SpacingGlyph(0, 0, this.renderer.smuflMetrics.preNoteEffectPadding));
-                }
-            }
-        }
-        super.doLayout();
+    get numberScale() {
+        return 1;
     }
 }
+
 /**
  * @internal
  */
-class NumberedBeatGlyph extends BeatOnNoteGlyphBase {
-    noteHeads = null;
-    deadSlapped = null;
-    octaveDots = 0;
-    get effectElement() {
-        return BeatSubElement.NumberedEffects;
+class FlagGlyph extends MusicFontGlyph {
+    constructor(x, y, duration, direction, isGrace) {
+        super(x, y, isGrace ? EngravingSettings.GraceScale : 1, FlagGlyph.getSymbol(duration, direction, isGrace));
     }
-    getNoteX(_note, requestedPosition) {
-        let g = null;
-        if (this.noteHeads) {
-            g = this.noteHeads;
-        }
-        else if (this.deadSlapped) {
-            g = this.deadSlapped;
+    static getSymbol(duration, direction, isGrace) {
+        if (isGrace) {
+            duration = Duration.Eighth;
         }
-        if (g) {
-            let pos = g.x;
-            switch (requestedPosition) {
-                case NoteXPosition.Left:
-                    break;
-                case NoteXPosition.Center:
-                    pos += g.width / 2;
-                    break;
-                case NoteXPosition.Right:
-                    pos += g.width;
-                    break;
+        if (direction === BeamDirection.Up) {
+            switch (duration) {
+                case Duration.Eighth:
+                    return MusicFontSymbol.Flag8thUp;
+                case Duration.Sixteenth:
+                    return MusicFontSymbol.Flag16thUp;
+                case Duration.ThirtySecond:
+                    return MusicFontSymbol.Flag32ndUp;
+                case Duration.SixtyFourth:
+                    return MusicFontSymbol.Flag64thUp;
+                case Duration.OneHundredTwentyEighth:
+                    return MusicFontSymbol.Flag128thUp;
+                case Duration.TwoHundredFiftySixth:
+                    return MusicFontSymbol.Flag256thUp;
+                default:
+                    return MusicFontSymbol.Flag8thUp;
             }
-            return pos;
-        }
-        return 0;
-    }
-    buildBoundingsLookup(beatBounds, cx, cy) {
-        if (this.noteHeads && this.container.beat.notes.length > 0) {
-            const noteBounds = new NoteBounds();
-            noteBounds.note = this.container.beat.notes[0];
-            noteBounds.noteHeadBounds = new Bounds();
-            noteBounds.noteHeadBounds.x = cx + this.x + this.noteHeads.x;
-            noteBounds.noteHeadBounds.y = cy + this.y + this.noteHeads.y - this.noteHeads.height / 2;
-            noteBounds.noteHeadBounds.w = this.width;
-            noteBounds.noteHeadBounds.h = this.height;
-            beatBounds.addNote(noteBounds);
+        }
+        switch (duration) {
+            case Duration.Eighth:
+                return MusicFontSymbol.Flag8thDown;
+            case Duration.Sixteenth:
+                return MusicFontSymbol.Flag16thDown;
+            case Duration.ThirtySecond:
+                return MusicFontSymbol.Flag32ndDown;
+            case Duration.SixtyFourth:
+                return MusicFontSymbol.Flag64thDown;
+            case Duration.OneHundredTwentyEighth:
+                return MusicFontSymbol.Flag128thDown;
+            case Duration.TwoHundredFiftySixth:
+                return MusicFontSymbol.Flag128thDown;
+            default:
+                return MusicFontSymbol.Flag8thDown;
         }
     }
-    getLowestNoteY() {
-        return this._internalGetNoteY(NoteYPosition.Center);
-    }
-    getHighestNoteY() {
-        return this._internalGetNoteY(NoteYPosition.Center);
-    }
-    getNoteY(_note, requestedPosition) {
-        return this._internalGetNoteY(requestedPosition);
+}
+
+/**
+ * @internal
+ */
+class RepeatCountGlyph extends Glyph {
+    _count = 0;
+    constructor(x, y, count) {
+        super(x, y);
+        this._count = 0;
+        this._count = count;
     }
-    getRestY(requestedPosition) {
-        return this._internalGetNoteY(requestedPosition);
+    doLayout() {
+        this.renderer.scoreRenderer.canvas.font = this.renderer.resources.barNumberFont;
+        const size = this.renderer.scoreRenderer.canvas.measureText(`x${this._count}`);
+        this.width = 0; // do not account width
+        this.height = size.height;
+        this.y -= size.height;
     }
-    _internalGetNoteY(requestedPosition) {
-        let g = null;
-        if (this.noteHeads) {
-            g = this.noteHeads;
-        }
-        else if (this.deadSlapped) {
-            g = this.deadSlapped;
+    paint(cx, cy, canvas) {
+        const _ = ElementStyleHelper.bar(canvas, this.renderer.repeatsBarSubElement, this.renderer.bar);
+        try {
+            const res = this.renderer.resources;
+            const oldAlign = canvas.textAlign;
+            canvas.font = res.barNumberFont;
+            canvas.textAlign = TextAlign.Right;
+            const s = `x${this._count}`;
+            const w = canvas.measureText(s).width / 1.5;
+            canvas.fillText(s, cx + this.x - w, cy + this.y);
+            canvas.textAlign = oldAlign;
         }
-        if (g) {
-            let pos = this.y + g.y;
-            switch (requestedPosition) {
-                case NoteYPosition.Top:
-                case NoteYPosition.TopWithStem:
-                    pos -= g.height / 2;
-                    break;
-                case NoteYPosition.Center:
-                    break;
-                case NoteYPosition.Bottom:
-                case NoteYPosition.BottomWithStem:
-                    pos += g.height / 2;
-                    break;
-                case NoteYPosition.StemUp:
-                case NoteYPosition.StemDown:
-                    break;
-            }
-            return pos;
+        finally {
+            _?.[Symbol.dispose]?.();
         }
+    }
+}
+
+/**
+ * This is a base class for any bar renderer which renders music notation on a staff
+ * with lines like Standard Notation, Guitar Tablatures and Slash Notation.
+ *
+ * This base class takes care of the typical bits like drawing lines,
+ * allowing note positioning and creating glyphs like repeats, bar numbers etc..
+ * @internal
+ */
+class LineBarRenderer extends BarRendererBase {
+    firstLineY = 0;
+    _startSpacing = false;
+    tupletSize = 0;
+    get lineOffset() {
+        return this.lineSpacing;
+    }
+    get tupletOffset() {
+        return this.smuflMetrics.oneStaffSpace * 0.5;
+    }
+    get topGlyphOverflow() {
         return 0;
     }
-    static majorKeySignatureOneValues = [
-        // Flats
-        59, 66, 61, 68, 63, 58, 65,
-        // natural
-        60,
-        // sharps  (where the value is true, a flat accidental is required for the notes)
-        67, 62, 69, 64, 71, 66, 61
-    ];
-    static minorKeySignatureOneValues = [
-        // Flats
-        71, 66, 73, 68, 63, 70, 65,
-        // natural
-        72,
-        // sharps  (where the value is true, a flat accidental is required for the notes)
-        67, 74, 69, 64, 71, 66, 73
-    ];
+    get bottomGlyphOverflow() {
+        return 0;
+    }
+    initLineBasedSizes() {
+        this.height = this.lineOffset * (this.heightLineCount - 1);
+    }
+    updateSizes() {
+        this.initLineBasedSizes();
+        this.adjustSizes();
+        this.updateFirstLineY();
+        super.updateSizes();
+    }
+    adjustSizes() {
+    }
+    updateFirstLineY() {
+        const fullLineHeight = this.lineOffset * (this.heightLineCount - 1);
+        const actualLineHeight = this.drawnLineCount === 0 ? 0 : (this.drawnLineCount - 1) * this.lineOffset;
+        const lineYOffset = this.smuflMetrics.staffLineThickness / 2;
+        this.firstLineY = (((fullLineHeight - actualLineHeight) / 2) | 0) - lineYOffset;
+    }
     doLayout() {
-        // create glyphs
-        const sr = this.renderer;
-        if (sr.shortestDuration < this.container.beat.duration) {
-            sr.shortestDuration = this.container.beat.duration;
-        }
-        if (!this.container.beat.isEmpty) {
-            const glyphY = sr.getLineY(0);
-            let numberWithinOctave = '0';
-            if (this.container.beat.notes.length > 0) {
-                const note = this.container.beat.notes[0];
-                const kst = this.renderer.bar.keySignatureType;
-                const ks = this.renderer.bar.keySignature;
-                const ksi = ks + 7;
-                const oneNoteValues = kst === KeySignatureType.Minor
-                    ? NumberedBeatGlyph.minorKeySignatureOneValues
-                    : NumberedBeatGlyph.majorKeySignatureOneValues;
-                const oneNoteValue = oneNoteValues[ksi];
-                if (note.isDead) {
-                    numberWithinOctave = 'X';
+        this.initLineBasedSizes();
+        this.updateFirstLineY();
+        this.tupletSize = this.smuflMetrics.glyphHeights.get(MusicFontSymbol.Tuplet0);
+        super.doLayout();
+    }
+    getLineY(line) {
+        return this.firstLineY + this.getLineHeight(line);
+    }
+    getLineHeight(line) {
+        return this.lineOffset * line;
+    }
+    paintContent(cx, cy, canvas) {
+        super.paintContent(cx, cy, canvas);
+        this.paintBeams(cx, cy, canvas, this.flagsSubElement, this.beamsSubElement);
+        this.paintTuplets(cx, cy, canvas, this.tupletSubElement);
+    }
+    paintBackground(cx, cy, canvas) {
+        super.paintBackground(cx, cy, canvas);
+        // canvas.color = Color.random(100);
+        // canvas.fillRect(cx + this.x, cy + this.y, this.width, this.height);
+        //
+        // draw string lines
+        //
+        this.paintStaffLines(cx, cy, canvas);
+        this.paintSimileMark(cx, cy, canvas);
+    }
+    paintStaffLines(cx, cy, canvas) {
+        const _ = ElementStyleHelper.bar(canvas, this.staffLineBarSubElement, this.bar, true);
+        try {
+            // collect tab note position for spaces
+            const spaces = [];
+            for (let i = 0, j = this.drawnLineCount; i < j; i++) {
+                spaces.push([]);
+            }
+            // on multibar rest glyphs we don't have spaces as they are empty
+            if (!this.additionalMultiRestBars) {
+                this.collectSpaces(spaces);
+            }
+            // if we have multiple voices we need to sort by X-position, otherwise have a wild mix in the list
+            // but painting relies on ascending X-position
+            for (const line of spaces) {
+                line.sort((a, b) => {
+                    return a[0] > b[0] ? 1 : a[0] < b[0] ? -1 : 0;
+                });
+            }
+            // during system fitting it can happen that we have fraction widths
+            // but to have lines until the full end-pixel we round up.
+            // this way we avoid holes,
+            const lineWidth = this.width;
+            // we want the lines to be exactly virtually aligned with the respective Y-position
+            // for note heads to align correctly
+            const lineYOffset = this.smuflMetrics.staffLineThickness / 2;
+            for (let i = 0; i < this.drawnLineCount; i++) {
+                const lineY = this.getLineY(i) - lineYOffset;
+                let lineX = 0;
+                for (const line of spaces[i]) {
+                    canvas.fillRect(cx + this.x + lineX, cy + this.y + lineY, line[0] - lineX, this.smuflMetrics.staffLineThickness);
+                    lineX = line[0] + line[1];
                 }
-                else {
-                    const noteValue = note.displayValue - oneNoteValue;
-                    const index = noteValue < 0 ? ((noteValue % 12) + 12) % 12 : noteValue % 12;
-                    let dots = noteValue < 0 ? ((Math.abs(noteValue) + 12) / 12) | 0 : (noteValue / 12) | 0;
-                    if (noteValue < 0) {
-                        dots *= -1;
-                    }
-                    this.octaveDots = dots;
-                    sr.registerOctave(this.container.beat, dots);
-                    const stepList = ModelUtils.keySignatureIsSharp(ks) || ModelUtils.keySignatureIsNatural(ks)
-                        ? AccidentalHelper.flatNoteSteps
-                        : AccidentalHelper.sharpNoteSteps;
-                    let steps = stepList[index] + 1;
-                    const hasAccidental = ModelUtils.accidentalNotes[index];
-                    if (hasAccidental &&
-                        !this.container.preNotes.isNaturalizeAccidental) {
-                        if (ksi < 7) {
-                            steps++;
-                        }
-                        else {
-                            steps--;
-                        }
-                    }
-                    numberWithinOctave = steps.toString();
+                canvas.fillRect(cx + this.x + lineX, cy + this.y + lineY, lineWidth - lineX, this.smuflMetrics.staffLineThickness);
+            }
+        }
+        finally {
+            _?.[Symbol.dispose]?.();
+        }
+    }
+    collectSpaces(_spaces) {
+    }
+    createStartSpacing() {
+        if (this._startSpacing) {
+            return;
+        }
+        const padding = this.index === 0 ? this.settings.display.firstStaffPaddingLeft : this.settings.display.staffPaddingLeft;
+        this.addPreBeatGlyph(new SpacingGlyph(0, 0, padding));
+        this._startSpacing = true;
+    }
+    paintTuplets(cx, cy, canvas, beatElement, bracketsAsArcs = false) {
+        for (const v of this.voiceContainer.voiceDrawOrder) {
+            if (this.voiceContainer.tupletGroups.has(v)) {
+                const voice = this.voiceContainer.tupletGroups.get(v);
+                for (const tupletGroup of voice) {
+                    this._paintTupletHelper(cx, cy, canvas, tupletGroup, beatElement, bracketsAsArcs);
                 }
             }
-            if (this.container.beat.deadSlapped) {
-                const deadSlapped = new DeadSlappedBeatGlyph();
-                deadSlapped.renderer = this.renderer;
-                deadSlapped.doLayout();
-                this.deadSlapped = deadSlapped;
-                this.addEffect(deadSlapped);
+        }
+    }
+    getTupletBeamDirection(helper) {
+        return this.getBeamDirection(helper);
+    }
+    _paintTupletHelper(cx, cy, canvas, h, beatElement, bracketsAsArcs) {
+        const res = this.resources;
+        const oldAlign = canvas.textAlign;
+        const oldBaseLine = canvas.textBaseline;
+        canvas.color = h.voice.index === 0 ? this.resources.mainGlyphColor : this.resources.secondaryGlyphColor;
+        canvas.textAlign = TextAlign.Center;
+        canvas.textBaseline = TextBaseline.Middle;
+        let s;
+        const num = h.beats[0].tupletNumerator;
+        const den = h.beats[0].tupletDenominator;
+        // list as in Guitar Pro 7. for certain tuplets only the numerator is shown
+        if (num === 2 && den === 3) {
+            s = [MusicFontSymbol.Tuplet2];
+        }
+        else if (num === 3 && den === 2) {
+            s = [MusicFontSymbol.Tuplet3];
+        }
+        else if (num === 4 && den === 6) {
+            s = [MusicFontSymbol.Tuplet4];
+        }
+        else if (num === 5 && den === 4) {
+            s = [MusicFontSymbol.Tuplet5];
+        }
+        else if (num === 6 && den === 4) {
+            s = [MusicFontSymbol.Tuplet6];
+        }
+        else if (num === 7 && den === 4) {
+            s = [MusicFontSymbol.Tuplet7];
+        }
+        else if (num === 9 && den === 8) {
+            s = [MusicFontSymbol.Tuplet9];
+        }
+        else if (num === 10 && den === 8) {
+            s = [MusicFontSymbol.Tuplet1, MusicFontSymbol.Tuplet0];
+        }
+        else if (num === 11 && den === 8) {
+            s = [MusicFontSymbol.Tuplet1, MusicFontSymbol.Tuplet1];
+        }
+        else if (num === 12 && den === 8) {
+            s = [MusicFontSymbol.Tuplet1, MusicFontSymbol.Tuplet2];
+        }
+        else if (num === 13 && den === 8) {
+            s = [MusicFontSymbol.Tuplet1, MusicFontSymbol.Tuplet3];
+        }
+        else {
+            s = [];
+            const zero = MusicFontSymbol.Tuplet0;
+            if (num > 10) {
+                s.push((zero + Math.floor(num / 10)));
+                s.push((zero + (num - 10)));
             }
             else {
-                const isGrace = this.container.beat.graceType !== GraceType.None;
-                const noteHeadGlyph = new NumberedNoteHeadGlyph(0, glyphY, numberWithinOctave, isGrace, this.container.beat);
-                this.noteHeads = noteHeadGlyph;
-                this.addNormal(noteHeadGlyph);
+                s.push((zero + num));
             }
-            //
-            // Note dots
-            if (this.container.beat.dots > 0 && this.container.beat.duration >= Duration.Quarter) {
-                for (let i = 0; i < this.container.beat.dots; i++) {
-                    const dot = new AugmentationDotGlyph(0, glyphY);
-                    dot.renderer = this.renderer;
-                    this.addEffect(dot);
-                }
+            s.push(MusicFontSymbol.TupletColon);
+            if (den > 10) {
+                s.push((zero + Math.floor(den / 10)));
+                s.push((zero + (den - 10)));
             }
-            //
-            // Dashes
-            let numberOfQuarterNotes = 0;
-            switch (this.container.beat.duration) {
-                case Duration.QuadrupleWhole:
-                    numberOfQuarterNotes = 16;
-                    break;
-                case Duration.DoubleWhole:
-                    numberOfQuarterNotes = 8;
-                    break;
-                case Duration.Whole:
-                    numberOfQuarterNotes = 4;
-                    break;
-                case Duration.Half:
-                    numberOfQuarterNotes = 2;
-                    break;
+            else {
+                s.push((zero + den));
             }
-            let numberOfAddedQuarters = numberOfQuarterNotes;
-            for (let i = 0; i < this.container.beat.dots; i++) {
-                numberOfAddedQuarters = (numberOfAddedQuarters / 2) | 0;
-                numberOfQuarterNotes += numberOfAddedQuarters;
+        }
+        // check if we need to paint simple footer
+        const offset = this.tupletOffset;
+        const size = this.tupletSize;
+        const shift = offset + size * 0.5;
+        const _ = ElementStyleHelper.beat(canvas, beatElement, h.beats[0]);
+        try {
+            const l = canvas.lineWidth;
+            canvas.lineWidth = this.smuflMetrics.tupletBracketThickness;
+            if (h.beats.length === 1 || !h.isFull) {
+                for (const beat of h.beats) {
+                    const beamingHelper = this.helpers.getBeamingHelperForBeat(beat);
+                    if (!beamingHelper) {
+                        continue;
+                    }
+                    const direction = this.getTupletBeamDirection(beamingHelper);
+                    const tupletX = this.getBeatX(beat, BeatXPosition.Stem);
+                    let tupletY = this.calculateBeamYWithDirection(beamingHelper, tupletX, direction);
+                    if (direction === BeamDirection.Down) {
+                        tupletY += shift;
+                    }
+                    else {
+                        tupletY -= shift;
+                    }
+                    canvas.fillMusicFontSymbols(cx + this.x + tupletX, cy + this.y + tupletY + size * 0.5, 1, s, true);
+                }
             }
-            for (let i = 0; i < numberOfQuarterNotes - 1; i++) {
-                const dash = new NumberedDashGlyph(0, glyphY, this.container.beat);
-                dash.renderer = this.renderer;
-                this.addNormal(dash);
+            else {
+                const firstBeat = h.beats[0];
+                const lastBeat = h.beats[h.beats.length - 1];
+                let firstNonRestBeat = null;
+                let lastNonRestBeat = null;
+                for (let i = 0; i < h.beats.length; i++) {
+                    if (!h.beats[i].isRest) {
+                        firstNonRestBeat = h.beats[i];
+                        break;
+                    }
+                }
+                for (let i = h.beats.length - 1; i >= 0; i--) {
+                    if (!h.beats[i].isRest) {
+                        lastNonRestBeat = h.beats[i];
+                        break;
+                    }
+                }
+                let isRestOnly = false;
+                if (!firstNonRestBeat) {
+                    firstNonRestBeat = firstBeat;
+                    isRestOnly = true;
+                }
+                if (!lastNonRestBeat) {
+                    lastNonRestBeat = lastBeat;
+                }
+                //
+                // Calculate the overall area of the tuplet bracket
+                const startX = this.getBeatX(firstBeat, BeatXPosition.OnNotes);
+                const endX = this.getBeatX(lastBeat, BeatXPosition.PostNotes);
+                //
+                // calculate the y positions for our bracket
+                const firstNonRestBeamingHelper = this.helpers.getBeamingHelperForBeat(firstNonRestBeat);
+                const lastNonRestBeamingHelper = this.helpers.getBeamingHelperForBeat(lastNonRestBeat);
+                const direction = this.getTupletBeamDirection(firstNonRestBeamingHelper);
+                let startY = this.calculateBeamYWithDirection(firstNonRestBeamingHelper, startX, direction);
+                let endY = this.calculateBeamYWithDirection(lastNonRestBeamingHelper, endX, direction);
+                if (isRestOnly) {
+                    startY = Math.max(startY, endY);
+                    endY = startY;
+                }
+                // align line centered in available space
+                if (direction === BeamDirection.Down) {
+                    startY += shift;
+                    endY += shift;
+                }
+                else {
+                    startY -= shift;
+                    endY -= shift;
+                }
+                //
+                // Calculate how many space the text will need
+                const sw = s.reduce((acc, sym) => acc + res.engravingSettings.glyphWidths.get(sym), 0);
+                const sp = res.engravingSettings.oneStaffSpace * 0.5;
+                //
+                // Calculate the offsets where to break the bracket
+                const middleX = (startX + endX) / 2;
+                const offset1X = middleX - sw / 2 - sp;
+                const offset2X = middleX + sw / 2 + sp;
+                const k = (endY - startY) / (endX - startX);
+                const d = startY - k * startX;
+                const offset1Y = k * offset1X + d;
+                const middleY = k * middleX + d;
+                const offset2Y = k * offset2X + d;
+                const angleStartY = direction === BeamDirection.Down ? startY - size * 0.5 : startY + size * 0.5;
+                const angleEndY = direction === BeamDirection.Down ? endY - size * 0.5 : endY + size * 0.5;
+                //
+                // draw the bracket
+                const pixelAlignment = canvas.lineWidth % 2 === 0 ? 0 : 0.5;
+                cx += pixelAlignment;
+                cy += pixelAlignment;
+                if (offset1X > startX) {
+                    canvas.beginPath();
+                    canvas.moveTo(cx + this.x + startX, cy + this.y + angleStartY);
+                    if (bracketsAsArcs) {
+                        canvas.quadraticCurveTo(cx + this.x + (offset1X + startX) / 2, cy + this.y + offset1Y, cx + this.x + offset1X, cy + this.y + offset1Y);
+                    }
+                    else {
+                        canvas.lineTo(cx + this.x + startX, cy + this.y + startY);
+                        canvas.lineTo(cx + this.x + offset1X, cy + this.y + offset1Y);
+                    }
+                    canvas.moveTo(cx + this.x + offset2X, cy + this.y + offset2Y);
+                    if (bracketsAsArcs) {
+                        canvas.quadraticCurveTo(cx + this.x + (endX + offset2X) / 2, cy + this.y + offset2Y, cx + this.x + endX, cy + this.y + angleEndY);
+                    }
+                    else {
+                        canvas.lineTo(cx + this.x + endX, cy + this.y + endY);
+                        canvas.lineTo(cx + this.x + endX, cy + this.y + angleEndY);
+                    }
+                    canvas.stroke();
+                }
+                //
+                // Draw the string
+                canvas.fillMusicFontSymbols(cx + this.x + middleX, cy + this.y + middleY + size * 0.5, 1, s, true);
             }
+            canvas.textAlign = oldAlign;
+            canvas.textBaseline = oldBaseLine;
+            canvas.lineWidth = l;
         }
-        super.doLayout();
-        if (this.container.beat.isEmpty) {
-            this.onTimeX = this.width / 2;
-        }
-        else if (this.noteHeads) {
-            this.onTimeX = this.noteHeads.x + this.noteHeads.width / 2;
-        }
-        else if (this.deadSlapped) {
-            this.onTimeX = this.deadSlapped.x + this.deadSlapped.width / 2;
+        finally {
+            _?.[Symbol.dispose]?.();
         }
-        this.middleX = this.onTimeX;
-        this.stemX = this.middleX;
     }
-}
-
-/**
- * @internal
- */
-class TabTieGlyph extends NoteTieGlyph {
-    calculateTieDirection() {
-        if (this.isLeftHandTap) {
-            return BeamDirection.Up;
+    paintBeams(cx, cy, canvas, flagsElement, beamsElement) {
+        for (const v of this.voiceContainer.voiceDrawOrder) {
+            for (const h of this.helpers.beamHelpers[v]) {
+                this.paintBeamHelper(cx, cy, canvas, h, flagsElement, beamsElement);
+            }
         }
-        return TabTieGlyph.getBeamDirectionForNote(this.startNote);
-    }
-    static getBeamDirectionForNote(note) {
-        return note.string > 3 ? BeamDirection.Up : BeamDirection.Down;
     }
-}
-
-/**
- * @internal
- */
-class TabSlurGlyph extends TabTieGlyph {
-    _forSlide;
-    constructor(slurEffectId, startNote, endNote, forSlide, forEnd) {
-        super(slurEffectId, startNote, endNote, forEnd);
-        this._forSlide = forSlide;
+    drawBeamHelperAsFlags(h) {
+        return h.beats.length === 1;
     }
-    getTieHeight(startX, _startY, endX, _endY) {
-        return (Math.log(endX - startX + 1) * this.renderer.settings.notation.slurHeight) / 2;
+    hasFlag(beat) {
+        if (beat.isRest) {
+            return false;
+        }
+        const helper = this.helpers.getBeamingHelperForBeat(beat);
+        if (helper) {
+            return helper.hasFlag(this.drawBeamHelperAsFlags(helper), beat);
+        }
+        return BeamingHelper.beatHasFlag(beat);
     }
-    tryExpand(startNote, endNote, forSlide, forEnd) {
-        // same type required
-        if (this._forSlide !== forSlide) {
+    hasStem(beat) {
+        if (beat.isRest) {
             return false;
         }
-        // same start and endbeat
-        if (this.startNote.beat.id !== startNote.beat.id) {
+        const helper = this.helpers.getBeamingHelperForBeat(beat);
+        if (helper) {
+            return helper.hasStem(this.drawBeamHelperAsFlags(helper), beat);
+        }
+        return BeamingHelper.beatHasStem(beat);
+    }
+    paintBeamHelper(cx, cy, canvas, h, flagsElement, beamsElement) {
+        canvas.color = h.voice.index === 0 ? this.resources.mainGlyphColor : this.resources.secondaryGlyphColor;
+        if (this.shouldPaintBeamingHelper(h)) {
+            if (this.drawBeamHelperAsFlags(h)) {
+                this.paintFlag(cx, cy, canvas, h, flagsElement);
+            }
+            else {
+                this.paintBar(cx, cy, canvas, h, beamsElement);
+            }
+        }
+    }
+    shouldPaintBeamingHelper(h) {
+        return !h.isRestBeamHelper;
+    }
+    shouldPaintFlag(beat) {
+        // no flags for bend grace beats
+        if (beat.graceType === GraceType.BendGrace) {
             return false;
         }
-        if (this.endNote.beat.id !== endNote.beat.id) {
+        if (beat.deadSlapped) {
             return false;
         }
-        const isForEnd = this.renderer === this.lookupEndBeatRenderer();
-        if (isForEnd !== forEnd) {
+        // no flags for any grace notes on songbook mode
+        if (beat.graceType !== GraceType.None && this.settings.notation.notationMode === NotationMode.SongBook) {
             return false;
         }
-        // same draw direction
-        if (this.tieDirection !== TabTieGlyph.getBeamDirectionForNote(startNote)) {
+        // only flags for durations with stems
+        if (beat.duration === Duration.Whole ||
+            beat.duration === Duration.DoubleWhole ||
+            beat.duration === Duration.QuadrupleWhole) {
             return false;
         }
-        // if we can expand, expand in correct direction
-        switch (this.tieDirection) {
-            case BeamDirection.Up:
-                if (startNote.realValue > this.startNote.realValue) {
-                    this.startNote = startNote;
+        return true;
+    }
+    paintFlag(cx, cy, canvas, h, flagsElement) {
+        for (const beat of h.beats) {
+            if (!this.shouldPaintFlag(beat)) {
+                continue;
+            }
+            const isGrace = beat.graceType !== GraceType.None;
+            //
+            // draw line
+            //
+            const beatLineX = this.getBeatX(beat, BeatXPosition.Stem);
+            const direction = this.getBeamDirection(h);
+            const topY = cy + this.y + this.getFlagTopY(beat, direction);
+            const bottomY = cy + this.y + this.getFlagBottomY(beat, direction);
+            let flagY = 0;
+            if (direction === BeamDirection.Down) {
+                flagY = bottomY;
+            }
+            else {
+                flagY = topY;
+            }
+            if (!h.hasStem(true, beat)) {
+                continue;
+            }
+            this.paintBeamingStem(beat, cy + this.y, cx + this.x + beatLineX, topY, bottomY, canvas);
+            const _ = ElementStyleHelper.beat(canvas, flagsElement, beat);
+            try {
+                let flagWidth = 0;
+                //
+                // Draw flag
+                //
+                if (h.hasFlag(true, beat)) {
+                    const glyph = new FlagGlyph(cx + this.x + beatLineX, flagY, beat.duration, direction, isGrace);
+                    glyph.renderer = this;
+                    glyph.doLayout();
+                    glyph.paint(0, 0, canvas);
+                    flagWidth = glyph.width / 2;
                 }
-                if (endNote.realValue > this.endNote.realValue) {
-                    this.endNote = endNote;
+                if (beat.graceType === GraceType.BeforeBeat) {
+                    if (direction === BeamDirection.Down) {
+                        CanvasHelper.fillMusicFontSymbolSafe(canvas, cx + this.x + beatLineX + flagWidth / 2, (topY + bottomY - this.smuflMetrics.glyphHeights.get(MusicFontSymbol.GraceNoteSlashStemDown)) /
+                            2, EngravingSettings.GraceScale, MusicFontSymbol.GraceNoteSlashStemDown, true);
+                    }
+                    else {
+                        CanvasHelper.fillMusicFontSymbolSafe(canvas, cx + this.x + beatLineX + flagWidth / 2, (topY + bottomY + this.smuflMetrics.glyphHeights.get(MusicFontSymbol.GraceNoteSlashStemUp)) /
+                            2, EngravingSettings.GraceScale, MusicFontSymbol.GraceNoteSlashStemUp, true);
+                    }
                 }
+            }
+            finally {
+                _?.[Symbol.dispose]?.();
+            }
+        }
+    }
+    getFlagStemSize(duration, forceMinStem = false) {
+        let size = 0;
+        switch (duration) {
+            case Duration.QuadrupleWhole:
+            case Duration.Half:
+            case Duration.Quarter:
+            case Duration.Eighth:
+            case Duration.Sixteenth:
+            case Duration.ThirtySecond:
+            case Duration.SixtyFourth:
+            case Duration.OneHundredTwentyEighth:
+            case Duration.TwoHundredFiftySixth:
+                size = this.smuflMetrics.standardStemLength + this.smuflMetrics.stemFlagOffsets.get(duration);
                 break;
-            case BeamDirection.Down:
-                if (startNote.realValue < this.startNote.realValue) {
-                    this.startNote = startNote;
-                }
-                if (endNote.realValue < this.endNote.realValue) {
-                    this.endNote = endNote;
-                }
+            default:
+                size = forceMinStem ? this.smuflMetrics.standardStemLength : 0;
                 break;
         }
-        return true;
+        return size;
     }
-}
-
-/**
- * @internal
- */
-class NumberedSlurGlyph extends TabSlurGlyph {
-    calculateTieDirection() {
-        return BeamDirection.Up;
+    recreatePreBeatGlyphs() {
+        this._startSpacing = false;
+        super.recreatePreBeatGlyphs();
     }
-}
-
-/**
- * @internal
- */
-class NumberedBeatContainerGlyph extends BeatContainerGlyph {
-    _slurs = new Map();
-    _effectSlurs = [];
-    constructor(beat) {
-        super(beat);
-        this.preNotes = new NumberedBeatPreNotesGlyph();
-        this.onNotes = new NumberedBeatGlyph();
+    calculateBeamY(h, x) {
+        return this.calculateBeamYWithDirection(h, x, this.getBeamDirection(h));
     }
-    doLayout() {
-        this._slurs.clear();
-        this._effectSlurs = [];
-        super.doLayout();
+    createPreBeatGlyphs() {
+        super.createPreBeatGlyphs();
+        this.addPreBeatGlyph(new BarLineGlyph(false, this.bar.staff.track.score.stylesheet.extendBarLines));
+        this.createLinePreBeatGlyphs();
+        this.addPreBeatGlyph(new BarNumberGlyph(0, this.getLineHeight(-0.5), this.bar.index + 1));
     }
-    createTies(n) {
-        // create a tie if any effect requires it
-        if (!n.isVisible) {
-            return;
-        }
-        if (n.isTieOrigin && n.tieDestination.isVisible && !this._slurs.has('numbered.tie')) {
-            const tie = new NumberedTieGlyph(`numbered.tie.${n.beat.id}`, n, n.tieDestination, false);
-            this.addTie(tie);
-            this._slurs.set(tie.slurEffectId, tie);
-        }
-        if (n.isTieDestination) {
-            const tie = new NumberedTieGlyph(`numbered.tie.${n.tieOrigin.beat.id}`, n.tieOrigin, n, true);
-            this.addTie(tie);
-        }
-        if (n.isLeftHandTapped &&
-            !n.isHammerPullDestination &&
-            !this._slurs.has(`numbered.tie.leftHandTap.${n.beat.id}`)) {
-            const tapSlur = new NumberedTieGlyph(`numbered.tie.leftHandTap.${n.beat.id}`, n, n, false);
-            this.addTie(tapSlur);
-            this._slurs.set(tapSlur.slurEffectId, tapSlur);
+    createPostBeatGlyphs() {
+        super.createPostBeatGlyphs();
+        const lastBar = this.lastBar;
+        this.addPostBeatGlyph(new BarLineGlyph(true, this.bar.staff.track.score.stylesheet.extendBarLines));
+        if (lastBar.masterBar.isRepeatEnd && lastBar.masterBar.repeatCount > 2) {
+            this.addPostBeatGlyph(new RepeatCountGlyph(0, this.getLineHeight(-0.5), this.bar.masterBar.repeatCount));
         }
-        // start effect slur on first beat
-        if (n.isEffectSlurOrigin && n.effectSlurDestination) {
-            let expanded = false;
-            for (const slur of this._effectSlurs) {
-                if (slur.tryExpand(n, n.effectSlurDestination, false, false)) {
-                    expanded = true;
-                    break;
-                }
-            }
-            if (!expanded) {
-                const effectSlur = new NumberedSlurGlyph(`numbered.slur.effect`, n, n.effectSlurDestination, false, false);
-                this._effectSlurs.push(effectSlur);
-                this.addTie(effectSlur);
-                this._slurs.set(effectSlur.slurEffectId, effectSlur);
-                this._slurs.set('numbered.slur.effect', effectSlur);
-            }
+    }
+    paintBar(cx, cy, canvas, h, beamsElement) {
+        const direction = this.getBeamDirection(h);
+        const isGrace = h.graceType !== GraceType.None;
+        const scaleMod = isGrace ? EngravingSettings.GraceScale : 1;
+        let barSpacing = (this.beamSpacing + this.beamThickness) * scaleMod;
+        let barSize = this.beamThickness * scaleMod;
+        if (direction === BeamDirection.Down) {
+            barSpacing = -barSpacing;
+            barSize = -barSize;
         }
-        // end effect slur on last beat
-        if (n.isEffectSlurDestination && n.effectSlurOrigin) {
-            let expanded = false;
-            for (const slur of this._effectSlurs) {
-                if (slur.tryExpand(n.effectSlurOrigin, n, false, true)) {
-                    expanded = true;
-                    break;
-                }
-            }
-            if (!expanded) {
-                const effectSlur = new NumberedSlurGlyph(`numbered.slur.effect`, n.effectSlurOrigin, n, false, true);
-                this._effectSlurs.push(effectSlur);
-                this.addTie(effectSlur);
-                this._slurs.set(effectSlur.slurEffectId, effectSlur);
-                this._slurs.set('numbered.slur.effect', effectSlur);
+        for (let i = 0, j = h.beats.length; i < j; i++) {
+            const beat = h.beats[i];
+            if (beat.deadSlapped) {
+                continue;
             }
-        }
-    }
-}
-
-/**
- * @internal
- */
-class NumberedKeySignatureGlyph extends Glyph {
-    _keySignature;
-    _keySignatureType;
-    _text = '';
-    _accidental = AccidentalType.None;
-    _accidentalOffset = 0;
-    constructor(x, y, keySignature, keySignatureType) {
-        super(x, y);
-        this._keySignature = keySignature;
-        this._keySignatureType = keySignatureType;
-    }
-    doLayout() {
-        super.doLayout();
-        const text = '1 = ';
-        let text2 = '';
-        let accidental = AccidentalType.None;
-        switch (this._keySignatureType) {
-            case KeySignatureType.Major:
-                switch (this._keySignature) {
-                    case KeySignature.Cb:
-                        text2 = '  C';
-                        accidental = AccidentalType.Flat;
-                        break;
-                    case KeySignature.Gb:
-                        text2 = '  G';
-                        accidental = AccidentalType.Flat;
-                        break;
-                    case KeySignature.Db:
-                        text2 = '  D';
-                        accidental = AccidentalType.Flat;
-                        break;
-                    case KeySignature.Ab:
-                        text2 = '  A';
-                        accidental = AccidentalType.Flat;
-                        break;
-                    case KeySignature.Eb:
-                        text2 = '  E';
-                        accidental = AccidentalType.Flat;
-                        break;
-                    case KeySignature.Bb:
-                        text2 = '  B';
-                        accidental = AccidentalType.Flat;
-                        break;
-                    case KeySignature.F:
-                        text2 = 'F';
-                        break;
-                    case KeySignature.C:
-                        text2 = 'C';
-                        accidental = AccidentalType.None;
-                        break;
-                    case KeySignature.G:
-                        text2 = 'G';
-                        accidental = AccidentalType.None;
-                        break;
-                    case KeySignature.D:
-                        text2 = 'D';
-                        accidental = AccidentalType.None;
-                        break;
-                    case KeySignature.A:
-                        text2 = 'A';
-                        accidental = AccidentalType.None;
-                        break;
-                    case KeySignature.E:
-                        text2 = 'E';
-                        accidental = AccidentalType.None;
-                        break;
-                    case KeySignature.B:
-                        text2 = 'B';
-                        accidental = AccidentalType.None;
-                        break;
-                    case KeySignature.FSharp:
-                        text2 = '  F';
-                        accidental = AccidentalType.Sharp;
-                        break;
-                    case KeySignature.CSharp:
-                        text2 = '  C';
-                        accidental = AccidentalType.Sharp;
-                        break;
-                }
-                break;
-            case KeySignatureType.Minor:
-                switch (this._keySignature) {
-                    case KeySignature.Cb:
-                        text2 = '  a';
-                        accidental = AccidentalType.Flat;
-                        break;
-                    case KeySignature.Gb:
-                        text2 = '  e';
-                        accidental = AccidentalType.Flat;
-                        break;
-                    case KeySignature.Db:
-                        text2 = '  b';
-                        accidental = AccidentalType.Flat;
-                        break;
-                    case KeySignature.Ab:
-                        text2 = 'f';
-                        accidental = AccidentalType.None;
-                        break;
-                    case KeySignature.Eb:
-                        text2 = 'c';
-                        accidental = AccidentalType.None;
-                        break;
-                    case KeySignature.Bb:
-                        text2 = 'g';
-                        accidental = AccidentalType.None;
-                        break;
-                    case KeySignature.F:
-                        text2 = 'd';
-                        break;
-                    case KeySignature.C:
-                        text2 = 'a';
-                        accidental = AccidentalType.None;
-                        break;
-                    case KeySignature.G:
-                        text2 = 'e';
-                        accidental = AccidentalType.None;
-                        break;
-                    case KeySignature.D:
-                        text2 = 'b';
-                        accidental = AccidentalType.None;
-                        break;
-                    case KeySignature.A:
-                        text2 = '  f';
-                        accidental = AccidentalType.Sharp;
-                        break;
-                    case KeySignature.E:
-                        text2 = '  c';
-                        accidental = AccidentalType.Sharp;
-                        break;
-                    case KeySignature.B:
-                        text2 = '  g';
-                        accidental = AccidentalType.Sharp;
-                        break;
-                    case KeySignature.FSharp:
-                        text2 = '  d';
-                        accidental = AccidentalType.Sharp;
-                        break;
-                    case KeySignature.CSharp:
-                        text2 = '  a';
-                        accidental = AccidentalType.Sharp;
-                        break;
+            const beatLineX = this.getBeatX(beat, BeatXPosition.Stem);
+            const y1 = cy + this.y + this.getBarLineStart(beat, direction);
+            // ensure we are pixel aligned on the end of the stem to avoid anti-aliasing artifacts
+            // when combining stems and beams on sub-pixel level
+            const y2 = (cy + this.y + this.calculateBeamY(h, beatLineX)) | 0;
+            if (y1 < y2) {
+                this.paintBeamingStem(beat, cy + this.y, cx + this.x + beatLineX, y1, y2, canvas);
+            }
+            else {
+                this.paintBeamingStem(beat, cy + this.y, cx + this.x + beatLineX, y2, y1, canvas);
+            }
+            const _ = ElementStyleHelper.beat(canvas, beamsElement, beat);
+            try {
+                const brokenBarOffset = this.smuflMetrics.brokenBeamWidth * scaleMod;
+                const barCount = ModelUtils.getIndex(beat.duration) - 2;
+                const barStart = cy + this.y;
+                for (let barIndex = 0; barIndex < barCount; barIndex++) {
+                    let barStartX = 0;
+                    let barEndX = 0;
+                    let barStartY = 0;
+                    let barEndY = 0;
+                    const barY = barStart + barIndex * barSpacing;
+                    //
+                    // Bar to Next?
+                    //
+                    if (i < h.beats.length - 1) {
+                        const isFullBarJoin = BeamingHelper.isFullBarJoin(beat, h.beats[i + 1], barIndex);
+                        // force two broken bars on secondary (last) beam?
+                        if (barIndex === barCount - 1 &&
+                            isFullBarJoin &&
+                            beat.beamingMode === BeatBeamingMode.ForceSplitOnSecondaryToNext) {
+                            // start part
+                            barStartX = beatLineX;
+                            barEndX = barStartX + brokenBarOffset;
+                            barStartY = barY + this.calculateBeamY(h, barStartX);
+                            barEndY = barY + this.calculateBeamY(h, barEndX);
+                            LineBarRenderer.paintSingleBar(canvas, cx + this.x + barStartX, barStartY, cx + this.x + barEndX, barEndY, barSize);
+                            // end part
+                            barEndX = this.getBeatX(h.beats[i + 1], BeatXPosition.Stem);
+                            barStartX = barEndX - brokenBarOffset;
+                            barStartY = barY + this.calculateBeamY(h, barStartX);
+                            barEndY = barY + this.calculateBeamY(h, barEndX);
+                            LineBarRenderer.paintSingleBar(canvas, cx + this.x + barStartX, barStartY, cx + this.x + barEndX, barEndY, barSize);
+                        }
+                        else {
+                            if (isFullBarJoin) {
+                                // full bar?
+                                barStartX = beatLineX;
+                                barEndX = this.getBeatX(h.beats[i + 1], BeatXPosition.Stem);
+                            }
+                            else if (i === 0 || !BeamingHelper.isFullBarJoin(h.beats[i - 1], beat, barIndex)) {
+                                barStartX = beatLineX;
+                                barEndX = barStartX + brokenBarOffset;
+                            }
+                            else {
+                                continue;
+                            }
+                            barStartY = barY + this.calculateBeamY(h, barStartX);
+                            barEndY = barY + this.calculateBeamY(h, barEndX);
+                            // ensure we are pixel aligned on the end of the stem to avoid anti-aliasing artifacts
+                            // when combining stems and beams on sub-pixel level
+                            if (barIndex === 0) {
+                                barStartY = barStartY | 0;
+                                barEndY = barEndY | 0;
+                            }
+                            LineBarRenderer.paintSingleBar(canvas, cx + this.x + barStartX, barStartY, cx + this.x + barEndX, barEndY, barSize);
+                        }
+                    }
+                    else if (i > 0 && !BeamingHelper.isFullBarJoin(beat, h.beats[i - 1], barIndex)) {
+                        barStartX = beatLineX - brokenBarOffset;
+                        barEndX = beatLineX;
+                        barEndX = beatLineX;
+                        barStartY = barY + this.calculateBeamY(h, barStartX);
+                        barEndY = barY + this.calculateBeamY(h, barEndX);
+                        LineBarRenderer.paintSingleBar(canvas, cx + this.x + barStartX, barStartY, cx + this.x + barEndX, barEndY, barSize);
+                    }
                 }
-                break;
-        }
-        this._text = text + text2;
-        this._accidental = accidental;
-        const c = this.renderer.scoreRenderer.canvas;
-        const res = this.renderer.resources;
-        c.font = res.numberedNotationFont;
-        this._accidentalOffset = c.measureText(text).width;
-        this.width = c.measureText(text + text2).width;
-    }
-    paint(cx, cy, canvas) {
-        const _ = ElementStyleHelper.bar(canvas, BarSubElement.NumberedKeySignature, this.renderer.bar);
-        try {
-            const res = this.renderer.resources;
-            canvas.font = res.numberedNotationFont;
-            canvas.textBaseline = TextBaseline.Middle;
-            canvas.fillText(this._text, cx + this.x, cy + this.y);
-            if (this._accidental !== AccidentalType.None) {
-                CanvasHelper.fillMusicFontSymbolSafe(canvas, cx + this.x + this._accidentalOffset, cy + this.y, 1, AccidentalGlyph.getMusicSymbol(this._accidental), false);
+            }
+            finally {
+                _?.[Symbol.dispose]?.();
             }
         }
-        finally {
-            _?.[Symbol.dispose]?.();
+        if (h.graceType === GraceType.BeforeBeat) {
+            const beatLineX = this.getBeatX(h.beats[0], BeatXPosition.Stem);
+            const flagWidth = this.smuflMetrics.glyphWidths.get(MusicFontSymbol.Flag8thUp) * EngravingSettings.GraceScale;
+            let slashY = (cy + this.y + this.calculateBeamY(h, beatLineX)) | 0;
+            slashY += barSize + barSpacing;
+            if (direction === BeamDirection.Down) {
+                CanvasHelper.fillMusicFontSymbolSafe(canvas, cx + this.x + beatLineX + flagWidth / 2, slashY, EngravingSettings.GraceScale, MusicFontSymbol.GraceNoteSlashStemDown, true);
+            }
+            else {
+                CanvasHelper.fillMusicFontSymbolSafe(canvas, cx + this.x + beatLineX + flagWidth / 2, slashY, EngravingSettings.GraceScale, MusicFontSymbol.GraceNoteSlashStemUp, true);
+            }
         }
     }
-}
-
-/**
- * @internal
- */
-class GhostParenthesisGlyph extends Glyph {
-    _isOpen;
-    colorOverride;
-    constructor(isOpen) {
-        super(0, 0);
-        this._isOpen = isOpen;
-    }
-    doLayout() {
-        super.doLayout();
-        this.width =
-            this.renderer.smuflMetrics.ghostParenthesisWidth + this.renderer.smuflMetrics.ghostParenthesisPadding;
+    static paintSingleBar(canvas, x1, y1, x2, y2, size) {
+        canvas.beginPath();
+        canvas.moveTo(x1, y1);
+        canvas.lineTo(x2, y2);
+        canvas.lineTo(x2, y2 + size);
+        canvas.lineTo(x1, y1 + size);
+        canvas.closePath();
+        canvas.fill();
     }
-    paint(cx, cy, canvas) {
-        const c = canvas.color;
-        if (this.colorOverride) {
-            canvas.color = this.colorOverride;
+    calculateBeamingOverflows(rendererTop, rendererBottom) {
+        let maxNoteY = 0;
+        let minNoteY = 0;
+        const noteOverflowPadding = this.getLineHeight(0.5);
+        for (const v of this.helpers.beamHelpers) {
+            for (const h of v) {
+                if (!this.shouldPaintBeamingHelper(h)) ;
+                else if (h.beats.length === 1 && h.beats[0].duration >= Duration.Half) {
+                    const tupletDirection = this.getTupletBeamDirection(h);
+                    if (h.direction === BeamDirection.Up) {
+                        let topY = this.getFlagTopY(h.beats[0], h.direction);
+                        if (h.hasTuplet && tupletDirection === h.direction) {
+                            topY -= this.tupletSize + this.tupletOffset;
+                        }
+                        if (topY < maxNoteY) {
+                            maxNoteY = topY;
+                        }
+                        if (h.hasTuplet && tupletDirection !== h.direction) {
+                            let bottomY = this.getFlagBottomY(h.beats[0], tupletDirection);
+                            bottomY += this.tupletSize + this.tupletOffset;
+                            if (bottomY > minNoteY) {
+                                minNoteY = bottomY;
+                            }
+                        }
+                    }
+                    else {
+                        let bottomY = this.getFlagBottomY(h.beats[0], h.direction);
+                        if (h.hasTuplet && tupletDirection === h.direction) {
+                            bottomY += this.tupletSize + this.tupletOffset;
+                        }
+                        if (bottomY > minNoteY) {
+                            minNoteY = bottomY;
+                        }
+                        if (h.hasTuplet && tupletDirection !== h.direction) {
+                            let topY = this.getFlagTopY(h.beats[0], tupletDirection);
+                            topY -= this.tupletSize + this.tupletOffset;
+                            if (topY < maxNoteY) {
+                                maxNoteY = topY;
+                            }
+                        }
+                    }
+                }
+                else {
+                    this.ensureBeamDrawingInfo(h, h.direction);
+                    const drawingInfo = h.drawingInfos.get(h.direction);
+                    const tupletDirection = this.getTupletBeamDirection(h);
+                    if (h.direction === BeamDirection.Up) {
+                        let topY = Math.min(drawingInfo.startY, drawingInfo.endY);
+                        if (h.hasTuplet && tupletDirection === h.direction) {
+                            topY -= this.tupletSize + this.tupletOffset;
+                        }
+                        if (topY < maxNoteY) {
+                            maxNoteY = topY;
+                        }
+                        let bottomY = this.getBarLineStart(h.beatOfLowestNote, h.direction) + noteOverflowPadding;
+                        if (h.hasTuplet && tupletDirection !== h.direction) {
+                            bottomY += this.tupletSize + this.tupletOffset;
+                        }
+                        if (bottomY > minNoteY) {
+                            minNoteY = bottomY;
+                        }
+                    }
+                    else {
+                        let bottomY = Math.max(drawingInfo.startY, drawingInfo.endY);
+                        if (h.hasTuplet && tupletDirection === h.direction) {
+                            bottomY += this.tupletSize + this.tupletOffset;
+                        }
+                        if (bottomY > minNoteY) {
+                            minNoteY = bottomY;
+                        }
+                        let topY = this.getBarLineStart(h.beatOfHighestNote, h.direction) - noteOverflowPadding;
+                        if (h.hasTuplet && tupletDirection !== h.direction) {
+                            topY -= this.tupletSize + this.tupletOffset;
+                        }
+                        if (topY < maxNoteY) {
+                            maxNoteY = topY;
+                        }
+                    }
+                }
+            }
         }
-        if (this._isOpen) {
-            TieGlyph.paintTie(canvas, 1, cx + this.x + this.renderer.smuflMetrics.ghostParenthesisWidth, cy + this.y + this.height, cx + this.x + this.renderer.smuflMetrics.ghostParenthesisWidth, cy + this.y, false, this.renderer.smuflMetrics.ghostParenthesisWidth / 2, this.renderer.smuflMetrics.tieMidpointThickness);
+        if (maxNoteY < rendererTop) {
+            this.registerOverflowTop(Math.abs(maxNoteY));
         }
-        else {
-            TieGlyph.paintTie(canvas, 1, cx + this.x + this.renderer.smuflMetrics.ghostParenthesisPadding, cy + this.y, cx + this.x + this.renderer.smuflMetrics.ghostParenthesisPadding, cy + this.y + this.height, false, this.renderer.smuflMetrics.ghostParenthesisWidth / 2, this.renderer.smuflMetrics.tieMidpointThickness);
+        if (minNoteY > rendererBottom) {
+            this.registerOverflowBottom(Math.abs(minNoteY) - rendererBottom);
         }
-        canvas.color = c;
-    }
-}
-
-/**
- * @internal
- */
-class TimeSignatureGlyph extends GlyphGroup {
-    _numerator = 0;
-    _denominator = 0;
-    _isCommon;
-    _isFreeTime;
-    barSubElement = BarSubElement.StandardNotationTimeSignature;
-    constructor(x, y, numerator, denominator, isCommon, isFreeTime) {
-        super(x, y);
-        this._numerator = numerator;
-        this._denominator = denominator;
-        this._isCommon = isCommon;
-        this._isFreeTime = isFreeTime;
     }
-    paint(cx, cy, canvas) {
-        const _ = ElementStyleHelper.bar(canvas, this.barSubElement, this.renderer.bar);
-        try {
-            super.paint(cx, cy, canvas);
+    initializeBeamDrawingInfo(h, direction) {
+        const drawingInfo = new BeamingHelperDrawInfo();
+        const firstBeat = h.beats[0];
+        const lastBeat = h.beats[h.beats.length - 1];
+        // 1. put direct diagonal line.
+        drawingInfo.startBeat = firstBeat;
+        drawingInfo.startX = this.getBeatX(firstBeat, BeatXPosition.Stem);
+        drawingInfo.startY =
+            direction === BeamDirection.Up
+                ? this.getFlagTopY(firstBeat, direction)
+                : this.getFlagBottomY(firstBeat, direction);
+        drawingInfo.endBeat = lastBeat;
+        drawingInfo.endX = this.getBeatX(lastBeat, BeatXPosition.Stem);
+        drawingInfo.endY =
+            direction === BeamDirection.Up
+                ? this.getFlagTopY(lastBeat, direction)
+                : this.getFlagBottomY(lastBeat, direction);
+        // 2. ensure max slope
+        // we use the min/max notes to place the beam along their real position
+        // we only want a maximum of 10 offset for their gradient
+        const maxSlope = this.smuflMetrics.oneStaffSpace;
+        if (direction === BeamDirection.Down &&
+            drawingInfo.startY > drawingInfo.endY &&
+            drawingInfo.startY - drawingInfo.endY > maxSlope) {
+            drawingInfo.endY = drawingInfo.startY - maxSlope;
         }
-        finally {
-            _?.[Symbol.dispose]?.();
+        if (direction === BeamDirection.Down &&
+            drawingInfo.endY > drawingInfo.startY &&
+            drawingInfo.endY - drawingInfo.startY > maxSlope) {
+            drawingInfo.startY = drawingInfo.endY - maxSlope;
         }
-    }
-    doLayout() {
-        if (this._isCommon && this._numerator === 2 && this._denominator === 2) {
-            const common = new MusicFontGlyph(0, 0, this.commonScale, MusicFontSymbol.TimeSigCutCommon);
-            this.addGlyph(common);
-            super.doLayout();
+        if (direction === BeamDirection.Up &&
+            drawingInfo.startY < drawingInfo.endY &&
+            drawingInfo.endY - drawingInfo.startY > maxSlope) {
+            drawingInfo.endY = drawingInfo.startY + maxSlope;
         }
-        else if (this._isCommon && this._numerator === 4 && this._denominator === 4) {
-            const common = new MusicFontGlyph(0, 0, this.commonScale, MusicFontSymbol.TimeSigCommon);
-            this.addGlyph(common);
-            super.doLayout();
+        if (direction === BeamDirection.Up &&
+            drawingInfo.endY < drawingInfo.startY &&
+            drawingInfo.startY - drawingInfo.endY > maxSlope) {
+            drawingInfo.startY = drawingInfo.endY + maxSlope;
         }
-        else {
-            const numerator = new NumberGlyph(0, 0, this._numerator, TextBaseline.Top, this.numberScale);
-            const denominator = new NumberGlyph(0, 0, this._denominator, TextBaseline.Bottom, this.numberScale);
-            this.addGlyph(numerator);
-            this.addGlyph(denominator);
-            super.doLayout();
-            const glyphSpace = this.width;
-            numerator.x = (glyphSpace - numerator.width) / 2;
-            denominator.x = (glyphSpace - denominator.width) / 2;
-            this.width = Math.max(numerator.x + numerator.width, denominator.x + denominator.width);
+        return drawingInfo;
+    }
+    get beamSpacing() {
+        return this.smuflMetrics.beamSpacing;
+    }
+    get beamThickness() {
+        return this.smuflMetrics.beamThickness;
+    }
+    ensureBeamDrawingInfo(h, direction) {
+        if (h.drawingInfos.has(direction)) {
+            return;
         }
-        if (this._isFreeTime) {
-            const numberHeight = this.renderer.smuflMetrics.oneStaffSpace * 2;
-            const openParenthesis = new GhostParenthesisGlyph(true);
-            openParenthesis.renderer = this.renderer;
-            openParenthesis.y = -numberHeight;
-            openParenthesis.height = numberHeight * 2;
-            openParenthesis.doLayout();
-            for (const g of this.glyphs) {
-                g.x += openParenthesis.width;
+        // the beaming logic works like this:
+        // 1. we take the first and last note, add the stem, and put a diagnal line between them.
+        // 2. the height of the diagonal line must not exceed a max height,
+        //    - if this is the case, the line on the more distant note just gets longer
+        // 3. any middle elements (notes or rests) shift this diagonal line up/down to avoid overlaps
+        const drawingInfo = this.initializeBeamDrawingInfo(h, direction);
+        h.drawingInfos.set(direction, drawingInfo);
+        const isRest = h.isRestBeamHelper;
+        const scale = h.graceType !== GraceType.None ? EngravingSettings.GraceScale : 1;
+        const barCount = ModelUtils.getIndex(h.shortestDuration) - 2;
+        // 3. adjust beam drawing order
+        // we can only draw up to 2 beams towards the noteheads, then we have to grow to the other side
+        // here we shift accordingly
+        let barDrawingShift = 0;
+        if (barCount > 2 && !isRest) {
+            const beamSpacing = this.beamSpacing * scale;
+            const beamThickness = this.beamThickness * scale;
+            const totalBarsHeight = barCount * beamThickness + (barCount - 1) * beamSpacing;
+            if (direction === BeamDirection.Up) {
+                const bottomBarY = drawingInfo.startY + 2 * beamThickness + beamSpacing;
+                const barTopY = bottomBarY - totalBarsHeight;
+                const diff = drawingInfo.startY - barTopY;
+                if (diff > 0) {
+                    barDrawingShift = diff * -1;
+                    drawingInfo.startY -= diff;
+                    drawingInfo.endY -= diff;
+                }
+            }
+            else {
+                const topBarY = drawingInfo.startY - 2 * beamThickness + beamSpacing;
+                const barBottomY = topBarY + totalBarsHeight;
+                const diff = barBottomY - drawingInfo.startY;
+                if (diff > 0) {
+                    barDrawingShift = diff;
+                    drawingInfo.startY += diff;
+                    drawingInfo.endY += diff;
+                }
+            }
+        }
+        // 4. let middle elements shift up/down
+        if (h.beats.length > 1) {
+            // check if highest note shifts bar up or down
+            if (direction === BeamDirection.Up) {
+                const yNeededForHighestNote = barDrawingShift + this.getFlagTopY(h.beatOfHighestNote, direction);
+                const yGivenByCurrentValues = drawingInfo.calcY(this.getBeatX(h.beatOfHighestNote, BeatXPosition.Stem));
+                const diff = yGivenByCurrentValues - yNeededForHighestNote;
+                if (diff > 0) {
+                    drawingInfo.startY -= diff;
+                    drawingInfo.endY -= diff;
+                }
+            }
+            else {
+                const yNeededForLowestNote = barDrawingShift + this.getFlagBottomY(h.beatOfLowestNote, direction);
+                const yGivenByCurrentValues = drawingInfo.calcY(this.getBeatX(h.beatOfLowestNote, BeatXPosition.Stem));
+                const diff = yNeededForLowestNote - yGivenByCurrentValues;
+                if (diff > 0) {
+                    drawingInfo.startY += diff;
+                    drawingInfo.endY += diff;
+                }
+            }
+            // check if rest shifts bar up or down
+            let barSpacing = 0;
+            if (h.restBeats.length > 0) {
+                // space needed for the bars, rests need to be below them
+                const scaleMod = h.graceType !== GraceType.None ? EngravingSettings.GraceScale : 1;
+                barSpacing = barCount * (this.beamSpacing + this.beamThickness) * scaleMod;
+            }
+            for (const b of h.restBeats) {
+                // rest beats which are "under" the beam
+                if (b.isRest && b.index < h.beats[h.beats.length - 1].index) {
+                    if (direction === BeamDirection.Up) {
+                        const yNeededForRest = this.getBeatContainer(b).getBoundingBoxTop() - barSpacing;
+                        const yGivenByCurrentValues = drawingInfo.calcY(this.getBeatX(b, BeatXPosition.Stem));
+                        const diff = yGivenByCurrentValues - yNeededForRest;
+                        if (diff > 0) {
+                            drawingInfo.startY -= diff;
+                            drawingInfo.endY -= diff;
+                        }
+                    }
+                    else if (direction === BeamDirection.Down) {
+                        const yNeededForRest = this.getBeatContainer(b).getBoundingBoxBottom() + barSpacing;
+                        const yGivenByCurrentValues = drawingInfo.calcY(this.getBeatX(b, BeatXPosition.Stem));
+                        const diff = yNeededForRest - yGivenByCurrentValues;
+                        if (diff > 0) {
+                            drawingInfo.startY += diff;
+                            drawingInfo.endY += diff;
+                        }
+                    }
+                }
+            }
+            // check if slash shifts bar up or down
+            if (h.slashBeats.length > 0) {
+                for (const b of h.slashBeats) {
+                    const yGivenByCurrentValues = drawingInfo.calcY(this.getBeatX(b, BeatXPosition.Stem));
+                    const yNeededForSlash = h.direction === BeamDirection.Up
+                        ? this.getFlagTopY(b, h.direction)
+                        : this.getFlagBottomY(b, h.direction);
+                    const diff = yNeededForSlash - yGivenByCurrentValues;
+                    if (diff > 0) {
+                        drawingInfo.startY += diff;
+                        drawingInfo.endY += diff;
+                    }
+                }
             }
-            this.width += openParenthesis.width;
-            this.addGlyph(openParenthesis);
-            const closeParenthesis = new GhostParenthesisGlyph(false);
-            closeParenthesis.renderer = this.renderer;
-            closeParenthesis.x = this.width;
-            closeParenthesis.y = -numberHeight;
-            closeParenthesis.height = numberHeight * 2;
-            closeParenthesis.doLayout();
-            this.addGlyph(closeParenthesis);
-            this.width += closeParenthesis.width;
         }
     }
-}
-
-/**
- * @internal
- */
-class ScoreTimeSignatureGlyph extends TimeSignatureGlyph {
-    get commonScale() {
-        return 1;
+    getMinLineOfBeat(_beat) {
+        return 0;
     }
-    get numberScale() {
-        return 1;
+    getMaxLineOfBeat(_beat) {
+        return 0;
     }
 }
 
@@ -67782,27 +68072,9 @@ class NumberedBarRenderer extends LineBarRenderer {
     simpleWhammyOverflow = 0;
     _isOnlyNumbered;
     shortestDuration = Duration.QuadrupleWhole;
-    lowestOctave = null;
-    highestOctave = null;
-    octaves = new Map();
     get dotSpacing() {
         return this.smuflMetrics.glyphHeights.get(MusicFontSymbol.AugmentationDot) * 2;
     }
-    registerOctave(beat, octave) {
-        this.octaves.set(beat, octave);
-        if (this.lowestOctave === null) {
-            this.lowestOctave = octave;
-            this.highestOctave = octave;
-        }
-        else {
-            if (octave < this.lowestOctave) {
-                this.lowestOctave = octave;
-            }
-            if (octave > this.highestOctave) {
-                this.highestOctave = octave;
-            }
-        }
-    }
     get repeatsBarSubElement() {
         return BarSubElement.NumberedRepeats;
     }
@@ -67840,89 +68112,61 @@ class NumberedBarRenderer extends LineBarRenderer {
     get tupletSubElement() {
         return BeatSubElement.NumberedTuplet;
     }
-    doLayout() {
-        super.doLayout();
-        if (this.voiceContainer.tupletGroups.size > 0) {
-            this.registerOverflowTop(this.tupletSize);
-        }
-        if (!this.bar.isEmpty) {
-            const barCount = ModelUtils.getIndex(this.shortestDuration) - 2;
-            const dotSpacing = this.dotSpacing;
-            if (barCount > 0) {
-                const barSpacing = this.smuflMetrics.numberedBarRendererBarSpacing;
-                const barSize = this.smuflMetrics.numberedBarRendererBarSize;
-                const barOverflow = (barCount - 1) * barSpacing + barSize;
-                let dotOverflow = 0;
-                const lowestOctave = this.lowestOctave;
-                if (lowestOctave !== null) {
-                    dotOverflow =
-                        Math.abs(lowestOctave) * dotSpacing +
-                            this.smuflMetrics.glyphHeights.get(MusicFontSymbol.AugmentationDot);
-                }
-                this.registerOverflowBottom(barOverflow + dotOverflow);
-            }
-            const highestOctave = this.highestOctave;
-            if (highestOctave !== null) {
-                const dotOverflow = Math.abs(highestOctave) * dotSpacing +
-                    this.smuflMetrics.glyphHeights.get(MusicFontSymbol.AugmentationDot);
-                this.registerOverflowTop(dotOverflow);
-            }
-        }
+    shouldPaintBeamingHelper(_h) {
+        return true;
     }
     paintFlag(cx, cy, canvas, h, flagsElement) {
         this.paintBar(cx, cy, canvas, h, flagsElement);
     }
     paintBar(cx, cy, canvas, h, flagsElement) {
-        if (h.beats.length === 0) {
+        if (h.beats.length === 0 || h.graceType !== GraceType.None) {
             return;
         }
-        const res = this.resources;
         for (let i = 0, j = h.beats.length; i < j; i++) {
             const beat = h.beats[i];
             const _ = ElementStyleHelper.beat(canvas, flagsElement, beat);
             try {
-                //
-                // draw line
-                //
-                const barSpacing = this.smuflMetrics.numberedBarRendererBarSpacing;
-                const barSize = this.smuflMetrics.numberedBarRendererBarSize;
-                const barCount = ModelUtils.getIndex(beat.duration) - 2;
-                const barStart = cy + this.y;
-                const beatLineX = this.getBeatX(beat, BeatXPosition.PreNotes);
-                const beamY = this.calculateBeamY(h, beatLineX);
-                for (let barIndex = 0; barIndex < barCount; barIndex++) {
-                    let barStartX = 0;
-                    let barEndX = 0;
-                    let barStartY = 0;
-                    const barY = barStart + barIndex * barSpacing;
-                    if (i === h.beats.length - 1) {
-                        barStartX = beatLineX;
-                        barEndX = this.getBeatX(beat, BeatXPosition.PostNotes);
-                    }
-                    else {
-                        barStartX = beatLineX;
-                        barEndX = this.getBeatX(h.beats[i + 1], BeatXPosition.PreNotes);
-                    }
-                    barStartY = barY + beamY;
-                    canvas.fillRect(cx + this.x + barStartX, barStartY, barEndX - barStartX, barSize);
+                const direction = this.getBeamDirection(h);
+                const isGrace = h.graceType !== GraceType.None;
+                const scaleMod = isGrace ? EngravingSettings.GraceScale : 1;
+                let barSpacing = (this.beamSpacing + this.beamThickness) * scaleMod;
+                let barSize = this.beamThickness * scaleMod;
+                if (direction === BeamDirection.Down) {
+                    barSpacing = -barSpacing;
+                    barSize = -barSize;
                 }
-                let dotCount = this.octaves.has(beat) ? this.octaves.get(beat) : 0;
-                const dotSpacing = this.dotSpacing;
-                let dotsY = 0;
-                let dotsOffset = 0;
-                if (dotCount > 0) {
-                    dotsY = barStart + this.getLineY(0) - res.numberedNotationFont.size;
-                    dotsOffset = dotSpacing * -1;
+                let barCount = ModelUtils.getIndex(beat.duration) - 2;
+                let beatLineX = this.getBeatX(beat, BeatXPosition.PreNotes);
+                let barStartX = 0;
+                let barEndX = 0;
+                if (i === h.beats.length - 1) {
+                    barStartX = beatLineX;
+                    barEndX = this.getBeatX(beat, BeatXPosition.PostNotes);
                 }
-                else if (dotCount < 0) {
-                    dotsY = barStart + beamY + barCount * (barSpacing + barSize);
-                    dotsOffset = dotSpacing;
+                else {
+                    barStartX = beatLineX;
+                    barEndX = this.getBeatX(h.beats[i + 1], BeatXPosition.PreNotes);
                 }
-                const dotX = this.getBeatX(beat, BeatXPosition.MiddleNotes);
-                dotCount = Math.abs(dotCount);
-                for (let d = 0; d < dotCount; d++) {
-                    CanvasHelper.fillMusicFontSymbolSafe(canvas, cx + this.x + dotX, dotsY, 1, MusicFontSymbol.AugmentationDot, true);
-                    dotsY += dotsOffset;
+                const barStart = cy + this.y + this.calculateBeamY(h, beatLineX);
+                for (let barIndex = 0; barIndex < barCount; barIndex++) {
+                    const barY = barStart + barIndex * barSpacing;
+                    LineBarRenderer.paintSingleBar(canvas, cx + this.x + barStartX, barY, cx + this.x + barEndX, barY, barSize);
+                }
+                // dashes for additional numbers
+                const container = this.voiceContainer.getBeatContainer(beat);
+                if (container && container.hasAdditionalNumbers) {
+                    for (const additionalNumber of container.iterateAdditionalNumbers()) {
+                        barCount = additionalNumber.barCount;
+                        beatLineX =
+                            this.beatGlyphsStart + additionalNumber.x + additionalNumber.getBeatX(BeatXPosition.PreNotes, false);
+                        for (let barIndex = 0; barIndex < barCount; barIndex++) {
+                            const barY = barStart + barIndex * barSpacing;
+                            const additionalBarEndX = this.beatGlyphsStart +
+                                additionalNumber.x +
+                                additionalNumber.getBeatX(BeatXPosition.PostNotes, false);
+                            LineBarRenderer.paintSingleBar(canvas, cx + this.x + beatLineX, barY, cx + this.x + additionalBarEndX, barY, barSize);
+                        }
+                    }
                 }
             }
             finally {
@@ -67930,20 +68174,58 @@ class NumberedBarRenderer extends LineBarRenderer {
             }
         }
     }
+    calculateOverflows(rendererTop, rendererBottom) {
+        super.calculateOverflows(rendererTop, rendererBottom);
+        if (this.bar.isEmpty) {
+            return;
+        }
+        this.calculateBeamingOverflows(rendererTop, rendererBottom);
+    }
     getNoteLine(_note) {
         return 0;
     }
-    get tupletOffset() {
-        // Shift tuplet above the number by:
-        // * 1 to get back to the center (calculateBeamYWithDirection places the beam below the number)
-        // * 1.5 to get back to the top of the number
-        return super.tupletOffset + this.resources.numberedNotationFont.size * 1.5;
+    _calculateBarHeight(beat) {
+        const barCount = ModelUtils.getIndex(beat.duration) - 2;
+        let barHeight = 0;
+        if (barCount > 0) {
+            const smufl = this.smuflMetrics;
+            barHeight =
+                smufl.numberedBarRendererBarSpacing +
+                    barCount * (smufl.numberedBarRendererBarSpacing + smufl.numberedBarRendererBarSize);
+        }
+        return barHeight;
     }
-    getFlagTopY(_beat, _direction) {
-        return this.getLineY(0) - this.resources.numberedNotationFont.size;
+    getFlagTopY(beat, direction) {
+        const barHeight = this._calculateBarHeight(beat);
+        const container = this.voiceContainer.getBeatContainer(beat);
+        if (!container) {
+            if (direction === BeamDirection.Up) {
+                return this.voiceContainer.getBoundingBoxTop() - barHeight;
+            }
+            return this.voiceContainer.getBoundingBoxBottom();
+        }
+        if (direction === BeamDirection.Up) {
+            return container.getBoundingBoxTop() - barHeight;
+        }
+        return container.getBoundingBoxBottom();
     }
-    getFlagBottomY(_beat, _direction) {
-        return this.getLineY(0) - this.resources.numberedNotationFont.size;
+    getFlagBottomY(beat, direction) {
+        const barHeight = this._calculateBarHeight(beat);
+        const container = this.voiceContainer.getBeatContainer(beat);
+        if (!container) {
+            if (direction === BeamDirection.Down) {
+                return this.voiceContainer.getBoundingBoxBottom() + barHeight;
+            }
+            return this.getLineY(0);
+        }
+        if (direction === BeamDirection.Down) {
+            return container.getBoundingBoxBottom() + barHeight;
+        }
+        return this.getLineY(0);
+    }
+    completeBeamingHelper(helper) {
+        super.completeBeamingHelper(helper);
+        helper.direction = BeamDirection.Down;
     }
     getBeamDirection(_helper) {
         return BeamDirection.Down;
@@ -67958,13 +68240,26 @@ class NumberedBarRenderer extends LineBarRenderer {
         }
         return y;
     }
-    calculateBeamYWithDirection(_h, _x, _direction) {
-        const res = this.resources.numberedNotationFont;
-        return this.getLineY(0) + res.size;
+    calculateBeamYWithDirection(h, _x, direction) {
+        if (h.beats.length === 0) {
+            return this.getLineY(0);
+        }
+        this.ensureBeamDrawingInfo(h, direction);
+        const info = h.drawingInfos.get(direction);
+        if (direction === BeamDirection.Up) {
+            return Math.min(info.startY, info.endY);
+        }
+        else {
+            return Math.max(info.startY, info.endY);
+        }
     }
-    getBarLineStart(_beat, _direction) {
-        const noteHeadHeight = this.smuflMetrics.glyphHeights.get(MusicFontSymbol.NoteheadBlack);
-        return this.getLineY(0) - noteHeadHeight / 2;
+    getBarLineStart(beat, _direction) {
+        // NOTE: this is only for the overflow calculation, this renderer has a custom bar drawing logic
+        const container = this.voiceContainer.getBeatContainer(beat);
+        if (!container) {
+            return this.voiceContainer.getBoundingBoxTop();
+        }
+        return container.getBoundingBoxTop();
     }
     createPreBeatGlyphs() {
         this.wasFirstOfStaff = this.isFirstOfStaff;
@@ -67972,14 +68267,10 @@ class NumberedBarRenderer extends LineBarRenderer {
             this.addPreBeatGlyph(new BarLineGlyph(false, this.bar.staff.track.score.stylesheet.extendBarLines));
         }
         this.createLinePreBeatGlyphs();
+        this.createStartSpacing();
         this.addPreBeatGlyph(new BarNumberGlyph(0, this.getLineHeight(-0.5), this.bar.index + 1));
     }
     createLinePreBeatGlyphs() {
-        // Key signature
-        if (!this.bar.previousBar || this.bar.keySignature !== this.bar.previousBar.keySignature) {
-            this.createStartSpacing();
-            this._createKeySignatureGlyphs();
-        }
         if (this._isOnlyNumbered &&
             (!this.bar.previousBar ||
                 (this.bar.previousBar &&
@@ -67995,11 +68286,7 @@ class NumberedBarRenderer extends LineBarRenderer {
             this._createTimeSignatureGlyphs();
         }
     }
-    _createKeySignatureGlyphs() {
-        this.addPreBeatGlyph(new NumberedKeySignatureGlyph(0, this.getLineY(0), this.bar.keySignature, this.bar.keySignatureType));
-    }
     _createTimeSignatureGlyphs() {
-        this.addPreBeatGlyph(new SpacingGlyph(0, 0, this.smuflMetrics.oneStaffSpace));
         const masterBar = this.bar.masterBar;
         const g = new ScoreTimeSignatureGlyph(0, this.getLineY(0), masterBar.timeSignatureNumerator, masterBar.timeSignatureDenominator, masterBar.timeSignatureCommon, masterBar.isFreeTime &&
             (masterBar.previousMasterBar == null ||
@@ -68017,12 +68304,40 @@ class NumberedBarRenderer extends LineBarRenderer {
             return;
         }
         super.createVoiceGlyphs(v);
+        const absoluteStart = this.bar.masterBar.start;
         for (const b of v.beats) {
-            this.addBeatGlyph(new NumberedBeatContainerGlyph(b));
+            const mainContainer = new NumberedBeatContainerGlyph(b);
+            this.addBeatGlyph(mainContainer);
+            // create dashes and filler glyphs
+            // we want a glyph on every quarter tick
+            if (b.duration < Duration.Quarter) {
+                const endTick = b.displayStart + b.displayDuration;
+                let dashTick = b.displayStart + MidiUtils.QuarterTime;
+                while (dashTick < endTick) {
+                    const isFullTick = endTick - dashTick >= MidiUtils.QuarterTime;
+                    if (isFullTick) {
+                        const dash = new NumberedDashBeatContainerGlyph(v.index, absoluteStart + dashTick);
+                        this.addBeatGlyph(dash);
+                        mainContainer.addDash(dash);
+                    }
+                    else if (b.duration === Duration.Half && b.dots > 1) {
+                        const remainingTickNumber = new NumberedNoteBeatContainerGlyphBase(b, absoluteStart + dashTick, endTick - dashTick);
+                        this.addBeatGlyph(remainingTickNumber);
+                        mainContainer.addNotes(remainingTickNumber);
+                    }
+                    dashTick += MidiUtils.QuarterTime;
+                }
+            }
         }
     }
     paintBeamingStem(_beat, _cy, _x, _topY, _bottomY, _canvas) {
     }
+    get beamSpacing() {
+        return this.smuflMetrics.numberedBarRendererBarSpacing;
+    }
+    get beamThickness() {
+        return this.smuflMetrics.numberedBarRendererBarSize;
+    }
     paintBeamHelper(cx, cy, canvas, h, flagsElement, beamsElement) {
         if (h.voice?.index === 0) {
             super.paintBeamHelper(cx, cy, canvas, h, flagsElement, beamsElement);
@@ -69554,6 +69869,7 @@ class ScoreWhammyBarGlyph extends ScoreHelperNotesBaseGlyph {
                 break;
         }
         super.doLayout();
+        this.width = this.width / 2;
     }
     paint(cx, cy, canvas) {
         const beat = this._beat;
@@ -70312,6 +70628,10 @@ class ScoreBendGlyph extends ScoreHelperNotesBaseGlyph {
         this._beat = container.beat;
         this._container = container;
     }
+    doLayout() {
+        super.doLayout();
+        this.width = 0;
+    }
     getBoundingBoxTop() {
         return super.getBoundingBoxTop() - this._calculateMaxSlurHeight(BeamDirection.Up);
     }
@@ -71171,7 +71491,6 @@ class ScoreBeatContainerGlyph extends BeatContainerGlyph {
     updateWidth() {
         super.updateWidth();
         this.width += this._flagStretch;
-        this.minWidth += this._flagStretch;
     }
 }
 
@@ -71840,7 +72159,6 @@ class SlashBeatContainerGlyph extends BeatContainerGlyph {
     updateWidth() {
         super.updateWidth();
         this.width += this._flagStretch;
-        this.minWidth += this._flagStretch;
     }
 }
 
@@ -73589,7 +73907,9 @@ class Environment {
         ]),
         //
         // Numbered
-        new NumberedBarRendererFactory([]),
+        new NumberedBarRendererFactory([
+            { effect: new NumberedBarKeySignatureEffectInfo(), mode: EffectBandMode.OwnedTop, order: 1000 }
+        ]),
         //
         // Tabs
         new TabBarRendererFactory([