@open-slot-ui/pixi 0.0.1 → 0.1.1

package/dist/index.cjs

@@ -183,6 +183,16 @@ var SpinView = class extends ControlView {
     this.fsFace.addChild(ring, this.fsCount, this.fsLabel);
     this.fsFace.visible = false;
     this.art.addChild(this.fsFace);
+    const stopRing = new pixi_js.Graphics().circle(0, 0, 96).fill({ color: 16777215 }).stroke({ width: 7, color: 657930 });
+    this.stopLabel = new pixi_js.Text({ text: ui.t("openui.stop") === "openui.stop" ? "STOP" : ui.t("openui.stop"), style: { fontFamily: ui.theme.type.family, fontSize: 26, fill: 657930, fontWeight: "900", letterSpacing: 3 } });
+    this.stopLabel.anchor.set(0.5);
+    this.stopLabel.y = -38;
+    this.stopCount = new pixi_js.Text({ text: "0", style: { fontFamily: ui.theme.type.family, fontSize: 64, fill: 657930, fontWeight: "900" } });
+    this.stopCount.anchor.set(0.5);
+    this.stopCount.y = 16;
+    this.stopFace.addChild(stopRing, this.stopLabel, this.stopCount);
+    this.stopFace.visible = false;
+    this.art.addChild(this.stopFace);
     this.addChild(this.art);
     this.hitArea = new pixi_js.Circle(0, 0, 118);
     this.eventMode = "static";
@@ -201,13 +211,19 @@ var SpinView = class extends ControlView {
       this.spin.allowSlamStop.subscribe(() => this.updateInteractive()),
       this.spin.onTransition((t) => this.play(t)),
       // free-spins face: switch between the normal skin and the "N FS" counter
-      this.spin.freeSpins.subscribe(() => this.updateFreeSpins()),
+      this.spin.freeSpins.subscribe(() => this.updateFaces()),
+      // autoplay: while active the spin button becomes the STOP-count button
+      this.ui.autoplay.state.subscribe(() => {
+        this.updateFaces();
+        this.updateInteractive();
+      }),
+      this.ui.autoplay.count.subscribe(() => this.updateFaces()),
       this.ui.locale.subscribe(() => {
         if (!this.destroyed) this.fsLabel.text = this.ui.t("openui.freeSpins");
       })
     );
     this.skin.update(this.spin.current);
-    this.updateFreeSpins();
+    this.updateFaces();
     this.updateInteractive();
   }
   spin;
@@ -221,13 +237,25 @@ var SpinView = class extends ControlView {
   fsFace = new pixi_js.Container();
   fsCount;
   fsLabel;
-  /** Swap the spin face: free-spins counter when `freeSpins > 0`, else the skin. */
-  updateFreeSpins() {
+  /** Autoplay STOP face — a "STOP" label over the remaining count (or ∞); shown while
+   *  autoplay is active. Tapping the spin button then STOPS autoplay. */
+  stopFace = new pixi_js.Container();
+  stopCount;
+  stopLabel;
+  /** Pick the spin face: autoplay STOP-count (top priority) → free-spins counter →
+   *  the normal skin. */
+  updateFaces() {
+    const auto = this.ui.autoplay.isActive;
     const n = this.spin.freeSpins.get();
-    const fs = n > 0;
-    this.fsCount.text = String(n);
+    const fs = n > 0 && !auto;
+    if (auto) {
+      const c = this.ui.autoplay.count.get();
+      this.stopCount.text = c === Infinity ? "\u221E" : String(c);
+    }
+    if (fs) this.fsCount.text = String(n);
+    this.stopFace.visible = auto;
     this.fsFace.visible = fs;
-    this.skin.view.visible = !fs;
+    this.skin.view.visible = !auto && !fs;
   }
   onOver = () => {
     if (isDesktop() && this.spin.current === "idle") this.spin.setState("hover");
@@ -255,6 +283,10 @@ var SpinView = class extends ControlView {
   onUp = () => {
     if (this.holding) return this.endHold();
     this.clearHoldTimer();
+    if (this.ui.autoplay.isActive) {
+      this.ui.autoplay.stop();
+      return;
+    }
     if (this.spin.current === "pressed") {
       this.spin.setState("idle");
       this.spin.activate();
@@ -283,7 +315,7 @@ var SpinView = class extends ControlView {
     if (this.spin.current === "pressed") this.spin.setState("idle");
   }
   updateInteractive() {
-    const ok = this.spin.interactable;
+    const ok = this.spin.interactable || this.ui.autoplay.isActive;
     this.eventMode = ok ? "static" : "none";
     this.cursor = ok ? "pointer" : "default";
     const inSpin = this.spin.current === "spinning" || this.spin.current === "auto" || this.spin.current === "stop";
@@ -1140,9 +1172,9 @@ var TextCellRenderer = class {
 };
 
 // src/views/ValueDisplayView.ts
-var DIGIT_W = 26;
-var DIGIT_H = 46;
-var FONT_SIZE = 40;
+var DIGIT_W = 39;
+var DIGIT_H = 68;
+var FONT_SIZE = 48;
 var FIT_BUDGET_COLS = 9;
 var ValueDisplayView = class extends ControlView {
   constructor(vd, ui, ticker, fitGsap) {
@@ -1176,6 +1208,7 @@ var ValueDisplayView = class extends ControlView {
   fitGsap;
   counter;
   caption;
+  captionPill;
   side() {
     const a = this.vd.layout.anchor;
     return a.includes("left") ? "left" : a.includes("right") ? "right" : "center";
@@ -1185,13 +1218,20 @@ var ValueDisplayView = class extends ControlView {
     const side = this.side();
     if (this.vd.label) {
       this.caption = new pixi_js.Text({
-        text: this.ui.t(this.vd.label).toUpperCase(),
-        style: { fontFamily: theme.type.family, fontSize: 13, fill: theme.color.text, fontWeight: "700", letterSpacing: 2 }
+        // Figma: the label is NOT uppercased — "Баланс" / "Ставка" as authored.
+        text: this.ui.t(this.vd.label),
+        style: { fontFamily: theme.type.family, fontSize: 28, fill: 16777215, fontWeight: "900", letterSpacing: 0 }
       });
-      this.caption.alpha = 0.55;
-      this.caption.anchor.set(side === "left" ? 0 : side === "right" ? 1 : 0.5, 1);
-      this.caption.y = -DIGIT_H / 2 - 3;
-      this.addChild(this.caption);
+      this.caption.anchor.set(0.5, 0.5);
+      const padX = 24;
+      const padY = 8;
+      const pillW = Math.ceil(this.caption.width) + padX * 2;
+      const pillH = Math.ceil(this.caption.height) + padY * 2;
+      const pillX = side === "left" ? 0 : side === "right" ? -pillW : -pillW / 2;
+      const pillY = -DIGIT_H / 2 - pillH - 14;
+      this.captionPill = new pixi_js.Graphics().roundRect(pillX, pillY, pillW, pillH, 12).fill({ color: 0 });
+      this.caption.position.set(pillX + pillW / 2, pillY + pillH / 2);
+      this.addChild(this.captionPill, this.caption);
     }
     const cur = this.vd.currency.get();
     this.buildCounter(core.displayDigits(this.vd.get(), this.vd.digits, cur.decimals), this.vd.minorUnits);
@@ -1203,7 +1243,16 @@ var ValueDisplayView = class extends ControlView {
     const cur = this.vd.currency.get();
     const side = this.side();
     const renderer = new TextCellRenderer({
-      style: { fontFamily: theme.type.family, fontSize: FONT_SIZE, fill: theme.color.text, fontWeight: "700" },
+      // Figma "default" readout: Montserrat Black, white, with a bold BLACK OUTLINE
+      // plus a soft drop shadow (0px 4px, 25% black) under it.
+      style: {
+        fontFamily: theme.type.family,
+        fontSize: FONT_SIZE,
+        fill: 16777215,
+        fontWeight: "900",
+        stroke: { color: 0, width: 8, join: "round" },
+        dropShadow: { color: 0, alpha: 0.25, blur: 2, distance: 4, angle: Math.PI / 2 }
+      },
       digitWidth: DIGIT_W,
       digitHeight: DIGIT_H
       // no fillerChar → rolling cells show real digits (crisp, no blur, no blank flicker)
@@ -1248,8 +1297,10 @@ var ValueDisplayView = class extends ControlView {
   rebuild() {
     this.counter?.destroy();
     this.caption?.destroy();
+    this.captionPill?.destroy();
     this.counter = void 0;
     this.caption = void 0;
+    this.captionPill = void 0;
     this.removeChildren();
     this.build();
   }
@@ -1258,6 +1309,12 @@ var ValueDisplayView = class extends ControlView {
     super.dispose();
   }
 };
+var GLYPH_SVG = {
+  speaker: '<svg viewBox="0 0 22.5 22.5" xmlns="http://www.w3.org/2000/svg"><path d="M13.6745 5.01252C13.9316 4.84399 14.2647 4.8292 14.5397 4.97456C14.8146 5.1199 14.9868 5.40142 14.9872 5.706L15.0007 16.8107C15.0011 17.1153 14.8296 17.3934 14.555 17.5333C14.2804 17.6731 13.9472 17.6517 13.6897 17.4781L10.4454 15.2905L8.61605 15.2722C6.76074 15.2537 5.25495 13.7655 5.25266 11.9484L5.25073 10.3739C5.2486 8.55679 6.75081 7.09863 8.6061 7.11714L10.4355 7.13539L13.6745 5.01252Z" fill="none" stroke="black" stroke-width="1.5" stroke-linejoin="round"/><path d="M16.1933 9.375C16.6252 10.4652 16.6015 11.654 16.1257 12.75" fill="none" stroke="black" stroke-width="3" stroke-linecap="round"/></svg>',
+  "speaker-mute": '<svg viewBox="0 0 22.5 22.5" xmlns="http://www.w3.org/2000/svg"><path d="M13.6745 5.01252C13.9316 4.84399 14.2647 4.8292 14.5397 4.97456C14.8146 5.1199 14.9868 5.40142 14.9872 5.706L15.0007 16.8107C15.0011 17.1153 14.8296 17.3934 14.555 17.5333C14.2804 17.6731 13.9472 17.6517 13.6897 17.4781L10.4454 15.2905L8.61605 15.2722C6.76074 15.2537 5.25495 13.7655 5.25266 11.9484L5.25073 10.3739C5.2486 8.55679 6.75081 7.09863 8.6061 7.11714L10.4355 7.13539L13.6745 5.01252Z" fill="none" stroke="black" stroke-width="1.5" stroke-linejoin="round"/><path d="M15.5 8.5L19.5 13.5M19.5 8.5L15.5 13.5" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round"/></svg>',
+  fullscreen: '<svg viewBox="0 0 22.5 22.5" xmlns="http://www.w3.org/2000/svg"><path d="M7.875 18H7.5C5.84315 18 4.5 16.6569 4.5 15V14.25M7.875 4.5H7.5C5.84315 4.5 4.5 5.84315 4.5 7.5V8.25M14.25 4.5H15C16.6569 4.5 18 5.84315 18 7.5V8.25M14.25 18H15C16.6569 18 18 16.6569 18 15V14.25" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  "fullscreen-exit": '<svg viewBox="0 0 22.5 22.5" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 8.25H5.25C6.9 8.25 8.25 6.9 8.25 5.25V4.5M14.25 4.5V5.25C14.25 6.9 15.6 8.25 17.25 8.25H18M18 14.25H17.25C15.6 14.25 14.25 15.6 14.25 17.25V18M8.25 18V17.25C8.25 15.6 6.9 14.25 5.25 14.25H4.5" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+};
 var ButtonView = class extends ControlView {
   constructor(btn, ui, ticker, opts = {}) {
     super(btn, ui);
@@ -1269,6 +1326,7 @@ var ButtonView = class extends ControlView {
     this.glyph = opts.glyph ?? "none";
     this.iconTarget = opts.iconTarget ?? 84;
     this.mono = opts.mono ?? false;
+    this.dark = opts.dark ?? false;
     this.addChild(this.art);
     if (opts.iconTexture) {
       this.sprite = new pixi_js.Sprite(opts.iconTexture);
@@ -1276,7 +1334,7 @@ var ButtonView = class extends ControlView {
       this.fitSprite();
       this.art.addChild(this.sprite);
     } else {
-      this.art.addChild(this.bg);
+      this.art.addChild(this.bg, this.glyphG);
       if (btn.label) {
         this.labelText = new pixi_js.Text({
           text: ui.t(btn.label),
@@ -1288,8 +1346,6 @@ var ButtonView = class extends ControlView {
     }
     this.eventMode = "static";
     this.cursor = "pointer";
-    this.on("pointerover", this.onOver);
-    this.on("pointerout", this.onOut);
     this.on("pointerdown", this.onDown);
     this.on("pointerup", this.onUp);
     this.on("pointerupoutside", this.onUpOutside);
@@ -1299,6 +1355,12 @@ var ButtonView = class extends ControlView {
         this.updateInteractive();
       }),
       this.btn.onTransition((t) => this.play(t)),
+      // The host input lock gates `interactable` without a state change, so react to
+      // it directly: a locked/disabled button dims to a semi-transparent state.
+      this.ui.locked.subscribe(() => {
+        this.redraw();
+        this.updateInteractive();
+      }),
       this.ui.locale.subscribe(() => {
         if (this.destroyed) return;
         if (this.labelText && this.btn.label) {
@@ -1314,6 +1376,7 @@ var ButtonView = class extends ControlView {
   btn;
   art = new pixi_js.Container();
   bg = new pixi_js.Graphics();
+  glyphG = new pixi_js.Graphics();
   sprite;
   labelText;
   tween;
@@ -1323,6 +1386,7 @@ var ButtonView = class extends ControlView {
   glyph;
   iconTarget;
   mono;
+  dark;
   /** Swap the displayed art (e.g. ☰ → ✕). */
   setIconTexture(tex) {
     if (!this.sprite) return;
@@ -1342,12 +1406,6 @@ var ButtonView = class extends ControlView {
     this.sprite.scale.set(1);
     this.sprite.scale.set(this.iconTarget / this.sprite.height);
   }
-  onOver = () => {
-    if (isDesktop() && this.btn.current === "idle") this.btn.setState("hover");
-  };
-  onOut = () => {
-    if (this.btn.current === "hover") this.btn.setState("idle");
-  };
   onDown = () => {
     if (this.btn.interactable) this.btn.setState("pressed");
   };
@@ -1376,6 +1434,7 @@ var ButtonView = class extends ControlView {
     const ok = this.btn.interactable;
     this.eventMode = ok ? "static" : "none";
     this.cursor = ok ? "pointer" : "default";
+    this.alpha = ok ? 1 : 0.4;
   }
   redraw() {
     if (this.sprite) {
@@ -1386,31 +1445,37 @@ var ButtonView = class extends ControlView {
     const g = this.bg;
     g.clear();
     const disabled = this.btn.current === "disabled";
-    const fillC = this.mono ? "#ffffff" : t.color.surface;
+    const fillC = this.dark ? "#0a0a0a" : this.mono ? "#ffffff" : t.color.surface;
     const lineC = this.mono ? "#0a0a0a" : t.color.accent;
-    const ink = this.mono ? disabled ? "#9aa0a6" : "#0a0a0a" : disabled ? t.color.textDim : t.color.text;
+    const ink = this.dark ? "#ffffff" : this.mono ? disabled ? "#9aa0a6" : "#0a0a0a" : disabled ? t.color.textDim : t.color.text;
+    this.glyphG.clear();
+    this.glyphG.visible = false;
     if (this.shape === "circle") {
       const r = this.radius;
-      g.circle(0, 0, r).fill({ color: fillC, alpha: this.mono && disabled ? 0.6 : 1 });
-      g.circle(0, 0, r).stroke({ width: this.mono ? 5 : 4, color: lineC });
-      if (this.glyph === "menu") {
-        for (const dy of [-8, 0, 8]) g.moveTo(-13, dy).lineTo(13, dy).stroke({ width: 4, color: ink });
+      if (this.mono) {
+        g.circle(0, r * 0.16, r).fill({ color: 0, alpha: disabled ? 0.08 : 0.18 });
+        g.circle(0, 0, r).fill({ color: "#ffffff", alpha: disabled ? 0.6 : 1 });
+        g.circle(0, 0, r * 0.925).stroke({ width: r * 0.15, color: "#0a0a0a", alpha: disabled ? 0.5 : 1 });
+      } else if (this.dark) {
+        g.circle(0, r * 0.16, r).fill({ color: 0, alpha: 0.18 });
+        g.circle(0, 0, r).fill({ color: "#0a0a0a" });
+      } else {
+        g.circle(0, 0, r).fill({ color: fillC }).circle(0, 0, r).stroke({ width: 4, color: lineC });
+      }
+      const svg = GLYPH_SVG[this.glyph];
+      if (svg) {
+        const s = r / 15;
+        this.glyphG.svg(svg);
+        this.glyphG.scale.set(s);
+        this.glyphG.position.set(-11.25 * s, -11.25 * s);
+        this.glyphG.alpha = disabled ? 0.5 : 1;
+        this.glyphG.visible = true;
+      } else if (this.glyph === "menu") {
+        const barW = this.dark ? 6 : 4;
+        const spread = this.dark ? 9 : 8;
+        for (const dy of [-spread, 0, spread]) g.moveTo(-14, dy).lineTo(14, dy).stroke({ width: barW, color: ink, cap: "round" });
       } else if (this.glyph === "close") {
         g.moveTo(-10, -10).lineTo(10, 10).moveTo(10, -10).lineTo(-10, 10).stroke({ width: 4, color: ink });
-      } else if (this.glyph === "speaker" || this.glyph === "speaker-mute") {
-        g.poly([-12, -4, -6, -4, 1, -11, 1, 11, -6, 4, -12, 4]).fill({ color: ink });
-        if (this.glyph === "speaker") {
-          g.moveTo(6, -6).lineTo(11, 0).lineTo(6, 6).stroke({ width: 2.5, color: ink });
-          g.moveTo(11, -9).lineTo(17, 0).lineTo(11, 9).stroke({ width: 2.5, color: ink });
-        } else {
-          g.moveTo(7, -6).lineTo(17, 6).moveTo(17, -6).lineTo(7, 6).stroke({ width: 2.5, color: ink });
-        }
-      } else if (this.glyph === "fullscreen") {
-        const a = 13, b = 6;
-        g.moveTo(-a, -a + b).lineTo(-a, -a).lineTo(-a + b, -a).moveTo(a - b, -a).lineTo(a, -a).lineTo(a, -a + b).moveTo(-a, a - b).lineTo(-a, a).lineTo(-a + b, a).moveTo(a - b, a).lineTo(a, a).lineTo(a, a - b).stroke({ width: 3, color: ink });
-      } else if (this.glyph === "fullscreen-exit") {
-        const c = 4, d = 12;
-        g.moveTo(-d, -c).lineTo(-c, -c).lineTo(-c, -d).moveTo(d, -c).lineTo(c, -c).lineTo(c, -d).moveTo(-d, c).lineTo(-c, c).lineTo(-c, d).moveTo(d, c).lineTo(c, c).lineTo(c, d).stroke({ width: 3, color: ink });
       }
     } else {
       const w = this.labelText ? this.labelText.width + 48 : 120;
@@ -1655,24 +1720,30 @@ var AutoplayView = class extends ControlView {
   }
   drawButton() {
     const st = this.auto.current;
-    this.countText.visible = st === "active";
-    if (st === "active") this.countText.text = this.fmt(this.auto.count.get());
-    if (st === "active") {
-      if (this.sprite) this.sprite.visible = false;
-      const r = this.sprite ? this.target / 2 : this.radius;
-      this.bg.clear();
-      this.bg.roundRect(-r, -r, 2 * r, 2 * r, r * 0.35).fill({ color: this.ui.theme.color.accent }).stroke({ width: 4, color: this.ui.theme.color.accentText });
+    this.countText.visible = false;
+    const th = this.ui.theme;
+    const r = this.sprite ? this.target / 2 : this.radius;
+    const active = st === "active";
+    this.eventMode = active ? "none" : "static";
+    this.cursor = active ? "default" : "pointer";
+    if (active) {
+      this.bg.clear().circle(0, 0, r).fill({ color: th.color.accent }).stroke({ width: 4, color: th.color.accentText });
+      if (this.sprite) {
+        this.sprite.visible = true;
+        this.sprite.tint = th.color.accentText;
+        this.sprite.alpha = 0.55;
+      }
       return;
     }
     if (this.sprite) {
       this.sprite.visible = true;
+      this.sprite.tint = 16777215;
       this.bg.clear();
       const tex = this.idleTex ?? this.activeTex;
       if (tex) this.sprite.texture = tex;
       this.fit();
       this.sprite.alpha = st === "disabled" ? 0.5 : 1;
     } else {
-      const th = this.ui.theme;
       this.bg.clear();
       this.bg.circle(0, 0, this.radius).fill({ color: th.color.surface }).stroke({ width: 4, color: th.color.accent });
     }
@@ -1843,8 +1914,8 @@ var AutoplayDrawerView = class extends pixi_js.Container {
     this.startBtn.position.set(W / 2, startY);
     this.startBtn.hitArea = new pixi_js.Rectangle(-startW / 2, -startH / 2, startW, startH);
     this.sheetH = startY + startH / 2 + 20 * k;
-    this.sheetBg.clear().rect(0, 0, W, this.sheetH + 40).fill({ color: DARK });
-    this.handle.clear().rect(W / 2 - 30 * k, 13 * k, 60 * k, 5 * k).fill({ color: DIM });
+    this.sheetBg.clear().rect(-1, 0, W + 2, this.sheetH + 40 + 600).fill({ color: DARK });
+    this.handle.clear().roundRect(W / 2 - 30 * k, 13 * k, 60 * k, 5 * k, 2.5 * k).fill({ color: DIM });
     return this.sheetH + 40;
   }
   drawGroup(g) {
@@ -2908,7 +2979,27 @@ var ReadoutView = class extends ControlView {
     this.ticker = ticker;
     const t = ui.theme;
     const inline = opts.inline ?? false;
-    const fill = opts.mono ? "#ffffff" : t.color.text;
+    this.prefix = opts.prefix ?? false;
+    const fill = opts.fill ?? (opts.mono ? "#ffffff" : t.color.text);
+    if (this.prefix) {
+      this.valueText = new pixi_js.Text({ text: "", style: { fontFamily: t.type.family, fontSize: 12, fill: opts.fill ?? "#ffffff", fontWeight: "400" } });
+      this.valueText.alpha = opts.fill ? 1 : 0.5;
+      this.valueText.anchor.set(0, 0);
+      this.addChild(this.valueText);
+      this.disposers.push(
+        this.ro.value.subscribe(() => this.render()),
+        this.ui.locale.subscribe(() => {
+          if (!this.destroyed) this.render();
+        })
+      );
+      if (this.ro.currency) this.disposers.push(this.ro.currency.subscribe(() => this.render()));
+      if (this.ro.kind === "duration") {
+        this.tick = (tk) => this.ro.tick(tk.deltaMS / 1e3);
+        this.ticker.add(this.tick);
+      }
+      this.render();
+      return;
+    }
     if (ro.label) {
       this.caption = new pixi_js.Text({
         text: ui.t(ro.label).toUpperCase(),
@@ -2951,6 +3042,7 @@ var ReadoutView = class extends ControlView {
   caption;
   valueText;
   tick;
+  prefix;
   render() {
     const v = this.ro.value.get();
     let text;
@@ -2967,7 +3059,7 @@ var ReadoutView = class extends ControlView {
       default:
         text = String(v);
     }
-    this.valueText.text = text;
+    this.valueText.text = this.prefix && this.ro.label ? `${this.ui.t(this.ro.label)}: ${text}` : text;
   }
   dispose() {
     if (this.tick) this.ticker.remove(this.tick);
@@ -2975,9 +3067,18 @@ var ReadoutView = class extends ControlView {
   }
 };
 var INSET2 = 24;
-var BTN_H = 50;
-var BTN_GAP = 12;
+var BTN_H = 52;
+var BTN_GAP = 14;
 var ROW_GAP = 16;
+var LIGHT = {
+  surface: "#ffffff",
+  surfaceAlt: "#eef1f6",
+  text: "#181b20",
+  textDim: "#5b6472",
+  border: "#000000",
+  primary: "#0a0a0a",
+  primaryText: "#ffffff"
+};
 var DialogView = class extends ControlView {
   constructor(panel, blocks, actions, ui, ticker, opts = {}) {
     super(panel, ui);
@@ -2988,6 +3089,8 @@ var DialogView = class extends ControlView {
     this.opts = opts;
     this.zIndex = 130;
     this.maxWidth = opts.maxWidth ?? 520;
+    const lightTheme = { ...ui.theme, color: { ...ui.theme.color, surface: LIGHT.surface, surfaceAlt: LIGHT.surfaceAlt, text: LIGHT.text, textDim: LIGHT.textDim } };
+    this.lightUi = new Proxy(ui, { get: (t, p) => p === "theme" ? lightTheme : Reflect.get(t, p) });
     this.backdrop.eventMode = "static";
     this.backdrop.on("pointertap", () => {
       if (!this.ui.noticeBlocking.get()) this.panel.closePanel();
@@ -3027,11 +3130,13 @@ var DialogView = class extends ControlView {
   childViews = [];
   screen;
   maxWidth;
+  /** `ui` proxy with a light theme — so the shared block renderer draws dark-on-white
+   *  content inside the white modal card (Figma "default" dialog look). */
+  lightUi;
   buildClose() {
-    const t = this.ui.theme;
-    const r = 18;
-    const bg = new pixi_js.Graphics().circle(0, 0, r).fill({ color: t.color.surfaceAlt }).stroke({ width: 2, color: t.color.textDim });
-    const x = new pixi_js.Graphics().moveTo(-6, -6).lineTo(6, 6).moveTo(6, -6).lineTo(-6, 6).stroke({ width: 3, color: t.color.text });
+    const r = 22;
+    const bg = new pixi_js.Graphics().circle(0, 0, r).fill({ color: LIGHT.primary });
+    const x = new pixi_js.Graphics().moveTo(-7, -7).lineTo(7, 7).moveTo(7, -7).lineTo(-7, 7).stroke({ width: 3, color: "#ffffff", cap: "round" });
     this.closeBtn.addChild(bg, x);
     this.closeBtn.eventMode = "static";
     this.closeBtn.cursor = "pointer";
@@ -3050,13 +3155,12 @@ var DialogView = class extends ControlView {
     if (!this.panel.isOpen) return;
     const W = s.width;
     const H = s.height;
-    const t = this.ui.theme;
     for (const v of this.childViews) v.dispose();
     this.childViews.length = 0;
     for (const ch of this.content.removeChildren()) ch.destroy();
     const cardW = Math.min(W - 48, this.maxWidth);
     const innerW = cardW - INSET2 * 2;
-    const col = buildBlockColumn(this.blocks.get(), [], this.ui, this.ticker, innerW, { controlSkins: this.opts.controlSkins });
+    const col = buildBlockColumn(this.blocks.get(), [], this.lightUi, this.ticker, innerW, { controlSkins: this.opts.controlSkins });
     this.childViews = col.views;
     const kids = col.content.removeChildren();
     if (kids.length) this.content.addChild(...kids);
@@ -3066,15 +3170,15 @@ var DialogView = class extends ControlView {
     const cardH = Math.min(H - 48, wantH);
     const cx = (W - cardW) / 2;
     const cy = (H - cardH) / 2;
-    this.backdrop.clear().rect(0, 0, W, H).fill({ color: 0, alpha: 0.62 });
+    this.backdrop.clear().rect(0, 0, W, H).fill({ color: 0, alpha: 0.5 });
     this.backdrop.hitArea = new pixi_js.Rectangle(0, 0, W, H);
-    this.card.clear().roundRect(cx, cy, cardW, cardH, t.radius.card).fill({ color: t.color.surface }).stroke({ width: 2, color: t.color.accent });
+    this.card.clear().roundRect(cx, cy, cardW, cardH, 14).fill({ color: LIGHT.surface }).stroke({ width: 2.5, color: LIGHT.border });
     const bodyH = cardH - (buttonsH ? ROW_GAP + buttonsH + INSET2 : INSET2);
     this.content.x = cx + cardW / 2;
     this.content.y = cy;
     this.maskG.clear().rect(cx, cy, cardW, Math.max(0, bodyH)).fill({ color: 16777215 });
     this.buttons.position.set(cx + cardW / 2, cy + cardH - INSET2 / 2 - buttonsH / 2);
-    this.closeBtn.position.set(cx + cardW - 20, cy + 20);
+    this.closeBtn.position.set(cx + cardW - 8, cy + 8);
   }
   /** Build the footer buttons from `noticeActions` into a centered row (shrunk to
    *  fit if needed). Returns the row height (0 when there are no actions). */
@@ -3107,7 +3211,7 @@ var DialogView = class extends ControlView {
     const bg = new pixi_js.Graphics();
     const label = new pixi_js.Text({
       text: this.ui.t(action.label),
-      style: { fontFamily: t.type.family, fontSize: 18, fontWeight: "800", fill: variant === "primary" ? t.color.accentText : t.color.text, letterSpacing: 0.5 }
+      style: { fontFamily: t.type.family, fontSize: 18, fontWeight: "800", fill: variant === "primary" ? LIGHT.primaryText : LIGHT.text, letterSpacing: 0.5 }
     });
     label.anchor.set(0.5);
     node.addChild(bg, label);
@@ -3124,12 +3228,11 @@ var DialogView = class extends ControlView {
     return { node, bg, width, variant };
   }
   drawButton(bg, variant, width) {
-    const t = this.ui.theme;
     bg.clear();
     if (variant === "primary") {
-      bg.roundRect(-width / 2, -BTN_H / 2, width, BTN_H, BTN_H / 2).fill({ color: t.color.accent });
+      bg.roundRect(-width / 2, -BTN_H / 2, width, BTN_H, BTN_H / 2).fill({ color: LIGHT.primary });
     } else {
-      bg.roundRect(-width / 2, -BTN_H / 2, width, BTN_H, BTN_H / 2).fill({ color: t.color.surfaceAlt }).stroke({ width: 2, color: t.color.accent });
+      bg.roundRect(-width / 2, -BTN_H / 2, width, BTN_H, BTN_H / 2).fill({ color: LIGHT.surface }).stroke({ width: 2.5, color: LIGHT.border });
     }
   }
   applyOpen(open) {
@@ -3144,73 +3247,6 @@ var DialogView = class extends ControlView {
     super.dispose();
   }
 };
-var BAR_H = 26;
-var StatusBarView = class _StatusBarView extends pixi_js.Container {
-  constructor(controls, ui, ticker, side) {
-    super();
-    this.ui = ui;
-    this.side = side;
-    this.zIndex = 300;
-    this.addChild(this.bg);
-    for (const c of controls) {
-      const view = new ReadoutView(c, ui, ticker, { inline: true, mono: true });
-      this.addChild(view);
-      this.items.push({ id: c.id, view });
-    }
-    this.disposers.push(
-      this.ui.on("visibilityChanged", ({ id }) => {
-        if (this.items.some((it) => it.id === id)) this.relayout();
-      })
-    );
-  }
-  ui;
-  side;
-  bg = new pixi_js.Graphics();
-  items = [];
-  screen;
-  disposers = [];
-  /** The strip's pixel height for the current screen (used for the HUD margin too). */
-  static heightFor(screen) {
-    const scale = Math.max(0.7, Math.min(1.4, screen.scale));
-    return Math.round(BAR_H * scale);
-  }
-  applyLayout(screen) {
-    this.screen = screen;
-    this.relayout();
-  }
-  relayout() {
-    const s = this.screen;
-    if (!s) return;
-    const W = s.width;
-    const H = s.height;
-    const scale = Math.max(0.7, Math.min(1.4, s.scale));
-    const barH = _StatusBarView.heightFor(s);
-    const y = this.side === "top" ? 0 : H - barH;
-    this.position.set(0, 0);
-    const visible = this.items.filter((it) => !this.ui.hidden.has(it.id));
-    for (const it of this.items) it.view.visible = !this.ui.hidden.has(it.id);
-    this.bg.clear();
-    this.visible = visible.length > 0;
-    if (!visible.length) return;
-    const edgeY = this.side === "top" ? barH - 1 : y;
-    this.bg.rect(0, y, W, barH).fill({ color: 789776, alpha: 0.92 }).rect(0, edgeY, W, 1).fill({ color: 16777215, alpha: 0.18 });
-    const n = visible.length;
-    const cy = y + barH / 2;
-    const pad = 18 * scale;
-    const usableW = Math.max(160, W - pad * 2);
-    visible.forEach((it, i) => {
-      it.view.position.set(pad + usableW * ((i + 0.5) / n), cy);
-      it.view.scale.set(scale);
-    });
-  }
-  dispose() {
-    for (const it of this.items) it.view.dispose();
-    this.items.length = 0;
-    for (const d of this.disposers) d();
-    this.disposers.length = 0;
-    if (!this.destroyed) this.destroy({ children: true });
-  }
-};
 
 // src/OpenUIPixi.ts
 function easeInOutCubic(p) {
@@ -3263,8 +3299,8 @@ var OpenUIPixi = class {
       glyph: "menu",
       iconTexture: ic.settingsIdle,
       iconTarget: 88,
-      mono: true
-      // b&w like the turbo button (used on the drawn glyph path)
+      dark: true
+      // Figma ☰: solid black circle, white bars, no ring
     });
     settingsView.zIndex = 5;
     const menuView = this.opts.menu === false ? void 0 : this.buildMenu(ticker);
@@ -3272,7 +3308,7 @@ var OpenUIPixi = class {
       offTexture: ic.turboOff,
       onTexture: ic.turboOn,
       modeTextures: ic.turboModes,
-      target: 88
+      target: 79
     });
     const spinOff = this.ui.spin.layout.offset ?? [0, 0];
     const autoOff = this.ui.autoplay.layout.offset ?? [0, 0];
@@ -3280,23 +3316,23 @@ var OpenUIPixi = class {
     const autoplayView = new AutoplayView(this.ui.autoplay, this.ui, ticker, {
       idleTexture: ic.autoIdle,
       activeTexture: ic.autoActive,
-      target: 88,
+      target: 73,
       picker,
       arcCenter: { x: spinOff[0] - autoOff[0], y: spinOff[1] - autoOff[1] },
       arcStepDeg: 22
     });
     autoplayView.zIndex = 20;
-    const bonusView = new ButtonView(this.ui.bonusButton, this.ui, ticker, { shape: "circle", radius: 44, iconTexture: ic.bonus, iconTarget: 110 });
+    const bonusView = new ButtonView(this.ui.bonusButton, this.ui, ticker, { shape: "circle", radius: 60, iconTexture: ic.bonus, iconTarget: 130 });
     const betPlusView = new ButtonView(this.ui.betPlus, this.ui, ticker, { shape: "circle", radius: 30, iconTexture: ic.betPlus, iconTarget: 64 });
     const betMinusView = new ButtonView(this.ui.betMinus, this.ui, ticker, { shape: "circle", radius: 30, iconTexture: ic.betMinus, iconTarget: 64 });
-    const muteView = new ButtonView(this.ui.muteButton, this.ui, ticker, { shape: "circle", radius: 22, glyph: "speaker", iconTarget: 44, mono: true });
-    const fullscreenView = new ButtonView(this.ui.fullscreenButton, this.ui, ticker, { shape: "circle", radius: 22, glyph: "fullscreen", iconTarget: 44, mono: true });
+    const muteView = new ButtonView(this.ui.muteButton, this.ui, ticker, { shape: "circle", radius: 30, glyph: "speaker", iconTarget: 60, mono: true });
+    const fullscreenView = new ButtonView(this.ui.fullscreenButton, this.ui, ticker, { shape: "circle", radius: 30, glyph: "fullscreen", iconTarget: 60, mono: true });
     muteView.zIndex = 65;
     fullscreenView.zIndex = 65;
-    const statusBarSide = this.opts.statusBar;
-    const rtpView = statusBarSide ? void 0 : new ReadoutView(this.ui.rtp, this.ui, ticker);
-    const netView = statusBarSide ? void 0 : new ReadoutView(this.ui.netPosition, this.ui, ticker);
-    const timerView = statusBarSide ? void 0 : new ReadoutView(this.ui.sessionTimer, this.ui, ticker);
+    const roOpts = { prefix: true, fill: this.opts.readoutColor };
+    const rtpView = new ReadoutView(this.ui.rtp, this.ui, ticker, roOpts);
+    const netView = new ReadoutView(this.ui.netPosition, this.ui, ticker, roOpts);
+    const timerView = new ReadoutView(this.ui.sessionTimer, this.ui, ticker, roOpts);
     const entries = [
       [this.ui.spin.id, spinView],
       [this.ui.balance.id, balanceView],
@@ -3310,9 +3346,9 @@ var OpenUIPixi = class {
       [this.ui.muteButton.id, muteView],
       [this.ui.fullscreenButton.id, fullscreenView]
     ];
-    if (rtpView) entries.push([this.ui.rtp.id, rtpView]);
-    if (netView) entries.push([this.ui.netPosition.id, netView]);
-    if (timerView) entries.push([this.ui.sessionTimer.id, timerView]);
+    entries.push([this.ui.rtp.id, rtpView]);
+    entries.push([this.ui.netPosition.id, netView]);
+    entries.push([this.ui.sessionTimer.id, timerView]);
     const viewById = /* @__PURE__ */ new Map();
     const idByView = /* @__PURE__ */ new Map();
     for (const [id, view] of entries) {
@@ -3373,11 +3409,22 @@ var OpenUIPixi = class {
     const dialog = new DialogView(this.ui.noticePanel, this.ui.noticeBlocks, this.ui.noticeActions, this.ui, ticker, { controlSkins: this.opts.controlSkins });
     this.root.addChild(dialog);
     this.overlays.push(dialog);
-    if (statusBarSide) {
-      const bar = new StatusBarView([this.ui.netPosition, this.ui.rtp, this.ui.sessionTimer], this.ui, ticker, statusBarSide);
-      this.root.addChild(bar);
-      this.overlays.push(bar);
-    }
+    const vignette = new pixi_js.Graphics();
+    vignette.zIndex = -1;
+    this.root.addChild(vignette);
+    this.overlays.push({
+      applyLayout: (s) => {
+        const r = 200 * s.scale;
+        vignette.clear();
+        for (let i = 0; i < 14; i++) {
+          const t = i / 14;
+          vignette.circle(0, 0, r * (1 - t)).fill({ color: 0, alpha: 0.5 / 14 });
+        }
+      },
+      dispose: () => {
+        if (!vignette.destroyed) vignette.destroy();
+      }
+    });
     const replayBadge = new pixi_js.Container();
     const replayBg = new pixi_js.Graphics();
     const replayText = new pixi_js.Text({ text: this.ui.t("openui.replay").toUpperCase(), style: { fontFamily: this.ui.theme.type.family, fontSize: 16, fontWeight: "800", fill: 16777215, letterSpacing: 2 } });
@@ -3391,8 +3438,7 @@ var OpenUIPixi = class {
         const w = replayText.width + 36;
         const h = 32;
         replayBg.clear().roundRect(-w / 2, -h / 2, w, h, h / 2).fill({ color: 789776 }).stroke({ width: 2, color: 16777215 });
-        const top = statusBarSide === "top" ? StatusBarView.heightFor(s) + 28 : 40;
-        replayBadge.position.set(s.width / 2, top);
+        replayBadge.position.set(s.width / 2, 40);
       },
       dispose: () => {
         if (!replayBadge.destroyed) replayBadge.destroy({ children: true });
@@ -3406,33 +3452,13 @@ var OpenUIPixi = class {
         if (!replayBadge.destroyed) replayText.text = this.ui.t("openui.replay").toUpperCase();
       })
     );
-    if (ic.settingsIdle && ic.settingsActive) {
-      const idle = ic.settingsIdle;
-      const active = ic.settingsActive;
-      this.disposers.push(
-        this.ui.settingsPanel.state.subscribe(() => {
-          settingsView.setIconTexture(this.ui.settingsPanel.isOpen ? active : idle);
-        })
-      );
-    } else {
-      this.disposers.push(
-        this.ui.settingsPanel.state.subscribe(() => {
-          settingsView.setGlyph(this.ui.settingsPanel.isOpen ? "close" : "menu");
-        })
-      );
-    }
     const applyLayout = () => {
       const screen = this.ui.screen.get();
-      const barH = statusBarSide ? StatusBarView.heightFor(screen) : 0;
       this.slideBaseY.clear();
       this.slideSign.clear();
       for (const v of this.views) {
         v.applyLayout(screen);
         const anchor = this.ui.control(idByView.get(v) ?? "")?.layout.anchor ?? "bottom-center";
-        if (barH) {
-          if (statusBarSide === "top" && anchor.startsWith("top")) v.y += barH;
-          else if (statusBarSide === "bottom" && anchor.startsWith("bottom")) v.y -= barH;
-        }
         this.slideBaseY.set(v, v.y);
         this.slideSign.set(v, anchor.startsWith("top") ? -1 : 1);
       }
@@ -3845,7 +3871,7 @@ function mountHud(app, spec = {}, opts = {}) {
   if (menu && spec.game && (spec.game.name || spec.game.version)) {
     menu.push({ kind: "legal", id: "openui-game-info", text: [spec.game.name, spec.game.version ? `v${spec.game.version}` : ""].filter(Boolean).join("  \xB7  ") });
   }
-  const pixi = new OpenUIPixi(ui, { ...pixiOpts, menu, statusBar: pixiOpts.statusBar ?? spec.statusBar });
+  const pixi = new OpenUIPixi(ui, { ...pixiOpts, menu });
   pixi.mount(app);
   const extra = [];
   if (spec.panels?.length) {
@@ -3965,7 +3991,6 @@ exports.ReadoutView = ReadoutView;
 exports.SelectView = SelectView;
 exports.SliderView = SliderView;
 exports.SpinView = SpinView;
-exports.StatusBarView = StatusBarView;
 exports.StepperView = StepperView;
 exports.TextCellRenderer = TextCellRenderer;
 exports.ToggleView = ToggleView;