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

package/dist/alphaTab.core.mjs

@@ -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.
  *
@@ -203,9 +203,9 @@ class AlphaTabError extends Error {
  * @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}`);
@@ -4715,6 +4715,24 @@ class ModelUtils {
     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;
+    }
 }
 
 /**
@@ -48297,6 +48315,39 @@ class MidiFileGenerator {
     }
 }
 
+/**
+ * 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.
@@ -48324,198 +48375,6 @@ class Glyph {
     }
 }
 
-/**
- * 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
  */
@@ -48527,7 +48386,7 @@ class BeatContainerGlyph extends Glyph {
     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);
@@ -48542,28 +48401,20 @@ class BeatContainerGlyph extends Glyph {
         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;
@@ -48578,7 +48429,6 @@ class BeatContainerGlyph extends Glyph {
         });
     }
     applyLayoutingInfo(_info) {
-        this.onNotes.updateBeamingHelper();
         this.updateWidth();
     }
     doLayout() {
@@ -48590,7 +48440,6 @@ class BeatContainerGlyph extends Glyph {
         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--]);
@@ -48599,15 +48448,6 @@ class BeatContainerGlyph extends Glyph {
     }
     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;
@@ -48618,10 +48458,6 @@ class BeatContainerGlyph extends Glyph {
         this.minWidth += tieWidth;
         this.width = this.minWidth;
     }
-    scaleToWidth(beatWidth) {
-        this.onNotes.updateBeamingHelper();
-        this.width = beatWidth;
-    }
     createTies(_n) {
     }
     static getGroupId(beat) {
@@ -48631,8 +48467,11 @@ class BeatContainerGlyph extends Glyph {
         // 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;
@@ -48695,7 +48534,7 @@ class BeatContainerGlyph extends Glyph {
             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();
@@ -48711,7 +48550,7 @@ class BeatContainerGlyph extends Glyph {
             }
             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;
@@ -48720,12 +48559,6 @@ class BeatContainerGlyph extends Glyph {
                 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();
@@ -48733,13 +48566,33 @@ class BeatContainerGlyph extends Glyph {
             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;
+    }
 }
 
 /**
@@ -54358,6 +54211,7 @@ class Cursors {
 class ScalableHtmlElementContainer extends HtmlElementContainer {
     _xscale;
     _yscale;
+    centerAtPosition = false;
     constructor(element, xscale, yscale) {
         super(element);
         this._xscale = xscale;
@@ -54399,7 +54253,11 @@ class ScalableHtmlElementContainer extends HtmlElementContainer {
         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;
@@ -55260,6 +55118,7 @@ class BrowserUiFacade {
         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);
@@ -56492,6 +56351,31 @@ var EffectBarGlyphSizing;
     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
  */
@@ -56619,39 +56503,6 @@ class AlternateEndingsEffectInfo extends EffectInfo {
     }
 }
 
-/**
- * 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
  */
@@ -57250,6 +57101,93 @@ class DirectionsEffectInfo extends EffectInfo {
     }
 }
 
+/**
+ * @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
  */
@@ -57488,17 +57426,6 @@ class FermataEffectInfo extends EffectInfo {
     }
 }
 
-/**
- * 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
@@ -57514,34 +57441,20 @@ class GlyphGroup extends Glyph {
         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) {
@@ -57957,6 +57870,38 @@ class FreeTimeEffectInfo extends EffectInfo {
     }
 }
 
+/**
+ * @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
  */
@@ -59575,12 +59520,12 @@ class VoiceContainerGlyph extends GlyphGroup {
             // 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;
             }
         }
     }
@@ -61280,7 +61225,7 @@ class StaffSystem {
                     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;
@@ -61812,10 +61757,9 @@ class BeatGlyphBase extends GlyphGroup {
  * @internal
  */
 class BeatOnNoteGlyphBase extends BeatGlyphBase {
-    beamingHelper;
-    centerX = 0;
-    updateBeamingHelper() {
-    }
+    onTimeX = 0;
+    middleX = 0;
+    stemX = 0;
     buildBoundingsLookup(_beatBounds, _cx, _cy) {
     }
     getNoteX(_note, _requestedPosition) {
@@ -61957,14 +61901,6 @@ class MultiBarRestBeatContainerGlyph extends BeatContainerGlyph {
     }
 }
 
-/**
- * @internal
- */
-class BeatLinePositions {
-    staffId = '';
-    up = 0;
-    down = 0;
-}
 /**
  * @internal
  */
@@ -61995,10 +61931,7 @@ class BeamingHelperDrawInfo {
  */
 class BeamingHelper {
     _staff;
-    _beatLineXPositions = new Map();
     _renderer;
-    _firstNonRestBeat = null;
-    _lastNonRestBeat = null;
     voice = null;
     beats = [];
     shortestDuration = Duration.QuadrupleWhole;
@@ -62008,6 +61941,7 @@ class BeamingHelper {
      */
     hasTuplet = false;
     slashBeats = [];
+    restBeats = [];
     lowestNoteInHelper = null;
     _lowestNoteCompareValueInHelper = -1;
     highestNoteInHelper = null;
@@ -62015,25 +61949,21 @@ class BeamingHelper {
     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) {
@@ -62041,38 +61971,12 @@ class BeamingHelper {
         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() {
@@ -62138,36 +62042,6 @@ class BeamingHelper {
         }
         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;
@@ -62231,14 +62105,13 @@ class BeamingHelper {
                 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);
             }
@@ -62347,19 +62220,6 @@ class BeamingHelper {
     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();
 }
 
@@ -62511,8 +62371,8 @@ class BarCollisionHelper {
  */
 class BarHelpers {
     _renderer;
+    _beamHelperLookup = new Map();
     beamHelpers = [];
-    beamHelperLookup = [];
     collisionHelper;
     preferredBeamDirection = null;
     constructor(renderer) {
@@ -62527,7 +62387,6 @@ class BarHelpers {
         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;
@@ -62536,6 +62395,9 @@ class BarHelpers {
                 }
                 else {
                     helperForBeat = currentBeamHelper;
+                    if (currentGraceBeamHelper) {
+                        currentGraceBeamHelper.finish();
+                    }
                     currentGraceBeamHelper = null;
                 }
                 // if a new beaming helper was started, we close our tuplet grouping as well
@@ -62556,7 +62418,7 @@ class BarHelpers {
                     }
                     this.beamHelpers[v.index].push(helperForBeat);
                 }
-                this.beamHelperLookup[v.index].set(b.index, helperForBeat);
+                this._beamHelperLookup.set(b.id, helperForBeat);
             }
             if (currentBeamHelper) {
                 currentBeamHelper.finish();
@@ -62569,7 +62431,7 @@ class BarHelpers {
         }
     }
     getBeamingHelperForBeat(beat) {
-        return this.beamHelperLookup[beat.voice.index].get(beat.index);
+        return this._beamHelperLookup.has(beat.id) ? this._beamHelperLookup.get(beat.id) : undefined;
     }
 }
 
@@ -62679,6 +62541,9 @@ class BarRendererBase {
         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
@@ -62738,6 +62603,11 @@ class BarRendererBase {
         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();
@@ -62766,10 +62636,13 @@ class BarRendererBase {
     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;
     }
@@ -62984,6 +62857,18 @@ class BarRendererBase {
                 }
             }
         }
+        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;
@@ -63037,7 +62922,6 @@ class BarRendererBase {
         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) {
@@ -63116,7 +63000,7 @@ class BarRendererBase {
         this._postBeatGlyphs.addGlyph(g);
     }
     createPreBeatGlyphs() {
-        this.wasFirstOfLine = this.isFirstOfLine;
+        this.wasFirstOfStaff = this.isFirstOfStaff;
     }
     createBeatGlyphs() {
         for (const voice of this.bar.voices) {
@@ -63143,26 +63027,7 @@ class BarRendererBase {
     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;
     }
@@ -63197,7 +63062,7 @@ class BarRendererBase {
         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();
         }
@@ -63234,7 +63099,7 @@ class BarRendererBase {
     completeBeamingHelper(_helper) {
     }
     getBeatDirection(beat) {
-        return this.helpers.getBeamingHelperForBeat(beat).direction;
+        return this.helpers.getBeamingHelperForBeat(beat)?.direction ?? BeamDirection.Up;
     }
 }
 
@@ -65601,8 +65466,18 @@ class BarLineGlyph extends LeftToRightLayoutingGlyphGroup {
         }
         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
@@ -65688,6 +65563,54 @@ class BarNumberGlyph extends Glyph {
     }
 }
 
+/**
+ * @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
  */
@@ -65723,6 +65646,23 @@ class RepeatCountGlyph extends Glyph {
     }
 }
 
+/**
+ * This simple glyph allows to put an empty region in to a BarRenderer.
+ * @internal
+ */
+class SpacingGlyph extends Glyph {
+    constructor(x, y, width) {
+        super(x, y);
+        this.width = width;
+    }
+    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.
@@ -65846,7 +65786,7 @@ class LineBarRenderer extends BarRendererBase {
             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);
                 }
             }
         }
@@ -65920,26 +65860,27 @@ class LineBarRenderer extends BarRendererBase {
         // 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 {
@@ -65969,12 +65910,12 @@ class LineBarRenderer extends BarRendererBase {
                 }
                 //
                 // 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);
@@ -65983,7 +65924,6 @@ class LineBarRenderer extends BarRendererBase {
                     endY = startY;
                 }
                 // align line centered in available space
-                const shift = offset + size * 0.5;
                 if (direction === BeamDirection.Down) {
                     startY += shift;
                     endY += shift;
@@ -66048,14 +65988,24 @@ class LineBarRenderer extends BarRendererBase {
     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)) {
@@ -66066,7 +66016,7 @@ class LineBarRenderer extends BarRendererBase {
             }
         }
     }
-    shouldPaintFlag(beat, h) {
+    shouldPaintFlag(beat) {
         // no flags for bend grace beats
         if (beat.graceType === GraceType.BendGrace) {
             return false;
@@ -66074,10 +66024,6 @@ class LineBarRenderer extends BarRendererBase {
         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 === NotationMode.SongBook) {
             return false;
@@ -66092,14 +66038,14 @@ class LineBarRenderer extends BarRendererBase {
     }
     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);
@@ -66110,7 +66056,7 @@ class LineBarRenderer extends BarRendererBase {
             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);
@@ -66196,10 +66142,10 @@ class LineBarRenderer extends BarRendererBase {
         }
         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
@@ -66237,7 +66183,7 @@ class LineBarRenderer extends BarRendererBase {
                             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);
@@ -66247,7 +66193,7 @@ class LineBarRenderer extends BarRendererBase {
                             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;
@@ -66282,7 +66228,7 @@ class LineBarRenderer extends BarRendererBase {
             }
         }
         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;
@@ -66309,20 +66255,7 @@ class LineBarRenderer extends BarRendererBase {
         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);
@@ -66373,17 +66306,6 @@ class LineBarRenderer extends BarRendererBase {
                         }
                     }
                 }
-                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) {
@@ -66399,25 +66321,6 @@ class LineBarRenderer extends BarRendererBase {
         }
         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:
@@ -66430,33 +66333,17 @@ class LineBarRenderer extends BarRendererBase {
         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
@@ -66481,12 +66368,41 @@ class LineBarRenderer extends BarRendererBase {
             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;
@@ -66494,8 +66410,8 @@ class LineBarRenderer extends BarRendererBase {
                 }
             }
             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;
@@ -66503,33 +66419,39 @@ class LineBarRenderer extends BarRendererBase {
                 }
             }
             // 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);
@@ -66541,31 +66463,6 @@ class LineBarRenderer extends BarRendererBase {
                 }
             }
         }
-        // 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;
@@ -67086,20 +66983,6 @@ class NumberedBeatGlyph extends BeatOnNoteGlyphBase {
         }
         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,
@@ -67215,14 +67098,16 @@ class NumberedBeatGlyph extends BeatOnNoteGlyphBase {
         }
         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;
     }
 }
 
@@ -67635,7 +67520,7 @@ class NumberedBarRenderer extends LineBarRenderer {
                 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;
@@ -67644,11 +67529,11 @@ class NumberedBarRenderer extends LineBarRenderer {
                     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);
@@ -67666,7 +67551,7 @@ class NumberedBarRenderer extends LineBarRenderer {
                     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);
@@ -67715,7 +67600,7 @@ class NumberedBarRenderer extends LineBarRenderer {
         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));
         }
@@ -67771,6 +67656,11 @@ class NumberedBarRenderer extends LineBarRenderer {
     }
     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);
+        }
+    }
 }
 
 /**
@@ -68088,6 +67978,7 @@ class ScoreNoteChordGlyphBase extends Glyph {
     upLineX = 0;
     downLineX = 0;
     noteStartX = 0;
+    onTimeX = 0;
     constructor() {
         super(0, 0);
     }
@@ -68174,6 +68065,8 @@ class ScoreNoteChordGlyphBase extends Glyph {
         // 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);
@@ -68189,7 +68082,14 @@ class ScoreNoteChordGlyphBase extends Glyph {
                 }
             }
             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;
@@ -68203,6 +68103,23 @@ class ScoreNoteChordGlyphBase extends Glyph {
             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) {
@@ -68280,9 +68197,8 @@ class ScoreNoteChordGlyph extends ScoreNoteChordGlyphBase {
     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;
@@ -68324,7 +68240,7 @@ class ScoreNoteChordGlyph extends ScoreNoteChordGlyphBase {
                         : 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;
@@ -68341,7 +68257,7 @@ class ScoreNoteChordGlyph extends ScoreNoteChordGlyphBase {
                         : -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 -=
@@ -68366,11 +68282,6 @@ class ScoreNoteChordGlyph extends ScoreNoteChordGlyphBase {
     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;
@@ -68379,6 +68290,7 @@ class ScoreNoteChordGlyph extends ScoreNoteChordGlyphBase {
             this._deadSlapped.renderer = this.renderer;
             this._deadSlapped.doLayout();
             this.width = this._deadSlapped.width;
+            this.onTimeX = this.width / 2;
         }
         let aboveBeatEffectsY = 0;
         let belowBeatEffectsY = 0;
@@ -68497,7 +68409,6 @@ class ScoreNoteChordGlyph extends ScoreNoteChordGlyphBase {
  * @internal
  */
 class ScoreRestGlyph extends MusicFontGlyph {
-    beamingHelper;
     constructor(x, y, duration) {
         super(x, y, 1, ScoreRestGlyph.getSymbol(duration));
     }
@@ -68529,11 +68440,6 @@ class ScoreRestGlyph extends MusicFontGlyph {
                 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);
     }
@@ -69025,10 +68931,11 @@ class StringNumberContainerGlyph extends EffectGlyph {
  */
 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);
@@ -69079,6 +68986,15 @@ class SlashNoteHeadGlyph extends MusicFontGlyph {
         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) {
@@ -69092,25 +69008,13 @@ class SlashNoteHeadGlyph extends MusicFontGlyph {
                 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;
@@ -69161,22 +69065,19 @@ class ScoreBeatGlyph extends BeatOnNoteGlyphBase {
     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;
             }
         }
     }
@@ -69196,7 +69097,6 @@ class ScoreBeatGlyph extends BeatOnNoteGlyphBase {
                 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) {
@@ -69246,22 +69146,18 @@ class ScoreBeatGlyph extends BeatOnNoteGlyphBase {
                 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
                 //
@@ -69276,14 +69172,24 @@ class ScoreBeatGlyph extends BeatOnNoteGlyphBase {
             }
         }
         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) {
@@ -69355,7 +69261,7 @@ class ScoreBeatGlyph extends BeatOnNoteGlyphBase {
         }
         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')) {
@@ -69791,7 +69697,7 @@ class ScoreBendGlyph extends ScoreHelperNotesBaseGlyph {
                     // 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 +
@@ -70327,6 +70233,22 @@ class ScoreBeatContainerGlyph extends BeatContainerGlyph {
     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;
@@ -70336,7 +70258,7 @@ class ScoreBeatContainerGlyph extends BeatContainerGlyph {
     }
     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();
@@ -70344,7 +70266,7 @@ class ScoreBeatContainerGlyph extends BeatContainerGlyph {
     }
     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();
@@ -70392,7 +70314,7 @@ class ScoreBeatContainerGlyph extends BeatContainerGlyph {
         }
         // 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);
@@ -70431,6 +70353,15 @@ class ScoreBeatContainerGlyph extends BeatContainerGlyph {
             }
         }
     }
+    _flagStretch = 0;
+    get postBeatStretch() {
+        return super.postBeatStretch + this._flagStretch;
+    }
+    updateWidth() {
+        super.updateWidth();
+        this.width += this._flagStretch;
+        this.minWidth += this._flagStretch;
+    }
 }
 
 /**
@@ -70465,7 +70396,7 @@ class ScoreBarRenderer extends LineBarRenderer {
         return this.smuflMetrics.oneStaffSpace;
     }
     get heightLineCount() {
-        return 5;
+        return Math.max(5, this.bar.staff.standardNotationLineCount);
     }
     get drawnLineCount() {
         return this.bar.staff.standardNotationLineCount;
@@ -70522,7 +70453,9 @@ class ScoreBarRenderer extends LineBarRenderer {
                 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;
         }
@@ -70531,7 +70464,7 @@ class ScoreBarRenderer extends LineBarRenderer {
             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;
         }
@@ -70569,14 +70502,14 @@ class ScoreBarRenderer extends LineBarRenderer {
     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);
@@ -70678,7 +70611,7 @@ class ScoreBarRenderer extends LineBarRenderer {
     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
@@ -70883,6 +70816,25 @@ class SlashTieGlyph extends NoteTieGlyph {
  */
 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) {
@@ -70899,17 +70851,21 @@ class SlashBeatContainerGlyph extends BeatContainerGlyph {
             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);
     }
@@ -71005,19 +70961,6 @@ class SlashBeatGlyph extends BeatOnNoteGlyphBase {
         }
         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;
@@ -71035,18 +70978,13 @@ class SlashBeatGlyph extends BeatOnNoteGlyphBase {
                 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);
-                }
             }
         }
         //
@@ -71059,17 +70997,25 @@ class SlashBeatGlyph extends BeatOnNoteGlyphBase {
         }
         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;
     }
 }
 
@@ -71144,7 +71090,9 @@ class SlashBarRenderer extends LineBarRenderer {
         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) {
@@ -71228,6 +71176,11 @@ class SlashBarRenderer extends LineBarRenderer {
             _?.[Symbol.dispose]?.();
         }
     }
+    paintBeamHelper(cx, cy, canvas, h, flagsElement, beamsElement) {
+        if (h.voice?.index === 0) {
+            super.paintBeamHelper(cx, cy, canvas, h, flagsElement, beamsElement);
+        }
+    }
 }
 
 /**
@@ -71684,7 +71637,6 @@ class TabNoteChordGlyph extends Glyph {
     _deadSlapped = null;
     _isGrace;
     beat;
-    beamingHelper;
     maxStringNote = null;
     minStringNote = null;
     beatEffects = new Map();
@@ -71833,11 +71785,6 @@ class TabNoteChordGlyph extends Glyph {
             }
         }
     }
-    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);
-        }
-    }
 }
 
 /**
@@ -71845,7 +71792,6 @@ class TabNoteChordGlyph extends Glyph {
  */
 class TabRestGlyph extends MusicFontGlyph {
     _isVisibleRest;
-    beamingHelper;
     constructor(x, y, isVisibleRest, duration) {
         super(x, y, 1, ScoreRestGlyph.getSymbol(duration));
         this._isVisibleRest = isVisibleRest;
@@ -71853,11 +71799,6 @@ class TabRestGlyph extends MusicFontGlyph {
     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);
@@ -71914,7 +71855,6 @@ class TabBeatGlyph extends BeatOnNoteGlyphBase {
                 slashNoteHead.effectElement = BeatSubElement.GuitarTabEffects;
                 this.slash = slashNoteHead;
                 slashNoteHead.beat = this.container.beat;
-                slashNoteHead.beamingHelper = this.beamingHelper;
                 this.addNormal(slashNoteHead);
                 beatEffects = slashNoteHead.beatEffects;
             }
@@ -71922,7 +71862,6 @@ class TabBeatGlyph extends BeatOnNoteGlyphBase {
                 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);
@@ -71944,9 +71883,9 @@ class TabBeatGlyph extends BeatOnNoteGlyphBase {
             // Note dots
             //
             if (this.container.beat.dots > 0 && tabRenderer.rhythmMode !== 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));
                 }
             }
         }
@@ -71956,7 +71895,6 @@ class TabBeatGlyph extends BeatOnNoteGlyphBase {
             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
@@ -71982,30 +71920,21 @@ class TabBeatGlyph extends BeatOnNoteGlyphBase {
         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) {
@@ -72018,7 +71947,7 @@ class TabBeatGlyph extends BeatOnNoteGlyphBase {
         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) {
@@ -72290,7 +72219,7 @@ class TabBarRenderer extends LineBarRenderer {
     }
     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)));
@@ -72381,14 +72310,14 @@ class TabBarRenderer extends LineBarRenderer {
         // 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) {