@energy8platform/shell 0.10.0 → 0.11.1

package/dist/pixi.d.ts

@@ -643,7 +643,7 @@ declare class ShellController extends EventEmitter<ShellEvents> implements Shell
     tokens: ShellTokens;
     layout: ShellLayoutMode;
     soundOn: boolean;
-    readonly engineVersion = "0.10.0";
+    readonly engineVersion = "0.11.1";
     readonly actions: ShellActions;
     private renderer;
     private i18n;
@@ -802,7 +802,59 @@ declare function createI18n(opts: I18nOptions): I18n;
 declare const DISCLAIMER_LINES: readonly string[];
 
 /** The @energy8platform/shell package version, stamped into the game-info footer. */
-declare const PACKAGE_VERSION = "0.10.0";
+declare const PACKAGE_VERSION = "0.11.1";
+
+/**
+ * What a scrollable region should ADVERTISE about itself.
+ *
+ * A slot in a Stake popout is 400×225. At that size the game-info overlay holds twelve screens of
+ * content, the buy-bonus switches to a vertical card stack, and the menu popover hides its last
+ * row — all of them scroll, and (before this module) none of them said so. macOS makes it worse:
+ * overlay scrollbars stay invisible until something is already scrolling, so the very affordance a
+ * player needs BEFORE they touch anything is the one the OS withholds. A certification reviewer
+ * reads that as content the player can't reach.
+ *
+ * The maths lives here, apart from both renderers, for one reason: the DOM shell reads
+ * `scrollTop`/`scrollHeight` while the Pixi shell tracks its own offset against a mask, and those
+ * two must never disagree about whether a fade belongs at the bottom edge. Renderers decide how a
+ * thumb LOOKS; this decides when there is one and where it sits.
+ */
+/**
+ * Shortest thumb we will draw, as a fraction of its track.
+ *
+ * The honest ratio for game info at Popout S is 8% — an 18px speck on a 226px track, which reads
+ * as a rendering artifact rather than a scrollbar. Floored at 18% it stays recognisably a thumb,
+ * and it still travels the whole track, so the position it reports remains truthful even though
+ * its length no longer is. That is the right trade: length is decoration, position is information.
+ */
+declare const SCROLL_THUMB_MIN = 0.18;
+/** One axis of a scroll region. Named for the Y axis because that is the common case; the
+ *  buy-bonus strip passes its width metrics through the same fields. */
+interface ScrollMetrics {
+    scrollTop: number;
+    scrollHeight: number;
+    clientHeight: number;
+}
+interface ScrollHint {
+    /** There is content past an edge — draw the affordance at all. */
+    overflowing: boolean;
+    /** Nothing above/left of the viewport: suppress the leading fade. */
+    atStart: boolean;
+    /** Nothing below/right of the viewport: suppress the trailing fade and the chevron. */
+    atEnd: boolean;
+    /** Thumb length as a fraction of the track, in `[SCROLL_THUMB_MIN, 1]`. */
+    thumbSize: number;
+    /** Thumb's leading edge as a fraction of the track, in `[0, 1 - thumbSize]`. */
+    thumbOffset: number;
+    /** Scrollable distance in pixels — 0 when the content fits. */
+    maxScroll: number;
+}
+/** Resolve one axis of a scroll region into everything a renderer needs to draw its affordance. */
+declare function scrollHint(m: ScrollMetrics): ScrollHint;
+/** The three-state tag both renderers put on a scroll region, so CSS and tests can name it.
+ *  `none` when the content fits — the attribute is removed rather than set to it. */
+type ScrollEdge = 'none' | 'start' | 'mid' | 'end';
+declare function scrollEdge(h: ScrollHint): ScrollEdge;
 
 /** A shell: the renderer-agnostic controller plus the surface facade (safeArea/barHeight/setVisible)
  *  an embedding host reads. `createShell`, `createGameShell` and `createPixiShell` all return this. */
@@ -938,5 +990,5 @@ declare function createPixiShell(config: PixiShellConfig): PixiGameShell;
  *  Resolves when removed — mirrors `removePixiShell` in the legacy package. */
 declare function removePixiShell(): Promise<void>;
 
-export { DEFAULT_ACCENT, DEFAULT_MENU, DISCLAIMER_LINES, PACKAGE_VERSION, POPOVER, PixiRenderer, SCHEMES, ShellController, createI18n, createPixiShell, createShell, isPresetId, normalizeLang, placePopover, popoverWidth, rangeBounds, removePixiShell, resolveConfig, resolveMenu, resolveTheme, seedMenuValues, socialize };
-export type { AutoplayConfig, AutoplayOptions, BonusCardContext, BonusOption, BonusReadout, CellRef, CreateShellOptions, CurrencyConfig, FreeSpinsState, GameInfoContent, GameInfoSection, GameMode, I18n, I18nOptions, Lang, MenuHost, MenuItem, MenuPresetId, MenuRow, ModalAction, ModalOptions, OverlayHandle, OverlayRequest, PaylineDef, PaytableRow, PixiGameShell, PixiShellConfig, PixiShellSurface, PopoverPlacement, Rect as PopoverRect, ReplayModalOptions, ResolvedShellConfig, SafeArea, ShapeDef, Shell, ShellActions, ShellConfig, ShellEvents, ShellFeatures, ShellHost, ShellLayoutMode, ShellMode, ShellRenderer, ShellState, ShellSurface, ShellTokens, ThemeConfig, VolumeKey, VolumeLevels, WinSection };
+export { DEFAULT_ACCENT, DEFAULT_MENU, DISCLAIMER_LINES, PACKAGE_VERSION, POPOVER, PixiRenderer, SCHEMES, SCROLL_THUMB_MIN, ShellController, createI18n, createPixiShell, createShell, isPresetId, normalizeLang, placePopover, popoverWidth, rangeBounds, removePixiShell, resolveConfig, resolveMenu, resolveTheme, scrollEdge, scrollHint, seedMenuValues, socialize };
+export type { AutoplayConfig, AutoplayOptions, BonusCardContext, BonusOption, BonusReadout, CellRef, CreateShellOptions, CurrencyConfig, FreeSpinsState, GameInfoContent, GameInfoSection, GameMode, I18n, I18nOptions, Lang, MenuHost, MenuItem, MenuPresetId, MenuRow, ModalAction, ModalOptions, OverlayHandle, OverlayRequest, PaylineDef, PaytableRow, PixiGameShell, PixiShellConfig, PixiShellSurface, PopoverPlacement, Rect as PopoverRect, ReplayModalOptions, ResolvedShellConfig, SafeArea, ScrollEdge, ScrollHint, ScrollMetrics, ShapeDef, Shell, ShellActions, ShellConfig, ShellEvents, ShellFeatures, ShellHost, ShellLayoutMode, ShellMode, ShellRenderer, ShellState, ShellSurface, ShellTokens, ThemeConfig, VolumeKey, VolumeLevels, WinSection };

package/dist/pixi.esm.js

@@ -323,6 +323,20 @@ function nextTurbo(current, maxLevels) {
         return 0;
     return current >= maxLevels ? 0 : current + 1;
 }
+/**
+ * Is a bonus buy unavailable right now?
+ *
+ * The three RUNTIME locks, in one place because they used to be in three: both bottom bars spelled
+ * them out for the coin, and the Shift+B hotkey spelled out a different, shorter set — so the
+ * keyboard opened the buy-bonus overlay mid-round and let a player stake a second bet on top of a
+ * round already in flight. A predicate the bars and the hotkey share cannot drift apart again.
+ *
+ * Runtime only. Whether the feature EXISTS at all is a config question (`features.buyBonus`), and
+ * whether this particular surface should offer it (mode, replay) belongs to the caller.
+ */
+function bonusBuyLocked(s) {
+    return s.busy || s.autoplay.active || !s.buyBonusEnabled;
+}
 
 /** The single brand accent (purple). The bar accent default (theme.ts) and the buy-a-bonus
  *  card default both derive from this, so a rebrand only touches one constant. */
@@ -1625,7 +1639,9 @@ class KeyboardController {
                     }
                     break;
                 case 'KeyB':
-                    if (h.buyBonusEnabled && s.mode === 'base' && !s.replay) {
+                    // `bonusBuyLocked` is the same predicate the bar's coin uses. Without it this hotkey
+                    // reached past a disabled coin and opened the overlay mid-round.
+                    if (h.buyBonusEnabled && s.mode === 'base' && !s.replay && !bonusBuyLocked(s)) {
                         h.openBuyBonus();
                         return;
                     }
@@ -1737,7 +1753,7 @@ function keyboardCapable(win = typeof window === 'undefined' ? undefined : windo
 
 // AUTO-GENERATED by scripts/gen-version.mjs — do not edit. Mirrors package.json "version".
 /** The @energy8platform/shell package version, stamped into the game-info footer. */
-const PACKAGE_VERSION = '0.10.0';
+const PACKAGE_VERSION = '0.11.1';
 
 /** Apply defaults to the raw config (the mount target lives on the renderer, not here). */
 function resolveConfig(config) {
@@ -2223,6 +2239,66 @@ function placePopover(anchor, surface, size, pointer = null) {
     return { x, y, maxH, arrowX, below };
 }
 
+/**
+ * What a scrollable region should ADVERTISE about itself.
+ *
+ * A slot in a Stake popout is 400×225. At that size the game-info overlay holds twelve screens of
+ * content, the buy-bonus switches to a vertical card stack, and the menu popover hides its last
+ * row — all of them scroll, and (before this module) none of them said so. macOS makes it worse:
+ * overlay scrollbars stay invisible until something is already scrolling, so the very affordance a
+ * player needs BEFORE they touch anything is the one the OS withholds. A certification reviewer
+ * reads that as content the player can't reach.
+ *
+ * The maths lives here, apart from both renderers, for one reason: the DOM shell reads
+ * `scrollTop`/`scrollHeight` while the Pixi shell tracks its own offset against a mask, and those
+ * two must never disagree about whether a fade belongs at the bottom edge. Renderers decide how a
+ * thumb LOOKS; this decides when there is one and where it sits.
+ */
+/** Fractions of a pixel are layout rounding, not reachable content. */
+const EPSILON = 1;
+/** Landing within half a pixel of an edge counts as arriving: a browser settles a flung scroll on
+ *  199.5 of 200, and a fade left glowing over content the player has already reached reads as a
+ *  bug. */
+const EDGE_EPSILON = 0.5;
+/**
+ * Shortest thumb we will draw, as a fraction of its track.
+ *
+ * The honest ratio for game info at Popout S is 8% — an 18px speck on a 226px track, which reads
+ * as a rendering artifact rather than a scrollbar. Floored at 18% it stays recognisably a thumb,
+ * and it still travels the whole track, so the position it reports remains truthful even though
+ * its length no longer is. That is the right trade: length is decoration, position is information.
+ */
+const SCROLL_THUMB_MIN = 0.18;
+/** Resolve one axis of a scroll region into everything a renderer needs to draw its affordance. */
+function scrollHint(m) {
+    const view = Math.max(0, m.clientHeight);
+    const content = Math.max(0, m.scrollHeight);
+    const maxScroll = Math.max(0, content - view);
+    if (maxScroll <= EPSILON || view <= 0) {
+        // Both edges are "the edge" when there is nowhere to go — callers gate every fade on the
+        // matching flag, so a region that fits draws nothing without needing to check `overflowing`.
+        return { overflowing: false, atStart: true, atEnd: true, thumbSize: 1, thumbOffset: 0, maxScroll: 0 };
+    }
+    const at = Math.max(0, Math.min(maxScroll, m.scrollTop));
+    const thumbSize = Math.min(1, Math.max(SCROLL_THUMB_MIN, view / content));
+    const progress = at / maxScroll;
+    return {
+        overflowing: true,
+        atStart: at <= EDGE_EPSILON,
+        atEnd: maxScroll - at <= EDGE_EPSILON,
+        thumbSize,
+        thumbOffset: progress * (1 - thumbSize),
+        maxScroll,
+    };
+}
+function scrollEdge(h) {
+    if (!h.overflowing)
+        return 'none';
+    if (h.atStart)
+        return 'start';
+    return h.atEnd ? 'end' : 'mid';
+}
+
 const NO_INSET = { top: 0, right: 0, bottom: 0, left: 0 };
 /** Create a shell with an explicit renderer instance (custom or a built-in HtmlRenderer/PixiRenderer).
  *  Built-in renderers also have the createGameShell/createPixiShell sugar in /html and /pixi.
@@ -3867,7 +3943,12 @@ class BottomBar extends Container {
         if (config.features.turbo > 0) {
             this.turboBtn = makeTurboButton(this.host, state.turbo, () => this.onTurbo(), 40, 22);
         }
-        const buy = isBase ? (this.buildBuy(M_BUY, 9, 2) ?? undefined) : undefined;
+        // On `this`, not a local: applyBusy() guards every line with `if (this.<control>)`, so a coin
+        // kept in a local is drawn, laid out, tappable — and unreachable by every lock there is.
+        // That is exactly how a phone player could tap SPIN and open buy-bonus on the round in
+        // flight. (Safe for layout: applyFit() hands mobile to applyFitMobile() before it touches
+        // `this.buy` for the wide bar's positioning.)
+        this.buy = isBase ? (this.buildBuy(M_BUY, 9, 2) ?? undefined) : undefined;
         // level 1 — controls bar (dark)
         const controls = new FlexBox({
             direction: 'row',
@@ -3888,8 +3969,8 @@ class BottomBar extends Container {
             const rz = new FlexBox({ direction: 'row', align: 'center', gap: SIDE, justify: 'end' });
             if (this.turboBtn)
                 rz.add(this.turboBtn);
-            if (buy)
-                rz.add(buy);
+            if (this.buy)
+                rz.add(this.buy);
             const zw = Math.max(lz.measureSize().w, rz.measureSize().w);
             lz.setLayoutSize(zw, undefined);
             rz.setLayoutSize(zw, undefined);
@@ -4055,7 +4136,7 @@ class BottomBar extends Container {
         if (this.autoBtn)
             this.autoBtn.disabled = state.busy && !auto;
         if (this.buy)
-            this.buy.disabled = state.busy || auto || !state.buyBonusEnabled;
+            this.buy.disabled = bonusBuyLocked(state);
         if (this.betReadout && lockBet) {
             this.betReadout.eventMode = 'none';
             this.betReadout.cursor = 'default';
@@ -4148,11 +4229,207 @@ function SPIN_POP_MOBILE() {
     return (SPIN - M_CTRL_H) / 2; // 11
 }
 
+/** Thickness of the thumb, and how far it is inset from the edge it rides. */
+const THUMB_THICK = 4;
+const THUMB_INSET = 3;
+/** Shortest thumb we will draw in pixels — the fractional floor still degenerates on a tiny frame. */
+const THUMB_MIN_PX = 22;
+/** Depth of the edge scrim. */
+const SCRIM = 34;
+const SCRIM_ALPHA = 0.72;
+/** The overlay chrome — plaques, bar, backdrop — is scheme-independent in this shell (see
+ *  resolveTheme: those tokens are fixed, only the palette behind them flips). The affordance is
+ *  chrome, so it is a fixed neutral too: white marks over a tint of the same hue as the veil, which
+ *  makes the fade read as content dissolving INTO the overlay rather than as a grey band on top. */
+const SCRIM_TINT = 0x0c111c;
+const CUE_R = 11;
+const CUE_BOB = 4;
+const CUE_PERIOD = 1600; // ms
+/**
+ * The scrim's alpha ramp, densest AT the edge and clear by `depth` inward.
+ *
+ * Exported because the direction is the whole point and is easy to get backwards: an inverted ramp
+ * draws a hard-edged dark band floating over the content instead of a fade into the frame, and it
+ * looks deliberate enough that nobody questions it. The squared falloff keeps the outer half of the
+ * ramp faint, so the scrim reads as content thinning out rather than as a panel laid on top.
+ */
+function scrimRamp(depth) {
+    const slices = Math.max(1, Math.round(depth));
+    const thickness = depth / slices;
+    const out = [];
+    for (let i = 0; i < slices; i++) {
+        const offset = i * thickness;
+        const t = 1 - (offset + thickness / 2) / depth; // 1 at the edge → 0 at `depth`
+        out.push({ offset, thickness, alpha: SCRIM_ALPHA * t * t });
+    }
+    return out;
+}
+class ScrollAffordanceView extends Container {
+    thumb = new Graphics();
+    scrim = new Graphics();
+    cue = new Container();
+    ticker;
+    bounds = null;
+    cueOn = false;
+    // Once the region has moved the player knows the gesture; re-offering it on every return to the
+    // top would nag rather than inform.
+    cueRetired = false;
+    cueBaseY = 0;
+    elapsed = 0;
+    tick;
+    constructor(ticker) {
+        super();
+        this.ticker = ticker;
+        this.eventMode = 'none'; // decoration: never intercept the drag it is advertising
+        this.addChild(this.scrim, this.thumb, this.cue);
+        this.buildCue();
+        this.visible = false;
+    }
+    /** Where the thumb is drawn, in the parent's space — `null` when nothing is drawn. */
+    get thumbBounds() {
+        return this.visible ? this.bounds : null;
+    }
+    get cueVisible() {
+        return this.visible && this.cueOn;
+    }
+    /** Re-draw for a viewport and a hint. Cheap enough to call on every scroll frame. */
+    update(vp, hint) {
+        if (this.destroyed)
+            return;
+        if (!hint.overflowing) {
+            this.visible = false;
+            this.bounds = null;
+            this.showCue(false);
+            return;
+        }
+        this.visible = true;
+        // Any movement off the start retires the cue permanently.
+        if (!hint.atStart)
+            this.cueRetired = true;
+        this.drawThumb(vp, hint);
+        this.drawScrim(vp, hint);
+        this.placeCue(vp);
+        this.showCue(hint.atStart && !this.cueRetired);
+    }
+    drawThumb(vp, hint) {
+        const along = vp.axis === 'y' ? vp.h : vp.w;
+        const track = Math.max(0, along - THUMB_INSET * 2);
+        const len = Math.max(Math.min(track, THUMB_MIN_PX), track * hint.thumbSize);
+        // Recover the travel from the (possibly floored) length so the thumb still reaches both ends.
+        const travel = Math.max(0, track - len);
+        const progress = hint.thumbSize < 1 ? hint.thumbOffset / (1 - hint.thumbSize) : 0;
+        const at = THUMB_INSET + travel * progress;
+        this.bounds =
+            vp.axis === 'y'
+                ? { x: vp.x + vp.w - THUMB_INSET - THUMB_THICK, y: vp.y + at, w: THUMB_THICK, h: len }
+                : { x: vp.x + at, y: vp.y + vp.h - THUMB_INSET - THUMB_THICK, w: len, h: THUMB_THICK };
+        const b = this.bounds;
+        this.thumb.clear();
+        // A faint track behind the thumb: on a dark overlay a lone thumb can read as a stray highlight;
+        // with the groove behind it, it reads as a scrollbar.
+        if (vp.axis === 'y') {
+            this.thumb
+                .roundRect(b.x, vp.y + THUMB_INSET, THUMB_THICK, track, THUMB_THICK / 2)
+                .fill({ color: 0xffffff, alpha: 0.1 });
+        }
+        else {
+            this.thumb
+                .roundRect(vp.x + THUMB_INSET, b.y, track, THUMB_THICK, THUMB_THICK / 2)
+                .fill({ color: 0xffffff, alpha: 0.1 });
+        }
+        this.thumb.roundRect(b.x, b.y, b.w, b.h, THUMB_THICK / 2).fill({ color: 0xffffff, alpha: 0.55 });
+    }
+    /** Stacked 1px slices rather than a gradient fill: no texture, no backend-specific paths, and at
+     *  one device pixel per slice there is nothing left to band. */
+    drawScrim(vp, hint) {
+        this.scrim.clear();
+        const depth = Math.min(SCRIM, (vp.axis === 'y' ? vp.h : vp.w) / 3);
+        if (depth <= 0)
+            return;
+        for (const { offset, thickness, alpha } of scrimRamp(depth)) {
+            // `offset` is measured INWARD from whichever edge is being faded.
+            if (!hint.atEnd) {
+                if (vp.axis === 'y')
+                    this.scrim.rect(vp.x, vp.y + vp.h - offset - thickness, vp.w, thickness);
+                else
+                    this.scrim.rect(vp.x + vp.w - offset - thickness, vp.y, thickness, vp.h);
+                this.scrim.fill({ color: SCRIM_TINT, alpha });
+            }
+            if (!hint.atStart) {
+                if (vp.axis === 'y')
+                    this.scrim.rect(vp.x, vp.y + offset, vp.w, thickness);
+                else
+                    this.scrim.rect(vp.x + offset, vp.y, thickness, vp.h);
+                this.scrim.fill({ color: SCRIM_TINT, alpha });
+            }
+        }
+    }
+    buildCue() {
+        const disc = new Graphics();
+        disc.circle(0, 0, CUE_R).fill({ color: 0x0b0f18, alpha: 0.9 });
+        disc.circle(0, 0, CUE_R).stroke({ color: 0xffffff, alpha: 0.22, width: 1 });
+        const size = Math.round(CUE_R * 1.3);
+        const glyph = makeIcon('chevronDown', size, '#ffffff');
+        glyph.position.set(-size / 2, -size / 2);
+        this.cue.addChild(disc, glyph);
+        this.cue.visible = false;
+    }
+    placeCue(vp) {
+        // Bottom-centre for a vertical region; hugging the trailing edge for a horizontal one.
+        if (vp.axis === 'y') {
+            this.cue.x = vp.x + vp.w / 2;
+            this.cueBaseY = vp.y + vp.h - CUE_R - 6;
+        }
+        else {
+            this.cue.x = vp.x + vp.w - CUE_R - 6;
+            this.cueBaseY = vp.y + vp.h / 2;
+            this.cue.rotation = -Math.PI / 2; // chevron points the way the strip moves
+        }
+        this.cue.y = this.cueBaseY;
+    }
+    showCue(on) {
+        if (on === this.cueOn)
+            return;
+        this.cueOn = on;
+        this.cue.visible = on;
+        if (on)
+            this.startBob();
+        else
+            this.stopBob();
+    }
+    startBob() {
+        // A player who asked for stillness still needs the hint; they just do not need it moving.
+        if (this.tick || !this.ticker || prefersReducedMotion())
+            return;
+        this.elapsed = 0;
+        this.tick = (t) => {
+            this.elapsed += t.deltaMS;
+            const phase = (this.elapsed % CUE_PERIOD) / CUE_PERIOD;
+            this.cue.y = this.cueBaseY + Math.sin(phase * Math.PI * 2) * (CUE_BOB / 2) + CUE_BOB / 2;
+        };
+        this.ticker.add(this.tick);
+    }
+    stopBob() {
+        if (!this.tick)
+            return;
+        this.ticker?.remove(this.tick);
+        this.tick = undefined;
+        this.cue.y = this.cueBaseY;
+    }
+    destroy(options) {
+        this.stopBob();
+        super.destroy(options);
+    }
+}
+
 /** A vertically-scrolling viewport — mask + drag + mouse-wheel, the Pixi analogue of the
  *  overlay's `overflow-y:auto` scroll region. Add content to `.content`; call `refresh()`
  *  after content changes or a resize. */
 class ScrollBox extends Container {
     content = new Container();
+    /** The drawn "this scrolls" marks — thumb, edge scrim, chevron. Public so the overlay that owns
+     *  the box (and the tests) can read what a player would see. */
+    affordance;
     maskG = new Graphics();
     viewW = 0;
     viewH = 0;
@@ -4163,10 +4440,13 @@ class ScrollBox extends Container {
     moved = false;
     canvas;
     wheelHandler;
-    constructor(canvas) {
+    constructor(canvas, ticker) {
         super();
         this.canvas = canvas;
-        this.addChild(this.content);
+        this.affordance = new ScrollAffordanceView(ticker);
+        // Added AFTER content, and never masked: the marks describe the viewport, so clipping them to
+        // the content they describe would hide them exactly when the content overflows.
+        this.addChild(this.content, this.affordance);
         // maskG is added to the scene only while scrolling (see refresh) — a leftover unused mask
         // graphic renders as a white rect. (Masking does NOT gate pointer events to the content, despite
         // what an earlier version of this comment claimed — see the correction in refresh() below.)
@@ -4221,6 +4501,7 @@ class ScrollBox extends Container {
         }
         this.eventMode = scrollable ? 'static' : 'passive';
         this.setScroll(this.scrollY);
+        this.syncAffordance();
     }
     /** Max scrollable distance (0 when content fits) — exposed for tests. */
     get maxScrollY() {
@@ -4237,6 +4518,12 @@ class ScrollBox extends Container {
             return;
         this.scrollY = Math.max(0, Math.min(this.maxScroll, y)) || 0; // || 0 converts -0 to 0
         this.content.y = this.scrollY === 0 ? 0 : -this.scrollY;
+        this.syncAffordance();
+    }
+    syncAffordance() {
+        if (this.destroyed || this.affordance.destroyed)
+            return;
+        this.affordance.update({ x: 0, y: 0, w: this.viewW, h: this.viewH, axis: 'y' }, scrollHint({ scrollTop: this.scrollY, scrollHeight: this.viewH + this.maxScroll, clientHeight: this.viewH }));
     }
     onDown = (e) => {
         this.dragging = true;
@@ -4807,7 +5094,7 @@ class Overlay extends Container {
         this.host = host;
         this.opts = opts;
         this.tag = opts.tag;
-        this.scroll = new ScrollBox(host.canvas);
+        this.scroll = new ScrollBox(host.canvas, host.ticker);
         this.addChild(this.veil, this.scroll, this.header);
         this.veil.eventMode = 'static'; // swallow clicks to the game behind
         this.resize(host.screenW, host.screenH);
@@ -5530,6 +5817,10 @@ class BuyBonusOverlay extends Container {
     header = new Container();
     strip = new Container(); // cards live here (drag-scrollable when wide)
     stripMask = new Graphics();
+    /** "the strip moves" — the drawn marks over the card band. Unmasked and outside `strip`, so a
+     *  drag moves the cards under it while the marks hold still. Public for the same reason
+     *  ScrollBox.affordance is: it is the only readable account of what a player sees here. */
+    scrollCue;
     footer = new Container();
     confirm;
     /** The bonus shown in the current confirm dialog (set by openConfirm, cleared by removeConfirm). */
@@ -5566,7 +5857,8 @@ class BuyBonusOverlay extends Container {
         super();
         this.host = host;
         this.bonuses = bonuses;
-        this.addChild(this.veil, this.strip, this.header, this.footer);
+        this.scrollCue = new ScrollAffordanceView(host.ticker);
+        this.addChild(this.veil, this.strip, this.scrollCue, this.header, this.footer);
         this.veil.eventMode = 'static';
         this.strip.mask = this.stripMask;
         this.addChild(this.stripMask);
@@ -5599,6 +5891,7 @@ class BuyBonusOverlay extends Container {
             this.strip.position.x = this.dragBaseX + this.dragX;
         else
             this.strip.position.y = this.dragBaseY + this.dragX;
+        this.syncScrollCue();
     };
     onDragUp = () => {
         this.dragging = false;
@@ -5616,6 +5909,14 @@ class BuyBonusOverlay extends Container {
         this.dragging = false;
         this.strip.eventMode = 'auto'; // visual-only; its children (cards) are still hit-tested in-band
         this.strip.position.set(baseX, baseY);
+        this.syncScrollCue();
+    }
+    /** Re-draw the band's scroll marks from the current drag state. `dragX` runs [-dragMax, 0] as the
+     *  strip is pulled, so the scroll position is its negation. */
+    syncScrollCue() {
+        if (this.destroyed || this.scrollCue.destroyed)
+            return;
+        this.scrollCue.update({ x: 0, y: this.bandTop, w: this.w, h: this.bandH, axis: this.dragAxis }, scrollHint({ scrollTop: -this.dragX, scrollHeight: this.bandH + this.dragMax, clientHeight: this.bandH }));
     }
     resize(w, h) {
         this.w = w;
@@ -7196,5 +7497,5 @@ function removePixiShell() {
     return shell.destroy();
 }
 
-export { DEFAULT_ACCENT, DEFAULT_MENU, DISCLAIMER_LINES, PACKAGE_VERSION, POPOVER, PixiRenderer, SCHEMES, ShellController, createI18n, createPixiShell, createShell, isPresetId, normalizeLang, placePopover, popoverWidth, rangeBounds, removePixiShell, resolveConfig, resolveMenu, resolveTheme, seedMenuValues, socialize };
+export { DEFAULT_ACCENT, DEFAULT_MENU, DISCLAIMER_LINES, PACKAGE_VERSION, POPOVER, PixiRenderer, SCHEMES, SCROLL_THUMB_MIN, ShellController, createI18n, createPixiShell, createShell, isPresetId, normalizeLang, placePopover, popoverWidth, rangeBounds, removePixiShell, resolveConfig, resolveMenu, resolveTheme, scrollEdge, scrollHint, seedMenuValues, socialize };
 //# sourceMappingURL=pixi.esm.js.map