@coderline/alphatab 1.8.0-alpha.1639 → 1.8.0-alpha.1643

package/dist/alphaTab.js

@@ -1,5 +1,5 @@
 /*!
- * alphaTab v1.8.0-alpha.1639 (develop, build 1639)
+ * alphaTab v1.8.0-alpha.1643 (develop, build 1643)
  *
  * Copyright © 2025, Daniel Kuschny and Contributors, All rights reserved.
  *
@@ -209,9 +209,9 @@
      * @internal
      */
     class VersionInfo {
-        static version = '1.8.0-alpha.1639';
-        static date = '2025-12-09T02:16:01.440Z';
-        static commit = 'af86866e4f9d89a3ccc34006d01473a549dbbe7f';
+        static version = '1.8.0-alpha.1643';
+        static date = '2025-12-13T02:07:47.380Z';
+        static commit = '6cdd7783a14244e9d7efb9f9b9dbad7a27b11eee';
         static print(print) {
             print(`alphaTab ${VersionInfo.version}`);
             print(`commit: ${VersionInfo.commit}`);
@@ -4721,6 +4721,24 @@
         static toArticulationId(plain) {
             return plain.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
         }
+        static minBoundingBox(a, b) {
+            if (Number.isNaN(a)) {
+                return b;
+            }
+            else if (Number.isNaN(b)) {
+                return a;
+            }
+            return a < b ? a : b;
+        }
+        static maxBoundingBox(a, b) {
+            if (Number.isNaN(a)) {
+                return b;
+            }
+            else if (Number.isNaN(b)) {
+                return a;
+            }
+            return a > b ? a : b;
+        }
     }
 
     /**
@@ -48303,6 +48321,39 @@
         }
     }
 
+    /**
+     * Lists the different position modes for {@link BarRendererBase.getBeatX}
+     * @internal
+     */
+    var BeatXPosition;
+    (function (BeatXPosition) {
+        /**
+         * Gets the pre-notes position which is located before the accidentals
+         */
+        BeatXPosition[BeatXPosition["PreNotes"] = 0] = "PreNotes";
+        /**
+         * Gets the on-notes position which is located after the accidentals but before the note heads.
+         */
+        BeatXPosition[BeatXPosition["OnNotes"] = 1] = "OnNotes";
+        /**
+         * Gets the middle-notes position which is located after in the exact center of the note heads.
+         */
+        BeatXPosition[BeatXPosition["MiddleNotes"] = 2] = "MiddleNotes";
+        /**
+         * Gets position of the stem for this beat
+         */
+        BeatXPosition[BeatXPosition["Stem"] = 3] = "Stem";
+        /**
+         * Get the post-notes position which is located at after the note heads.
+         */
+        BeatXPosition[BeatXPosition["PostNotes"] = 4] = "PostNotes";
+        /**
+         * Get the end-beat position which is located at the end of the beat. This position is almost
+         * equal to the pre-notes position of the next beat.
+         */
+        BeatXPosition[BeatXPosition["EndBeat"] = 5] = "EndBeat";
+    })(BeatXPosition || (BeatXPosition = {}));
+
     /**
      * A glyph is a single symbol which can be added to a GlyphBarRenderer for automated
      * layouting and drawing of stacked symbols.
@@ -48330,198 +48381,6 @@
         }
     }
 
-    /**
-     * Effect-Glyphs implementing this public interface get notified
-     * as they are expanded over multiple beats.
-     * @internal
-     */
-    class EffectGlyph extends Glyph {
-        /**
-         * Gets or sets the beat where the glyph belongs to.
-         */
-        beat = null;
-        /**
-         * Gets or sets the next glyph of the same type in case
-         * the effect glyph is expanded when using {@link EffectBarGlyphSizing.groupedOnBeat}.
-         */
-        nextGlyph = null;
-        /**
-         * Gets or sets the previous glyph of the same type in case
-         * the effect glyph is expanded when using {@link EffectBarGlyphSizing.groupedOnBeat}.
-         */
-        previousGlyph = null;
-        constructor(x = 0, y = 0) {
-            super(x, y);
-        }
-    }
-
-    /**
-     * @internal
-     */
-    class MusicFontGlyph extends EffectGlyph {
-        glyphScale = 0;
-        symbol;
-        center = false;
-        colorOverride;
-        offsetX = 0;
-        offsetY = 0;
-        constructor(x, y, glyphScale, symbol) {
-            super(x, y);
-            this.glyphScale = glyphScale;
-            this.symbol = symbol;
-        }
-        getBoundingBoxTop() {
-            const bBoxTop = this.renderer.smuflMetrics.glyphTop.get(this.symbol);
-            return this.y - this.offsetY - bBoxTop;
-        }
-        doLayout() {
-            this.width = this.renderer.smuflMetrics.glyphWidths.get(this.symbol) * this.glyphScale;
-            this.height = this.renderer.smuflMetrics.glyphHeights.get(this.symbol) * this.glyphScale;
-        }
-        paint(cx, cy, canvas) {
-            if (this.width === 0 && this.height === 0) {
-                return;
-            }
-            const c = canvas.color;
-            if (this.colorOverride) {
-                canvas.color = this.colorOverride;
-            }
-            canvas.fillMusicFontSymbol(cx + this.x + this.offsetX, cy + this.y + this.offsetY, this.glyphScale, this.symbol, this.center);
-            canvas.color = c;
-        }
-    }
-    /**
-     * @internal
-     */
-    class MusicFontTextGlyph extends EffectGlyph {
-        glyphScale = 0;
-        symbols;
-        center = false;
-        colorOverride;
-        offsetX = 0;
-        offsetY = 0;
-        constructor(x, y, glyphScale, symbols) {
-            super(x, y);
-            this.glyphScale = glyphScale;
-            this.symbols = symbols;
-        }
-        getBoundingBoxTop() {
-            let bBoxTop = 0;
-            for (let i = 0; i < this.symbols.length; i++) {
-                const gTop = this.renderer.smuflMetrics.glyphTop.get(this.symbols[i]);
-                if (i === 0 || gTop < bBoxTop) {
-                    bBoxTop = gTop;
-                }
-            }
-            return this.y - this.offsetY - bBoxTop;
-        }
-        doLayout() {
-            this.width = 0;
-            this.height = 0;
-            for (let i = 0; i < this.symbols.length; i++) {
-                const gWidth = this.renderer.smuflMetrics.glyphWidths.get(this.symbols[i]) * this.glyphScale;
-                const gHeight = this.renderer.smuflMetrics.glyphHeights.get(this.symbols[i]) * this.glyphScale;
-                if (i === 0 || gWidth > this.width) {
-                    this.width = gWidth;
-                }
-                if (i === 0 || gHeight > this.height) {
-                    this.height = gHeight;
-                }
-            }
-        }
-        paint(cx, cy, canvas) {
-            if (this.width === 0 && this.height === 0) {
-                return;
-            }
-            const c = canvas.color;
-            if (this.colorOverride) {
-                canvas.color = this.colorOverride;
-            }
-            canvas.fillMusicFontSymbols(cx + this.x + this.offsetX, cy + this.y + this.offsetY, this.glyphScale, this.symbols, this.center);
-            canvas.color = c;
-        }
-    }
-
-    /**
-     * @internal
-     */
-    class NoteHeadGlyph extends MusicFontGlyph {
-        // TODO: SmuFL
-        static GraceScale = 0.75;
-        centerOnStem = false;
-        constructor(x, y, duration, isGrace) {
-            super(x, y, isGrace ? NoteHeadGlyph.GraceScale : 1, NoteHeadGlyph.getSymbol(duration));
-        }
-        paint(cx, cy, canvas) {
-            if (this.centerOnStem) {
-                this.center = true;
-            }
-            super.paint(cx, cy, canvas);
-        }
-        static getSymbol(duration) {
-            switch (duration) {
-                case Duration.QuadrupleWhole:
-                    return MusicFontSymbol.NoteheadDoubleWholeSquare;
-                case Duration.DoubleWhole:
-                    return MusicFontSymbol.NoteheadDoubleWhole;
-                case Duration.Whole:
-                    return MusicFontSymbol.NoteheadWhole;
-                case Duration.Half:
-                    return MusicFontSymbol.NoteheadHalf;
-                default:
-                    return MusicFontSymbol.NoteheadBlack;
-            }
-        }
-    }
-
-    /**
-     * @internal
-     */
-    class FlagGlyph extends MusicFontGlyph {
-        constructor(x, y, duration, direction, isGrace) {
-            super(x, y, isGrace ? NoteHeadGlyph.GraceScale : 1, FlagGlyph.getSymbol(duration, direction, isGrace));
-        }
-        static getSymbol(duration, direction, isGrace) {
-            if (isGrace) {
-                duration = Duration.Eighth;
-            }
-            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;
-                }
-            }
-            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;
-            }
-        }
-    }
-
     /**
      * @internal
      */
@@ -48533,7 +48392,7 @@
         onNotes;
         minWidth = 0;
         get onTimeX() {
-            return this.onNotes.x + this.onNotes.centerX;
+            return this.onNotes.x + this.onNotes.onTimeX;
         }
         constructor(beat, voiceContainer) {
             super(0, 0);
@@ -48548,28 +48407,20 @@
             this.renderer.registerTie(tie);
         }
         getBoundingBoxTop() {
-            return Math.min(this.preNotes.getBoundingBoxTop(), this.onNotes.getBoundingBoxTop());
+            return ModelUtils.minBoundingBox(this.preNotes.getBoundingBoxTop(), this.onNotes.getBoundingBoxTop());
         }
         getBoundingBoxBottom() {
-            return Math.max(this.preNotes.getBoundingBoxBottom(), this.onNotes.getBoundingBoxBottom());
+            return ModelUtils.maxBoundingBox(this.preNotes.getBoundingBoxBottom(), this.onNotes.getBoundingBoxBottom());
         }
         drawBeamHelperAsFlags(helper) {
             return helper.hasFlag(false, undefined);
         }
+        get postBeatStretch() {
+            return this.onNotes.computedWidth - this.onNotes.onTimeX;
+        }
         registerLayoutingInfo(layoutings) {
-            const preBeatStretch = this.preNotes.computedWidth + this.onNotes.centerX;
-            let postBeatStretch = this.onNotes.computedWidth - this.onNotes.centerX;
-            // make space for flag
-            const helper = this.renderer.helpers.getBeamingHelperForBeat(this.beat);
-            if (this.beat.graceType !== GraceType.None) {
-                // always use flag size as spacing on grace notes
-                postBeatStretch +=
-                    this.renderer.smuflMetrics.glyphWidths.get(MusicFontSymbol.Flag8thUp) * NoteHeadGlyph.GraceScale;
-            }
-            else if (helper && this.drawBeamHelperAsFlags(helper)) {
-                postBeatStretch +=
-                    this.renderer.smuflMetrics.glyphWidths.get(MusicFontSymbol.Flag8thUp) * NoteHeadGlyph.GraceScale;
-            }
+            const preBeatStretch = this.preNotes.computedWidth + this.onNotes.onTimeX;
+            let postBeatStretch = this.postBeatStretch;
             for (const tie of this._ties) {
                 const tg = tie;
                 postBeatStretch += tg.width;
@@ -48584,7 +48435,6 @@
             });
         }
         applyLayoutingInfo(_info) {
-            this.onNotes.updateBeamingHelper();
             this.updateWidth();
         }
         doLayout() {
@@ -48596,7 +48446,6 @@
             this.onNotes.renderer = this.renderer;
             this.onNotes.container = this;
             this.onNotes.doLayout();
-            this.onNotes.updateBeamingHelper();
             let i = this.beat.notes.length - 1;
             while (i >= 0) {
                 this.createTies(this.beat.notes[i--]);
@@ -48605,15 +48454,6 @@
         }
         updateWidth() {
             this.minWidth = this.preNotes.width + this.onNotes.width;
-            if (!this.beat.isRest) {
-                if (this.onNotes.beamingHelper.beats.length === 1) {
-                    // make space for flag
-                    if (this.beat.duration >= Duration.Eighth) {
-                        const symbol = FlagGlyph.getSymbol(this.beat.duration, this.onNotes.beamingHelper.direction, this.beat.graceType !== GraceType.None);
-                        this.minWidth += this.renderer.smuflMetrics.glyphWidths.get(symbol);
-                    }
-                }
-            }
             let tieWidth = 0;
             for (const tie of this._ties) {
                 const tg = tie;
@@ -48624,10 +48464,6 @@
             this.minWidth += tieWidth;
             this.width = this.minWidth;
         }
-        scaleToWidth(beatWidth) {
-            this.onNotes.updateBeamingHelper();
-            this.width = beatWidth;
-        }
         createTies(_n) {
         }
         static getGroupId(beat) {
@@ -48637,8 +48473,11 @@
             // var c = canvas.color;
             // canvas.color = Color.random();
             // canvas.fillRect(cx + this.x, cy + this.y + this.preNotes.getBoundingBoxTop(), this.width, this.renderer.height);
-            // canvas.color = Color.random();
             // canvas.fillRect(cx + this.x, cy + this.y + this.onNotes.getBoundingBoxTop(), this.width, this.renderer.height);
+            // canvas.color = Color.random();
+            // const top = this.getBoundingBoxTop();
+            // const bottom = this.getBoundingBoxBottom();
+            // canvas.fillRect(cx + this.x, cy + this.y + top, this.width, bottom-top);
             // canvas.color = c;
             // var c = canvas.color;
             // var ta = canvas.textAlign;
@@ -48701,7 +48540,7 @@
                 beatBoundings.realBounds.y = barBounds.realBounds.y;
                 beatBoundings.realBounds.w = this.width;
                 beatBoundings.realBounds.h = barBounds.realBounds.h;
-                beatBoundings.onNotesX = cx + this.x + this.onNotes.centerX;
+                beatBoundings.onNotesX = cx + this.x + this.onNotes.x + this.onNotes.onTimeX;
             }
             else {
                 beatBoundings.visualBounds = new Bounds();
@@ -48717,7 +48556,7 @@
                 }
                 let visualEndX = 0;
                 if (!this.onNotes.isEmpty) {
-                    visualEndX = cx + this.x + this.onNotes.x + this.onNotes.width;
+                    visualEndX = cx + this.x + this.onNotes.x + this.onNotes.onTimeX + this.postBeatStretch;
                 }
                 else if (!this.preNotes.isEmpty) {
                     visualEndX = cx + this.x + this.preNotes.x + this.preNotes.width;
@@ -48726,12 +48565,6 @@
                     visualEndX = cx + this.x + this.width;
                 }
                 beatBoundings.visualBounds.w = visualEndX - beatBoundings.visualBounds.x;
-                const helper = this.renderer.helpers.getBeamingHelperForBeat(this.beat);
-                if ((helper && this.drawBeamHelperAsFlags(helper)) || this.beat.graceType !== GraceType.None) {
-                    beatBoundings.visualBounds.w +=
-                        this.renderer.smuflMetrics.glyphWidths.get(MusicFontSymbol.Flag8thUp) *
-                            (this.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1);
-                }
                 beatBoundings.visualBounds.y = barBounds.visualBounds.y;
                 beatBoundings.visualBounds.h = barBounds.visualBounds.h;
                 beatBoundings.realBounds = new Bounds();
@@ -48739,13 +48572,33 @@
                 beatBoundings.realBounds.y = barBounds.realBounds.y;
                 beatBoundings.realBounds.w = this.width;
                 beatBoundings.realBounds.h = barBounds.realBounds.h;
-                beatBoundings.onNotesX = cx + this.x + this.onNotes.x + this.onNotes.centerX;
+                beatBoundings.onNotesX = cx + this.x + this.onNotes.x + this.onNotes.onTimeX;
             }
             barBounds.addBeat(beatBoundings);
             if (this.renderer.settings.core.includeNoteBounds) {
                 this.onNotes.buildBoundingsLookup(beatBoundings, cx + this.x, cy + this.y);
             }
         }
+        getBeatX(requestedPosition, useSharedSizes = false) {
+            switch (requestedPosition) {
+                case BeatXPosition.PreNotes:
+                    return this.preNotes.x;
+                case BeatXPosition.OnNotes:
+                    return this.onNotes.x;
+                case BeatXPosition.MiddleNotes:
+                    return this.onNotes.x + this.onNotes.middleX;
+                case BeatXPosition.Stem:
+                    return this.onNotes.x + this.onNotes.stemX;
+                case BeatXPosition.PostNotes:
+                    const onNoteSize = useSharedSizes
+                        ? (this.renderer.layoutingInfo.getBeatSizes(this.beat)?.onBeatSize ?? this.onNotes.width)
+                        : this.onNotes.width;
+                    return this.onNotes.x + onNoteSize;
+                case BeatXPosition.EndBeat:
+                    return this.width;
+            }
+            return this.preNotes.x;
+        }
     }
 
     /**
@@ -54364,6 +54217,7 @@
     class ScalableHtmlElementContainer extends HtmlElementContainer {
         _xscale;
         _yscale;
+        centerAtPosition = false;
         constructor(element, xscale, yscale) {
             super(element);
             this._xscale = xscale;
@@ -54405,7 +54259,11 @@
             else {
                 h = h / this._yscale;
             }
-            this.element.style.transform = `translate(${x}px, ${y}px) scale(${w}, ${h})`;
+            let transform = `translate(${x}px, ${y}px) scale(${w}, ${h})`;
+            if (this.centerAtPosition) {
+                transform += ` translateX(-50%)`;
+            }
+            this.element.style.transform = transform;
             this.element.style.transformOrigin = 'top left';
             this.lastBounds.x = x;
             this.lastBounds.y = y;
@@ -55266,6 +55124,7 @@
             beatCursor.style.willChange = 'transform';
             beatCursorContainer.width = 3;
             beatCursorContainer.height = 1;
+            beatCursorContainer.centerAtPosition = true;
             beatCursorContainer.setBounds(0, 0, 1, 1);
             // add cursors to UI
             element.insertBefore(cursorWrapper, element.firstChild);
@@ -56498,6 +56357,31 @@
         EffectBarGlyphSizing[EffectBarGlyphSizing["FullBar"] = 5] = "FullBar";
     })(EffectBarGlyphSizing || (EffectBarGlyphSizing = {}));
 
+    /**
+     * Effect-Glyphs implementing this public interface get notified
+     * as they are expanded over multiple beats.
+     * @internal
+     */
+    class EffectGlyph extends Glyph {
+        /**
+         * Gets or sets the beat where the glyph belongs to.
+         */
+        beat = null;
+        /**
+         * Gets or sets the next glyph of the same type in case
+         * the effect glyph is expanded when using {@link EffectBarGlyphSizing.groupedOnBeat}.
+         */
+        nextGlyph = null;
+        /**
+         * Gets or sets the previous glyph of the same type in case
+         * the effect glyph is expanded when using {@link EffectBarGlyphSizing.groupedOnBeat}.
+         */
+        previousGlyph = null;
+        constructor(x = 0, y = 0) {
+            super(x, y);
+        }
+    }
+
     /**
      * @internal
      */
@@ -56625,39 +56509,6 @@
         }
     }
 
-    /**
-     * Lists the different position modes for {@link BarRendererBase.getBeatX}
-     * @internal
-     */
-    var BeatXPosition;
-    (function (BeatXPosition) {
-        /**
-         * Gets the pre-notes position which is located before the accidentals
-         */
-        BeatXPosition[BeatXPosition["PreNotes"] = 0] = "PreNotes";
-        /**
-         * Gets the on-notes position which is located after the accidentals but before the note heads.
-         */
-        BeatXPosition[BeatXPosition["OnNotes"] = 1] = "OnNotes";
-        /**
-         * Gets the middle-notes position which is located after in the middle the note heads.
-         */
-        BeatXPosition[BeatXPosition["MiddleNotes"] = 2] = "MiddleNotes";
-        /**
-         * Gets position of the stem for this beat
-         */
-        BeatXPosition[BeatXPosition["Stem"] = 3] = "Stem";
-        /**
-         * Get the post-notes position which is located at after the note heads.
-         */
-        BeatXPosition[BeatXPosition["PostNotes"] = 4] = "PostNotes";
-        /**
-         * Get the end-beat position which is located at the end of the beat. This position is almost
-         * equal to the pre-notes position of the next beat.
-         */
-        BeatXPosition[BeatXPosition["EndBeat"] = 5] = "EndBeat";
-    })(BeatXPosition || (BeatXPosition = {}));
-
     /**
      * @internal
      */
@@ -57256,6 +57107,93 @@
         }
     }
 
+    /**
+     * @internal
+     */
+    class MusicFontGlyph extends EffectGlyph {
+        glyphScale = 0;
+        symbol;
+        center = false;
+        colorOverride;
+        offsetX = 0;
+        offsetY = 0;
+        constructor(x, y, glyphScale, symbol) {
+            super(x, y);
+            this.glyphScale = glyphScale;
+            this.symbol = symbol;
+        }
+        getBoundingBoxTop() {
+            const bBoxTop = this.renderer.smuflMetrics.glyphTop.get(this.symbol);
+            return this.y - this.offsetY - bBoxTop;
+        }
+        doLayout() {
+            this.width = this.renderer.smuflMetrics.glyphWidths.get(this.symbol) * this.glyphScale;
+            this.height = this.renderer.smuflMetrics.glyphHeights.get(this.symbol) * this.glyphScale;
+        }
+        paint(cx, cy, canvas) {
+            if (this.width === 0 && this.height === 0) {
+                return;
+            }
+            const c = canvas.color;
+            if (this.colorOverride) {
+                canvas.color = this.colorOverride;
+            }
+            canvas.fillMusicFontSymbol(cx + this.x + this.offsetX, cy + this.y + this.offsetY, this.glyphScale, this.symbol, this.center);
+            canvas.color = c;
+        }
+    }
+    /**
+     * @internal
+     */
+    class MusicFontTextGlyph extends EffectGlyph {
+        glyphScale = 0;
+        symbols;
+        center = false;
+        colorOverride;
+        offsetX = 0;
+        offsetY = 0;
+        constructor(x, y, glyphScale, symbols) {
+            super(x, y);
+            this.glyphScale = glyphScale;
+            this.symbols = symbols;
+        }
+        getBoundingBoxTop() {
+            let bBoxTop = 0;
+            for (let i = 0; i < this.symbols.length; i++) {
+                const gTop = this.renderer.smuflMetrics.glyphTop.get(this.symbols[i]);
+                if (i === 0 || gTop < bBoxTop) {
+                    bBoxTop = gTop;
+                }
+            }
+            return this.y - this.offsetY - bBoxTop;
+        }
+        doLayout() {
+            this.width = 0;
+            this.height = 0;
+            for (let i = 0; i < this.symbols.length; i++) {
+                const gWidth = this.renderer.smuflMetrics.glyphWidths.get(this.symbols[i]) * this.glyphScale;
+                const gHeight = this.renderer.smuflMetrics.glyphHeights.get(this.symbols[i]) * this.glyphScale;
+                if (i === 0 || gWidth > this.width) {
+                    this.width = gWidth;
+                }
+                if (i === 0 || gHeight > this.height) {
+                    this.height = gHeight;
+                }
+            }
+        }
+        paint(cx, cy, canvas) {
+            if (this.width === 0 && this.height === 0) {
+                return;
+            }
+            const c = canvas.color;
+            if (this.colorOverride) {
+                canvas.color = this.colorOverride;
+            }
+            canvas.fillMusicFontSymbols(cx + this.x + this.offsetX, cy + this.y + this.offsetY, this.glyphScale, this.symbols, this.center);
+            canvas.color = c;
+        }
+    }
+
     /**
      * @internal
      */
@@ -57494,17 +57432,6 @@
         }
     }
 
-    /**
-     * 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;
-        }
-    }
-
     /**
      * This glyph allows to group several other glyphs to be
      * drawn at the same x position
@@ -57520,34 +57447,20 @@
             const glyphs = this.glyphs;
             if (glyphs) {
                 for (const g of glyphs) {
-                    // only count real visual glyphs
-                    if (g instanceof SpacingGlyph) {
-                        continue;
-                    }
-                    const gTop = g.getBoundingBoxTop();
-                    if (Number.isNaN(top) || gTop < top) {
-                        top = gTop;
-                    }
+                    top = ModelUtils.minBoundingBox(top, g.getBoundingBoxTop());
                 }
             }
-            return Number.isNaN(top) ? this.y : top;
+            return top;
         }
         getBoundingBoxBottom() {
             let bottom = Number.NaN;
             const glyphs = this.glyphs;
             if (glyphs) {
                 for (const g of glyphs) {
-                    // only count real visual glyphs
-                    if (g instanceof SpacingGlyph) {
-                        continue;
-                    }
-                    const gBottom = g.getBoundingBoxBottom();
-                    if (Number.isNaN(bottom) || gBottom > bottom) {
-                        bottom = gBottom;
-                    }
+                    bottom = ModelUtils.maxBoundingBox(bottom, g.getBoundingBoxBottom());
                 }
             }
-            return Number.isNaN(bottom) ? this.y + this.height : bottom;
+            return bottom;
         }
         doLayout() {
             if (!this.glyphs || this.glyphs.length === 0) {
@@ -57963,6 +57876,38 @@
         }
     }
 
+    /**
+     * @internal
+     */
+    class NoteHeadGlyph extends MusicFontGlyph {
+        // TODO: SmuFL
+        static GraceScale = 0.75;
+        centerOnStem = false;
+        constructor(x, y, duration, isGrace) {
+            super(x, y, isGrace ? NoteHeadGlyph.GraceScale : 1, NoteHeadGlyph.getSymbol(duration));
+        }
+        paint(cx, cy, canvas) {
+            if (this.centerOnStem) {
+                this.center = true;
+            }
+            super.paint(cx, cy, canvas);
+        }
+        static getSymbol(duration) {
+            switch (duration) {
+                case Duration.QuadrupleWhole:
+                    return MusicFontSymbol.NoteheadDoubleWholeSquare;
+                case Duration.DoubleWhole:
+                    return MusicFontSymbol.NoteheadDoubleWhole;
+                case Duration.Whole:
+                    return MusicFontSymbol.NoteheadWhole;
+                case Duration.Half:
+                    return MusicFontSymbol.NoteheadHalf;
+                default:
+                    return MusicFontSymbol.NoteheadBlack;
+            }
+        }
+    }
+
     /**
      * @internal
      */
@@ -59581,12 +59526,12 @@
                 // of the next glyph
                 if (i > 0) {
                     const beatWidth = currentBeatGlyph.x - beatGlyphs[i - 1].x;
-                    beatGlyphs[i - 1].scaleToWidth(beatWidth);
+                    beatGlyphs[i - 1].width = beatWidth;
                 }
                 // for the last glyph size based on the full width
                 if (i === j - 1) {
                     const beatWidth = this.width - beatGlyphs[beatGlyphs.length - 1].x;
-                    currentBeatGlyph.scaleToWidth(beatWidth);
+                    currentBeatGlyph.width = beatWidth;
                 }
             }
         }
@@ -61286,7 +61231,7 @@
                         if (!masterBarBoundsLookup.has(renderer.bar.masterBar.index)) {
                             masterBarBounds = new MasterBarBounds();
                             masterBarBounds.index = renderer.bar.masterBar.index;
-                            masterBarBounds.isFirstOfLine = renderer.isFirstOfLine;
+                            masterBarBounds.isFirstOfLine = renderer.isFirstOfStaff;
                             masterBarBounds.realBounds = new Bounds();
                             masterBarBounds.realBounds.x = x + renderer.x;
                             masterBarBounds.realBounds.y = realTop;
@@ -61818,10 +61763,9 @@
      * @internal
      */
     class BeatOnNoteGlyphBase extends BeatGlyphBase {
-        beamingHelper;
-        centerX = 0;
-        updateBeamingHelper() {
-        }
+        onTimeX = 0;
+        middleX = 0;
+        stemX = 0;
         buildBoundingsLookup(_beatBounds, _cx, _cy) {
         }
         getNoteX(_note, _requestedPosition) {
@@ -61963,14 +61907,6 @@
         }
     }
 
-    /**
-     * @internal
-     */
-    class BeatLinePositions {
-        staffId = '';
-        up = 0;
-        down = 0;
-    }
     /**
      * @internal
      */
@@ -62001,10 +61937,7 @@
      */
     class BeamingHelper {
         _staff;
-        _beatLineXPositions = new Map();
         _renderer;
-        _firstNonRestBeat = null;
-        _lastNonRestBeat = null;
         voice = null;
         beats = [];
         shortestDuration = Duration.QuadrupleWhole;
@@ -62014,6 +61947,7 @@
          */
         hasTuplet = false;
         slashBeats = [];
+        restBeats = [];
         lowestNoteInHelper = null;
         _lowestNoteCompareValueInHelper = -1;
         highestNoteInHelper = null;
@@ -62021,25 +61955,21 @@
         invertBeamDirection = false;
         preferredBeamDirection = null;
         graceType = GraceType.None;
-        minRestSteps = null;
-        beatOfMinRestSteps = null;
-        maxRestSteps = null;
-        beatOfMaxRestSteps = null;
         get isRestBeamHelper() {
             return this.beats.length === 1 && this.beats[0].isRest;
         }
-        hasLine(forceFlagOnSingleBeat, beat) {
-            return ((forceFlagOnSingleBeat && this._beatHasLine(beat)) ||
-                (!forceFlagOnSingleBeat && this.beats.length === 1 && this._beatHasLine(beat)));
+        hasStem(forceFlagOnSingleBeat, beat) {
+            return ((forceFlagOnSingleBeat && this._beatHasStem(beat)) ||
+                (!forceFlagOnSingleBeat && this.beats.length === 1 && this._beatHasStem(beat)));
         }
-        _beatHasLine(beat) {
+        _beatHasStem(beat) {
             return beat.duration > Duration.Whole;
         }
         hasFlag(forceFlagOnSingleBeat, beat) {
-            return ((forceFlagOnSingleBeat && this._beatHasFlag(beat)) ||
-                (!forceFlagOnSingleBeat && this.beats.length === 1 && this._beatHasFlag(this.beats[0])));
+            return ((forceFlagOnSingleBeat && BeamingHelper.beatHasFlag(beat)) ||
+                (!forceFlagOnSingleBeat && this.beats.length === 1 && BeamingHelper.beatHasFlag(this.beats[0])));
         }
-        _beatHasFlag(beat) {
+        static beatHasFlag(beat) {
             return (!beat.deadSlapped && !beat.isRest && (beat.duration > Duration.Quarter || beat.graceType !== GraceType.None));
         }
         constructor(staff, renderer) {
@@ -62047,38 +61977,12 @@
             this._renderer = renderer;
             this.beats = [];
         }
-        getBeatLineX(beat, direction) {
-            direction = direction ?? this.direction;
-            if (this.hasBeatLineX(beat)) {
-                if (direction === BeamDirection.Up) {
-                    return this._beatLineXPositions.get(beat.index).up;
-                }
-                return this._beatLineXPositions.get(beat.index).down;
-            }
-            return 0;
-        }
-        hasBeatLineX(beat) {
-            return this._beatLineXPositions.has(beat.index);
-        }
-        registerBeatLineX(staffId, beat, up, down) {
-            const positions = this._getOrCreateBeatPositions(beat);
-            positions.staffId = staffId;
-            positions.up = up;
-            positions.down = down;
+        alignWithBeats() {
             for (const v of this.drawingInfos.values()) {
-                if (v.startBeat === beat) {
-                    v.startX = this.getBeatLineX(beat);
-                }
-                else if (v.endBeat === beat) {
-                    v.endX = this.getBeatLineX(beat);
-                }
-            }
-        }
-        _getOrCreateBeatPositions(beat) {
-            if (!this._beatLineXPositions.has(beat.index)) {
-                this._beatLineXPositions.set(beat.index, new BeatLinePositions());
+                v.startX = this._renderer.getBeatX(v.startBeat, BeatXPosition.Stem);
+                v.endX = this._renderer.getBeatX(v.endBeat, BeatXPosition.Stem);
+                this.drawingInfos.clear();
             }
-            return this._beatLineXPositions.get(beat.index);
         }
         direction = BeamDirection.Up;
         finish() {
@@ -62144,36 +62048,6 @@
             }
             return [0, 0];
         }
-        /**
-         * Registers a rest beat within the accidental helper so the rest
-         * symbol is considered properly during beaming.
-         * @param beat The rest beat.
-         * @param steps The steps on which the rest symbol is placed
-         */
-        applyRest(beat, steps) {
-            // do not accept rests after the last beat which has notes
-            if ((this._lastNonRestBeat && beat.index >= this._lastNonRestBeat.index) ||
-                (this._firstNonRestBeat && beat.index <= this._firstNonRestBeat.index)) {
-                return;
-            }
-            // correct the line of the glyph to a note which would
-            // be placed at the upper / lower end of the glyph.
-            let aboveRest = steps;
-            let belowRest = steps;
-            const offsets = BeamingHelper.computeLineHeightsForRest(beat.duration);
-            aboveRest -= offsets[0];
-            belowRest += offsets[1];
-            const minRestSteps = this.minRestSteps;
-            const maxRestSteps = this.maxRestSteps;
-            if (minRestSteps === null || minRestSteps > aboveRest) {
-                this.minRestSteps = aboveRest;
-                this.beatOfMinRestSteps = beat;
-            }
-            if (maxRestSteps === null || maxRestSteps < belowRest) {
-                this.maxRestSteps = belowRest;
-                this.beatOfMaxRestSteps = beat;
-            }
-        }
         _invert(direction) {
             if (!this.invertBeamDirection) {
                 return direction;
@@ -62237,14 +62111,13 @@
                     if (this.shortestDuration < beat.duration) {
                         this.shortestDuration = beat.duration;
                     }
-                    if (!this._firstNonRestBeat) {
-                        this._firstNonRestBeat = beat;
-                    }
-                    this._lastNonRestBeat = beat;
                 }
                 else if (this.beats.length === 0) {
                     this.beats.push(beat);
                 }
+                else {
+                    this.restBeats.push(beat);
+                }
                 if (beat.slashed) {
                     this.slashBeats.push(beat);
                 }
@@ -62353,19 +62226,6 @@
         get beatOfHighestNote() {
             return this.highestNoteInHelper.beat;
         }
-        /**
-         * Returns whether the the position of the given beat, was registered by the staff of the given ID
-         * @param staffId
-         * @param beat
-         * @returns
-         */
-        isPositionFrom(staffId, beat) {
-            if (!this._beatLineXPositions.has(beat.index)) {
-                return true;
-            }
-            return (this._beatLineXPositions.get(beat.index).staffId === staffId ||
-                !this._beatLineXPositions.get(beat.index).staffId);
-        }
         drawingInfos = new Map();
     }
 
@@ -62517,8 +62377,8 @@
      */
     class BarHelpers {
         _renderer;
+        _beamHelperLookup = new Map();
         beamHelpers = [];
-        beamHelperLookup = [];
         collisionHelper;
         preferredBeamDirection = null;
         constructor(renderer) {
@@ -62533,7 +62393,6 @@
             for (let i = 0, j = bar.voices.length; i < j; i++) {
                 const v = bar.voices[i];
                 this.beamHelpers.push([]);
-                this.beamHelperLookup.push(new Map());
                 for (let k = 0, l = v.beats.length; k < l; k++) {
                     const b = v.beats[k];
                     let helperForBeat;
@@ -62542,6 +62401,9 @@
                     }
                     else {
                         helperForBeat = currentBeamHelper;
+                        if (currentGraceBeamHelper) {
+                            currentGraceBeamHelper.finish();
+                        }
                         currentGraceBeamHelper = null;
                     }
                     // if a new beaming helper was started, we close our tuplet grouping as well
@@ -62562,7 +62424,7 @@
                         }
                         this.beamHelpers[v.index].push(helperForBeat);
                     }
-                    this.beamHelperLookup[v.index].set(b.index, helperForBeat);
+                    this._beamHelperLookup.set(b.id, helperForBeat);
                 }
                 if (currentBeamHelper) {
                     currentBeamHelper.finish();
@@ -62575,7 +62437,7 @@
             }
         }
         getBeamingHelperForBeat(beat) {
-            return this.beamHelperLookup[beat.voice.index].get(beat.index);
+            return this._beamHelperLookup.has(beat.id) ? this._beamHelperLookup.get(beat.id) : undefined;
         }
     }
 
@@ -62685,6 +62547,9 @@
             return this._contentBottomOverflow + this.bottomEffects.height;
         }
         helpers;
+        get collisionHelper() {
+            return this.helpers.collisionHelper;
+        }
         /**
          * Gets or sets whether this renderer is linked to the next one
          * by some glyphs like a vibrato effect
@@ -62744,6 +62609,11 @@
             for (const container of this._voiceContainers.values()) {
                 container.scaleToWidth(containerWidth);
             }
+            for (const v of this.helpers.beamHelpers) {
+                for (const h of v) {
+                    h.alignWithBeats();
+                }
+            }
             this._postBeatGlyphs.x = this._preBeatGlyphs.x + this._preBeatGlyphs.width + containerWidth;
             this.width = width;
             this.topEffects.alignGlyphs();
@@ -62772,10 +62642,13 @@
         get barDisplayWidth() {
             return this.staff.system.staves.length > 1 ? this.bar.masterBar.displayWidth : this.bar.displayWidth;
         }
-        wasFirstOfLine = false;
-        get isFirstOfLine() {
+        wasFirstOfStaff = false;
+        get isFirstOfStaff() {
             return this.index === 0;
         }
+        get isLastOfStaff() {
+            return this.index === this.staff.barRenderers.length - 1;
+        }
         get isLast() {
             return !this.bar || this.bar.index === this.scoreRenderer.layout.lastBarIndex;
         }
@@ -62990,6 +62863,18 @@
                     }
                 }
             }
+            for (const v of this._voiceContainers.values()) {
+                for (const b of v.beatGlyphs) {
+                    const topY = b.getBoundingBoxTop();
+                    if (topY < 0) {
+                        this.registerOverflowTop(topY * -1);
+                    }
+                    const bottomY = b.getBoundingBoxBottom();
+                    if (bottomY > rendererBottom) {
+                        this.registerOverflowBottom(bottomY - rendererBottom);
+                    }
+                }
+            }
             const beatEffectsMinY = this.beatEffectsMinY;
             if (!Number.isNaN(beatEffectsMinY)) {
                 const beatEffectTopOverflow = -beatEffectsMinY;
@@ -63043,7 +62928,6 @@
             g.renderer = this;
             g.preNotes.renderer = this;
             g.onNotes.renderer = this;
-            g.onNotes.beamingHelper = this.helpers.beamHelperLookup[g.beat.voice.index].get(g.beat.index);
             this.getVoiceContainer(g.beat.voice).addGlyph(g);
         }
         getVoiceContainer(voice) {
@@ -63122,7 +63006,7 @@
             this._postBeatGlyphs.addGlyph(g);
         }
         createPreBeatGlyphs() {
-            this.wasFirstOfLine = this.isFirstOfLine;
+            this.wasFirstOfStaff = this.isFirstOfStaff;
         }
         createBeatGlyphs() {
             for (const voice of this.bar.voices) {
@@ -63149,26 +63033,7 @@
         getBeatX(beat, requestedPosition = BeatXPosition.PreNotes, useSharedSizes = false) {
             const container = this.getBeatContainer(beat);
             if (container) {
-                switch (requestedPosition) {
-                    case BeatXPosition.PreNotes:
-                        return container.voiceContainer.x + container.x;
-                    case BeatXPosition.OnNotes:
-                        return container.voiceContainer.x + container.x + container.onNotes.x;
-                    case BeatXPosition.MiddleNotes:
-                        return container.voiceContainer.x + container.x + container.onTimeX;
-                    case BeatXPosition.Stem:
-                        const offset = container.onNotes.beamingHelper
-                            ? container.onNotes.beamingHelper.getBeatLineX(beat)
-                            : container.onNotes.x + container.onNotes.width / 2;
-                        return container.voiceContainer.x + offset;
-                    case BeatXPosition.PostNotes:
-                        const onNoteSize = useSharedSizes
-                            ? (this.layoutingInfo.getBeatSizes(beat)?.onBeatSize ?? container.onNotes.width)
-                            : container.onNotes.width;
-                        return container.voiceContainer.x + container.x + container.onNotes.x + onNoteSize;
-                    case BeatXPosition.EndBeat:
-                        return container.voiceContainer.x + container.x + container.width;
-                }
+                return container.voiceContainer.x + container.x + container.getBeatX(requestedPosition, useSharedSizes);
             }
             return 0;
         }
@@ -63203,7 +63068,7 @@
             this.updateSizes();
             // there are some glyphs which are shown only for renderers at the line start, so we simply recreate them
             // but we only need to recreate them for the renderers that were the first of the line or are now the first of the line
-            if ((this.wasFirstOfLine && !this.isFirstOfLine) || (!this.wasFirstOfLine && this.isFirstOfLine)) {
+            if ((this.wasFirstOfStaff && !this.isFirstOfStaff) || (!this.wasFirstOfStaff && this.isFirstOfStaff)) {
                 this.recreatePreBeatGlyphs();
                 this._postBeatGlyphs.doLayout();
             }
@@ -63240,7 +63105,7 @@
         completeBeamingHelper(_helper) {
         }
         getBeatDirection(beat) {
-            return this.helpers.getBeamingHelperForBeat(beat).direction;
+            return this.helpers.getBeamingHelperForBeat(beat)?.direction ?? BeamDirection.Up;
         }
     }
 
@@ -65607,8 +65472,18 @@
             }
             const lineRenderer = this.renderer;
             const lineYOffset = lineRenderer.smuflMetrics.staffLineThickness;
-            const top = this.y - lineYOffset;
-            const bottom = this.y + this.renderer.height;
+            let top = this.y;
+            let bottom = this.y;
+            if (lineRenderer.drawnLineCount < 2 ||
+                (!this._isRight && lineRenderer.isFirstOfStaff) ||
+                (this._isRight && lineRenderer.isLastOfStaff)) {
+                top -= lineYOffset;
+                bottom += lineRenderer.height;
+            }
+            else {
+                top += lineRenderer.getLineY(0);
+                bottom += lineRenderer.getLineY(lineRenderer.drawnLineCount - 1);
+            }
             const h = bottom - top;
             // round up to have pixel-aligned bar lines, x-shift will be used during rendering
             // to avoid shifting again all glyphs
@@ -65694,6 +65569,54 @@
         }
     }
 
+    /**
+     * @internal
+     */
+    class FlagGlyph extends MusicFontGlyph {
+        constructor(x, y, duration, direction, isGrace) {
+            super(x, y, isGrace ? NoteHeadGlyph.GraceScale : 1, FlagGlyph.getSymbol(duration, direction, isGrace));
+        }
+        static getSymbol(duration, direction, isGrace) {
+            if (isGrace) {
+                duration = Duration.Eighth;
+            }
+            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;
+                }
+            }
+            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;
+            }
+        }
+    }
+
     /**
      * @internal
      */
@@ -65729,6 +65652,23 @@
         }
     }
 
+    /**
+     * 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;
+        }
+    }
+
     /**
      * 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.
@@ -65852,7 +65792,7 @@
                 if (this.hasVoiceContainer(voice)) {
                     const container = this.getVoiceContainer(voice);
                     for (const tupletGroup of container.tupletGroups) {
-                        this._paintTupletHelper(cx + this.beatGlyphsStart, cy, canvas, tupletGroup, beatElement, bracketsAsArcs);
+                        this._paintTupletHelper(cx, cy, canvas, tupletGroup, beatElement, bracketsAsArcs);
                     }
                 }
             }
@@ -65926,26 +65866,27 @@
             // 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.beamHelperLookup[h.voice.index].get(beat.index);
+                        const beamingHelper = this.helpers.getBeamingHelperForBeat(beat);
                         if (!beamingHelper) {
                             continue;
                         }
                         const direction = this.getTupletBeamDirection(beamingHelper);
-                        const tupletX = beamingHelper.getBeatLineX(beat);
+                        const tupletX = this.getBeatX(beat, BeatXPosition.Stem);
                         let tupletY = this.calculateBeamYWithDirection(beamingHelper, tupletX, direction);
                         if (direction === BeamDirection.Down) {
-                            tupletY += offset + size;
+                            tupletY += shift;
                         }
                         else {
-                            tupletY -= offset + size;
+                            tupletY -= shift;
                         }
-                        canvas.fillMusicFontSymbols(cx + this.x + tupletX, cy + this.y + tupletY, 1, s, true);
+                        canvas.fillMusicFontSymbols(cx + this.x + tupletX, cy + this.y + tupletY + size * 0.5, 1, s, true);
                     }
                 }
                 else {
@@ -65975,12 +65916,12 @@
                     }
                     //
                     // Calculate the overall area of the tuplet bracket
-                    const startX = this.getBeatX(firstBeat, BeatXPosition.OnNotes) - this.beatGlyphsStart;
-                    const endX = this.getBeatX(lastBeat, BeatXPosition.PostNotes) - this.beatGlyphsStart;
+                    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.beamHelperLookup[h.voice.index].get(firstNonRestBeat.index);
-                    const lastNonRestBeamingHelper = this.helpers.beamHelperLookup[h.voice.index].get(lastNonRestBeat.index);
+                    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);
@@ -65989,7 +65930,6 @@
                         endY = startY;
                     }
                     // align line centered in available space
-                    const shift = offset + size * 0.5;
                     if (direction === BeamDirection.Down) {
                         startY += shift;
                         endY += shift;
@@ -66054,14 +65994,24 @@
         paintBeams(cx, cy, canvas, flagsElement, beamsElement) {
             for (const v of this.helpers.beamHelpers) {
                 for (const h of v) {
-                    this._paintBeamHelper(cx + this.beatGlyphsStart, cy, canvas, h, flagsElement, beamsElement);
+                    this.paintBeamHelper(cx, cy, canvas, h, flagsElement, beamsElement);
                 }
             }
         }
         drawBeamHelperAsFlags(h) {
             return h.beats.length === 1;
         }
-        _paintBeamHelper(cx, cy, canvas, h, flagsElement, beamsElement) {
+        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);
+        }
+        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)) {
@@ -66072,7 +66022,7 @@
                 }
             }
         }
-        shouldPaintFlag(beat, h) {
+        shouldPaintFlag(beat) {
             // no flags for bend grace beats
             if (beat.graceType === GraceType.BendGrace) {
                 return false;
@@ -66080,10 +66030,6 @@
             if (beat.deadSlapped) {
                 return false;
             }
-            // we don't have an X-position: cannot paint a flag
-            if (!h.hasBeatLineX(beat)) {
-                return false;
-            }
             // no flags for any grace notes on songbook mode
             if (beat.graceType !== GraceType.None && this.settings.notation.notationMode === exports.NotationMode.SongBook) {
                 return false;
@@ -66098,14 +66044,14 @@
         }
         paintFlag(cx, cy, canvas, h, flagsElement) {
             for (const beat of h.beats) {
-                if (!this.shouldPaintFlag(beat, h)) {
+                if (!this.shouldPaintFlag(beat)) {
                     continue;
                 }
                 const isGrace = beat.graceType !== GraceType.None;
                 //
                 // draw line
                 //
-                const beatLineX = h.getBeatLineX(beat);
+                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);
@@ -66116,7 +66062,7 @@
                 else {
                     flagY = topY;
                 }
-                if (!h.hasLine(true, beat)) {
+                if (!h.hasStem(true, beat)) {
                     continue;
                 }
                 this.paintBeamingStem(beat, cy + this.y, cx + this.x + beatLineX, topY, bottomY, canvas);
@@ -66202,10 +66148,10 @@
             }
             for (let i = 0, j = h.beats.length; i < j; i++) {
                 const beat = h.beats[i];
-                if (!h.hasBeatLineX(beat) || beat.deadSlapped) {
+                if (beat.deadSlapped) {
                     continue;
                 }
-                const beatLineX = h.getBeatLineX(beat);
+                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
@@ -66243,7 +66189,7 @@
                                 barEndY = barY + this.calculateBeamY(h, barEndX);
                                 LineBarRenderer.paintSingleBar(canvas, cx + this.x + barStartX, barStartY, cx + this.x + barEndX, barEndY, barSize);
                                 // end part
-                                barEndX = h.getBeatLineX(h.beats[i + 1]);
+                                barEndX = this.getBeatX(h.beats[i + 1], BeatXPosition.Stem);
                                 barStartX = barEndX - brokenBarOffset;
                                 barStartY = barY + this.calculateBeamY(h, barStartX);
                                 barEndY = barY + this.calculateBeamY(h, barEndX);
@@ -66253,7 +66199,7 @@
                                 if (isFullBarJoin) {
                                     // full bar?
                                     barStartX = beatLineX;
-                                    barEndX = h.getBeatLineX(h.beats[i + 1]);
+                                    barEndX = this.getBeatX(h.beats[i + 1], BeatXPosition.Stem);
                                 }
                                 else if (i === 0 || !BeamingHelper.isFullBarJoin(h.beats[i - 1], beat, barIndex)) {
                                     barStartX = beatLineX;
@@ -66288,7 +66234,7 @@
                 }
             }
             if (h.graceType === GraceType.BeforeBeat) {
-                const beatLineX = h.getBeatLineX(h.beats[0]);
+                const beatLineX = this.getBeatX(h.beats[0], BeatXPosition.Stem);
                 const flagWidth = this.smuflMetrics.glyphWidths.get(MusicFontSymbol.Flag8thUp) * NoteHeadGlyph.GraceScale;
                 let slashY = (cy + this.y + this.calculateBeamY(h, beatLineX)) | 0;
                 slashY += barSize + barSpacing;
@@ -66315,20 +66261,7 @@
             const noteOverflowPadding = this.getLineHeight(0.5);
             for (const v of this.helpers.beamHelpers) {
                 for (const h of v) {
-                    if (h.isRestBeamHelper) {
-                        if (h.minRestSteps) {
-                            const topY = this.getLineY(h.maxRestSteps / 2) - noteOverflowPadding;
-                            if (topY < maxNoteY) {
-                                maxNoteY = topY;
-                            }
-                        }
-                        if (h.maxRestSteps) {
-                            const bottomY = this.getLineY(h.maxRestSteps & 2) + noteOverflowPadding;
-                            if (bottomY < maxNoteY) {
-                                maxNoteY = bottomY;
-                            }
-                        }
-                    }
+                    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);
@@ -66379,17 +66312,6 @@
                             }
                         }
                     }
-                    const beatContainer = this.getBeatContainer(h.beats[0]);
-                    if (beatContainer) {
-                        const bBoxTop = beatContainer.getBoundingBoxTop();
-                        const bBoxBottom = beatContainer.getBoundingBoxBottom();
-                        if (bBoxBottom > minNoteY) {
-                            minNoteY = bBoxBottom;
-                        }
-                        if (bBoxTop < maxNoteY) {
-                            maxNoteY = bBoxTop;
-                        }
-                    }
                 }
             }
             if (maxNoteY < rendererTop) {
@@ -66405,25 +66327,6 @@
             }
             const scale = h.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1;
             const barCount = ModelUtils.getIndex(h.shortestDuration) - 2;
-            let stemSize = this.smuflMetrics.standardStemLength * scale;
-            if (h.tremoloDuration) {
-                // for 16th and shorter beats we need more space for all tremolos
-                // for 8th beats we need only more space for 32nd tremolos
-                // the logic here is not perfect but there is no SMuFL guideline
-                // on how tremolos need to extend stems
-                const oneBeamSize = (this.smuflMetrics.beamThickness + this.smuflMetrics.beamSpacing) * scale;
-                if (h.shortestDuration > Duration.Eighth) {
-                    if (h.tremoloDuration === Duration.Eighth) {
-                        stemSize += oneBeamSize;
-                    }
-                    else {
-                        stemSize += oneBeamSize * 1.5;
-                    }
-                }
-                else if (h.tremoloDuration === Duration.ThirtySecond) {
-                    stemSize += oneBeamSize * 1.5;
-                }
-            }
             const drawingInfo = new BeamingHelperDrawInfo();
             h.drawingInfos.set(direction, drawingInfo);
             // the beaming logic works like this:
@@ -66436,33 +66339,17 @@
             const isRest = h.isRestBeamHelper;
             // 1. put direct diagonal line.
             drawingInfo.startBeat = firstBeat;
-            drawingInfo.startX = h.getBeatLineX(firstBeat);
-            if (isRest) {
-                drawingInfo.startY =
-                    direction === BeamDirection.Up
-                        ? this.getLineY(h.minRestSteps / 2)
-                        : this.getLineY(h.maxRestSteps / 2);
-            }
-            else {
-                drawingInfo.startY =
-                    direction === BeamDirection.Up
-                        ? this.getFlagTopY(firstBeat, direction)
-                        : this.getFlagBottomY(firstBeat, direction);
-            }
+            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 = h.getBeatLineX(lastBeat);
-            if (isRest) {
-                drawingInfo.endY =
-                    direction === BeamDirection.Up
-                        ? this.getLineY(h.minRestSteps / 2)
-                        : this.getLineY(h.maxRestSteps / 2);
-            }
-            else {
-                drawingInfo.endY =
-                    direction === BeamDirection.Up
-                        ? this.getFlagTopY(lastBeat, direction)
-                        : this.getFlagBottomY(lastBeat, direction);
-            }
+            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
@@ -66487,12 +66374,41 @@
                 drawingInfo.startY - drawingInfo.endY > maxSlope) {
                 drawingInfo.startY = drawingInfo.endY + maxSlope;
             }
-            // 3. let middle elements shift up/down
+            // 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;
+                    }
+                }
+                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 = this.getLineY(this.getMinLineOfBeat(h.beatOfHighestNote)) - stemSize;
-                    const yGivenByCurrentValues = drawingInfo.calcY(h.getBeatLineX(h.beatOfHighestNote));
+                    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;
@@ -66500,8 +66416,8 @@
                     }
                 }
                 else {
-                    const yNeededForLowestNote = this.getLineY(this.getMaxLineOfBeat(h.beatOfLowestNote)) + stemSize;
-                    const yGivenByCurrentValues = drawingInfo.calcY(h.getBeatLineX(h.beatOfLowestNote));
+                    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;
@@ -66509,33 +66425,39 @@
                     }
                 }
                 // check if rest shifts bar up or down
-                if (h.minRestSteps !== null || h.maxRestSteps !== null) {
+                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 ? NoteHeadGlyph.GraceScale : 1;
-                    let barSpacing = barCount * (this.smuflMetrics.beamSpacing + this.smuflMetrics.beamThickness) * scaleMod;
-                    barSpacing += this.smuflMetrics.beamSpacing;
-                    if (direction === BeamDirection.Up && h.minRestSteps !== null) {
-                        const yNeededForRest = this.getLineY(h.minRestSteps / 2) - barSpacing;
-                        const yGivenByCurrentValues = drawingInfo.calcY(h.getBeatLineX(h.beatOfMinRestSteps));
-                        const diff = yGivenByCurrentValues - yNeededForRest;
-                        if (diff > 0) {
-                            drawingInfo.startY -= diff;
-                            drawingInfo.endY -= diff;
+                    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 && h.maxRestSteps !== null) {
-                        const yNeededForRest = this.getLineHeight(h.maxRestSteps / 2) + barSpacing;
-                        const yGivenByCurrentValues = drawingInfo.calcY(h.getBeatLineX(h.beatOfMaxRestSteps));
-                        const diff = yNeededForRest - yGivenByCurrentValues;
-                        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(h.getBeatLineX(b));
+                        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);
@@ -66547,31 +66469,6 @@
                     }
                 }
             }
-            // we can only draw up to 2 beams towards the noteheads, then we have to grow to the other side
-            // here we shift accordingly
-            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) {
-                        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) {
-                        drawingInfo.startY += diff;
-                        drawingInfo.endY += diff;
-                    }
-                }
-            }
         }
         getMinLineOfBeat(_beat) {
             return 0;
@@ -67092,20 +66989,6 @@
             }
             return 0;
         }
-        updateBeamingHelper() {
-            if (this.beamingHelper) {
-                let g = null;
-                if (this.noteHeads) {
-                    g = this.noteHeads;
-                }
-                else if (this.deadSlapped) {
-                    g = this.deadSlapped;
-                }
-                if (g) {
-                    this.beamingHelper.registerBeatLineX('numbered', this.container.beat, this.container.x + this.x + g.x, this.container.x + this.x + g.x + g.width);
-                }
-            }
-        }
         static majorKeySignatureOneValues = [
             // Flats
             59, 66, 61, 68, 63, 58, 65,
@@ -67221,14 +67104,16 @@
             }
             super.doLayout();
             if (this.container.beat.isEmpty) {
-                this.centerX = this.width / 2;
+                this.onTimeX = this.width / 2;
             }
             else if (this.noteHeads) {
-                this.centerX = this.noteHeads.x + this.noteHeads.width / 2;
+                this.onTimeX = this.noteHeads.x + this.noteHeads.width / 2;
             }
             else if (this.deadSlapped) {
-                this.centerX = this.deadSlapped.x + this.deadSlapped.width / 2;
+                this.onTimeX = this.deadSlapped.x + this.deadSlapped.width / 2;
             }
+            this.middleX = this.onTimeX;
+            this.stemX = this.middleX;
         }
     }
 
@@ -67641,7 +67526,7 @@
                     const barSize = this.smuflMetrics.numberedBarRendererBarSize;
                     const barCount = ModelUtils.getIndex(beat.duration) - 2;
                     const barStart = cy + this.y;
-                    const beatLineX = this.getBeatX(beat, BeatXPosition.PreNotes) - this.beatGlyphsStart;
+                    const beatLineX = this.getBeatX(beat, BeatXPosition.PreNotes);
                     const beamY = this.calculateBeamY(h, beatLineX);
                     for (let barIndex = 0; barIndex < barCount; barIndex++) {
                         let barStartX = 0;
@@ -67650,11 +67535,11 @@
                         const barY = barStart + barIndex * barSpacing;
                         if (i === h.beats.length - 1) {
                             barStartX = beatLineX;
-                            barEndX = this.getBeatX(beat, BeatXPosition.PostNotes) - this.beatGlyphsStart;
+                            barEndX = this.getBeatX(beat, BeatXPosition.PostNotes);
                         }
                         else {
                             barStartX = beatLineX;
-                            barEndX = this.getBeatX(h.beats[i + 1], BeatXPosition.PreNotes) - this.beatGlyphsStart;
+                            barEndX = this.getBeatX(h.beats[i + 1], BeatXPosition.PreNotes);
                         }
                         barStartY = barY + beamY;
                         canvas.fillRect(cx + this.x + barStartX, barStartY, barEndX - barStartX, barSize);
@@ -67672,7 +67557,7 @@
                         dotsY = barStart + beamY + barCount * (barSpacing + barSize);
                         dotsOffset = dotSpacing;
                     }
-                    const dotX = this.getBeatX(beat, BeatXPosition.MiddleNotes) - this.beatGlyphsStart;
+                    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);
@@ -67721,7 +67606,7 @@
             return this.getLineY(0) - noteHeadHeight / 2;
         }
         createPreBeatGlyphs() {
-            this.wasFirstOfLine = this.isFirstOfLine;
+            this.wasFirstOfStaff = this.isFirstOfStaff;
             if (this.index === 0 || (this.bar.masterBar.isRepeatStart && this._isOnlyNumbered)) {
                 this.addPreBeatGlyph(new BarLineGlyph(false, this.bar.staff.track.score.stylesheet.extendBarLines));
             }
@@ -67777,6 +67662,11 @@
         }
         paintBeamingStem(_beat, _cy, _x, _topY, _bottomY, _canvas) {
         }
+        paintBeamHelper(cx, cy, canvas, h, flagsElement, beamsElement) {
+            if (h.voice?.index === 0) {
+                super.paintBeamHelper(cx, cy, canvas, h, flagsElement, beamsElement);
+            }
+        }
     }
 
     /**
@@ -68094,6 +67984,7 @@
         upLineX = 0;
         downLineX = 0;
         noteStartX = 0;
+        onTimeX = 0;
         constructor() {
             super(0, 0);
         }
@@ -68180,6 +68071,8 @@
             // align all notes so that they align with the stem positions
             const stemPosition = anyDisplaced || direction === BeamDirection.Up ? stemUpX : stemDownX;
             let w = 0;
+            let displacedWidth = 0;
+            let nonDisplacedWidth = 0;
             for (let i = 0, j = this._infos.length; i < j; i++) {
                 const g = this._infos[i].glyph;
                 const alignDisplaced = displaced.get(i);
@@ -68195,7 +68088,14 @@
                     }
                 }
                 g.x += this.noteStartX;
-                w = Math.max(w, g.x + g.width);
+                const gw = g.x + g.width;
+                w = Math.max(w, gw);
+                if (alignDisplaced) {
+                    displacedWidth = Math.max(displacedWidth, gw);
+                }
+                else {
+                    nonDisplacedWidth = Math.max(nonDisplacedWidth, gw);
+                }
                 // after size calculation, re-align glyph to stem if needed
                 if (g instanceof NoteHeadGlyph && g.centerOnStem) {
                     g.x = stemPosition;
@@ -68209,6 +68109,23 @@
                 this.upLineX = stemUpX;
                 this.downLineX = stemDownX;
             }
+            // the center of score notes, (used for aligning the beat to the right on-time position)
+            // is always the center of the "correct note" position.
+            // * If the stem is upwards, the center is the middle of the left hand side note head
+            // * If the stem is downards, the center is the middle of the right-hand-side note head
+            if (anyDisplaced) {
+                if (direction === BeamDirection.Up) {
+                    this.onTimeX = nonDisplacedWidth / 2;
+                }
+                else {
+                    const displacedRawWith = displacedWidth - stemPosition;
+                    this.onTimeX = stemPosition + (displacedRawWith / 2);
+                }
+            }
+            else {
+                // for no displaced notes it is simply the center
+                this.onTimeX = w / 2;
+            }
             this.width = w;
         }
         paint(cx, cy, canvas) {
@@ -68286,9 +68203,8 @@
         aboveBeatEffects = new Map();
         belowBeatEffects = new Map();
         beat;
-        beamingHelper;
         get direction() {
-            return this.beamingHelper.direction;
+            return this.renderer.getBeatDirection(this.beat);
         }
         get scale() {
             return this.beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1;
@@ -68330,7 +68246,7 @@
                             : 0) * scale;
                     // stem size according to duration
                     pos -= this.renderer.smuflMetrics.standardStemLength * scale;
-                    const topCenterY = this.renderer.centerStaffStemY(this.beamingHelper);
+                    const topCenterY = this.renderer.centerStaffStemY(this.direction);
                     return Math.min(topCenterY, pos);
                 case NoteYPosition.Top:
                     pos -= n.height / 2;
@@ -68347,7 +68263,7 @@
                             : -this.renderer.smuflMetrics.glyphHeights.get(n.symbol) / 2) * scale;
                     // stem size according to duration
                     pos += this.renderer.smuflMetrics.standardStemLength * scale;
-                    const bottomCenterY = this.renderer.centerStaffStemY(this.beamingHelper);
+                    const bottomCenterY = this.renderer.centerStaffStemY(this.direction);
                     return Math.max(bottomCenterY, pos);
                 case NoteYPosition.StemUp:
                     pos -=
@@ -68372,11 +68288,6 @@
         addEffectNoteGlyph(noteGlyph, noteLine) {
             super.add(noteGlyph, noteLine);
         }
-        updateBeamingHelper(cx) {
-            if (this.beamingHelper) {
-                this.beamingHelper.registerBeatLineX('score', this.beat, cx + this.x + this.upLineX, cx + this.x + this.downLineX);
-            }
-        }
         doLayout() {
             super.doLayout();
             const scoreRenderer = this.renderer;
@@ -68385,6 +68296,7 @@
                 this._deadSlapped.renderer = this.renderer;
                 this._deadSlapped.doLayout();
                 this.width = this._deadSlapped.width;
+                this.onTimeX = this.width / 2;
             }
             let aboveBeatEffectsY = 0;
             let belowBeatEffectsY = 0;
@@ -68503,7 +68415,6 @@
      * @internal
      */
     class ScoreRestGlyph extends MusicFontGlyph {
-        beamingHelper;
         constructor(x, y, duration) {
             super(x, y, 1, ScoreRestGlyph.getSymbol(duration));
         }
@@ -68535,11 +68446,6 @@
                     return MusicFontSymbol.None;
             }
         }
-        updateBeamingHelper(cx) {
-            if (this.beamingHelper) {
-                this.beamingHelper.registerBeatLineX('score', this.beat, cx + this.x + this.width / 2, cx + this.x + this.width / 2);
-            }
-        }
         paint(cx, cy, canvas) {
             this.internalPaint(cx, cy, canvas, BeatSubElement.StandardNotationRests);
         }
@@ -69031,10 +68937,11 @@
      */
     class SlashNoteHeadGlyph extends MusicFontGlyph {
         beatEffects = new Map();
-        beamingHelper;
         noteHeadElement = NoteSubElement.SlashNoteHead;
         effectElement = BeatSubElement.SlashEffects;
         _symbol;
+        upLineX = 0;
+        downLineX = 0;
         constructor(x, y, duration, isGrace, beat) {
             super(x, y, isGrace ? NoteHeadGlyph.GraceScale : 1, SlashNoteHeadGlyph.getSymbol(duration));
             this._symbol = SlashNoteHeadGlyph.getSymbol(duration);
@@ -69085,6 +68992,15 @@
             if (!Number.isNaN(minEffectY)) {
                 this.renderer.registerBeatEffectOverflows(minEffectY, maxEffectY);
             }
+            const symbol = this._symbol;
+            const stemInfoUp = this.renderer.smuflMetrics.stemUp.has(symbol)
+                ? this.renderer.smuflMetrics.stemUp.get(symbol).x
+                : 0;
+            this.upLineX = stemInfoUp;
+            const stemInfoDown = this.renderer.smuflMetrics.stemDown.has(symbol)
+                ? this.renderer.smuflMetrics.stemDown.get(symbol).x
+                : 0;
+            this.downLineX = stemInfoDown;
         }
         static getSymbol(duration) {
             switch (duration) {
@@ -69098,25 +69014,13 @@
                     return MusicFontSymbol.NoteheadSlashHorizontalEnds;
             }
         }
-        updateBeamingHelper(cx) {
-            if (this.beamingHelper) {
-                const symbol = this._symbol;
-                const stemInfoUp = this.renderer.smuflMetrics.stemUp.has(symbol)
-                    ? this.renderer.smuflMetrics.stemUp.get(symbol).x
-                    : 0;
-                const stemInfoDown = this.renderer.smuflMetrics.stemDown.has(symbol)
-                    ? this.renderer.smuflMetrics.stemDown.get(symbol).x
-                    : 0;
-                this.beamingHelper.registerBeatLineX('slash', this.beat, cx + this.x + stemInfoUp, cx + this.x + stemInfoDown);
-            }
-        }
     }
 
     /**
      * @internal
      */
     class ScoreBeatGlyph extends BeatOnNoteGlyphBase {
-        _collisionOffset = -1e3;
+        _collisionOffset = Number.NaN;
         _skipPaint = false;
         _whammy;
         noteHeads = null;
@@ -69167,22 +69071,19 @@
         getNoteY(note, requestedPosition) {
             return this.noteHeads ? this.noteHeads.getNoteY(note, requestedPosition) : 0;
         }
-        updateBeamingHelper() {
-            if (this.noteHeads) {
-                this.noteHeads.updateBeamingHelper(this.container.x + this.x);
+        applyRestCollisionOffset() {
+            if (!this.restGlyph) {
+                return;
             }
-            else if (this.restGlyph) {
-                this.restGlyph.updateBeamingHelper(this.container.x + this.x);
-                if (this.renderer.bar.isMultiVoice && this._collisionOffset === -1e3) {
-                    this._collisionOffset = this.renderer.helpers.collisionHelper.applyRestCollisionOffset(this.container.beat, this.restGlyph.y, this.renderer.getScoreHeight(1));
-                    this.y += this._collisionOffset;
-                    const existingRests = this.renderer.helpers.collisionHelper.restDurationsByDisplayTime;
-                    if (existingRests.has(this.container.beat.playbackStart) &&
-                        existingRests.get(this.container.beat.playbackStart).has(this.container.beat.playbackDuration) &&
-                        existingRests.get(this.container.beat.playbackStart).get(this.container.beat.playbackDuration) !==
-                            this.container.beat.id) {
-                        this._skipPaint = true;
-                    }
+            if (this.renderer.bar.isMultiVoice && Number.isNaN(this._collisionOffset)) {
+                this._collisionOffset = this.renderer.collisionHelper.applyRestCollisionOffset(this.container.beat, this.restGlyph.y, this.renderer.getScoreHeight(1));
+                this.y += this._collisionOffset;
+                const existingRests = this.renderer.collisionHelper.restDurationsByDisplayTime;
+                if (existingRests.has(this.container.beat.playbackStart) &&
+                    existingRests.get(this.container.beat.playbackStart).has(this.container.beat.playbackDuration) &&
+                    existingRests.get(this.container.beat.playbackStart).get(this.container.beat.playbackDuration) !==
+                        this.container.beat.id) {
+                    this._skipPaint = true;
                 }
             }
         }
@@ -69202,7 +69103,6 @@
                     const noteHeads = new ScoreNoteChordGlyph();
                     this.noteHeads = noteHeads;
                     noteHeads.beat = this.container.beat;
-                    noteHeads.beamingHelper = this.beamingHelper;
                     const ghost = new GhostNoteContainerGlyph(false);
                     ghost.renderer = this.renderer;
                     for (const note of this.container.beat.notes) {
@@ -69252,22 +69152,18 @@
                     const restGlyph = new ScoreRestGlyph(0, sr.getScoreY(steps), this.container.beat.duration);
                     this.restGlyph = restGlyph;
                     restGlyph.beat = this.container.beat;
-                    restGlyph.beamingHelper = this.beamingHelper;
                     this.addNormal(restGlyph);
                     if (this.renderer.bar.isMultiVoice) {
                         if (this.container.beat.voice.index === 0) {
                             const restSizes = BeamingHelper.computeLineHeightsForRest(this.container.beat.duration);
                             const restTop = restGlyph.y - sr.getScoreHeight(restSizes[0]);
                             const restBottom = restGlyph.y + sr.getScoreHeight(restSizes[1]);
-                            this.renderer.helpers.collisionHelper.reserveBeatSlot(this.container.beat, restTop, restBottom);
+                            this.renderer.collisionHelper.reserveBeatSlot(this.container.beat, restTop, restBottom);
                         }
                         else {
-                            this.renderer.helpers.collisionHelper.registerRest(this.container.beat);
+                            this.renderer.collisionHelper.registerRest(this.container.beat);
                         }
                     }
-                    if (this.beamingHelper) {
-                        this.beamingHelper.applyRest(this.container.beat, steps);
-                    }
                     //
                     // Note dots
                     //
@@ -69282,14 +69178,24 @@
                 }
             }
             super.doLayout();
+            this.applyRestCollisionOffset();
             if (this.container.beat.isEmpty) {
-                this.centerX = this.width / 2;
+                this.onTimeX = this.width / 2;
+                this.middleX = this.onTimeX;
+                this.stemX = this.middleX;
             }
             else if (this.restGlyph) {
-                this.centerX = this.restGlyph.x + this.restGlyph.width / 2;
+                this.onTimeX = this.restGlyph.x + this.restGlyph.width / 2;
+                this.middleX = this.onTimeX;
+                this.stemX = this.middleX;
             }
             else if (this.noteHeads) {
-                this.centerX = this.noteHeads.x + this.noteHeads.width / 2;
+                this.onTimeX = this.noteHeads.x + this.noteHeads.onTimeX;
+                this.middleX = this.noteHeads.x + this.noteHeads.width / 2;
+                const direction = this.renderer.getBeatDirection(this.container.beat);
+                this.stemX =
+                    this.noteHeads.x +
+                        (direction === BeamDirection.Up ? this.noteHeads.upLineX : this.noteHeads.downLineX);
             }
         }
         _createBeatDot(line, group) {
@@ -69361,7 +69267,7 @@
             }
             const belowBeatEffects = this.noteHeads.belowBeatEffects;
             const aboveBeatEffects = this.noteHeads.aboveBeatEffects;
-            const outsideBeatEffects = this.beamingHelper.direction === BeamDirection.Up
+            const outsideBeatEffects = this.renderer.getBeatDirection(this.container.beat) === BeamDirection.Up
                 ? this.noteHeads.belowBeatEffects
                 : this.noteHeads.aboveBeatEffects;
             if (n.isStaccato && !belowBeatEffects.has('Staccato')) {
@@ -69797,7 +69703,7 @@
                         // if we have a line break we draw only a line until the end
                         if (!endNoteRenderer || endNoteRenderer.staff !== startNoteRenderer.staff) {
                             const endX = cx + startNoteRenderer.x + startNoteRenderer.width;
-                            const noteValueToDraw = note.tieDestination.realValue;
+                            const noteValueToDraw = note.tieDestination.displayValue;
                             startNoteRenderer.accidentalHelper.applyAccidentalForValue(note.beat, noteValueToDraw, false, true);
                             const endY = cy +
                                 startNoteRenderer.y +
@@ -70333,6 +70239,22 @@
         doLayout() {
             this._effectSlur = null;
             this._effectEndSlur = null;
+            // make space for flag
+            const sr = this.renderer;
+            const beat = this.beat;
+            const isGrace = beat.graceType !== GraceType.None;
+            if (sr.hasFlag(beat)) {
+                const direction = this.renderer.getBeatDirection(beat);
+                const scale = isGrace ? NoteHeadGlyph.GraceScale : 1;
+                const symbol = FlagGlyph.getSymbol(beat.duration, direction, isGrace);
+                const flagWidth = this.renderer.smuflMetrics.glyphWidths.get(symbol) * scale;
+                this._flagStretch = flagWidth;
+            }
+            else if (isGrace) {
+                // always use flag size as spacing on grace notes
+                const graceSpacing = this.renderer.smuflMetrics.glyphWidths.get(MusicFontSymbol.Flag8thUp) * NoteHeadGlyph.GraceScale;
+                this._flagStretch = graceSpacing;
+            }
             super.doLayout();
             if (this._bend) {
                 this._bend.renderer = this.renderer;
@@ -70342,7 +70264,7 @@
         }
         getBoundingBoxTop() {
             if (this._bend !== null) {
-                return Math.min(this._bend.getBoundingBoxTop(), super.getBoundingBoxTop());
+                return ModelUtils.minBoundingBox(this._bend.getBoundingBoxTop(), super.getBoundingBoxTop());
             }
             else {
                 return super.getBoundingBoxTop();
@@ -70350,7 +70272,7 @@
         }
         getBoundingBoxBottom() {
             if (this._bend !== null) {
-                return Math.max(this._bend.getBoundingBoxBottom(), super.getBoundingBoxTop());
+                return ModelUtils.maxBoundingBox(this._bend.getBoundingBoxBottom(), super.getBoundingBoxTop());
             }
             else {
                 return super.getBoundingBoxBottom();
@@ -70398,7 +70320,7 @@
             }
             // end effect slur on last beat
             if (!this._effectEndSlur && n.beat.isEffectSlurDestination && n.beat.effectSlurOrigin) {
-                const direction = this.onNotes.beamingHelper.direction;
+                const direction = this.renderer.getBeatDirection(n.beat);
                 const startNote = direction === BeamDirection.Up ? n.beat.effectSlurOrigin.minNote : n.beat.effectSlurOrigin.maxNote;
                 const endNote = direction === BeamDirection.Up ? n.beat.minNote : n.beat.maxNote;
                 const effectEndSlur = new ScoreSlurGlyph(`score.slur.effect.${startNote.beat.id}`, startNote, endNote, true);
@@ -70437,6 +70359,15 @@
                 }
             }
         }
+        _flagStretch = 0;
+        get postBeatStretch() {
+            return super.postBeatStretch + this._flagStretch;
+        }
+        updateWidth() {
+            super.updateWidth();
+            this.width += this._flagStretch;
+            this.minWidth += this._flagStretch;
+        }
     }
 
     /**
@@ -70471,7 +70402,7 @@
             return this.smuflMetrics.oneStaffSpace;
         }
         get heightLineCount() {
-            return 5;
+            return Math.max(5, this.bar.staff.standardNotationLineCount);
         }
         get drawnLineCount() {
             return this.bar.staff.standardNotationLineCount;
@@ -70528,7 +70459,9 @@
                     slashY -= this.smuflMetrics.stemUp.has(symbol)
                         ? this.smuflMetrics.stemUp.get(symbol).bottomY * scale
                         : 0;
-                    slashY -= this.smuflMetrics.standardStemLength + scale;
+                    if (!beat.isRest) {
+                        slashY -= this.smuflMetrics.standardStemLength + scale;
+                    }
                 }
                 return slashY;
             }
@@ -70537,7 +70470,7 @@
                 return this.getBeatContainer(beat).onNotes.getNoteY(minNote, direction === BeamDirection.Up ? NoteYPosition.TopWithStem : NoteYPosition.StemDown);
             }
             let y = this.getScoreY(this.accidentalHelper.getMinSteps(beat));
-            if (direction === BeamDirection.Up) {
+            if (direction === BeamDirection.Up && !beat.isRest) {
                 const scale = beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1;
                 y -= this.smuflMetrics.standardStemLength * scale;
             }
@@ -70575,14 +70508,14 @@
         getBeamDirection(helper) {
             return helper.direction;
         }
-        centerStaffStemY(helper) {
+        centerStaffStemY(direction) {
             const isStandardFive = this.bar.staff.standardNotationLineCount === Staff.DefaultStandardNotationLineCount;
             if (isStandardFive) {
                 // center on the middle line for a standard 5-line staff
                 return this.getScoreY(this.bar.staff.standardNotationLineCount - 1);
             }
             // for other staff line counts, we align the stem either on the top or bottom line
-            if (helper.direction === BeamDirection.Up) {
+            if (direction === BeamDirection.Up) {
                 return this.getScoreY(this.bar.staff.standardNotationLineCount * 2);
             }
             return this.getScoreY(0);
@@ -70684,7 +70617,7 @@
         createLinePreBeatGlyphs() {
             // Clef
             let hasClef = false;
-            if (this.isFirstOfLine ||
+            if (this.isFirstOfStaff ||
                 this.bar.clef !== this.bar.previousBar.clef ||
                 this.bar.clefOttava !== this.bar.previousBar.clefOttava) {
                 // SMUFL: Clefs should be positioned such that the pitch the clef refers to is on the baseline
@@ -70889,6 +70822,25 @@
      */
     class SlashBeatContainerGlyph extends BeatContainerGlyph {
         _tiedNoteTie = null;
+        doLayout() {
+            // make space for flag
+            const sr = this.renderer;
+            const beat = this.beat;
+            const isGrace = beat.graceType !== GraceType.None;
+            if (sr.hasFlag(beat)) {
+                const direction = this.renderer.getBeatDirection(beat);
+                const scale = isGrace ? NoteHeadGlyph.GraceScale : 1;
+                const symbol = FlagGlyph.getSymbol(beat.duration, direction, isGrace);
+                const flagWidth = this.renderer.smuflMetrics.glyphWidths.get(symbol) * scale;
+                this._flagStretch = flagWidth;
+            }
+            else if (isGrace) {
+                // always use flag size as spacing on grace notes
+                const graceSpacing = this.renderer.smuflMetrics.glyphWidths.get(MusicFontSymbol.Flag8thUp) * NoteHeadGlyph.GraceScale;
+                this._flagStretch = graceSpacing;
+            }
+            super.doLayout();
+        }
         createTies(n) {
             // create a tie if any effect requires it
             if (!n.isVisible) {
@@ -70905,17 +70857,21 @@
                 this.addTie(tie);
             }
         }
+        _flagStretch = 0;
+        get postBeatStretch() {
+            return super.postBeatStretch + this._flagStretch;
+        }
+        updateWidth() {
+            super.updateWidth();
+            this.width += this._flagStretch;
+            this.minWidth += this._flagStretch;
+        }
     }
 
     /**
      * @internal
      */
     class SlashRestGlyph extends ScoreRestGlyph {
-        updateBeamingHelper(cx) {
-            if (this.beamingHelper) {
-                this.beamingHelper.registerBeatLineX('slash', this.beat, cx + this.x + this.width / 2, cx + this.x + this.width / 2);
-            }
-        }
         paint(cx, cy, canvas) {
             super.internalPaint(cx, cy, canvas, BeatSubElement.SlashRests);
         }
@@ -71011,19 +70967,6 @@
             }
             return 0;
         }
-        updateBeamingHelper() {
-            if (this.noteHeads) {
-                this.noteHeads.updateBeamingHelper(this.container.x + this.x);
-            }
-            else if (this.deadSlapped) {
-                if (this.beamingHelper) {
-                    this.beamingHelper.registerBeatLineX('slash', this.container.beat, this.container.x + this.x + this.deadSlapped.x + this.width, this.container.x + this.x + this.deadSlapped.x);
-                }
-            }
-            else if (this.restGlyph) {
-                this.restGlyph.updateBeamingHelper(this.container.x + this.x);
-            }
-        }
         doLayout() {
             // create glyphs
             const sr = this.renderer;
@@ -71041,18 +70984,13 @@
                     const noteHeadGlyph = new SlashNoteHeadGlyph(0, glyphY, this.container.beat.duration, isGrace, this.container.beat);
                     this.noteHeads = noteHeadGlyph;
                     noteHeadGlyph.beat = this.container.beat;
-                    noteHeadGlyph.beamingHelper = this.beamingHelper;
                     this.addNormal(noteHeadGlyph);
                 }
                 else {
                     const restGlyph = new SlashRestGlyph(0, glyphY, this.container.beat.duration);
                     this.restGlyph = restGlyph;
                     restGlyph.beat = this.container.beat;
-                    restGlyph.beamingHelper = this.beamingHelper;
                     this.addNormal(restGlyph);
-                    if (this.beamingHelper) {
-                        this.beamingHelper.applyRest(this.container.beat, 0);
-                    }
                 }
             }
             //
@@ -71065,17 +71003,25 @@
             }
             super.doLayout();
             if (this.container.beat.isEmpty) {
-                this.centerX = this.width / 2;
+                this.onTimeX = this.width / 2;
+                this.stemX = this.onTimeX;
             }
             else if (this.restGlyph) {
-                this.centerX = this.restGlyph.x + this.restGlyph.width / 2;
+                this.onTimeX = this.restGlyph.x + this.restGlyph.width / 2;
+                this.stemX = this.onTimeX;
             }
             else if (this.noteHeads) {
-                this.centerX = this.noteHeads.x + this.noteHeads.width / 2;
+                this.onTimeX = this.noteHeads.x + this.noteHeads.width / 2;
+                const direction = this.renderer.getBeatDirection(this.container.beat);
+                this.stemX =
+                    this.noteHeads.x +
+                        (direction === BeamDirection.Up ? this.noteHeads.upLineX : this.noteHeads.downLineX);
             }
             else if (this.deadSlapped) {
-                this.centerX = this.deadSlapped.x + this.deadSlapped.width / 2;
+                this.onTimeX = this.deadSlapped.x + this.deadSlapped.width / 2;
+                this.stemX = this.onTimeX;
             }
+            this.middleX = this.onTimeX;
         }
     }
 
@@ -71150,7 +71096,9 @@
             const symbol = SlashNoteHeadGlyph.getSymbol(beat.duration);
             const scale = beat.graceType !== GraceType.None ? NoteHeadGlyph.GraceScale : 1;
             slashY -= this.smuflMetrics.stemUp.has(symbol) ? this.smuflMetrics.stemUp.get(symbol).bottomY * scale : 0;
-            slashY -= this.smuflMetrics.standardStemLength + scale;
+            if (!beat.isRest) {
+                slashY -= this.smuflMetrics.standardStemLength + scale;
+            }
             return slashY;
         }
         getFlagBottomY(beat, _direction) {
@@ -71234,6 +71182,11 @@
                 _?.[Symbol.dispose]?.();
             }
         }
+        paintBeamHelper(cx, cy, canvas, h, flagsElement, beamsElement) {
+            if (h.voice?.index === 0) {
+                super.paintBeamHelper(cx, cy, canvas, h, flagsElement, beamsElement);
+            }
+        }
     }
 
     /**
@@ -71690,7 +71643,6 @@
         _deadSlapped = null;
         _isGrace;
         beat;
-        beamingHelper;
         maxStringNote = null;
         minStringNote = null;
         beatEffects = new Map();
@@ -71839,11 +71791,6 @@
                 }
             }
         }
-        updateBeamingHelper(cx) {
-            if (this.beamingHelper && this.beamingHelper.isPositionFrom('tab', this.beat)) {
-                this.beamingHelper.registerBeatLineX('tab', this.beat, cx + this.x + this.width / 2, cx + this.x + this.width / 2);
-            }
-        }
     }
 
     /**
@@ -71851,7 +71798,6 @@
      */
     class TabRestGlyph extends MusicFontGlyph {
         _isVisibleRest;
-        beamingHelper;
         constructor(x, y, isVisibleRest, duration) {
             super(x, y, 1, ScoreRestGlyph.getSymbol(duration));
             this._isVisibleRest = isVisibleRest;
@@ -71859,11 +71805,6 @@
         doLayout() {
             super.doLayout();
         }
-        updateBeamingHelper(cx) {
-            if (this.beamingHelper && this.beamingHelper.isPositionFrom('tab', this.beat)) {
-                this.beamingHelper.registerBeatLineX('tab', this.beat, cx + this.x + this.width / 2, cx + this.x + this.width / 2);
-            }
-        }
         paint(cx, cy, canvas) {
             if (this._isVisibleRest) {
                 const _ = ElementStyleHelper.beat(canvas, BeatSubElement.GuitarTabRests, this.beat);
@@ -71920,7 +71861,6 @@
                     slashNoteHead.effectElement = BeatSubElement.GuitarTabEffects;
                     this.slash = slashNoteHead;
                     slashNoteHead.beat = this.container.beat;
-                    slashNoteHead.beamingHelper = this.beamingHelper;
                     this.addNormal(slashNoteHead);
                     beatEffects = slashNoteHead.beatEffects;
                 }
@@ -71928,7 +71868,6 @@
                     const tabNoteNumbers = new TabNoteChordGlyph(0, 0, isGrace);
                     this.noteNumbers = tabNoteNumbers;
                     tabNoteNumbers.beat = this.container.beat;
-                    tabNoteNumbers.beamingHelper = this.beamingHelper;
                     for (const note of this.container.beat.notes) {
                         if (note.isVisible) {
                             this._createNoteGlyph(note);
@@ -71950,9 +71889,9 @@
                 // Note dots
                 //
                 if (this.container.beat.dots > 0 && tabRenderer.rhythmMode !== exports.TabRhythmMode.Hidden) {
+                    const y = tabRenderer.getFlagAndBarPos();
                     for (let i = 0; i < this.container.beat.dots; i++) {
-                        this.addEffect(new AugmentationDotGlyph(0, tabRenderer.lineOffset * tabRenderer.bar.staff.tuning.length +
-                            tabRenderer.settings.notation.rhythmHeight));
+                        this.addEffect(new AugmentationDotGlyph(0, y));
                     }
                 }
             }
@@ -71962,7 +71901,6 @@
                 const restGlyph = new TabRestGlyph(0, y, tabRenderer.showRests, this.container.beat.duration);
                 this.restGlyph = restGlyph;
                 restGlyph.beat = this.container.beat;
-                restGlyph.beamingHelper = this.beamingHelper;
                 this.addNormal(restGlyph);
                 //
                 // Note dots
@@ -71988,30 +71926,21 @@
             this.width = w;
             this.computedWidth = w;
             if (this.container.beat.isEmpty) {
-                this.centerX = this.width / 2;
+                this.onTimeX = this.width / 2;
             }
             else if (this.restGlyph) {
-                this.centerX = this.restGlyph.x + this.restGlyph.width / 2;
+                this.onTimeX = this.restGlyph.x + this.restGlyph.width / 2;
             }
             else if (this.noteNumbers) {
-                this.centerX = this.noteNumbers.x + this.noteNumbers.noteStringWidth / 2;
+                this.onTimeX = this.noteNumbers.x + this.noteNumbers.noteStringWidth / 2;
             }
             else if (this.slash) {
-                this.centerX = this.slash.x + this.slash.width / 2;
+                this.onTimeX = this.slash.x + this.slash.width / 2;
             }
+            this.middleX = this.onTimeX;
+            this.stemX = this.middleX;
             for (const g of centeredEffectGlyphs) {
-                g.x = this.centerX;
-            }
-        }
-        updateBeamingHelper() {
-            if (this.noteNumbers) {
-                this.noteNumbers.updateBeamingHelper(this.container.x + this.x);
-            }
-            else if (this.restGlyph) {
-                this.restGlyph.updateBeamingHelper(this.container.x + this.x);
-            }
-            else if (this.slash) {
-                this.slash.updateBeamingHelper(this.container.x + this.x);
+                g.x = this.onTimeX;
             }
         }
         _createNoteGlyph(n) {
@@ -72024,7 +71953,7 @@
             this.noteNumbers.addNoteGlyph(noteNumberGlyph, n);
             const topY = noteNumberGlyph.y - noteNumberGlyph.height / 2;
             const bottomY = topY + noteNumberGlyph.height;
-            this.renderer.helpers.collisionHelper.reserveBeatSlot(this.container.beat, topY, bottomY);
+            this.renderer.collisionHelper.reserveBeatSlot(this.container.beat, topY, bottomY);
             const minString = tr.minString;
             const maxString = tr.maxString;
             if (Number.isNaN(minString) || minString < n.string) {
@@ -72296,7 +72225,7 @@
         }
         createLinePreBeatGlyphs() {
             // Clef
-            if (this.isFirstOfLine) {
+            if (this.isFirstOfStaff) {
                 const center = (this.bar.staff.tuning.length - 1) / 2;
                 this.createStartSpacing();
                 this.addPreBeatGlyph(new TabClefGlyph(0, this.getLineY(center)));
@@ -72387,14 +72316,14 @@
             // currently only used for duplets
             return this.getFlagAndBarPos();
         }
-        shouldPaintFlag(beat, h) {
-            if (!super.shouldPaintFlag(beat, h)) {
+        shouldPaintFlag(beat) {
+            if (!super.shouldPaintFlag(beat)) {
                 return false;
             }
             if (beat.graceType !== GraceType.None) {
                 return false;
             }
-            return this.drawBeamHelperAsFlags(h);
+            return true;
         }
         paintBeamingStem(beat, cy, x, topY, bottomY, canvas) {
             if (bottomY < topY) {