@open-slot-ui/pixi 0.11.0 → 0.12.0

package/dist/index.cjs

@@ -1336,6 +1336,7 @@ var ValueDisplayView = class extends ControlView {
     super.dispose();
   }
 };
+var TAP_SLOP = 24;
 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>',
@@ -1433,17 +1434,26 @@ var ButtonView = class extends ControlView {
     this.sprite.scale.set(1);
     this.sprite.scale.set(this.iconTarget / this.sprite.height);
   }
-  onDown = () => {
-    if (this.btn.interactable) this.btn.setState("pressed");
+  /** Screen position of the current press, for the tap-slop check on release. */
+  downPt = null;
+  onDown = (e) => {
+    if (!this.btn.interactable) return;
+    this.btn.setState("pressed");
+    this.downPt = { x: e.global.x, y: e.global.y };
   };
   onUp = () => {
     if (this.btn.current === "pressed") {
       this.btn.setState("idle");
       this.btn.activate();
     }
+    this.downPt = null;
   };
-  onUpOutside = () => {
-    if (this.btn.current === "pressed") this.btn.setState("idle");
+  onUpOutside = (e) => {
+    const p = this.downPt;
+    this.downPt = null;
+    if (this.btn.current !== "pressed") return;
+    this.btn.setState("idle");
+    if (p && Math.hypot(e.global.x - p.x, e.global.y - p.y) <= TAP_SLOP) this.btn.activate();
   };
   updateHit() {
     if (this.sprite) {
@@ -4145,67 +4155,10 @@ function mountInfoMenu(app, ui) {
   };
 }
 
-// src/confirmModal.ts
-var esc2 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-function showConfirm(ui, opts) {
-  return new Promise((resolve) => {
-    const host2 = document.createElement("div");
-    host2.className = "osc-confirm";
-    host2.style.setProperty("--font", ui.theme.type.family);
-    const title = ui.t(opts.title ?? "Buy Feature");
-    const yes = ui.t(opts.confirmLabel ?? "openui.confirm");
-    const no = ui.t(opts.cancelLabel ?? "openui.cancel");
-    host2.innerHTML = `
-      <div class="osc-confirm-backdrop" data-no></div>
-      <div class="osc-confirm-card" role="dialog" aria-modal="true">
-        ${title ? `<h3 class="osc-confirm-title">${esc2(title)}</h3>` : ""}
-        <p class="osc-confirm-msg">${esc2(opts.message)}</p>
-        <div class="osc-confirm-row">
-          <button class="osc-confirm-btn osc-confirm-no" data-no>${esc2(no)}</button>
-          <button class="osc-confirm-btn osc-confirm-yes" data-yes>${esc2(yes)}</button>
-        </div>
-      </div>`;
-    const style = document.createElement("style");
-    style.textContent = CONFIRM_CSS;
-    host2.appendChild(style);
-    document.body.appendChild(host2);
-    let settled = false;
-    const close = (val) => {
-      if (settled) return;
-      settled = true;
-      window.removeEventListener("keydown", onKey);
-      host2.remove();
-      resolve(val);
-    };
-    const onKey = (e) => {
-      if (e.key === "Escape") close(false);
-      else if (e.key === "Enter") close(true);
-    };
-    host2.querySelectorAll("[data-no]").forEach((b) => b.addEventListener("click", () => close(false)));
-    host2.querySelector("[data-yes]")?.addEventListener("click", () => close(true));
-    window.addEventListener("keydown", onKey);
-  });
-}
-var CONFIRM_CSS = `
-.osc-confirm { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; font-family: var(--font); }
-.osc-confirm *, .osc-confirm *::before, .osc-confirm *::after { box-sizing: border-box; }
-.osc-confirm-backdrop { position: absolute; inset: 0; background: rgba(8,6,4,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
-.osc-confirm-card { position: relative; width: min(90vw, 420px); background: #ffffff; color: #181b20; border: 3px solid #000; border-radius: 14px; padding: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.55); text-align: center; }
-.osc-confirm-title { margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: .3px; }
-.osc-confirm-msg { margin: 0 0 22px; font-size: 19px; font-weight: 700; line-height: 1.4; }
-.osc-confirm-row { display: flex; gap: 14px; }
-.osc-confirm-btn { flex: 1; padding: 14px 10px; border-radius: 12px; border: 3px solid #000; font-size: 15px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; transition: transform .1s, background .12s; }
-.osc-confirm-btn:active { transform: scale(.96); }
-.osc-confirm-no { background: #ffffff; color: #181b20; }
-.osc-confirm-no:hover { background: #eef1f6; }
-.osc-confirm-yes { background: #d99000; color: #1a1200; }
-.osc-confirm-yes:hover { filter: brightness(1.05); }
-`;
-
 // src/mountHud.ts
 function showReplayModal(ui, info, buttonKey, onSelect) {
   const cur = info.currency ?? ui.balance.currency.get();
-  const money2 = (n) => core.formatAmountPrecise(n, cur);
+  const money = (n) => core.formatAmountPrecise(n, cur);
   ui.showNotice(
     [
       { kind: "heading", id: "openui-replay-h", text: "openui.replay.title" },
@@ -4213,10 +4166,10 @@ function showReplayModal(ui, info, buttonKey, onSelect) {
         kind: "stat-grid",
         id: "openui-replay-g",
         items: [
-          { label: "openui.replay.baseBet", value: money2(info.baseBet) },
+          { label: "openui.replay.baseBet", value: money(info.baseBet) },
           { label: "openui.replay.costMultiplier", value: `${info.costMultiplier}\xD7` },
           { label: "openui.replay.payoutMultiplier", value: `${info.payoutMultiplier}\xD7` },
-          { label: "openui.replay.amount", value: money2(info.amount) }
+          { label: "openui.replay.amount", value: money(info.amount) }
         ]
       }
     ],
@@ -4230,7 +4183,7 @@ function showReplayModal(ui, info, buttonKey, onSelect) {
 function mountHud(app, spec = {}, opts = {}) {
   const { hooks, infoMenu, ...pixiOpts } = opts;
   const ui = core.createUI(spec, hooks);
-  const useInfoMenu = infoMenu !== false && pixiOpts.menu !== false;
+  const useInfoMenu = infoMenu === true && pixiOpts.menu !== false;
   const locales = spec.locale ? Array.from(/* @__PURE__ */ new Set([spec.locale.locale, ...Object.keys(spec.locale.messages)])) : [];
   const menu = pixiOpts.menu === false || useInfoMenu ? false : core.composeMenu(spec.menu, { locales, localeSelectId: spec.localeSelectId, rulesFallback: spec.rules });
   if (menu && spec.game && (spec.game.name || spec.game.version)) {
@@ -4239,6 +4192,21 @@ function mountHud(app, spec = {}, opts = {}) {
   const pixi = new OpenUIPixi(ui, { ...pixiOpts, menu });
   pixi.mount(app);
   const disposeInfoMenu = useInfoMenu ? mountInfoMenu(app, ui) : void 0;
+  const canvas = app.canvas;
+  const cancelToUp = (e) => {
+    canvas?.dispatchEvent(new PointerEvent("pointerup", {
+      pointerId: e.pointerId,
+      pointerType: e.pointerType,
+      isPrimary: e.isPrimary,
+      clientX: e.clientX,
+      clientY: e.clientY,
+      pressure: 0,
+      bubbles: true,
+      cancelable: true,
+      composed: true
+    }));
+  };
+  canvas?.addEventListener("pointercancel", cancelToUp, true);
   const extra = [];
   if (spec.panels?.length) {
     for (const ps of spec.panels) {
@@ -4259,6 +4227,7 @@ function mountHud(app, spec = {}, opts = {}) {
   });
   const teardown = () => {
     offRelayout();
+    canvas?.removeEventListener("pointercancel", cancelToUp, true);
     disposeInfoMenu?.();
     for (const v of extra) v.dispose();
     extra.length = 0;
@@ -4321,14 +4290,19 @@ function mountHud(app, spec = {}, opts = {}) {
         return;
       }
       const message = o.message ?? (o.name ? ui.t("openui.buyFeature.confirm", { name: ui.t(o.name), price: o.price ?? "" }) : ui.t("openui.buyFeature.message"));
-      void showConfirm(ui, {
-        title: o.title ?? "openui.buyFeature.title",
-        message,
-        confirmLabel: o.confirmLabel,
-        cancelLabel: o.cancelLabel
-      }).then((ok) => {
-        if (ok) o.onConfirm();
-      });
+      ui.showNotice(
+        [
+          { kind: "heading", id: "buy-confirm-title", text: o.title ?? "openui.buyFeature.title" },
+          { kind: "text", id: "buy-confirm-body", text: message }
+        ],
+        [
+          { label: o.cancelLabel ?? "openui.cancel", variant: "secondary" },
+          { label: o.confirmLabel ?? "openui.confirm", variant: "primary", onSelect: () => {
+            ui.hideNotice();
+            o.onConfirm();
+          } }
+        ]
+      );
     },
     showControls: () => pixi.setControlsVisible(true),
     hideControls: () => pixi.setControlsVisible(false),
@@ -4342,207 +4316,332 @@ function mountHud(app, spec = {}, opts = {}) {
     dispose: teardown
   };
 }
-function money(amount, cur) {
-  return core.formatAmountPrecise(amount, cur);
+var LIGHT3 = {
+  surface: "#ffffff",
+  surfaceAlt: "#eef1f6",
+  text: "#181b20",
+  textDim: "#5b6472",
+  border: "#000000",
+  accent: "#d99000",
+  accentText: "#1a1200",
+  scrim: "#080604"
+};
+var CARD_W = 200;
+var IMG_H = 120;
+var STRIP_H = 8;
+var CARD_H = 214;
+var ACT_GAP = 12;
+var ACT_H = 50;
+var CELL_H = CARD_H + ACT_GAP + ACT_H;
+var GAP3 = 18;
+var STEP_R = 27;
+var BET_W = 220;
+var BET_H = 60;
+var TITLE_H = 40;
+var ROW_GAP2 = 22;
+var TAP_SLOP2 = 24;
+var texCache = /* @__PURE__ */ new Map();
+function loadTex(url) {
+  let p = texCache.get(url);
+  if (!p) {
+    p = pixi_js.Assets.load(url).catch(() => pixi_js.Texture.EMPTY);
+    texCache.set(url, p);
+  }
+  return p;
 }
-var esc3 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-function mountBuyFeatureModal(_app, hud, features, opts = {}) {
-  const ui = hud.ui;
-  const tr = (k) => ui.t(k);
-  const list = features.slice(0, 4);
-  ui.declareFacts({ modes: list.map((f) => ({ id: f.id, name: f.name, kind: f.variant, cost: f.cost })) });
-  const boosts = /* @__PURE__ */ new Set();
-  const activation = opts.activation ?? "multi";
-  const blocksBuy = opts.activationBlocksBuy ?? false;
-  const disposers = [];
-  const host2 = document.createElement("div");
-  host2.className = "bfm-root";
-  const vars = {
-    "--accent": "#d99000",
-    "--accent-text": "#1a1200",
-    "--surface": "#ffffff",
-    "--surface-alt": "#eef1f6",
-    "--text": "#181b20",
-    "--text-dim": "#5b6472",
-    "--font": ui.theme.type.family
-  };
-  for (const [k, v] of Object.entries(vars)) host2.style.setProperty(k, v);
-  host2.innerHTML = `
-    <div class="bfm-backdrop" data-close></div>
-    <button class="bfm-x" data-close aria-label="Close">\u2715</button>
-    <div class="bfm-panel" role="dialog" aria-modal="true">
-      <div class="bfm-fit" id="bfm-fit">
-        <h2 class="bfm-title" data-t="Buy Feature">${esc3(tr("Buy Feature"))}</h2>
-        <div class="bfm-bet">
-          <button class="bfm-step" id="bfm-minus" aria-label="Decrease">\u2212</button>
-          <div class="bfm-betbox"><span class="bfm-betlabel" data-t="Bet">${esc3(tr("Bet"))}</span><b id="bfm-betval">\u2014</b></div>
-          <button class="bfm-step" id="bfm-plus" aria-label="Increase">+</button>
-        </div>
-        <div class="bfm-cards" id="bfm-cards"></div>
-      </div>
-    </div>`;
-  const style = document.createElement("style");
-  style.textContent = BFM_CSS;
-  host2.appendChild(style);
-  document.body.appendChild(host2);
-  const $ = (sel) => host2.querySelector(sel);
-  const panel = $(".bfm-panel");
-  const fitEl = $("#bfm-fit");
-  const cardsEl = $("#bfm-cards");
-  const betValEl = $("#bfm-betval");
-  const askConfirm = (name, price, onYes) => {
-    const message = ui.t("openui.buyFeature.confirm", { name: ui.t(name), price });
-    void showConfirm(ui, { title: "Buy Feature", message }).then((ok) => {
-      if (ok) onYes();
-    });
-  };
-  const layout = () => {
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    const cols = vh <= 540 || vw >= 900 ? Math.min(4, list.length) : Math.min(2, list.length);
-    cardsEl.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
-    const fitW = Math.min(vw * 0.96, cols >= 4 ? 1180 : cols === 1 ? 380 : 760);
-    fitEl.style.width = `${fitW}px`;
-    fitEl.style.transform = "none";
-    const natH = fitEl.offsetHeight;
-    const s = Math.min(1, vh * 0.95 / natH);
-    fitEl.style.transform = `translateX(-50%) scale(${s})`;
-    panel.style.width = `${Math.ceil(fitW * s)}px`;
-    panel.style.height = `${Math.ceil(natH * s)}px`;
+function wireTap(node, hit, onTap) {
+  node.eventMode = "static";
+  node.cursor = "pointer";
+  node.hitArea = hit;
+  let down = null;
+  node.on("pointerdown", (e) => {
+    down = { x: e.global.x, y: e.global.y };
+    node.alpha = 0.82;
+  });
+  const end = (e, inside) => {
+    node.alpha = 1;
+    const p = down;
+    down = null;
+    if (!p) return;
+    if (inside || Math.hypot(e.global.x - p.x, e.global.y - p.y) <= TAP_SLOP2) onTap();
   };
-  const renderCards = () => {
-    const bet = opts.getBet ? opts.getBet() : ui.bet.get();
+  node.on("pointerup", (e) => end(e, true));
+  node.on("pointerupoutside", (e) => end(e, false));
+}
+var FeatureCard = class extends pixi_js.Container {
+  priceText;
+  actionBg = new pixi_js.Graphics();
+  actionLabel;
+  action = new pixi_js.Container();
+  constructor(spec, ui, onAction) {
+    super();
+    const fam = ui.theme.type.family;
+    const fill = new pixi_js.Graphics().roundRect(0, 0, CARD_W, CARD_H, 14).fill({ color: LIGHT3.surface });
+    const clip = new pixi_js.Container();
+    const clipMask = new pixi_js.Graphics().roundRect(0, 0, CARD_W, CARD_H, 14).fill({ color: 16777215 });
+    clip.mask = clipMask;
+    const placeholder = new pixi_js.Graphics().rect(0, 0, CARD_W, IMG_H).fill({ color: LIGHT3.surfaceAlt });
+    clip.addChild(placeholder);
+    if (spec.image) {
+      void loadTex(spec.image).then((tex) => {
+        if (this.destroyed || tex === pixi_js.Texture.EMPTY) return;
+        const sp = new pixi_js.Sprite(tex);
+        const s = Math.max(CARD_W / tex.width, IMG_H / tex.height);
+        sp.scale.set(s);
+        sp.x = (CARD_W - tex.width * s) / 2;
+        sp.y = (IMG_H - tex.height * s) / 2;
+        clip.addChildAt(sp, 1);
+      });
+    }
+    const strip = new pixi_js.Graphics().rect(0, IMG_H, CARD_W, STRIP_H).fill({ color: LIGHT3.accent });
+    const name = new pixi_js.Text({ text: ui.t(spec.name), style: { fontFamily: fam, fontSize: 16, fontWeight: "600", fill: LIGHT3.text } });
+    name.anchor.set(0.5, 0);
+    name.position.set(CARD_W / 2, IMG_H + STRIP_H + 12);
+    this.priceText = new pixi_js.Text({ text: "", style: { fontFamily: fam, fontSize: 22, fontWeight: "800", fill: LIGHT3.text } });
+    this.priceText.anchor.set(0.5, 0);
+    this.priceText.position.set(CARD_W / 2, IMG_H + STRIP_H + 36);
+    clip.addChild(strip, name, this.priceText);
+    const stroke = new pixi_js.Graphics().roundRect(0, 0, CARD_W, CARD_H, 14).stroke({ width: 4, color: LIGHT3.border });
+    this.addChild(fill, clip, clipMask, stroke);
+    this.actionLabel = new pixi_js.Text({ text: "", style: { fontFamily: fam, fontSize: 15, fontWeight: "800", fill: LIGHT3.text, letterSpacing: 0.5 } });
+    this.actionLabel.anchor.set(0.5);
+    this.actionLabel.position.set(CARD_W / 2, CARD_H + ACT_GAP + ACT_H / 2);
+    this.action.addChild(this.actionBg, this.actionLabel);
+    wireTap(this.action, new pixi_js.Rectangle(0, CARD_H + ACT_GAP, CARD_W, ACT_H), onAction);
+    this.addChild(this.action);
+  }
+  /** Update price + action label/state for the current bet + boost state. */
+  update(price, label, active, blocked) {
+    this.priceText.text = price;
+    this.actionLabel.text = label;
+    this.actionLabel.style.fill = active ? LIGHT3.accentText : LIGHT3.text;
+    this.actionBg.clear().roundRect(0, CARD_H + ACT_GAP, CARD_W, ACT_H, 12).fill({ color: active ? LIGHT3.accent : LIGHT3.surface }).stroke({ width: 4, color: LIGHT3.border });
+    this.action.eventMode = blocked ? "none" : "static";
+    this.action.alpha = blocked ? 0.38 : 1;
+  }
+};
+var BuyFeatureModalView = class extends pixi_js.Container {
+  constructor(hud, features, opts) {
+    super();
+    this.hud = hud;
+    this.opts = opts;
+    const ui = hud.ui;
+    const fam = ui.theme.type.family;
+    this.list = features.slice(0, 4);
+    this.zIndex = 125;
+    this.visible = false;
+    this.eventMode = "none";
+    ui.declareFacts({ modes: this.list.map((f) => ({ id: f.id, name: f.name, kind: f.variant, cost: f.cost })) });
+    this.backdrop.eventMode = "static";
+    this.backdrop.on("pointertap", () => this.close());
+    this.title = new pixi_js.Text({ text: ui.t("Buy Feature"), style: { fontFamily: fam, fontSize: 30, fontWeight: "800", fill: "#ffffff", letterSpacing: 1 } });
+    this.title.anchor.set(0.5, 0);
+    const minus = this.stepButton("\u2212", () => ui.betStepper.dec());
+    const plus = this.stepButton("+", () => ui.betStepper.inc());
+    const betBox = new pixi_js.Container();
+    const betBg = new pixi_js.Graphics().roundRect(-BET_W / 2, -BET_H / 2, BET_W, BET_H, 12).fill({ color: LIGHT3.surface }).stroke({ width: 3, color: LIGHT3.border });
+    const betLabel = new pixi_js.Text({ text: ui.t("Bet"), style: { fontFamily: fam, fontSize: 12, fontWeight: "700", fill: LIGHT3.textDim, letterSpacing: 1 } });
+    betLabel.anchor.set(0.5, 0);
+    betLabel.position.set(0, -BET_H / 2 + 8);
+    this.betValue = new pixi_js.Text({ text: "", style: { fontFamily: fam, fontSize: 24, fontWeight: "800", fill: LIGHT3.text } });
+    this.betValue.anchor.set(0.5, 1);
+    this.betValue.position.set(0, BET_H / 2 - 8);
+    betBox.addChild(betBg, betLabel, this.betValue);
+    const betRow = new pixi_js.Container();
+    minus.position.set(STEP_R, 0);
+    betBox.position.set(STEP_R * 2 + 16 + BET_W / 2, 0);
+    plus.position.set(STEP_R * 2 + 16 + BET_W + 16 + STEP_R, 0);
+    betRow.addChild(minus, betBox, plus);
+    this.betRow = betRow;
+    for (const spec of this.list) {
+      const card = new FeatureCard(spec, ui, () => this.onAction(spec.id, spec.variant));
+      this.cards.push(card);
+      this.cardsRow.addChild(card);
+    }
+    this.content.addChild(this.title, betRow, this.cardsRow);
+    const cbg = new pixi_js.Graphics().circle(0, 0, 23).fill({ color: LIGHT3.scrim, alpha: 0.85 });
+    const cx = 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(cbg, cx);
+    wireTap(this.closeBtn, new pixi_js.Rectangle(-23, -23, 46, 46), () => this.close());
+    this.addChild(this.backdrop, this.content, this.closeBtn);
+    this.disposers.push(
+      ui.bet.value.subscribe(() => this.refresh()),
+      ui.locale.subscribe(() => {
+        this.title.text = ui.t("Buy Feature");
+        betLabel.text = ui.t("Bet");
+        this.refresh();
+        this.relayout();
+      })
+    );
+  }
+  hud;
+  opts;
+  backdrop = new pixi_js.Graphics();
+  content = new pixi_js.Container();
+  closeBtn = new pixi_js.Container();
+  title;
+  betValue;
+  cardsRow = new pixi_js.Container();
+  cards = [];
+  list;
+  boosts = /* @__PURE__ */ new Set();
+  disposers = [];
+  screen;
+  betRow;
+  stepButton(glyph, onTap) {
+    const c = new pixi_js.Container();
+    const fam = this.hud.ui.theme.type.family;
+    const bg = new pixi_js.Graphics().circle(0, 0, STEP_R).fill({ color: LIGHT3.surface }).stroke({ width: 3, color: LIGHT3.border });
+    const t = new pixi_js.Text({ text: glyph, style: { fontFamily: fam, fontSize: 28, fontWeight: "800", fill: LIGHT3.text } });
+    t.anchor.set(0.5);
+    t.position.set(0, -1);
+    c.addChild(bg, t);
+    wireTap(c, new pixi_js.Rectangle(-STEP_R, -STEP_R, STEP_R * 2, STEP_R * 2), onTap);
+    return c;
+  }
+  /** Price + action state per current bet + boosts. */
+  refresh() {
+    const ui = this.hud.ui;
+    const bet = this.opts.getBet ? this.opts.getBet() : ui.bet.get();
     const cur = ui.bet.currency.get();
-    cardsEl.innerHTML = list.map((f) => {
-      const active = boosts.has(f.id);
-      const buyBlocked = f.variant === "buy" && blocksBuy && boosts.size > 0;
-      const price = f.variant === "buy" ? money(f.cost * bet, cur) : `+${money(f.cost * bet, cur)}`;
-      const label = f.variant === "buy" ? tr("Buy") : active ? tr("Activated") : tr("Activate");
-      const cls = `bfm-action bfm-action--${f.variant}${active ? " is-active" : ""}${buyBlocked ? " is-blocked" : ""}`;
-      const img = f.image ? ` style="background-image:url('${f.image}')"` : "";
-      return `
-        <div class="bfm-cell">
-          <div class="bfm-card">
-            <div class="bfm-cardimg"${img}></div>
-            <div class="bfm-strip"></div>
-            <div class="bfm-cardbody">
-              <span class="bfm-name">${esc3(tr(f.name))}</span>
-              <b class="bfm-price">${esc3(price)}</b>
-            </div>
-          </div>
-          <button class="${cls}" data-id="${f.id}" data-variant="${f.variant}"${buyBlocked ? " disabled" : ""}>${esc3(label)}</button>
-        </div>`;
-    }).join("");
-    betValEl.textContent = money(bet, cur);
-    cardsEl.querySelectorAll(".bfm-action").forEach((b) => {
-      b.addEventListener("click", () => onAction(b.dataset.id, b.dataset.variant));
+    const money = (n) => core.formatAmountPrecise(n, cur);
+    this.betValue.text = money(bet);
+    const blocksBuy = this.opts.activationBlocksBuy ?? false;
+    this.list.forEach((f, i) => {
+      const active = this.boosts.has(f.id);
+      const perSpin = (f.variant === "buy" ? f.cost : 1 + f.cost) * bet;
+      const label = f.variant === "buy" ? ui.t("Buy") : active ? ui.t("Activated") : ui.t("Activate");
+      const blocked = f.variant === "buy" && blocksBuy && this.boosts.size > 0;
+      this.cards[i].update(money(perSpin), label, active, blocked);
     });
-    layout();
-  };
-  const onAction = (id, variant) => {
-    const f = list.find((x) => x.id === id);
-    const bet = opts.getBet ? opts.getBet() : ui.bet.get();
+  }
+  onAction(id, variant) {
+    const ui = this.hud.ui;
+    const f = this.list.find((x) => x.id === id);
+    const bet = this.opts.getBet ? this.opts.getBet() : ui.bet.get();
     const cur = ui.bet.currency.get();
+    const money = (n) => core.formatAmountPrecise(n, cur);
+    const activation = this.opts.activation ?? "multi";
+    const blocksBuy = this.opts.activationBlocksBuy ?? false;
     if (variant === "boost") {
-      const wasActive = boosts.has(id);
+      const wasActive = this.boosts.has(id);
       const commit = () => {
-        if (activation === "single") boosts.clear();
-        if (wasActive) boosts.delete(id);
-        else boosts.add(id);
+        if (activation === "single") this.boosts.clear();
+        if (wasActive) this.boosts.delete(id);
+        else this.boosts.add(id);
         ui.bus.emit("cardActivated", { id });
-        renderCards();
-        opts.onActivate?.([...boosts], id, boosts.has(id));
+        this.refresh();
+        this.opts.onActivate?.([...this.boosts], id, this.boosts.has(id));
       };
       if (wasActive) {
         commit();
         return;
       }
       const total = 1 + (f?.cost ?? 0);
-      askConfirm(f?.name ?? id, money(total * bet, cur), commit);
+      this.askConfirm(f?.name ?? id, money(total * bet), commit);
     } else {
-      if (blocksBuy && boosts.size > 0) return;
+      if (blocksBuy && this.boosts.size > 0) return;
       const cost = (f?.cost ?? 0) * bet;
-      askConfirm(f?.name ?? id, money(cost, cur), () => {
+      this.askConfirm(f?.name ?? id, money(cost), () => {
         ui.bus.emit("cardActivated", { id });
-        close();
-        opts.onBuy?.(id, cost);
+        this.close();
+        this.opts.onBuy?.(id, cost);
       });
     }
-  };
-  $("#bfm-minus").addEventListener("click", () => ui.betStepper.dec());
-  $("#bfm-plus").addEventListener("click", () => ui.betStepper.inc());
-  disposers.push(ui.bet.value.subscribe(() => renderCards()));
-  const open = () => {
-    if (host2.classList.contains("open")) return;
-    renderCards();
-    host2.classList.add("open");
-    ui.lock();
-  };
-  const close = () => {
-    if (!host2.classList.contains("open")) return;
-    host2.classList.remove("open");
-    ui.unlock();
-  };
-  host2.querySelectorAll("[data-close]").forEach((b) => b.addEventListener("click", close));
-  disposers.push(ui.on("buttonActivated", ({ id }) => {
-    if (id === "bonus") open();
-  }));
-  const onResize = () => {
-    if (host2.classList.contains("open")) layout();
-  };
-  window.addEventListener("resize", onResize);
-  disposers.push(
-    ui.locale.subscribe(() => {
-      host2.querySelectorAll("[data-t]").forEach((n) => n.textContent = tr(n.dataset.t));
-      renderCards();
-    })
-  );
-  renderCards();
+  }
+  /** The ONE universal confirm — the in-canvas Pixi notice (DialogView, zIndex 130), so it
+   *  layers over this modal. Message + labels come from the library's i18n (social-aware). */
+  askConfirm(name, price, onYes) {
+    const ui = this.hud.ui;
+    const message = ui.t("openui.buyFeature.confirm", { name: ui.t(name), price });
+    ui.showNotice(
+      [
+        { kind: "heading", id: "bfm-confirm-h", text: "Buy Feature" },
+        { kind: "text", id: "bfm-confirm-b", text: message }
+      ],
+      [
+        { label: "openui.cancel", variant: "secondary" },
+        { label: "openui.confirm", variant: "primary", onSelect: () => {
+          ui.hideNotice();
+          onYes();
+        } }
+      ]
+    );
+  }
+  layout(screen) {
+    this.screen = screen;
+    if (this.visible) this.relayout();
+  }
+  relayout() {
+    const s = this.screen;
+    if (!s) return;
+    const W = s.width;
+    const H = s.height;
+    this.backdrop.clear().rect(0, 0, W, H).fill({ color: LIGHT3.scrim, alpha: 0.55 });
+    this.backdrop.hitArea = new pixi_js.Rectangle(0, 0, W, H);
+    const n = this.list.length;
+    const cols = W >= 720 && (W >= 900 || H <= 540) ? Math.min(4, n) : Math.min(2, n);
+    const rows = Math.ceil(n / cols);
+    this.cards.forEach((card, i) => {
+      const r = Math.floor(i / cols);
+      const c = i % cols;
+      card.position.set(c * (CARD_W + GAP3), r * (CELL_H + GAP3));
+    });
+    const gridW = cols * CARD_W + (cols - 1) * GAP3;
+    const gridH = rows * CELL_H + (rows - 1) * GAP3;
+    const betW = 4 * STEP_R + BET_W + 32;
+    const contentW = Math.max(gridW, betW, 340);
+    this.title.position.set(contentW / 2, 0);
+    this.betRow.position.set((contentW - betW) / 2, TITLE_H + ROW_GAP2 + STEP_R);
+    this.cardsRow.position.set((contentW - gridW) / 2, TITLE_H + ROW_GAP2 + BET_H + ROW_GAP2);
+    const contentH = TITLE_H + ROW_GAP2 + BET_H + ROW_GAP2 + gridH;
+    const scale = Math.min(1, W * 0.94 / contentW, H * 0.92 / contentH);
+    this.content.scale.set(scale);
+    this.content.position.set((W - contentW * scale) / 2, (H - contentH * scale) / 2);
+    this.closeBtn.position.set(W - 34, 34);
+  }
+  open() {
+    if (this.visible) return;
+    this.hud.ui.lock();
+    this.visible = true;
+    this.eventMode = "static";
+    this.refresh();
+    this.relayout();
+  }
+  close() {
+    if (!this.visible) return;
+    this.visible = false;
+    this.eventMode = "none";
+    this.hud.ui.unlock();
+  }
+  get isOpen() {
+    return this.visible;
+  }
+  dispose() {
+    if (this.visible) this.hud.ui.unlock();
+    for (const d of this.disposers.splice(0)) d();
+    if (!this.destroyed) this.destroy({ children: true });
+  }
+};
+function mountBuyFeatureModal(_app, hud, features, opts = {}) {
+  const ui = hud.ui;
+  const view = new BuyFeatureModalView(hud, features, opts);
+  hud.pixi.root.addChild(view);
+  view.layout(ui.screen.get());
+  const offScreen = ui.screen.subscribe(() => view.layout(ui.screen.get()));
+  const offOpen = ui.on("buttonActivated", ({ id }) => {
+    if (id === "bonus") view.open();
+  });
   return () => {
-    window.removeEventListener("resize", onResize);
-    if (host2.classList.contains("open")) ui.unlock();
-    for (const d of disposers.splice(0)) d();
-    host2.remove();
+    offScreen();
+    offOpen();
+    view.dispose();
   };
 }
-var BFM_CSS = `
-.bfm-root { position: fixed; inset: 0; z-index: 11000; display: grid; place-items: center; font-family: var(--font); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
-.bfm-root.open { opacity: 1; pointer-events: auto; }
-.bfm-backdrop { position: absolute; inset: 0; background: rgba(8,6,4,0); backdrop-filter: blur(0px) saturate(1); -webkit-backdrop-filter: blur(0px) saturate(1); transition: background .4s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease; }
-.bfm-root.open .bfm-backdrop { background: rgba(8,6,4,.5); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); }
-.bfm-x { position: absolute; top: 18px; right: 22px; width: 46px; height: 46px; border-radius: 999px; border: 0; background: rgba(18,14,10,.82); color: #fff; font-size: 18px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.45); z-index: 2; transition: transform .12s, background .12s; }
-.bfm-x:hover { transform: scale(1.08); background: rgba(18,14,10,.95); }
-.bfm-root *, .bfm-root *::before, .bfm-root *::after { box-sizing: border-box; }
-.bfm-panel { position: relative; transform: translateY(8px) scale(.985); transition: transform .18s ease; }
-.bfm-root.open .bfm-panel { transform: none; }
-.bfm-fit { position: absolute; top: 0; left: 50%; transform: translateX(-50%); transform-origin: top center; }
-.bfm-title { margin: 0 0 14px; text-align: center; color: #fff; font-size: 30px; font-weight: 800; letter-spacing: 1px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
-.bfm-bet { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 24px; }
-.bfm-betbox { min-width: 200px; padding: 10px 22px; border-radius: 12px; background: var(--surface); border: 3px solid #000; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
-.bfm-betlabel { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
-.bfm-betbox b { font-size: 24px; color: var(--text); }
-.bfm-step { flex: none; width: 54px; height: 54px; border-radius: 999px; border: 3px solid #000; background: var(--surface); color: var(--text); font-size: 28px; font-weight: 800; cursor: pointer; display: grid; place-items: center; line-height: 1; transition: transform .1s, background .12s; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
-.bfm-step:hover { background: var(--surface-alt); }
-.bfm-step:active { transform: scale(.92); }
-.bfm-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; }
-.bfm-cell { display: flex; flex-direction: column; min-width: 0; }
-.bfm-card { background: var(--surface); border: 4px solid #000; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
-.bfm-cardimg { width: 100%; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: var(--surface-alt); background-image: linear-gradient(135deg, #e7ebf2, #cfd6e2); }
-.bfm-strip { height: 8px; background: linear-gradient(90deg, #f0a500, #ffd166, #f0a500); }
-.bfm-cardbody { padding: 12px 14px 16px; text-align: center; }
-.bfm-name { display: block; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.bfm-price { display: block; margin-top: 2px; font-size: 22px; font-weight: 800; color: var(--text); }
-.bfm-action { display: block; width: 100%; margin-top: 12px; padding: 14px 10px; border-radius: 12px; border: 4px solid #000; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; transition: transform .1s, background .12s, color .12s; box-shadow: 0 5px 14px rgba(0,0,0,.35); white-space: nowrap; }
-.bfm-action:hover { background: var(--surface-alt); }
-.bfm-action:active { transform: scale(.96); }
-.bfm-action.is-active { background: var(--accent); color: var(--accent-text); border-color: #000; }
-.bfm-action.is-blocked, .bfm-action:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
-.bfm-action.is-blocked:hover, .bfm-action:disabled:hover { background: var(--surface); }
-`;
 
 // src/bootError.ts
 var host = null;
-var esc4 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var esc2 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 function showBootError(opts = {}) {
   const title = opts.title ?? "Connection lost";
   const message = opts.message ?? "The game could not reach the game server. Please reload to reconnect and continue.";
@@ -4556,10 +4655,10 @@ function showBootError(opts = {}) {
       <div class="openui-be-icon" aria-hidden="true">
         <svg viewBox="0 0 48 48" width="48" height="48"><path d="M24 4 3 42h42L24 4Z" fill="none" stroke="#ffc935" stroke-width="3" stroke-linejoin="round"/><rect x="22" y="18" width="4" height="12" rx="2" fill="#ffc935"/><circle cx="24" cy="35" r="2.4" fill="#ffc935"/></svg>
       </div>
-      <h1 class="openui-be-title">${esc4(title)}</h1>
-      <p class="openui-be-msg">${esc4(message)}</p>
-      ${opts.detail ? `<p class="openui-be-detail">${esc4(opts.detail)}</p>` : ""}
-      ${showReload ? `<button class="openui-be-reload" type="button">${esc4(opts.reloadLabel ?? "Reload")}</button>` : ""}
+      <h1 class="openui-be-title">${esc2(title)}</h1>
+      <p class="openui-be-msg">${esc2(message)}</p>
+      ${opts.detail ? `<p class="openui-be-detail">${esc2(opts.detail)}</p>` : ""}
+      ${showReload ? `<button class="openui-be-reload" type="button">${esc2(opts.reloadLabel ?? "Reload")}</button>` : ""}
     </div>
     <style>
       .openui-boot-error { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center;
@@ -4643,7 +4742,6 @@ exports.mountBuyFeatureModal = mountBuyFeatureModal;
 exports.mountHud = mountHud;
 exports.mountInfoMenu = mountInfoMenu;
 exports.showBootError = showBootError;
-exports.showConfirm = showConfirm;
 exports.svgSpinSkin = svgSpinSkin;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map