@open-slot-ui/pixi 0.8.2 → 0.9.0

package/dist/index.cjs

@@ -208,6 +208,9 @@ var SpinView = class extends ControlView {
       }),
       // re-dim if slam-stop is toggled at runtime (e.g. applyJurisdiction)
       this.spin.allowSlamStop.subscribe(() => this.updateInteractive()),
+      // the ref-counted HUD lock (menu / buy modal / blocking notice) gates
+      // `spin.interactable` — refresh eventMode/cursor when it flips
+      this.ui.locked.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.updateFaces()),
@@ -3104,7 +3107,7 @@ var ReadoutView = class extends ControlView {
     let text;
     switch (this.ro.kind) {
       case "currency":
-        text = this.ro.currency ? core.formatAmount(v, this.ro.currency.get(), { signed: this.ro.signed }) : String(v);
+        text = this.ro.currency ? core.formatAmountPrecise(v, this.ro.currency.get(), { signed: this.ro.signed }) : String(v);
         break;
       case "percent":
         text = `${v.toFixed(this.ro.decimals)}%`;
@@ -3987,7 +3990,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) {
@@ -4029,9 +4036,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([...core.modeStatsItems(facts, tr), ...extras], (s) => s));
         break;
       }
       case "steps": {
@@ -4101,8 +4115,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 = core.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 = core.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>
@@ -4174,19 +4210,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();
   };
 }
@@ -4240,6 +4297,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); }
@@ -4269,10 +4333,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) => core.formatAmount(n, cur);
+  const money2 = (n) => core.formatAmountPrecise(n, cur);
   ui.showNotice(
     [
       { kind: "heading", id: "openui-replay-h", text: "openui.replay.title" },
@@ -4387,17 +4508,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),
@@ -4412,13 +4531,14 @@ function mountHud(app, spec = {}, opts = {}) {
   };
 }
 function money(amount, cur) {
-  return core.formatAmount(amount, cur);
+  return core.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;
@@ -4440,23 +4560,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;
@@ -4467,29 +4578,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;
@@ -4521,11 +4614,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);
@@ -4553,11 +4646,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);
@@ -4568,10 +4661,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();
@@ -4589,6 +4688,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();
   };
@@ -4626,22 +4726,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.";
@@ -4655,10 +4744,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;
@@ -4742,6 +4831,7 @@ 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