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

package/dist/alphaTab.js

@@ -1,5 +1,5 @@
 /*!
- * alphaTab v1.8.0-alpha.1647 (develop, build 1647)
+ * alphaTab v1.8.0-alpha.1650 (develop, build 1650)
  *
  * Copyright © 2025, Daniel Kuschny and Contributors, All rights reserved.
  *
@@ -209,9 +209,9 @@
      * @internal
      */
     class VersionInfo {
-        static version = '1.8.0-alpha.1647';
-        static date = '2025-12-17T02:10:13.730Z';
-        static commit = 'a1bd11d4a3eef22409f1f49a5dd172ace16108cc';
+        static version = '1.8.0-alpha.1650';
+        static date = '2025-12-20T02:07:19.755Z';
+        static commit = '5789b59da2b7f8897debe003c9b75e4d48b5e9b3';
         static print(print) {
             print(`alphaTab ${VersionInfo.version}`);
             print(`commit: ${VersionInfo.commit}`);
@@ -2750,6 +2750,23 @@
          * Whether barlines should be drawn across staves within the same system.
          */
         extendBarLines = false;
+        /**
+         * Whether to hide empty staves.
+         */
+        hideEmptyStaves = false;
+        /**
+         * Whether to also hide empty staves in the first system.
+         * @remarks
+         * Only has an effect when activating {@link hideEmptyStaves}.
+         */
+        hideEmptyStavesInFirstSystem = false;
+        /**
+         * Whether to show brackets and braces across single staves.
+         * @remarks
+         * This allows a more consistent view for identifying staves when using
+         * {@link hideEmptyStaves}
+         */
+        showSingleStaffBrackets = false;
     }
 
     /**
@@ -8679,7 +8696,10 @@
             ['firstsystemtracknameorientation', [[[[10, 17], 0, ['horizontal', 'vertical']]]]],
             ['othersystemstracknameorientation', [[[[10, 17], 0, ['horizontal', 'vertical']]]]],
             ['extendbarlines', null],
-            ['chorddiagramsinscore', [[[[10], 1, ['true', 'false']]]]]
+            ['chorddiagramsinscore', [[[[10], 1, ['true', 'false']]]]],
+            ['hideemptystaves', null],
+            ['hideemptystavesinfirstsystem', null],
+            ['showsinglestaffbrackets', null]
         ]);
         static staffMetaDataSignatures = AlphaTex1LanguageDefinitions._signatures([
             ['tuning', [[[[10, 17], 0, ['piano', 'none', 'voice']]], [[[10, 17], 5]]]],
@@ -9019,6 +9039,9 @@
             ['othersystemstracknameorientation', null],
             ['extendbarlines', null],
             ['chorddiagramsinscore', null],
+            ['hideemptystaves', null],
+            ['hideemptystavesinfirstsystem', null],
+            ['showsinglestaffbrackets', null],
             [
                 'tuning',
                 [
@@ -13893,6 +13916,15 @@
                         ? AlphaTex1LanguageHandler._booleanLikeValue(metaData.arguments.arguments, 0)
                         : true;
                     return ApplyNodeResult.Applied;
+                case 'hideemptystaves':
+                    score.stylesheet.hideEmptyStaves = true;
+                    return ApplyNodeResult.Applied;
+                case 'hideemptystavesinfirstsystem':
+                    score.stylesheet.hideEmptyStavesInFirstSystem = true;
+                    return ApplyNodeResult.Applied;
+                case 'showsinglestaffbrackets':
+                    score.stylesheet.showSingleStaffBrackets = true;
+                    return ApplyNodeResult.Applied;
                 default:
                     return ApplyNodeResult.NotAppliedUnrecognizedMarker;
             }
@@ -15724,6 +15756,15 @@
             if (stylesheet.globalDisplayChordDiagramsInScore) {
                 nodes.push(Atnf.meta('chordDiagramsInScore'));
             }
+            if (stylesheet.hideEmptyStaves) {
+                nodes.push(Atnf.meta('hideEmptyStaves'));
+            }
+            if (stylesheet.hideEmptyStavesInFirstSystem) {
+                nodes.push(Atnf.meta('hideEmptyStavesInFirstSystem'));
+            }
+            if (stylesheet.showSingleStaffBrackets) {
+                nodes.push(Atnf.meta('showSingleStaffBrackets'));
+            }
             // Unsupported:
             // 'globaldisplaychorddiagramsontop',
             // 'pertrackchorddiagramsontop',
@@ -38810,6 +38851,9 @@
                 }
             }
             o.set("extendbarlines", obj.extendBarLines);
+            o.set("hideemptystaves", obj.hideEmptyStaves);
+            o.set("hideemptystavesinfirstsystem", obj.hideEmptyStavesInFirstSystem);
+            o.set("showsinglestaffbrackets", obj.showSingleStaffBrackets);
             return o;
         }
         static setProperty(obj, property, v) {
@@ -38871,6 +38915,15 @@
                 case "extendbarlines":
                     obj.extendBarLines = v;
                     return true;
+                case "hideemptystaves":
+                    obj.hideEmptyStaves = v;
+                    return true;
+                case "hideemptystavesinfirstsystem":
+                    obj.hideEmptyStavesInFirstSystem = v;
+                    return true;
+                case "showsinglestaffbrackets":
+                    obj.showSingleStaffBrackets = v;
+                    return true;
             }
             return false;
         }
@@ -45898,6 +45951,19 @@
             }
             return null;
         }
+        /**
+         * Looks for the first visible beat which starts at this lookup so it can be used for cursor placement.
+         * @param checker The custom checker to see if a beat is visible.
+         * @returns The first beat which is visible according to the given tracks or null.
+         */
+        getVisibleBeatAtStartWithChecker(checker) {
+            for (const b of this.highlightedBeats) {
+                if (b.playbackStart === this.start && checker.isVisible(b.beat)) {
+                    return b.beat;
+                }
+            }
+            return null;
+        }
     }
 
     /**
@@ -46337,6 +46403,18 @@
             }
         }
     }
+    /**
+     * @internal
+     */
+    class TrackLookupBeatVisibilityChecker {
+        _lookup;
+        constructor(lookup) {
+            this._lookup = lookup;
+        }
+        isVisible(beat) {
+            return this._lookup.has(beat.voice.bar.staff.track.index);
+        }
+    }
     /**
      * This class holds all information about when {@link MasterBar}s and {@link Beat}s are played.
      *
@@ -46397,31 +46475,44 @@
          * @returns The information about the current beat or null if no beat could be found.
          */
         findBeat(trackLookup, tick, currentBeatHint = null) {
+            return this.findBeatWithChecker(new TrackLookupBeatVisibilityChecker(trackLookup), tick, currentBeatHint);
+        }
+        /**
+         * Finds the currently played beat given a list of tracks and the current time.
+         * @param checker The checker to ask whether a beat is visible and should be considered for result.
+         * @param tick The current time in midi ticks.
+         * @param currentBeatHint Used for optimized lookup during playback. By passing in a previous result lookup of the next one can be optimized using heuristics. (optional).
+         * @returns The information about the current beat or null if no beat could be found.
+         */
+        findBeatWithChecker(checker, tick, currentBeatHint = null) {
             let result = null;
             if (currentBeatHint) {
-                result = this._findBeatFast(trackLookup, currentBeatHint, tick);
+                result = this._findBeatFast(checker, currentBeatHint, tick);
             }
             if (!result) {
-                result = this._findBeatSlow(trackLookup, currentBeatHint, tick, false);
+                result = this._findBeatSlow(checker, currentBeatHint, tick, false);
             }
             return result;
         }
-        _findBeatFast(trackLookup, currentBeatHint, tick) {
+        _findBeatFast(checker, currentBeatHint, tick) {
             // still within current lookup.
             if (tick >= currentBeatHint.start && tick < currentBeatHint.end) {
                 return currentBeatHint;
             }
             // already on the next beat?
-            if (currentBeatHint.nextBeat && tick >= currentBeatHint.nextBeat.start && tick < currentBeatHint.nextBeat.end) {
+            if (currentBeatHint.nextBeat &&
+                tick >= currentBeatHint.nextBeat.start &&
+                tick < currentBeatHint.nextBeat.end &&
+                (checker === undefined || checker.isVisible(currentBeatHint.nextBeat.beat))) {
                 const next = currentBeatHint.nextBeat;
                 // fill next in chain
-                this._fillNextBeat(next, trackLookup);
+                this._fillNextBeat(next, checker);
                 return next;
             }
             // likely a loop or manual seek, need to fallback to slow path
             return null;
         }
-        _fillNextBeatMultiBarRest(current, trackLookup) {
+        _fillNextBeatMultiBarRest(current, checker) {
             const group = this.multiBarRestInfo.get(current.masterBar.masterBar.index);
             // this is a bit sensitive. we assume that the sequence of multi-rest bars and the
             // chained nextMasterBar equal. so we just jump over X bars
@@ -46435,7 +46526,7 @@
             if (endMasterBar) {
                 // one more following -> use start of next
                 if (endMasterBar.nextMasterBar) {
-                    current.nextBeat = this._firstBeatInMasterBar(trackLookup, endMasterBar.nextMasterBar, endMasterBar.nextMasterBar.start, true);
+                    current.nextBeat = this._firstBeatInMasterBar(checker, endMasterBar.nextMasterBar, endMasterBar.nextMasterBar.start, true);
                     // if we have the next beat take the difference between the times as duration
                     if (current.nextBeat) {
                         current.tickDuration = current.nextBeat.start - current.start;
@@ -46465,19 +46556,19 @@
             }
             current.calculateDuration();
         }
-        _fillNextBeat(current, trackLookup) {
+        _fillNextBeat(current, checker) {
             // on multibar rests take the duration until the end.
             if (this._isMultiBarRestResult(current)) {
-                this._fillNextBeatMultiBarRest(current, trackLookup);
+                this._fillNextBeatMultiBarRest(current, checker);
             }
             else {
-                this._fillNextBeatDefault(current, trackLookup);
+                this._fillNextBeatDefault(current, checker);
             }
         }
-        _fillNextBeatDefault(current, trackLookup) {
-            current.nextBeat = this._findBeatInMasterBar(current.masterBar, current.beatLookup.nextBeat, current.end, trackLookup, true);
+        _fillNextBeatDefault(current, checker) {
+            current.nextBeat = this._findBeatInMasterBar(current.masterBar, current.beatLookup.nextBeat, current.end, checker, true);
             if (current.nextBeat == null) {
-                current.nextBeat = this._findBeatSlow(trackLookup, current, current.end, true);
+                current.nextBeat = this._findBeatSlow(checker, current, current.end, true);
             }
             // if we have the next beat take the difference between the times as duration
             if (current.nextBeat) {
@@ -46508,7 +46599,7 @@
                 beat.isRest &&
                 beat.voice.bar.isRestOnly);
         }
-        _findBeatSlow(trackLookup, currentBeatHint, tick, isNextSearch) {
+        _findBeatSlow(checker, currentBeatHint, tick, isNextSearch) {
             // get all beats within the masterbar
             let masterBar = null;
             if (currentBeatHint != null) {
@@ -46530,14 +46621,14 @@
             if (!masterBar) {
                 return null;
             }
-            return this._firstBeatInMasterBar(trackLookup, masterBar, tick, isNextSearch);
+            return this._firstBeatInMasterBar(checker, masterBar, tick, isNextSearch);
         }
-        _firstBeatInMasterBar(trackLookup, startMasterBar, tick, isNextSearch) {
+        _firstBeatInMasterBar(checker, startMasterBar, tick, isNextSearch) {
             let masterBar = startMasterBar;
             // scan through beats and find first one which has a beat visible
             while (masterBar) {
                 if (masterBar.firstBeat) {
-                    const beat = this._findBeatInMasterBar(masterBar, masterBar.firstBeat, tick, trackLookup, isNextSearch);
+                    const beat = this._findBeatInMasterBar(masterBar, masterBar.firstBeat, tick, checker, isNextSearch);
                     if (beat) {
                         return beat;
                     }
@@ -46555,7 +46646,7 @@
          * @param isNextSearch
          * @returns
          */
-        _findBeatInMasterBar(masterBar, currentStartLookup, tick, visibleTracks, isNextSearch) {
+        _findBeatInMasterBar(masterBar, currentStartLookup, tick, checker, isNextSearch) {
             if (!currentStartLookup) {
                 return null;
             }
@@ -46569,7 +46660,7 @@
                 (currentStartLookup.start <= relativeTick || (isNextSearch && relativeTick < 0)) &&
                     relativeTick < currentStartLookup.end) {
                     startBeatLookup = currentStartLookup;
-                    startBeat = currentStartLookup.getVisibleBeatAtStart(visibleTracks);
+                    startBeat = currentStartLookup.getVisibleBeatAtStartWithChecker(checker);
                     // found the matching beat lookup but none of the beats are visible
                     // in this case scan further to the next lookup which has any visible beat
                     if (!startBeat) {
@@ -46577,7 +46668,7 @@
                             let currentMasterBar = masterBar;
                             while (currentMasterBar != null && startBeat == null) {
                                 while (currentStartLookup != null) {
-                                    startBeat = currentStartLookup.getVisibleBeatAtStart(visibleTracks);
+                                    startBeat = currentStartLookup.getVisibleBeatAtStartWithChecker(checker);
                                     if (startBeat) {
                                         startBeatLookup = currentStartLookup;
                                         masterBar = currentMasterBar;
@@ -46595,7 +46686,7 @@
                             let currentMasterBar = masterBar;
                             while (currentMasterBar != null && startBeat == null) {
                                 while (currentStartLookup != null) {
-                                    startBeat = currentStartLookup.getVisibleBeatAtStart(visibleTracks);
+                                    startBeat = currentStartLookup.getVisibleBeatAtStartWithChecker(checker);
                                     if (startBeat) {
                                         startBeatLookup = currentStartLookup;
                                         masterBar = currentMasterBar;
@@ -46619,17 +46710,17 @@
             if (startBeat == null) {
                 return null;
             }
-            const result = this._createResult(masterBar, startBeatLookup, startBeat, isNextSearch, visibleTracks);
+            const result = this._createResult(masterBar, startBeatLookup, startBeat, isNextSearch, checker);
             return result;
         }
-        _createResult(masterBar, beatLookup, beat, isNextSearch, visibleTracks) {
+        _createResult(masterBar, beatLookup, beat, isNextSearch, checker) {
             const result = new MidiTickLookupFindBeatResult(masterBar);
             result.beat = beat;
             result.beatLookup = beatLookup;
             result.tickDuration = beatLookup.end - beatLookup.start;
             if (!isNextSearch) {
                 // the next beat filling will adjust this result with the respective durations
-                this._fillNextBeat(result, visibleTracks);
+                this._fillNextBeat(result, checker);
             }
             else if (this._isMultiBarRestResult(result)) {
                 const multiRest = this.multiBarRestInfo.get(masterBar.masterBar.index);
@@ -49556,6 +49647,19 @@
         }
     }
 
+    /**
+     * @internal
+     */
+    class BoundsLookupVisibilityChecker {
+        bounds = null;
+        isVisible(beat) {
+            const bounds = this.bounds;
+            if (!bounds) {
+                return false;
+            }
+            return bounds.findBeat(beat) !== null;
+        }
+    }
     /**
      * This class represents the public API of alphaTab and provides all logic to display
      * a music sheet in any UI using the given {@link IUiFacade}
@@ -49566,6 +49670,7 @@
         _startTime = 0;
         _trackIndexes = null;
         _trackIndexLookup = null;
+        _beatVisibilityChecker = new BoundsLookupVisibilityChecker();
         _isDestroyed = false;
         _score = null;
         _tracks = [];
@@ -51362,12 +51467,9 @@
             this._previousTick = tick;
             const cache = this._tickCache;
             if (cache) {
-                const tracks = this._trackIndexLookup;
-                if (tracks != null && tracks.size > 0) {
-                    const beat = cache.findBeat(tracks, tick, this._currentBeat);
-                    if (beat) {
-                        this._cursorUpdateBeat(beat, stop, shouldScroll, cursorSpeed, forceUpdate || this.playerState === PlayerState.Paused);
-                    }
+                const beat = cache.findBeatWithChecker(this._beatVisibilityChecker, tick, this._currentBeat);
+                if (beat) {
+                    this._cursorUpdateBeat(beat, stop, shouldScroll, cursorSpeed, forceUpdate || this.playerState === PlayerState.Paused);
                 }
             }
         }
@@ -52569,6 +52671,7 @@
             if (this._isDestroyed) {
                 return;
             }
+            this._beatVisibilityChecker.bounds = this.boundsLookup;
             this._currentBeat = null;
             this._cursorUpdateTick(this._previousTick, false, 1, true, true);
             this.postRenderFinished.trigger();
@@ -60576,8 +60679,10 @@
         height = 0;
         index = 0;
         staffIndex = 0;
+        isVisible = false;
+        _emptyBarCount = 0;
         get isFirstInSystem() {
-            return this.index === 0;
+            return this.system.firstVisibleStaff === this;
         }
         topEffectInfos = [];
         bottomEffectInfos = [];
@@ -60612,10 +60717,11 @@
         get contentBottom() {
             return this.y + this.topPadding + this.topOverflow + this.staffBottom;
         }
-        constructor(trackIndex, staff, factory) {
+        constructor(system, trackIndex, staff, factory) {
             this._factory = factory;
             this.trackIndex = trackIndex;
             this.modelStaff = staff;
+            this.system = system;
             for (const b of factory.effectBands) {
                 if (b.shouldCreate && !b.shouldCreate(staff)) {
                     continue;
@@ -60631,6 +60737,7 @@
                         break;
                 }
             }
+            this._updateVisibility();
         }
         getSharedLayoutData(key, def) {
             if (this._sharedLayoutData.has(key)) {
@@ -60657,6 +60764,20 @@
             renderer.reLayout();
             this.barRenderers.push(renderer);
             this.system.layout.registerBarRenderer(this.staffId, renderer);
+            if (renderer.bar.isEmpty || renderer.bar.isRestOnly) {
+                this._emptyBarCount++;
+            }
+            this._updateVisibility();
+        }
+        _updateVisibility() {
+            const stylesheet = this.modelStaff.track.score.stylesheet;
+            const canHideEmptyStaves = stylesheet.hideEmptyStaves && (stylesheet.hideEmptyStavesInFirstSystem || this.system.index > 0);
+            if (canHideEmptyStaves) {
+                this.isVisible = this._emptyBarCount < this.barRenderers.length;
+            }
+            else {
+                this.isVisible = true;
+            }
         }
         addBar(bar, layoutingInfo, additionalMultiBarsRestBars) {
             const renderer = this._factory.create(this.system.layout.renderer, bar);
@@ -60676,6 +60797,10 @@
             }
             this.barRenderers.push(renderer);
             this.system.layout.registerBarRenderer(this.staffId, renderer);
+            if (bar.isEmpty || bar.isRestOnly) {
+                this._emptyBarCount++;
+            }
+            this._updateVisibility();
         }
         revertLastBar() {
             this._sharedLayoutData = new Map();
@@ -60686,6 +60811,10 @@
             for (const r of this.barRenderers) {
                 r.afterStaffBarReverted();
             }
+            if (lastBar.bar.isEmpty || lastBar.bar.isRestOnly) {
+                this._emptyBarCount--;
+            }
+            this._updateVisibility();
             return lastBar;
         }
         scaleToWidth(width) {
@@ -60796,6 +60925,7 @@
                 this.height += this.topPadding + topOverflow + this.bottomOverflow + this.bottomPadding;
             }
             this.height = Math.ceil(this.height);
+            this._updateVisibility();
         }
         paint(cx, cy, canvas, startIndex, count) {
             if (this.height === 0 || count === 0) {
@@ -61196,6 +61326,8 @@
         track;
         staffSystem;
         staves = [];
+        firstVisibleStaff;
+        lastVisibleStaff;
         bracket = null;
         constructor(staffSystem, track) {
             this.staffSystem = staffSystem;
@@ -61210,18 +61342,47 @@
      * @internal
      */
     class SystemBracket {
-        firstStaffInBracket = null;
-        lastStaffInBracket = null;
+        _system;
+        firstStaffInBracket;
+        lastStaffInBracket;
+        firstVisibleStaffInBracket;
+        lastVisibleStaffInBracket;
         drawAsBrace = false;
         braceScale = 1;
         width = 0;
         index = 0;
-        get canPaint() {
-            return this.firstStaffInBracket !== null && this.lastStaffInBracket !== null;
+        canPaint = false;
+        constructor(system) {
+            this._system = system;
+        }
+        updateCanPaint() {
+            let firstVisibleStaff = undefined;
+            let lastVisibleStaff = undefined;
+            for (let i = this.firstStaffInBracket.index; i <= this.lastStaffInBracket.index; i++) {
+                const staff = this._system.allStaves[i];
+                if (staff.isVisible) {
+                    if (!firstVisibleStaff) {
+                        firstVisibleStaff = staff;
+                    }
+                    lastVisibleStaff = staff;
+                }
+            }
+            this.firstVisibleStaffInBracket = firstVisibleStaff;
+            this.lastVisibleStaffInBracket = lastVisibleStaff;
+            if (!firstVisibleStaff || !lastVisibleStaff) {
+                this.canPaint = false;
+                return;
+            }
+            // single staff brackets?
+            const singleStaffBrackets = this._system.layout.renderer.score.stylesheet.showSingleStaffBrackets;
+            if (!singleStaffBrackets && firstVisibleStaff === lastVisibleStaff) {
+                this.canPaint = false;
+                return;
+            }
+            this.canPaint = true;
         }
         finalizeBracket(smuflMetrics) {
-            // systems with just a single staff do not have a bracket
-            if (this.firstStaffInBracket === this.lastStaffInBracket) {
+            if (!this.canPaint) {
                 this.width = 0;
                 return;
             }
@@ -61235,11 +61396,11 @@
             else {
                 this.width = smuflMetrics.bracketThickness;
             }
-            if (!this.drawAsBrace || !this.firstStaffInBracket || !this.lastStaffInBracket) {
+            if (!this.drawAsBrace) {
                 return;
             }
-            const firstStart = this.firstStaffInBracket.contentTop;
-            const lastEnd = this.lastStaffInBracket.contentBottom;
+            const firstStart = this.firstVisibleStaffInBracket.contentTop;
+            const lastEnd = this.lastVisibleStaffInBracket.contentBottom;
             const requiredHeight = lastEnd - firstStart;
             const requiredScaleForBracket = requiredHeight / bravuraBraceHeightAtMusicFontSize;
             this.braceScale = requiredScaleForBracket;
@@ -61251,8 +61412,8 @@
      */
     class SingleTrackSystemBracket extends SystemBracket {
         track;
-        constructor(track) {
-            super();
+        constructor(system, track) {
+            super(system);
             this.track = track;
             this.drawAsBrace = SingleTrackSystemBracket.isTrackDrawAsBrace(track);
         }
@@ -61317,6 +61478,7 @@
         topPadding;
         bottomPadding;
         allStaves = [];
+        firstVisibleStaff;
         constructor(layout) {
             this.layout = layout;
             this.topPadding = layout.renderer.settings.display.systemPaddingTop;
@@ -61335,14 +61497,40 @@
             this.masterBarsRenderers.push(renderers);
             renderers.layoutingInfo.preBeatSize = 0;
             let src = 0;
-            for (let i = 0, j = this.staves.length; i < j; i++) {
-                const g = this.staves[i];
-                for (let k = 0, l = g.staves.length; k < l; k++) {
-                    const s = g.staves[k];
+            let firstVisibleStaff = undefined;
+            let anyStaffVisible = false;
+            for (const g of this.staves) {
+                let firstVisibleStaffInGroup = undefined;
+                let lastVisibleStaffInGroup = undefined;
+                for (const s of g.staves) {
                     const renderer = renderers.renderers[src++];
                     s.addBarRenderer(renderer);
+                    if (s.isVisible) {
+                        anyStaffVisible = true;
+                        if (!firstVisibleStaffInGroup) {
+                            firstVisibleStaffInGroup = s;
+                        }
+                        if (!firstVisibleStaff) {
+                            firstVisibleStaff = s;
+                        }
+                        lastVisibleStaffInGroup = s;
+                    }
                 }
+                g.firstVisibleStaff = firstVisibleStaffInGroup;
+                g.lastVisibleStaff = lastVisibleStaffInGroup;
+                if (!firstVisibleStaff) {
+                    firstVisibleStaff = firstVisibleStaffInGroup;
+                }
+            }
+            if (!anyStaffVisible) {
+                const group = this.staves[0];
+                const firstStaff = group.staves[0];
+                firstStaff.isVisible = true;
+                group.firstVisibleStaff = firstStaff;
+                group.lastVisibleStaff = firstStaff;
+                firstVisibleStaff = firstStaff;
             }
+            this.firstVisibleStaff = firstVisibleStaff;
             this._calculateAccoladeSpacing(tracks);
             this._updateWidthFromLastBar();
             return renderers;
@@ -61353,15 +61541,26 @@
             result.layoutingInfo = new BarLayoutingInfo();
             result.masterBar = tracks[0].score.masterBars[barIndex];
             this.masterBarsRenderers.push(result);
+            let firstVisibleStaff = undefined;
+            let anyStaffVisible = false;
             // add renderers
             const barLayoutingInfo = result.layoutingInfo;
             for (const g of this.staves) {
+                let firstVisibleStaffInGroup = undefined;
+                let lastVisibleStaffInGroup = undefined;
                 for (const s of g.staves) {
                     const bar = g.track.staves[s.modelStaff.index].bars[barIndex];
                     const additionalMultiBarsRestBars = additionalMultiBarRestIndexes == null
                         ? null
                         : additionalMultiBarRestIndexes.map(b => g.track.staves[s.modelStaff.index].bars[b]);
                     s.addBar(bar, barLayoutingInfo, additionalMultiBarsRestBars);
+                    if (s.isVisible) {
+                        anyStaffVisible = true;
+                        if (!firstVisibleStaffInGroup) {
+                            firstVisibleStaffInGroup = s;
+                        }
+                        lastVisibleStaffInGroup = s;
+                    }
                     const renderer = s.barRenderers[s.barRenderers.length - 1];
                     result.renderers.push(renderer);
                     if (renderer.isLinkedToPrevious) {
@@ -61371,7 +61570,21 @@
                         result.canWrap = false;
                     }
                 }
+                g.firstVisibleStaff = firstVisibleStaffInGroup;
+                g.lastVisibleStaff = lastVisibleStaffInGroup;
+                if (!firstVisibleStaff) {
+                    firstVisibleStaff = firstVisibleStaffInGroup;
+                }
+            }
+            if (!anyStaffVisible) {
+                const group = this.staves[0];
+                const firstStaff = group.staves[0];
+                firstStaff.isVisible = true;
+                group.firstVisibleStaff = firstStaff;
+                group.lastVisibleStaff = firstStaff;
+                firstVisibleStaff = firstStaff;
             }
+            this.firstVisibleStaff = firstVisibleStaff;
             this._calculateAccoladeSpacing(tracks);
             barLayoutingInfo.finish();
             // ensure same widths of new renderer
@@ -61384,19 +61597,35 @@
                 this.masterBarsRenderers.splice(this.masterBarsRenderers.length - 1, 1);
                 let width = 0;
                 let barDisplayScale = 0;
-                for (let i = 0, j = this.allStaves.length; i < j; i++) {
-                    const s = this.allStaves[i];
-                    const lastBar = s.revertLastBar();
-                    const computedWidth = lastBar.computedWidth;
-                    if (computedWidth > width) {
-                        width = computedWidth;
+                let firstVisibleStaff = undefined;
+                for (const g of this.staves) {
+                    let firstVisibleStaffInGroup = undefined;
+                    let lastVisibleStaffInGroup = undefined;
+                    for (const s of g.staves) {
+                        const lastBar = s.revertLastBar();
+                        const computedWidth = lastBar.computedWidth;
+                        if (computedWidth > width) {
+                            width = computedWidth;
+                        }
+                        const newBarDisplayScale = lastBar.barDisplayScale;
+                        if (newBarDisplayScale > barDisplayScale) {
+                            barDisplayScale = newBarDisplayScale;
+                        }
+                        lastBar.afterReverted();
+                        if (s.isVisible) {
+                            if (!firstVisibleStaffInGroup) {
+                                firstVisibleStaffInGroup = s;
+                            }
+                            lastVisibleStaffInGroup = s;
+                        }
                     }
-                    const newBarDisplayScale = lastBar.barDisplayScale;
-                    if (newBarDisplayScale > barDisplayScale) {
-                        barDisplayScale = newBarDisplayScale;
+                    g.firstVisibleStaff = firstVisibleStaffInGroup;
+                    g.lastVisibleStaff = lastVisibleStaffInGroup;
+                    if (!firstVisibleStaff) {
+                        firstVisibleStaff = firstVisibleStaffInGroup;
                     }
-                    lastBar.afterReverted();
                 }
+                this.firstVisibleStaff = firstVisibleStaff;
                 this.width -= width;
                 this.computedWidth -= width;
                 this.totalBarDisplayScale -= barDisplayScale;
@@ -61503,6 +61732,7 @@
                 }
                 let braceWidth = 0;
                 for (const b of this._brackets) {
+                    b.updateCanPaint();
                     b.finalizeBracket(settings.display.resources.engravingSettings);
                     braceWidth = Math.max(braceWidth, b.width);
                 }
@@ -61510,6 +61740,12 @@
                 this.width += this.accoladeWidth;
                 this.computedWidth += this.accoladeWidth;
             }
+            else {
+                for (const b of this._brackets) {
+                    b.updateCanPaint();
+                    b.finalizeBracket(settings.display.resources.engravingSettings);
+                }
+            }
         }
         _getStaffTrackGroup(track) {
             for (let i = 0, j = this.staves.length; i < j; i++) {
@@ -61539,12 +61775,12 @@
                         break;
                     case BracketExtendMode.GroupStaves:
                         // when grouping staves, we create one bracket for the whole track across all staves
-                        bracket = new SingleTrackSystemBracket(track);
+                        bracket = new SingleTrackSystemBracket(this, track);
                         bracket.index = this._brackets.length;
                         this._brackets.push(bracket);
                         break;
                     case BracketExtendMode.GroupSimilarInstruments:
-                        bracket = new SimilarInstrumentSystemBracket(track);
+                        bracket = new SimilarInstrumentSystemBracket(this, track);
                         bracket.index = this._brackets.length;
                         this._brackets.push(bracket);
                         break;
@@ -61591,8 +61827,10 @@
             }
         }
         paintPartial(cx, cy, canvas, startIndex, count) {
-            for (let i = 0, j = this.allStaves.length; i < j; i++) {
-                this.allStaves[i].paint(cx, cy, canvas, startIndex, count);
+            for (const s of this.allStaves) {
+                if (s.isVisible) {
+                    s.paint(cx, cy, canvas, startIndex, count);
+                }
             }
             const res = this.layout.renderer.settings.display.resources;
             if (this.staves.length > 0 && startIndex === 0) {
@@ -61629,9 +61867,9 @@
                         const oldBaseLine = canvas.textBaseline;
                         const oldTextAlign = canvas.textAlign;
                         for (const g of this.staves) {
-                            if (g.staves.length > 0) {
-                                const firstStart = cy + g.staves[0].contentTop;
-                                const lastEnd = cy + g.staves[g.staves.length - 1].contentBottom;
+                            if (g.firstVisibleStaff) {
+                                const firstStart = cy + g.firstVisibleStaff.contentTop;
+                                const lastEnd = cy + g.lastVisibleStaff.contentBottom;
                                 let trackNameText = '';
                                 switch (trackNameMode) {
                                     case TrackNameMode.FullName:
@@ -61685,6 +61923,9 @@
                 if (this.allStaves.length > 0 && needsSystemBarLine) {
                     let previousStaffInBracket = null;
                     for (const s of this.allStaves) {
+                        if (!s.isVisible) {
+                            continue;
+                        }
                         if (previousStaffInBracket !== null) {
                             const previousBottom = previousStaffInBracket.contentBottom;
                             const thisTop = s.contentTop;
@@ -61711,17 +61952,17 @@
             const settings = this.layout.renderer.settings;
             for (const bracket of this._brackets) {
                 if (bracket.canPaint) {
-                    const barStartX = cx + bracket.firstStaffInBracket.x;
+                    const barStartX = cx + bracket.firstVisibleStaffInBracket.x;
                     const barSize = bracket.width;
                     const barOffset = settings.display.accoladeBarPaddingRight;
-                    const firstStart = cy + bracket.firstStaffInBracket.contentTop;
-                    const lastEnd = cy + bracket.lastStaffInBracket.contentBottom;
+                    const firstStart = cy + bracket.firstVisibleStaffInBracket.contentTop;
+                    const lastEnd = cy + bracket.lastVisibleStaffInBracket.contentBottom;
                     let accoladeStart = firstStart;
                     let accoladeEnd = lastEnd;
                     if (bracket.drawAsBrace) {
                         CanvasHelper.fillMusicFontSymbolSafe(canvas, barStartX - barOffset - barSize, accoladeEnd, bracket.braceScale, MusicFontSymbol.Brace);
                     }
-                    else if (bracket.firstStaffInBracket !== bracket.lastStaffInBracket) {
+                    else if (bracket.firstVisibleStaffInBracket !== bracket.lastVisibleStaffInBracket) {
                         // brackets typically overflow by 1/4 staff-space
                         const smuflMetrics = settings.display.resources.engravingSettings;
                         const bracketOverflow = smuflMetrics.oneStaffSpace * 0.25;
@@ -61753,40 +61994,86 @@
                 this.bottomPadding = Math.max(this.bottomPadding, neededHeight);
                 this._hasSystemSeparator = true;
             }
+            const anyStaffVisible = this._finalizeTrackGroups();
+            // for now we always force one staff to be visible.
+            // making also whole systems invisible needs separate attention (also on player cursor handling)
+            if (!anyStaffVisible) {
+                const group = this.staves[0];
+                const firstStaff = group.staves[0];
+                firstStaff.isVisible = true;
+                this._finalizeTrackGroups(true);
+            }
+            for (const b of this._brackets) {
+                b.finalizeBracket(settings.display.resources.engravingSettings);
+            }
+        }
+        _finalizeTrackGroups(onlyFirstGroup = false) {
             let currentY = 0;
+            const settings = this.layout.renderer.settings;
             const smufl = settings.display.resources.engravingSettings;
             const topBracketSpikeHeight = smufl.glyphHeights.get(MusicFontSymbol.BracketTop);
             const bottomBracketSpikeHeight = smufl.glyphHeights.get(MusicFontSymbol.BracketBottom);
             let previousStaff = undefined;
-            for (const staff of this.allStaves) {
-                // check if we need "in-between padding"
-                if (previousStaff !== undefined && previousStaff.trackIndex !== staff.trackIndex) {
-                    currentY += settings.display.trackStaffPaddingBetween;
-                }
-                const bracket = this._staffToBracket.has(staff) ? this._staffToBracket.get(staff) : undefined;
-                const hasBracket = bracket && !bracket.drawAsBrace && bracket.canPaint;
-                if (hasBracket && bracket.firstStaffInBracket === staff) {
-                    const spikeOverflow = topBracketSpikeHeight - staff.topOverflow;
-                    if (spikeOverflow > 0) {
-                        currentY += spikeOverflow;
+            let endSpikeOverflow = 0;
+            let anyStaffVisible = false;
+            for (const group of this.staves) {
+                let firstVisibleStaffInGroup = undefined;
+                let lastVisibleStaffInGroup = undefined;
+                for (const staff of group.staves) {
+                    // check if we need "in-between padding"
+                    if (previousStaff !== undefined && previousStaff.trackIndex !== staff.trackIndex) {
+                        currentY += settings.display.trackStaffPaddingBetween;
+                    }
+                    const bracket = this._staffToBracket.has(staff) ? this._staffToBracket.get(staff) : undefined;
+                    const hasBracket = bracket && !bracket.drawAsBrace && bracket.canPaint;
+                    if (hasBracket && bracket.firstStaffInBracket === staff) {
+                        const spikeOverflow = topBracketSpikeHeight - staff.topOverflow;
+                        if (spikeOverflow > 0) {
+                            currentY += spikeOverflow;
+                        }
+                    }
+                    staff.x = this.accoladeWidth;
+                    staff.y = currentY;
+                    if (!onlyFirstGroup) {
+                        staff.finalizeStaff();
+                    }
+                    if (staff.isVisible) {
+                        currentY += staff.height;
+                        anyStaffVisible = true;
+                        previousStaff = staff;
+                        if (!firstVisibleStaffInGroup) {
+                            firstVisibleStaffInGroup = staff;
+                        }
+                        lastVisibleStaffInGroup = staff;
+                    }
+                    endSpikeOverflow = 0;
+                    if (hasBracket && bracket.lastStaffInBracket === staff) {
+                        const spikeOverflow = bottomBracketSpikeHeight - staff.bottomOverflow;
+                        if (spikeOverflow > 0) {
+                            if (staff.isVisible) {
+                                currentY += spikeOverflow;
+                            }
+                            else {
+                                endSpikeOverflow = spikeOverflow;
+                            }
+                        }
                     }
                 }
-                staff.x = this.accoladeWidth;
-                staff.y = currentY;
-                staff.finalizeStaff();
-                currentY += staff.height;
-                if (hasBracket && bracket.lastStaffInBracket === staff) {
-                    const spikeOverflow = bottomBracketSpikeHeight - staff.bottomOverflow;
-                    if (spikeOverflow > 0) {
-                        currentY += spikeOverflow;
-                    }
+                group.firstVisibleStaff = firstVisibleStaffInGroup;
+                group.lastVisibleStaff = lastVisibleStaffInGroup;
+                if (!this.firstVisibleStaff) {
+                    this.firstVisibleStaff = firstVisibleStaffInGroup;
+                }
+                if (onlyFirstGroup) {
+                    break;
                 }
-                previousStaff = staff;
             }
-            this._contentHeight = currentY;
-            for (const b of this._brackets) {
-                b.finalizeBracket(smufl);
+            // ensure we add overflow if last bracket is hidden
+            if (endSpikeOverflow) {
+                currentY += endSpikeOverflow;
             }
+            this._contentHeight = currentY;
+            return anyStaffVisible;
         }
         buildBoundingsLookup(cx, cy) {
             if (this.layout.renderer.boundsLookup.isFinished) {
@@ -61820,6 +62107,9 @@
             const masterBarBoundsLookup = new Map();
             for (let i = 0; i < this.staves.length; i++) {
                 for (const staff of this.staves[i].staves) {
+                    if (!staff.isVisible) {
+                        continue;
+                    }
                     for (const renderer of staff.barRenderers) {
                         let masterBarBounds;
                         if (!masterBarBoundsLookup.has(renderer.bar.masterBar.index)) {
@@ -62130,8 +62420,9 @@
         }
         firstBarIndex = 0;
         lastBarIndex = 0;
-        createEmptyStaffSystem() {
+        createEmptyStaffSystem(index) {
             const system = new StaffSystem(this);
+            system.index = index;
             const allFactories = Environment.defaultRenderers;
             const renderStaves = [];
             for (let trackIndex = 0; trackIndex < this.renderer.tracks.length; trackIndex++) {
@@ -62143,7 +62434,7 @@
                     let previousStaff = undefined;
                     for (const factory of allFactories) {
                         if (this.profile.has(factory.staffId) && factory.canCreate(track, staff)) {
-                            const renderStaff = new RenderStaff(trackIndex, staff, factory);
+                            const renderStaff = new RenderStaff(system, trackIndex, staff, factory);
                             // insert shared effect bands at front
                             renderStaff.topEffectInfos.splice(0, 0, ...sharedTopEffects);
                             renderStaff.bottomEffectInfos.push(...sharedBottomEffects);
@@ -65301,7 +65592,7 @@
             }
             endBarIndex = startIndex + endBarIndex - 1; // map count to array index
             endBarIndex = Math.min(score.masterBars.length - 1, Math.max(0, endBarIndex));
-            this._system = this.createEmptyStaffSystem();
+            this._system = this.createEmptyStaffSystem(0);
             this._system.isLast = true;
             this._system.x = this.pagePadding[0];
             this._system.y = this.pagePadding[1];
@@ -65574,8 +65865,7 @@
                 this._systems = [];
                 let currentIndex = 0;
                 const maxWidth = this._maxWidth;
-                let system = this.createEmptyStaffSystem();
-                system.index = this._systems.length;
+                let system = this.createEmptyStaffSystem(this._systems.length);
                 system.x = this.pagePadding[0];
                 system.y = y;
                 while (currentIndex < this._allMasterBarRenderers.length) {
@@ -65606,8 +65896,7 @@
                         this._fitSystem(system);
                         y += this._paintSystem(system, oldHeight);
                         // note: we do not increase currentIndex here to have it added to the next system
-                        system = this.createEmptyStaffSystem();
-                        system.index = this._systems.length;
+                        system = this.createEmptyStaffSystem(this._systems.length);
                         system.x = this.pagePadding[0];
                         system.y = y;
                     }
@@ -65692,8 +65981,7 @@
             return barsPerRow;
         }
         _createStaffSystem(currentBarIndex, endIndex) {
-            const system = this.createEmptyStaffSystem();
-            system.index = this._systems.length;
+            const system = this.createEmptyStaffSystem(this._systems.length);
             const barsPerRow = this._getBarsPerSystem(system.index);
             const maxWidth = this._maxWidth;
             const end = endIndex + 1;
@@ -68373,16 +68661,77 @@
     class ClefGlyph extends MusicFontGlyph {
         _clef;
         _clefOttava;
+        _ottavaGlyph;
         constructor(x, y, clef, clefOttava) {
             super(x, y, 1, ClefGlyph._getSymbol(clef, clefOttava));
             this._clef = clef;
             this._clefOttava = clefOttava;
         }
+        getBoundingBoxTop() {
+            let top = super.getBoundingBoxTop();
+            const ottava = this._ottavaGlyph;
+            if (ottava) {
+                const ottavaTop = this.y + ottava.getBoundingBoxTop();
+                top = ModelUtils.minBoundingBox(top, ottavaTop);
+            }
+            return top;
+        }
+        getBoundingBoxBottom() {
+            let bottom = super.getBoundingBoxBottom();
+            const ottava = this._ottavaGlyph;
+            if (ottava) {
+                const ottavaBottom = this.y + ottava.getBoundingBoxBottom();
+                bottom = ModelUtils.maxBoundingBox(bottom, ottavaBottom);
+            }
+            return bottom;
+        }
         doLayout() {
             this.center = true;
             super.doLayout();
             this.width = this.renderer.smuflMetrics.glyphWidths.get(MusicFontSymbol.GClef);
             this.offsetX = this.width / 2;
+            this._ottavaGlyph = undefined;
+            switch (this._clef) {
+                case Clef.C3:
+                case Clef.C4:
+                    switch (this._clefOttava) {
+                        case Ottavia._8vb:
+                            return;
+                    }
+                    break;
+                case Clef.F4:
+                case Clef.G2:
+                    return;
+            }
+            let ottavaSymbol;
+            let top = false;
+            switch (this._clefOttava) {
+                case Ottavia._15ma:
+                    ottavaSymbol = MusicFontSymbol.Clef15;
+                    top = true;
+                    break;
+                case Ottavia._8va:
+                    ottavaSymbol = MusicFontSymbol.Clef8;
+                    top = true;
+                    break;
+                case Ottavia._8vb:
+                    ottavaSymbol = MusicFontSymbol.Clef8;
+                    break;
+                case Ottavia._15mb:
+                    ottavaSymbol = MusicFontSymbol.Clef15;
+                    break;
+                default:
+                    return;
+            }
+            const ottavaX = this.width / 2;
+            const ottavaY = top
+                ? this.renderer.smuflMetrics.glyphTop.get(this.symbol)
+                : this.renderer.smuflMetrics.glyphBottom.get(this.symbol) -
+                    this.renderer.smuflMetrics.glyphHeights.get(ottavaSymbol);
+            this._ottavaGlyph = new MusicFontGlyph(ottavaX, -ottavaY, 1, ottavaSymbol);
+            this._ottavaGlyph.center = true;
+            this._ottavaGlyph.renderer = this.renderer;
+            this._ottavaGlyph.doLayout();
         }
         static _getSymbol(clef, clefOttava) {
             switch (clef) {
@@ -68430,44 +68779,10 @@
             const _ = ElementStyleHelper.bar(canvas, BarSubElement.StandardNotationClef, this.renderer.bar);
             try {
                 super.paint(cx, cy, canvas);
-                switch (this._clef) {
-                    case Clef.C3:
-                    case Clef.C4:
-                        switch (this._clefOttava) {
-                            case Ottavia._8vb:
-                                return;
-                        }
-                        break;
-                    case Clef.F4:
-                    case Clef.G2:
-                        return;
-                }
-                let ottavaGlyph;
-                let top = false;
-                switch (this._clefOttava) {
-                    case Ottavia._15ma:
-                        ottavaGlyph = MusicFontSymbol.Clef15;
-                        top = true;
-                        break;
-                    case Ottavia._8va:
-                        ottavaGlyph = MusicFontSymbol.Clef8;
-                        top = true;
-                        break;
-                    case Ottavia._8vb:
-                        ottavaGlyph = MusicFontSymbol.Clef8;
-                        break;
-                    case Ottavia._15mb:
-                        ottavaGlyph = MusicFontSymbol.Clef15;
-                        break;
-                    default:
-                        return;
+                const ottava = this._ottavaGlyph;
+                if (ottava) {
+                    ottava.paint(cx + this.x, cy + this.y, canvas);
                 }
-                const ottavaX = this.width / 2;
-                const ottavaY = top
-                    ? this.renderer.smuflMetrics.glyphTop.get(this.symbol)
-                    : this.renderer.smuflMetrics.glyphBottom.get(this.symbol) -
-                        this.renderer.smuflMetrics.glyphHeights.get(ottavaGlyph);
-                CanvasHelper.fillMusicFontSymbolSafe(canvas, cx + this.x + ottavaX, cy + this.y - ottavaY, 1, ottavaGlyph, true);
             }
             finally {
                 _?.[Symbol.dispose]?.();