@open-slot-ui/pixi 0.0.1 → 0.1.1

package/dist/index.js

@@ -181,6 +181,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 Graphics().circle(0, 0, 96).fill({ color: 16777215 }).stroke({ width: 7, color: 657930 });
+    this.stopLabel = new 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 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 Circle(0, 0, 118);
     this.eventMode = "static";
@@ -199,13 +209,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;
@@ -219,13 +235,25 @@ var SpinView = class extends ControlView {
   fsFace = new 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 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");
@@ -253,6 +281,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();
@@ -281,7 +313,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";
@@ -1138,9 +1170,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) {
@@ -1174,6 +1206,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";
@@ -1183,13 +1216,20 @@ var ValueDisplayView = class extends ControlView {
     const side = this.side();
     if (this.vd.label) {
       this.caption = new 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 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(displayDigits(this.vd.get(), this.vd.digits, cur.decimals), this.vd.minorUnits);
@@ -1201,7 +1241,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)
@@ -1246,8 +1295,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();
   }
@@ -1256,6 +1307,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);
@@ -1267,6 +1324,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 Sprite(opts.iconTexture);
@@ -1274,7 +1332,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 Text({
           text: ui.t(btn.label),
@@ -1286,8 +1344,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);
@@ -1297,6 +1353,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) {
@@ -1312,6 +1374,7 @@ var ButtonView = class extends ControlView {
   btn;
   art = new Container();
   bg = new Graphics();
+  glyphG = new Graphics();
   sprite;
   labelText;
   tween;
@@ -1321,6 +1384,7 @@ var ButtonView = class extends ControlView {
   glyph;
   iconTarget;
   mono;
+  dark;
   /** Swap the displayed art (e.g. ☰ → ✕). */
   setIconTexture(tex) {
     if (!this.sprite) return;
@@ -1340,12 +1404,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");
   };
@@ -1374,6 +1432,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) {
@@ -1384,31 +1443,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;
@@ -1653,24 +1718,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 });
     }
@@ -1841,8 +1912,8 @@ var AutoplayDrawerView = class extends Container {
     this.startBtn.position.set(W / 2, startY);
     this.startBtn.hitArea = new 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) {
@@ -2906,7 +2977,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 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 Text({
         text: ui.t(ro.label).toUpperCase(),
@@ -2949,6 +3040,7 @@ var ReadoutView = class extends ControlView {
   caption;
   valueText;
   tick;
+  prefix;
   render() {
     const v = this.ro.value.get();
     let text;
@@ -2965,7 +3057,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);
@@ -2973,9 +3065,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);
@@ -2986,6 +3087,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();
@@ -3025,11 +3128,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 Graphics().circle(0, 0, r).fill({ color: t.color.surfaceAlt }).stroke({ width: 2, color: t.color.textDim });
-    const x = new 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 Graphics().circle(0, 0, r).fill({ color: LIGHT.primary });
+    const x = new 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";
@@ -3048,13 +3153,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);
@@ -3064,15 +3168,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 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). */
@@ -3105,7 +3209,7 @@ var DialogView = class extends ControlView {
     const bg = new Graphics();
     const label = new 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);
@@ -3122,12 +3226,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) {
@@ -3142,73 +3245,6 @@ var DialogView = class extends ControlView {
     super.dispose();
   }
 };
-var BAR_H = 26;
-var StatusBarView = class _StatusBarView extends 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 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) {
@@ -3261,8 +3297,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);
@@ -3270,7 +3306,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];
@@ -3278,23 +3314,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],
@@ -3308,9 +3344,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) {
@@ -3371,11 +3407,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 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 Container();
     const replayBg = new Graphics();
     const replayText = new Text({ text: this.ui.t("openui.replay").toUpperCase(), style: { fontFamily: this.ui.theme.type.family, fontSize: 16, fontWeight: "800", fill: 16777215, letterSpacing: 2 } });
@@ -3389,8 +3436,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 });
@@ -3404,33 +3450,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);
       }
@@ -3843,7 +3869,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) {
@@ -3949,6 +3975,6 @@ function svgSpinSkin(textures) {
   };
 }
 
-export { AutoplayDrawerView, AutoplayView, ButtonView, ControlView, DialogView, MenuView, OpenUIPixi, PanelBodyView, PanelView, PopoverView, ReadoutView, SelectView, SliderView, SpinView, StatusBarView, StepperView, TextCellRenderer, ToggleView, TurboView, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, mountHud, svgSpinSkin };
+export { AutoplayDrawerView, AutoplayView, ButtonView, ControlView, DialogView, MenuView, OpenUIPixi, PanelBodyView, PanelView, PopoverView, ReadoutView, SelectView, SliderView, SpinView, StepperView, TextCellRenderer, ToggleView, TurboView, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, mountHud, svgSpinSkin };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map