@open-slot-ui/pixi 0.8.1 → 0.8.2

package/dist/index.d.cts

@@ -735,6 +735,33 @@ declare function mountHud(app: Application, spec?: UISpec, opts?: HudOptions): B
  */
 declare function mountInfoMenu(app: Application, ui: OpenUI): () => void;
 
+/** A buy-feature card. */
+interface FeatureSpec {
+    id: string;
+    name: string;
+    variant: 'buy' | 'boost';
+    /** Price as a multiple of the current bet (× bet). */
+    cost: number;
+    /** Card image URL (or data URI). Optional — a neutral gradient is used when absent. */
+    image?: string;
+}
+/** Configurable behavior of the activatable bet-boost cards. */
+interface BuyFeatureOptions {
+    /** `'single'` → only one boost active at a time · `'multi'` → combine them. Default `'multi'`. */
+    activation?: 'single' | 'multi';
+    /** When any boost is active, disable the Buy buttons. Default `false`. */
+    activationBlocksBuy?: boolean;
+    /** Host hook for a confirmed Buy (the modal has just closed): deduct + start the feature. */
+    onBuy?: (id: string, cost: number) => void;
+    /** Host hook whenever the active-boost set changes (the modal stays open). */
+    onActivate?: (activeIds: string[], id: string, active: boolean) => void;
+    /** BASE bet source for pricing. Default reads ui.bet — pass this when ui.bet
+     *  displays a modified EFFECTIVE stake (boost active) instead of the base bet. */
+    getBet?: () => number;
+}
+/** Mount the buy-feature modal. Returns a leak-free teardown. */
+declare function mountBuyFeatureModal(_app: Application, hud: BootedHud, features: FeatureSpec[], opts?: BuyFeatureOptions): () => void;
+
 interface BootErrorOptions {
     title?: string;
     message?: string;
@@ -817,4 +844,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, ControlView, ControlViewFactory, DialogView, type DialogViewOptions, 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, mountHud, mountInfoMenu, showBootError, svgSpinSkin };
+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 };

package/dist/index.d.ts

@@ -735,6 +735,33 @@ declare function mountHud(app: Application, spec?: UISpec, opts?: HudOptions): B
  */
 declare function mountInfoMenu(app: Application, ui: OpenUI): () => void;
 
+/** A buy-feature card. */
+interface FeatureSpec {
+    id: string;
+    name: string;
+    variant: 'buy' | 'boost';
+    /** Price as a multiple of the current bet (× bet). */
+    cost: number;
+    /** Card image URL (or data URI). Optional — a neutral gradient is used when absent. */
+    image?: string;
+}
+/** Configurable behavior of the activatable bet-boost cards. */
+interface BuyFeatureOptions {
+    /** `'single'` → only one boost active at a time · `'multi'` → combine them. Default `'multi'`. */
+    activation?: 'single' | 'multi';
+    /** When any boost is active, disable the Buy buttons. Default `false`. */
+    activationBlocksBuy?: boolean;
+    /** Host hook for a confirmed Buy (the modal has just closed): deduct + start the feature. */
+    onBuy?: (id: string, cost: number) => void;
+    /** Host hook whenever the active-boost set changes (the modal stays open). */
+    onActivate?: (activeIds: string[], id: string, active: boolean) => void;
+    /** BASE bet source for pricing. Default reads ui.bet — pass this when ui.bet
+     *  displays a modified EFFECTIVE stake (boost active) instead of the base bet. */
+    getBet?: () => number;
+}
+/** Mount the buy-feature modal. Returns a leak-free teardown. */
+declare function mountBuyFeatureModal(_app: Application, hud: BootedHud, features: FeatureSpec[], opts?: BuyFeatureOptions): () => void;
+
 interface BootErrorOptions {
     title?: string;
     message?: string;
@@ -817,4 +844,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, ControlView, ControlViewFactory, DialogView, type DialogViewOptions, 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, mountHud, mountInfoMenu, showBootError, svgSpinSkin };
+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 };

package/dist/index.js

@@ -565,7 +565,7 @@ var OHM_CSS = `
 // src/mountHud.ts
 function showReplayModal(ui, info, buttonKey, onSelect) {
   const cur = info.currency ?? ui.balance.currency.get();
-  const money = (n) => formatAmount(n, cur);
+  const money2 = (n) => formatAmount(n, cur);
   ui.showNotice(
     [
       { kind: "heading", id: "openui-replay-h", text: "openui.replay.title" },
@@ -573,10 +573,10 @@ function showReplayModal(ui, info, buttonKey, onSelect) {
         kind: "stat-grid",
         id: "openui-replay-g",
         items: [
-          { label: "openui.replay.baseBet", value: money(info.baseBet) },
+          { label: "openui.replay.baseBet", value: money2(info.baseBet) },
           { label: "openui.replay.costMultiplier", value: `${info.costMultiplier}\xD7` },
           { label: "openui.replay.payoutMultiplier", value: `${info.payoutMultiplier}\xD7` },
-          { label: "openui.replay.amount", value: money(info.amount) }
+          { label: "openui.replay.amount", value: money2(info.amount) }
         ]
       }
     ],
@@ -704,10 +704,237 @@ function mountHud(app, spec = {}, opts = {}) {
     dispose: teardown
   };
 }
+function money(amount, cur) {
+  return formatAmount(amount, cur);
+}
+var esc2 = (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);
+  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">${esc2(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>
+          <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;
+  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 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 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`;
+  };
+  const renderCards = () => {
+    const bet = opts.getBet ? 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">${esc2(tr(f.name))}</span>
+              <b class="bfm-price">${esc2(price)}</b>
+            </div>
+          </div>
+          <button class="${cls}" data-id="${f.id}" data-variant="${f.variant}"${buyBlocked ? " disabled" : ""}>${esc2(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));
+    });
+    layout();
+  };
+  const onAction = (id, variant) => {
+    const f = list.find((x) => x.id === id);
+    const bet = opts.getBet ? opts.getBet() : ui.bet.get();
+    const cur = ui.bet.currency.get();
+    if (variant === "boost") {
+      const wasActive = boosts.has(id);
+      const commit = () => {
+        if (activation === "single") boosts.clear();
+        if (wasActive) boosts.delete(id);
+        else boosts.add(id);
+        ui.bus.emit("cardActivated", { id });
+        renderCards();
+        opts.onActivate?.([...boosts], id, boosts.has(id));
+      };
+      if (wasActive) {
+        commit();
+        return;
+      }
+      const total = 1 + (f?.cost ?? 0);
+      askConfirm(total, 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), () => {
+        ui.bus.emit("cardActivated", { id });
+        close();
+        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 = () => {
+    renderCards();
+    host2.classList.add("open");
+  };
+  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();
+  }));
+  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();
+  return () => {
+    window.removeEventListener("resize", onResize);
+    for (const d of disposers.splice(0)) d();
+    host2.remove();
+  };
+}
+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); }
+.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 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 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.";
@@ -721,10 +948,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">${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>` : ""}
+      <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>` : ""}
     </div>
     <style>
       .openui-boot-error { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center;
@@ -752,6 +979,6 @@ function hideBootError() {
   host = null;
 }
 
-export { PanelBodyView, PanelView, PopoverView, hideBootError, mountHud, mountInfoMenu, showBootError };
+export { PanelBodyView, PanelView, PopoverView, hideBootError, mountBuyFeatureModal, mountHud, mountInfoMenu, showBootError };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map