@open-slot-ui/pixi 0.8.2 → 0.9.0

package/dist/index.d.cts

@@ -762,6 +762,31 @@ interface BuyFeatureOptions {
 /** Mount the buy-feature modal. Returns a leak-free teardown. */
 declare function mountBuyFeatureModal(_app: Application, hud: BootedHud, features: FeatureSpec[], opts?: BuyFeatureOptions): () => void;
 
+/** Minimal HUD surface the confirm needs — the translator + theme font. */
+interface ConfirmUI {
+    t(key: string, params?: Record<string, string | number>): string;
+    theme: {
+        type: {
+            family: string;
+        };
+    };
+}
+interface ConfirmOptions {
+    /** Heading (already resolved text, or an i18n key). Default `Buy Feature`. */
+    title?: string;
+    /** Body message (already resolved). */
+    message: string;
+    /** Confirm button label (resolved text or i18n key). Default `openui.confirm`. */
+    confirmLabel?: string;
+    /** Cancel button label. Default `openui.cancel`. */
+    cancelLabel?: string;
+}
+/**
+ * Show the universal confirm dialog. Resolves `true` on Confirm, `false` on Cancel / backdrop
+ * / Escape. Self-mounting + self-cleaning; layers above everything (z-index above the buy modal).
+ */
+declare function showConfirm(ui: ConfirmUI, opts: ConfirmOptions): Promise<boolean>;
+
 interface BootErrorOptions {
     title?: string;
     message?: string;
@@ -844,4 +869,4 @@ declare class Tweener {
 /** Treat touch devices as non-desktop so we don't fire phantom hover states. */
 declare function isDesktop(): boolean;
 
-export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BootErrorOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, type BuyFeatureOptions, ControlView, ControlViewFactory, DialogView, type DialogViewOptions, type FeatureSpec, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, OpenUIPixi, OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, type ReplayInfo, SelectView, type SelectViewOptions, SliderView, SpinSkin, SpinSkinFactory, SpinView, type SpinViewOptions, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, defaultSpinSkin, drawSpin, hideBootError, isDesktop, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError, svgSpinSkin };
+export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BootErrorOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, type BuyFeatureOptions, type ConfirmOptions, ControlView, ControlViewFactory, DialogView, type DialogViewOptions, type FeatureSpec, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, OpenUIPixi, OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, type ReplayInfo, SelectView, type SelectViewOptions, SliderView, SpinSkin, SpinSkinFactory, SpinView, type SpinViewOptions, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, defaultSpinSkin, drawSpin, hideBootError, isDesktop, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError, showConfirm, svgSpinSkin };

package/dist/index.d.ts

@@ -762,6 +762,31 @@ interface BuyFeatureOptions {
 /** Mount the buy-feature modal. Returns a leak-free teardown. */
 declare function mountBuyFeatureModal(_app: Application, hud: BootedHud, features: FeatureSpec[], opts?: BuyFeatureOptions): () => void;
 
+/** Minimal HUD surface the confirm needs — the translator + theme font. */
+interface ConfirmUI {
+    t(key: string, params?: Record<string, string | number>): string;
+    theme: {
+        type: {
+            family: string;
+        };
+    };
+}
+interface ConfirmOptions {
+    /** Heading (already resolved text, or an i18n key). Default `Buy Feature`. */
+    title?: string;
+    /** Body message (already resolved). */
+    message: string;
+    /** Confirm button label (resolved text or i18n key). Default `openui.confirm`. */
+    confirmLabel?: string;
+    /** Cancel button label. Default `openui.cancel`. */
+    cancelLabel?: string;
+}
+/**
+ * Show the universal confirm dialog. Resolves `true` on Confirm, `false` on Cancel / backdrop
+ * / Escape. Self-mounting + self-cleaning; layers above everything (z-index above the buy modal).
+ */
+declare function showConfirm(ui: ConfirmUI, opts: ConfirmOptions): Promise<boolean>;
+
 interface BootErrorOptions {
     title?: string;
     message?: string;
@@ -844,4 +869,4 @@ declare class Tweener {
 /** Treat touch devices as non-desktop so we don't fire phantom hover states. */
 declare function isDesktop(): boolean;
 
-export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BootErrorOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, type BuyFeatureOptions, ControlView, ControlViewFactory, DialogView, type DialogViewOptions, type FeatureSpec, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, OpenUIPixi, OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, type ReplayInfo, SelectView, type SelectViewOptions, SliderView, SpinSkin, SpinSkinFactory, SpinView, type SpinViewOptions, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, defaultSpinSkin, drawSpin, hideBootError, isDesktop, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError, svgSpinSkin };
+export { AutoplayDrawerView, AutoplayView, type AutoplayViewOptions, type BootErrorOptions, type BootedHud, type ButtonGlyph, ButtonView, type ButtonViewOptions, type BuyFeatureOptions, type ConfirmOptions, ControlView, ControlViewFactory, DialogView, type DialogViewOptions, type FeatureSpec, type HudOptions, type InfoContentBuilder, MenuView, type MenuViewOptions, OpenUIPixi, OpenUIPixiOptions, type PanelBodyOptions, PanelBodyView, PanelView, type PanelViewOptions, type PopoverArt, type PopoverParts, PopoverView, ReadoutView, type ReadoutViewOptions, type ReplayInfo, SelectView, type SelectViewOptions, SliderView, SpinSkin, SpinSkinFactory, SpinView, type SpinViewOptions, StepperView, type SvgSpinTextures, TextCellRenderer, type TextCellRendererOptions, ToggleView, type ToggleViewOptions, TurboView, type TurboViewOptions, Tweener, ValueDisplayView, defaultSpinSkin, drawSpin, hideBootError, isDesktop, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError, showConfirm, svgSpinSkin };

package/dist/index.js

@@ -1,7 +1,7 @@
-import { ControlView, ButtonView, SliderView, buildBlockColumn, OpenUIPixi } from './chunk-PYXZIGXG.js';
-export { AutoplayDrawerView, AutoplayView, ButtonView, ControlView, DialogView, MenuView, OpenUIPixi, ReadoutView, SelectView, SliderView, SpinView, StepperView, TextCellRenderer, ToggleView, TurboView, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, svgSpinSkin } from './chunk-PYXZIGXG.js';
+import { ControlView, ButtonView, SliderView, buildBlockColumn, OpenUIPixi } from './chunk-Z7X5JH7H.js';
+export { AutoplayDrawerView, AutoplayView, ButtonView, ControlView, DialogView, MenuView, OpenUIPixi, ReadoutView, SelectView, SliderView, SpinView, StepperView, TextCellRenderer, ToggleView, TurboView, Tweener, ValueDisplayView, buildBlockColumn, defaultSpinSkin, drawSpin, isDesktop, svgSpinSkin } from './chunk-Z7X5JH7H.js';
 import { Text, Graphics, Container, Rectangle } from 'pixi.js';
-import { LOCALE_LABELS, createUI, composeMenu, buildPanel, formatAmount } from '@open-slot-ui/core';
+import { LOCALE_LABELS, createUI, composeMenu, buildPanel, modeStatsItems, formatAmountPrecise, factsVars, auditRules } from '@open-slot-ui/core';
 
 var RISE = 26;
 var STAGGER = 38;
@@ -280,7 +280,11 @@ var PanelBodyView = class extends ControlView {
 };
 var esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 var rich = (s) => esc(s).replace(/\*\*(.+?)\*\*/g, "<b>$1</b>");
-function renderBlocks(blocks, tr) {
+function statGridHtml(items, tr) {
+  const rows = items.map((it) => `<div><dt>${esc(tr(it.label))}</dt><dd>${esc(tr(it.value))}</dd></div>`).join("");
+  return `<dl class="ohm-stats">${rows}</dl>`;
+}
+function renderBlocks(blocks, tr, facts) {
   const out = [];
   for (const b of blocks) {
     switch (b.kind) {
@@ -322,9 +326,16 @@ function renderBlocks(blocks, tr) {
         out.push(`<table class="ohm-table">${head}<tbody>${body}</tbody></table>`);
         break;
       }
-      case "stat-grid": {
-        const rows = b.items.map((it) => `<div><dt>${esc(tr(it.label))}</dt><dd>${esc(tr(it.value))}</dd></div>`).join("");
-        out.push(`<dl class="ohm-stats">${rows}</dl>`);
+      case "stat-grid":
+        out.push(statGridHtml(b.items, tr));
+        break;
+      // The AUTO per-mode RTP / Max-win grid — rendered straight from the declared
+      // game facts (+ any host extras), so the table can never drift from the config.
+      // `modeStatsItems` localizes the label PARTS itself ("Max win" · the mode name),
+      // so the grid renderer gets identity-tr — no double translation.
+      case "mode-stats": {
+        const extras = (b.extras ?? []).map((e) => ({ label: tr(e.label), value: tr(e.value) }));
+        out.push(statGridHtml([...modeStatsItems(facts, tr), ...extras], (s) => s));
         break;
       }
       case "steps": {
@@ -394,8 +405,30 @@ function mountInfoMenu(app, ui) {
   const soundMode = menu.sound ?? "sliders";
   const volRow = (id, label, hint, val) => `<div class="ohm-setting"><label class="ohm-row"><span>${esc(tr(label))}</span><input class="ohm-slider" data-vol="${id}" type="range" min="0" max="1" step="0.01" value="${val}"></label><div class="ohm-hint">${esc(tr(hint))}</div></div>`;
   const soundSliders = soundMode === "master" ? volRow("master", "Volume", "Adjust the overall game volume.", ui.sfxSlider.value.get()) : soundMode === "sliders" ? volRow("music", "Music", "Adjust the background music volume.", ui.musicSlider.value.get()) + volRow("sfx", "Effects", "Adjust the sound-effects volume.", ui.sfxSlider.value.get()) : "";
-  const paytableHtml = menu.paytable ? renderBlocks(menu.paytable, tr) : "";
-  const rulesHtml = menu.rules ? renderBlocks(menu.rules, tr) : "";
+  const rulesTr = () => {
+    const vars2 = factsVars(ui.facts.get(), { "game.name": ui.gameInfo.name ?? "", "game.version": ui.gameInfo.version ?? "" });
+    return (s) => ui.t(s, vars2);
+  };
+  const auditCardHtml = (trr) => {
+    if (!menu.rules?.length) return "";
+    const issues = auditRules(ui.facts.get(), menu.rules, { resolve: trr });
+    if (!issues.length) return "";
+    const req = issues.filter((i) => i.level === "required");
+    const rec = issues.filter((i) => i.level === "recommended");
+    const list = (items) => `<ul>${items.map((i) => `<li>${esc(tr(i.message))}</li>`).join("")}</ul>`;
+    return `<div class="ohm-audit" role="alert">
+      <div class="ohm-audit-title">\u26A0 ${esc(tr("openui.rulesAudit.title"))}</div>
+      ${req.length ? `<div class="ohm-audit-sub">${esc(tr("openui.rulesAudit.required"))}</div>${list(req)}` : ""}
+      ${rec.length ? `<div class="ohm-audit-sub ohm-audit-sub--rec">${esc(tr("openui.rulesAudit.recommended"))}</div><div class="ohm-audit-rec">${list(rec)}</div>` : ""}
+    </div>`;
+  };
+  const rulesInnerHtml = () => {
+    if (!menu.rules) return "";
+    const trr = rulesTr();
+    return auditCardHtml(trr) + renderBlocks(menu.rules, trr, ui.facts.get());
+  };
+  const paytableHtml = menu.paytable ? renderBlocks(menu.paytable, tr, ui.facts.get()) : "";
+  const rulesHtml = rulesInnerHtml();
   const banner = menu.banner ? `<img class="ohm-logo" alt="" src="${menu.banner.src}"${menu.banner.width ? ` width="${menu.banner.width}"` : ""}${menu.banner.height ? ` height="${menu.banner.height}"` : ""}>` : ui.gameInfo.name ? `<h1 class="ohm-logo-text">${esc(ui.gameInfo.name)}</h1>` : "";
   host2.innerHTML = `
     <div class="ohm-backdrop" data-close></div>
@@ -467,19 +500,40 @@ function mountInfoMenu(app, ui) {
     else if (el instanceof HTMLSelectElement) el.addEventListener("change", () => ui.bus.emit("optionSelected", { id, value: el.value, index: el.selectedIndex }));
   });
   host2.querySelectorAll("[data-close]").forEach((b) => b.addEventListener("click", () => ui.settingsPanel.closePanel()));
+  const refreshRules = () => {
+    const rulesEl = host2.querySelector("#ohm-rules");
+    if (rulesEl && menu.rules) rulesEl.innerHTML = rulesInnerHtml();
+  };
   disposers.push(
     ui.locale.subscribe(() => {
       const body = host2.querySelector(".ohm-body");
       if (body) {
-        const rulesEl = host2.querySelector("#ohm-rules");
-        if (rulesEl && menu.rules) rulesEl.innerHTML = renderBlocks(menu.rules, tr);
+        refreshRules();
         if (lang) lang.value = ui.locale.get();
       }
+    }),
+    ui.facts.subscribe(refreshRules)
+  );
+  let menuLocked = false;
+  disposers.push(
+    ui.settingsPanel.state.subscribe(() => {
+      const isOpen = ui.settingsPanel.isOpen;
+      host2.classList.toggle("open", isOpen);
+      if (isOpen && !menuLocked) {
+        ui.lock();
+        menuLocked = true;
+      } else if (!isOpen && menuLocked) {
+        ui.unlock();
+        menuLocked = false;
+      }
     })
   );
-  disposers.push(ui.settingsPanel.state.subscribe(() => host2.classList.toggle("open", ui.settingsPanel.isOpen)));
   return () => {
     for (const d of disposers.splice(0)) d();
+    if (menuLocked) {
+      ui.unlock();
+      menuLocked = false;
+    }
     host2.remove();
   };
 }
@@ -533,6 +587,13 @@ var OHM_CSS = `
 .ohm-stats { margin: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
 .ohm-stats > div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--text-dim) 20%, transparent); }
 .ohm-stats dt { color: var(--text-dim); margin: 0; } .ohm-stats dd { margin: 0; font-weight: 700; }
+.ohm-audit { margin: 12px 0 18px; padding: 14px 16px; border-radius: 12px; border: 2px solid #d03131; background: color-mix(in srgb, #d03131 8%, transparent); }
+.ohm-audit-title { font-weight: 900; letter-spacing: .5px; color: #b31d1d; }
+.ohm-audit-sub { margin-top: 8px; font-size: 13px; font-weight: 800; color: #b31d1d; }
+.ohm-audit-sub--rec { color: #b07d09; }
+.ohm-audit ul { margin: 6px 0 0; padding-left: 20px; color: var(--text); font-size: 13.5px; line-height: 1.55; }
+.ohm-audit li { margin: 3px 0; }
+.ohm-audit-rec ul { color: var(--text-dim); }
 .ohm-callout { margin: 16px 0 4px; padding: 14px 16px; border-radius: 12px; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
 .ohm-callout b { color: var(--accent); } .ohm-callout p { margin: 4px 0 0; color: var(--text); }
 .ohm-callout--warning { border-left-color: #e0a106; background: color-mix(in srgb, #e0a106 10%, transparent); }
@@ -562,10 +623,67 @@ var OHM_CSS = `
 .ohm-group { margin: 8px 0; }
 `;
 
+// 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) => formatAmount(n, cur);
+  const money2 = (n) => formatAmountPrecise(n, cur);
   ui.showNotice(
     [
       { kind: "heading", id: "openui-replay-h", text: "openui.replay.title" },
@@ -680,17 +798,15 @@ function mountHud(app, spec = {}, opts = {}) {
         o.onConfirm();
         return;
       }
-      const message = o.message ?? (o.name ? ui.t("openui.buyFeature.confirm", { name: ui.t(o.name), price: o.price ?? "" }) : "openui.buyFeature.message");
-      ui.showNotice(
-        [
-          { kind: "heading", id: "buy-title", text: o.title ?? "openui.buyFeature.title" },
-          { kind: "text", id: "buy-body", text: message }
-        ],
-        [
-          { label: o.cancelLabel ?? "openui.cancel", variant: "secondary" },
-          { label: o.confirmLabel ?? "openui.confirm", variant: "primary", onSelect: o.onConfirm }
-        ]
-      );
+      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();
+      });
     },
     showControls: () => pixi.setControlsVisible(true),
     hideControls: () => pixi.setControlsVisible(false),
@@ -705,13 +821,14 @@ function mountHud(app, spec = {}, opts = {}) {
   };
 }
 function money(amount, cur) {
-  return formatAmount(amount, cur);
+  return formatAmountPrecise(amount, cur);
 }
-var esc2 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+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;
@@ -733,23 +850,14 @@ function mountBuyFeatureModal(_app, hud, features, opts = {}) {
     <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">${esc2(tr("Buy Feature"))}</h2>
+        <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">${esc2(tr("Bet"))}</span><b id="bfm-betval">\u2014</b></div>
+          <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>
-    <div class="bfm-confirm" id="bfm-confirm">
-      <div class="bfm-confirm-card">
-        <p class="bfm-confirm-msg" id="bfm-confirm-msg"></p>
-        <div class="bfm-confirm-row">
-          <button class="bfm-confirm-btn bfm-confirm-no" id="bfm-confirm-no" data-t="openui.cancel">${esc2(tr("openui.cancel"))}</button>
-          <button class="bfm-confirm-btn bfm-confirm-yes" id="bfm-confirm-yes" data-t="openui.confirm">${esc2(tr("openui.confirm"))}</button>
-        </div>
-      </div>
     </div>`;
   const style = document.createElement("style");
   style.textContent = BFM_CSS;
@@ -760,29 +868,11 @@ function mountBuyFeatureModal(_app, hud, features, opts = {}) {
   const fitEl = $("#bfm-fit");
   const cardsEl = $("#bfm-cards");
   const betValEl = $("#bfm-betval");
-  const confirmEl = $("#bfm-confirm");
-  const confirmMsg = $("#bfm-confirm-msg");
-  const confirmYes = $("#bfm-confirm-yes");
-  const confirmNo = $("#bfm-confirm-no");
-  let pendingConfirm = null;
-  const hideConfirm = () => {
-    confirmEl.classList.remove("show");
-    pendingConfirm = null;
-  };
-  confirmNo.addEventListener("click", hideConfirm);
-  confirmYes.addEventListener("click", () => {
-    const fn = pendingConfirm;
-    hideConfirm();
-    fn?.();
-  });
-  const askConfirm = (totalCost, name, price, onYes) => {
-    if (!hud.shouldConfirmBuy(totalCost)) {
-      onYes();
-      return;
-    }
-    confirmMsg.textContent = ui.t("openui.buyFeature.confirm", { name: ui.t(name), price });
-    pendingConfirm = onYes;
-    confirmEl.classList.add("show");
+  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;
@@ -814,11 +904,11 @@ function mountBuyFeatureModal(_app, hud, features, opts = {}) {
             <div class="bfm-cardimg"${img}></div>
             <div class="bfm-strip"></div>
             <div class="bfm-cardbody">
-              <span class="bfm-name">${esc2(tr(f.name))}</span>
-              <b class="bfm-price">${esc2(price)}</b>
+              <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" : ""}>${esc2(label)}</button>
+          <button class="${cls}" data-id="${f.id}" data-variant="${f.variant}"${buyBlocked ? " disabled" : ""}>${esc3(label)}</button>
         </div>`;
     }).join("");
     betValEl.textContent = money(bet, cur);
@@ -846,11 +936,11 @@ function mountBuyFeatureModal(_app, hud, features, opts = {}) {
         return;
       }
       const total = 1 + (f?.cost ?? 0);
-      askConfirm(total, f?.name ?? id, money(total * bet, cur), commit);
+      askConfirm(f?.name ?? id, money(total * bet, cur), commit);
     } else {
       if (blocksBuy && boosts.size > 0) return;
       const cost = (f?.cost ?? 0) * bet;
-      askConfirm(f?.cost ?? 0, f?.name ?? id, money(cost, cur), () => {
+      askConfirm(f?.name ?? id, money(cost, cur), () => {
         ui.bus.emit("cardActivated", { id });
         close();
         opts.onBuy?.(id, cost);
@@ -861,10 +951,16 @@ function mountBuyFeatureModal(_app, hud, features, opts = {}) {
   $("#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();
   };
-  const close = () => host2.classList.remove("open");
   host2.querySelectorAll("[data-close]").forEach((b) => b.addEventListener("click", close));
   disposers.push(ui.on("buttonActivated", ({ id }) => {
     if (id === "bonus") open();
@@ -882,6 +978,7 @@ function mountBuyFeatureModal(_app, hud, features, opts = {}) {
   renderCards();
   return () => {
     window.removeEventListener("resize", onResize);
+    if (host2.classList.contains("open")) ui.unlock();
     for (const d of disposers.splice(0)) d();
     host2.remove();
   };
@@ -919,22 +1016,11 @@ var BFM_CSS = `
 .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); }
-.bfm-confirm { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .16s ease; }
-.bfm-confirm.show { opacity: 1; pointer-events: auto; }
-.bfm-confirm::before { content: ""; position: absolute; inset: 0; background: rgba(8,6,4,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
-.bfm-confirm-card { position: relative; width: min(90%, 420px); background: var(--surface); color: var(--text); border: 3px solid #000; border-radius: 14px; padding: 26px 24px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.55); text-align: center; }
-.bfm-confirm-msg { margin: 0 0 22px; font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--text); }
-.bfm-confirm-row { display: flex; gap: 14px; }
-.bfm-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; }
-.bfm-confirm-btn:active { transform: scale(.96); }
-.bfm-confirm-no { background: var(--surface); color: var(--text); }
-.bfm-confirm-no:hover { background: var(--surface-alt); }
-.bfm-confirm-yes { background: var(--accent); color: var(--accent-text); }
 `;
 
 // src/bootError.ts
 var host = null;
-var esc3 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var esc4 = (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.";
@@ -948,10 +1034,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">${esc3(title)}</h1>
-      <p class="openui-be-msg">${esc3(message)}</p>
-      ${opts.detail ? `<p class="openui-be-detail">${esc3(opts.detail)}</p>` : ""}
-      ${showReload ? `<button class="openui-be-reload" type="button">${esc3(opts.reloadLabel ?? "Reload")}</button>` : ""}
+      <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>` : ""}
     </div>
     <style>
       .openui-boot-error { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center;
@@ -979,6 +1065,6 @@ function hideBootError() {
   host = null;
 }
 
-export { PanelBodyView, PanelView, PopoverView, hideBootError, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError };
+export { PanelBodyView, PanelView, PopoverView, hideBootError, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError, showConfirm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map