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

package/dist/alphaTab.js

@@ -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.
  *
@@ -209,9 +209,9 @@
      * @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}`);
@@ -1317,6 +1317,10 @@
          * 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";
     })(exports.NotationElement || (exports.NotationElement = {}));
     /**
      * The notation settings control how various music notation elements are shown and behaving
@@ -39721,7 +39725,7 @@
             //
             // 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;
@@ -39790,7 +39794,7 @@
          */
         numberedBarRendererBarSpacing = 0;
         /**
-         * The size of the dashed drawn in numbered notation to indicate the durations.
+         * The padding minimum between the duration dashes.
          */
         numberedDashGlyphPadding = 0;
         /**
@@ -48571,10 +48575,13 @@
      */
     class BeatContainerGlyph extends BeatContainerGlyphBase {
         _ties = [];
+        _tieWidth = 0;
         beat;
         preNotes;
         onNotes;
-        minWidth = 0;
+        get beatId() {
+            return this.beat.id;
+        }
         get isLastOfVoice() {
             return this.beat.isLastOfVoice;
         }
@@ -48635,7 +48642,7 @@
             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;
@@ -48665,16 +48672,19 @@
             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;
@@ -48682,8 +48692,9 @@
                     tieWidth = tg.width;
                 }
             }
-            this.minWidth += tieWidth;
-            this.width = this.minWidth;
+            this._tieWidth = tieWidth;
+            width += tieWidth;
+            this.width = width;
         }
         createTies(_n) {
         }
@@ -58589,6 +58600,244 @@
         }
     }
 
+    /**
+     * @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 exports.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
      */
@@ -59341,6 +59590,7 @@
     class MultiVoiceContainerGlyph extends Glyph {
         static KeySizeBeat = 'Beat';
         voiceDrawOrder;
+        _beatGlyphLookup = new Map();
         beatGlyphs = new Map();
         tupletGroups = new Map();
         constructor() {
@@ -59473,6 +59723,10 @@
                 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;
@@ -59518,11 +59772,10 @@
             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) {
@@ -62145,6 +62398,9 @@
         get absoluteDisplayStart() {
             return this.renderer.bar.masterBar.start;
         }
+        get beatId() {
+            return -1;
+        }
         get onTimeX() {
             return 0;
         }
@@ -62216,7 +62472,6 @@
                     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:
@@ -63308,13 +63563,13 @@
         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);
@@ -64001,6 +64256,7 @@
             this.originalTopOffset = topY;
             this.originalBottomOffset = bottomY;
             this.height = topY + bottomY;
+            this.width = 0;
         }
         _getOffset(value) {
             if (value === 0) {
@@ -65827,6 +66083,12 @@
             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;
@@ -65842,6 +66104,7 @@
                 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;
             }
@@ -65854,47 +66117,87 @@
     /**
      * @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;
             }
         }
     }
@@ -65902,31 +66205,76 @@
     /**
      * @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]?.();
@@ -65935,1847 +66283,1789 @@
     }
 
     /**
-     * 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 === exports.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 === exports.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;
         }
     }
 
@@ -67788,27 +68078,9 @@
         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;
         }
@@ -67846,89 +68118,61 @@
         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 {
@@ -67936,20 +68180,58 @@
                 }
             }
         }
+        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;
@@ -67964,13 +68246,26 @@
             }
             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;
@@ -67978,14 +68273,10 @@
                 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 &&
@@ -68001,11 +68292,7 @@
                 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 ||
@@ -68023,12 +68310,40 @@
                 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);
@@ -69560,6 +69875,7 @@
                     break;
             }
             super.doLayout();
+            this.width = this.width / 2;
         }
         paint(cx, cy, canvas) {
             const beat = this._beat;
@@ -70318,6 +70634,10 @@
             this._beat = container.beat;
             this._container = container;
         }
+        doLayout() {
+            super.doLayout();
+            this.width = 0;
+        }
         getBoundingBoxTop() {
             return super.getBoundingBoxTop() - this._calculateMaxSlurHeight(BeamDirection.Up);
         }
@@ -71177,7 +71497,6 @@
         updateWidth() {
             super.updateWidth();
             this.width += this._flagStretch;
-            this.minWidth += this._flagStretch;
         }
     }
 
@@ -71846,7 +72165,6 @@
         updateWidth() {
             super.updateWidth();
             this.width += this._flagStretch;
-            this.minWidth += this._flagStretch;
         }
     }
 
@@ -73595,7 +73913,9 @@
             ]),
             //
             // Numbered
-            new NumberedBarRendererFactory([]),
+            new NumberedBarRendererFactory([
+                { effect: new NumberedBarKeySignatureEffectInfo(), mode: EffectBandMode.OwnedTop, order: 1000 }
+            ]),
             //
             // Tabs
             new TabBarRendererFactory([