@open-slot-ui/pixi 0.7.0 → 0.8.1

package/dist/index.d.cts

@@ -625,6 +625,13 @@ interface ReplayInfo {
 }
 interface HudOptions extends OpenUIPixiOptions {
     hooks?: HostHooks;
+    /**
+     * Render the library's white HTML **info menu** (Settings · Paytable · Rules) — the Figma
+     * design, driven by `spec.menu`, label-left / control-right, fully modular + localized —
+     * instead of the in-canvas Pixi menu. Default `true`. `menu: false` opts out of BOTH (the
+     * host supplies its own menu). Set `infoMenu: false` to keep the old Pixi menu.
+     */
+    infoMenu?: boolean;
 }
 /**
  * The complete-HUD handle returned by `mountHud`. Wraps the headless OpenUI + the
@@ -674,8 +681,9 @@ interface BootedHud {
      *  amounts format with `info.currency` (defaults to the balance currency). Also flips
      *  the HUD into replay mode (badge + lock). */
     replayStart(info: ReplayInfo, onPlay?: () => void): void;
-    /** At the END of a replay, show a "Replay" button (open-ui styled) that re-runs it. */
-    replayEnd(onReplay: () => void): void;
+    /** At the END of a replay, show the SAME facts + a "Replay" button that re-runs it.
+     *  Non-dismissible (no ✕ / backdrop close) — it's a strict modal → round → modal loop. */
+    replayEnd(info: ReplayInfo, onReplay: () => void): void;
     /** Show a buy-feature confirm modal (Cancel / Confirm). Texts are literal-or-key. */
     confirmBuy(opts: {
         title?: string;
@@ -721,6 +729,12 @@ interface BootedHud {
  */
 declare function mountHud(app: Application, spec?: UISpec, opts?: HudOptions): BootedHud;
 
+/**
+ * Mount the info menu overlay for a booted `OpenUI`. Reads `ui.spec.menu`; opens/closes with
+ * `ui.settingsPanel` (the canvas ☰ drives it). Returns a leak-free teardown.
+ */
+declare function mountInfoMenu(app: Application, ui: OpenUI): () => void;
+
 interface BootErrorOptions {
     title?: string;
     message?: string;
@@ -803,4 +817,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, showBootError, svgSpinSkin };
+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 };

package/dist/index.d.ts

@@ -625,6 +625,13 @@ interface ReplayInfo {
 }
 interface HudOptions extends OpenUIPixiOptions {
     hooks?: HostHooks;
+    /**
+     * Render the library's white HTML **info menu** (Settings · Paytable · Rules) — the Figma
+     * design, driven by `spec.menu`, label-left / control-right, fully modular + localized —
+     * instead of the in-canvas Pixi menu. Default `true`. `menu: false` opts out of BOTH (the
+     * host supplies its own menu). Set `infoMenu: false` to keep the old Pixi menu.
+     */
+    infoMenu?: boolean;
 }
 /**
  * The complete-HUD handle returned by `mountHud`. Wraps the headless OpenUI + the
@@ -674,8 +681,9 @@ interface BootedHud {
      *  amounts format with `info.currency` (defaults to the balance currency). Also flips
      *  the HUD into replay mode (badge + lock). */
     replayStart(info: ReplayInfo, onPlay?: () => void): void;
-    /** At the END of a replay, show a "Replay" button (open-ui styled) that re-runs it. */
-    replayEnd(onReplay: () => void): void;
+    /** At the END of a replay, show the SAME facts + a "Replay" button that re-runs it.
+     *  Non-dismissible (no ✕ / backdrop close) — it's a strict modal → round → modal loop. */
+    replayEnd(info: ReplayInfo, onReplay: () => void): void;
     /** Show a buy-feature confirm modal (Cancel / Confirm). Texts are literal-or-key. */
     confirmBuy(opts: {
         title?: string;
@@ -721,6 +729,12 @@ interface BootedHud {
  */
 declare function mountHud(app: Application, spec?: UISpec, opts?: HudOptions): BootedHud;
 
+/**
+ * Mount the info menu overlay for a booted `OpenUI`. Reads `ui.spec.menu`; opens/closes with
+ * `ui.settingsPanel` (the canvas ☰ drives it). Returns a leak-free teardown.
+ */
+declare function mountInfoMenu(app: Application, ui: OpenUI): () => void;
+
 interface BootErrorOptions {
     title?: string;
     message?: string;
@@ -803,4 +817,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, showBootError, svgSpinSkin };
+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 };

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 { Text, Graphics, Container, Rectangle } from 'pixi.js';
-import { createUI, composeMenu, buildPanel, formatAmount } from '@open-slot-ui/core';
+import { LOCALE_LABELS, createUI, composeMenu, buildPanel, formatAmount } from '@open-slot-ui/core';
 
 var RISE = 26;
 var STAGGER = 38;
@@ -278,16 +278,327 @@ var PanelBodyView = class extends ControlView {
     super.dispose();
   }
 };
+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) {
+  const out = [];
+  for (const b of blocks) {
+    switch (b.kind) {
+      case "text":
+        out.push(`<p>${rich(tr(b.text))}</p>`);
+        break;
+      case "heading":
+        out.push(`<div class="ohm-sec"><span>${esc(tr(b.text))}</span></div>`);
+        break;
+      case "subheading":
+        out.push(`<h4 class="ohm-subh">${esc(tr(b.text))}</h4>`);
+        break;
+      case "legal":
+        out.push(`<p class="ohm-legal">${rich(tr(b.text))}</p>`);
+        break;
+      case "divider":
+        out.push('<hr class="ohm-hr">');
+        break;
+      case "image":
+        out.push(`<img class="ohm-feature" alt="${esc(tr(b.alt ?? ""))}" src="${b.src}" loading="lazy">`);
+        break;
+      case "media": {
+        const img = `<img alt="${esc(tr(b.alt ?? ""))}" src="${b.src}" loading="lazy">`;
+        const body = `<div class="ohm-media-body">${b.title ? `<h4>${esc(tr(b.title))}</h4>` : ""}<p>${rich(tr(b.text))}</p></div>`;
+        out.push(`<div class="ohm-media ohm-media--${b.side ?? "left"}">${img}${body}</div>`);
+        break;
+      }
+      case "cards": {
+        const cards = b.items.map((it) => `<div class="ohm-fcard">${it.icon ? `<img src="${it.icon}" alt="" loading="lazy">` : ""}<h5>${esc(tr(it.title))}</h5>${it.text ? `<p>${rich(tr(it.text))}</p>` : ""}</div>`).join("");
+        out.push(`<div class="ohm-cards">${cards}</div>`);
+        break;
+      }
+      case "paytable":
+        out.push(`<div class="ohm-grid">${renderPaytable(b.rows, tr)}</div>`);
+        break;
+      case "table": {
+        const head = b.columns?.length ? `<thead><tr>${b.columns.map((c) => `<th>${esc(tr(c))}</th>`).join("")}</tr></thead>` : "";
+        const body = b.rows.map((r) => `<tr>${r.map((c) => `<td>${esc(tr(c))}</td>`).join("")}</tr>`).join("");
+        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>`);
+        break;
+      }
+      case "steps": {
+        const items = b.items.map((s) => `<li>${rich(tr(s))}</li>`).join("");
+        out.push(b.ordered ? `<ol class="ohm-steps">${items}</ol>` : `<ul class="ohm-steps">${items}</ul>`);
+        break;
+      }
+      case "callout":
+        out.push(`<div class="ohm-callout ohm-callout--${b.tone ?? "info"}">${b.title ? `<b>${esc(tr(b.title))}</b>` : ""}<p>${rich(tr(b.text))}</p></div>`);
+        break;
+      case "group":
+        out.push(`<div class="ohm-group">${b.title ? `<h4 class="ohm-subh">${esc(tr(b.title))}</h4>` : ""}${renderBlocks(b.children, tr)}</div>`);
+        break;
+    }
+  }
+  return out.join("\n");
+}
+function renderPaytable(rows, tr) {
+  return rows.map((r) => {
+    const icon = r.icon ? `<img class="ohm-symimg" src="${r.icon}" alt="" loading="lazy">` : `<span class="ohm-emoji">${esc(tr(r.symbol ?? ""))}</span>`;
+    const lines = r.payouts.split("\n").map((line) => {
+      const i = line.indexOf(":");
+      return i >= 0 ? `<div><b>${esc(line.slice(0, i))}</b><span>${esc(line.slice(i + 1))}</span></div>` : `<div><span>${esc(line)}</span></div>`;
+    }).join("");
+    return `<div class="ohm-sym">${icon}<div class="ohm-pay">${lines}</div></div>`;
+  }).join("");
+}
+function renderSettingBlock(b, tr) {
+  const hint = "hint" in b && b.hint ? `<div class="ohm-hint">${esc(tr(b.hint))}</div>` : "";
+  const label = "label" in b && b.label ? esc(tr(b.label)) : "";
+  switch (b.kind) {
+    case "toggle":
+      return `<div class="ohm-setting"><label class="ohm-row ohm-check"><span>${label}</span><span class="ohm-ctl"><input data-set="${b.id}" type="checkbox"${b.on ? " checked" : ""}></span></label>${hint}</div>`;
+    case "slider":
+      return `<div class="ohm-setting"><label class="ohm-row"><span>${label}</span><input data-set="${b.id}" type="range" min="0" max="1" step="0.01" value="${b.initial ?? 1}"></label>${hint}</div>`;
+    case "select": {
+      const opts = b.options.map((o, i) => `<option value="${esc(o.value)}"${i === (b.index ?? 0) ? " selected" : ""}>${esc(tr(o.label))}</option>`).join("");
+      return `<div class="ohm-setting"><label class="ohm-row"><span>${label}</span><select data-set="${b.id}">${opts}</select></label>${hint}</div>`;
+    }
+    default:
+      return "";
+  }
+}
+function mountInfoMenu(app, ui) {
+  const menu = ui.spec?.menu ?? {};
+  const tr = (k) => ui.t(k);
+  const disposers = [];
+  const host2 = document.createElement("div");
+  host2.className = "ohm-root";
+  const vars = {
+    "--accent": "#d99000",
+    "--accent-text": "#1a1200",
+    "--surface": "#ffffff",
+    "--surface-alt": "#eef1f6",
+    "--text": "#181b20",
+    "--text-dim": "#5b6472",
+    "--card-radius": "8px",
+    "--font": ui.theme.type.family
+  };
+  for (const [k, v] of Object.entries(vars)) host2.style.setProperty(k, v);
+  const locales = ui.spec?.locale ? Array.from(/* @__PURE__ */ new Set([ui.spec.locale.locale, ...Object.keys(ui.spec.locale.messages)])) : [];
+  const langRow = locales.length > 1 ? `<div class="ohm-setting"><label class="ohm-row"><span>${tr("Language")}</span><select id="ohm-lang">${locales.map((c) => `<option value="${c}"${c === ui.locale.get() ? " selected" : ""}>${esc(LOCALE_LABELS[c] ?? c)}</option>`).join("")}</select></label></div>` : "";
+  const turbo = ui.turbo;
+  const cap = (m) => m.charAt(0).toUpperCase() + m.slice(1);
+  const turboCtl = turbo.modeCount <= 2 ? `<span class="ohm-ctl"><input id="ohm-turbo" type="checkbox"></span>` : `<span class="ohm-ctl"><div class="ohm-segmented" id="ohm-turbo-seg">${turbo.modes.map((m, i) => `<button class="ohm-seg" data-i="${i}">${esc(tr(cap(m)))}</button>`).join("")}</div></span>`;
+  const customSettings = (menu.settings ?? []).map((b) => renderSettingBlock(b, tr)).join("");
+  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 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>
+    <button class="ohm-x" data-close aria-label="Close">\u2715</button>
+    <div class="ohm-card" role="dialog" aria-modal="true">
+      <div class="ohm-body">
+        ${banner}
+        <div class="ohm-sec"><span>${tr("Settings")}</span></div>
+        <div class="ohm-setting"><label class="ohm-row ohm-check"><span>${tr("Sound")}</span><span class="ohm-ctl"><input id="ohm-sound" type="checkbox" checked></span></label><div class="ohm-hint">${tr("Turn all game sound and music on or off.")}</div></div>
+        ${soundSliders}
+        ${langRow}
+        <div class="ohm-setting"><div class="ohm-row ohm-check"><span>${tr("Quick spin")}</span>${turboCtl}</div><div class="ohm-hint">${tr("Speed up rounds by shortening the animation. The result is identical.")}</div></div>
+        ${customSettings}
+        ${paytableHtml ? `<div class="ohm-sec"><span>${tr("Paytable")}</span></div>${paytableHtml}` : ""}
+        ${rulesHtml ? `<div class="ohm-sec"><span>${tr("Rules")}</span></div><div class="ohm-rules" id="ohm-rules">${rulesHtml}</div>` : ""}
+      </div>
+    </div>`;
+  const style = document.createElement("style");
+  style.textContent = OHM_CSS;
+  host2.appendChild(style);
+  document.body.appendChild(host2);
+  const $ = (sel) => host2.querySelector(sel);
+  const sound = $("#ohm-sound");
+  if (sound) {
+    sound.checked = !ui.muted.get();
+    sound.addEventListener("change", () => ui.setMuted(!sound.checked));
+    disposers.push(ui.muted.subscribe((m) => {
+      sound.checked = !m;
+    }));
+  }
+  host2.querySelectorAll("[data-vol]").forEach((el) => {
+    const which = el.dataset.vol;
+    el.addEventListener("input", () => {
+      const v = Number(el.value);
+      if (which === "music") ui.musicSlider.setNormalized(v);
+      else if (which === "sfx") ui.sfxSlider.setNormalized(v);
+      else {
+        ui.musicSlider.setNormalized(v);
+        ui.sfxSlider.setNormalized(v);
+      }
+    });
+    const src = which === "music" ? ui.musicSlider : ui.sfxSlider;
+    disposers.push(src.value.subscribe((v) => {
+      el.value = String(v);
+    }));
+  });
+  const lang = $("#ohm-lang");
+  if (lang) lang.addEventListener("change", () => ui.setLocale(lang.value));
+  if (turbo.modeCount <= 2) {
+    const tg = $("#ohm-turbo");
+    if (tg) {
+      tg.checked = turbo.isOn;
+      tg.addEventListener("change", () => turbo.set(tg.checked));
+      disposers.push(turbo.index.subscribe(() => {
+        tg.checked = turbo.isOn;
+      }));
+    }
+  } else {
+    const segs = Array.from(host2.querySelectorAll(".ohm-seg"));
+    segs.forEach((b) => b.addEventListener("click", () => turbo.setIndex(Number(b.dataset.i))));
+    const sync = () => segs.forEach((b, i) => b.classList.toggle("active", i === turbo.index.get()));
+    disposers.push(turbo.index.subscribe(sync));
+    sync();
+  }
+  host2.querySelectorAll("[data-set]").forEach((el) => {
+    const id = el.dataset.set;
+    if (el instanceof HTMLInputElement && el.type === "checkbox") el.addEventListener("change", () => ui.bus.emit("toggled", { id, on: el.checked }));
+    else if (el instanceof HTMLInputElement && el.type === "range") el.addEventListener("input", () => ui.bus.emit("valueChanged", { id, value: Number(el.value) }));
+    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()));
+  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);
+        if (lang) lang.value = ui.locale.get();
+      }
+    })
+  );
+  disposers.push(ui.settingsPanel.state.subscribe(() => host2.classList.toggle("open", ui.settingsPanel.isOpen)));
+  return () => {
+    for (const d of disposers.splice(0)) d();
+    host2.remove();
+  };
+}
+var OHM_CSS = `
+.ohm-root { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; font-family: var(--font); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
+.ohm-root.open { opacity: 1; pointer-events: auto; }
+.ohm-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; }
+.ohm-root.open .ohm-backdrop { background: rgba(8,6,4,.34); backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); }
+.ohm-card { position: relative; width: min(92%, 1100px); max-height: 86vh; display: flex; flex-direction: column; background: var(--surface); color: var(--text); border: 1.5px solid #000; border-radius: var(--card-radius); box-shadow: 0 30px 80px rgba(0,0,0,.5); overflow: hidden; transform: translateY(8px) scale(.99); transition: transform .18s ease; }
+.ohm-root.open .ohm-card { transform: none; }
+.ohm-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; }
+.ohm-x:hover { transform: scale(1.08); background: rgba(18,14,10,.95); }
+.ohm-body { padding: 24px 26px 26px; overflow-y: scroll; }
+.ohm-body::-webkit-scrollbar { width: 18px; }
+.ohm-body::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
+.ohm-body::-webkit-scrollbar-thumb { background-color: #111; border: 6px solid transparent; background-clip: padding-box; border-radius: 999px; min-height: 44px; }
+.ohm-body::-webkit-scrollbar-thumb:hover { background-color: #000; }
+.ohm-logo { display: block; margin: 6px auto 18px; max-width: 64%; height: auto; }
+.ohm-logo-text { margin: 6px 0 18px; text-align: center; font-size: 30px; font-weight: 900; letter-spacing: 1px; color: var(--text); }
+.ohm-sec { display: flex; align-items: center; gap: 14px; margin: 26px 0 14px; color: var(--text); font-weight: 800; letter-spacing: 1px; }
+.ohm-sec::before, .ohm-sec::after { content: ""; flex: 1; height: 2px; background: color-mix(in srgb, var(--text) 80%, transparent); border-radius: 2px; }
+.ohm-root *, .ohm-root *::before, .ohm-root *::after { box-sizing: border-box; }
+.ohm-row { display: flex; align-items: center; gap: 16px; margin: 14px 0; font-weight: 700; }
+.ohm-setting { margin: 14px 0; }
+.ohm-setting .ohm-row { margin: 0; }
+.ohm-hint { margin: 3px 0 0; font-size: 12.5px; font-weight: 500; color: var(--text-dim); }
+.ohm-row > span:first-child { flex: none; min-width: 110px; }
+.ohm-row input[type=range] { flex: 1; min-width: 0; max-width: min(440px, 60dvw); accent-color: var(--accent); height: 6px; }
+.ohm-row select { flex: 1; min-width: 0; max-width: min(440px, 60dvw); padding: 11px 14px; border-radius: 4px; border: 2px solid var(--accent); background: var(--surface-alt); color: var(--text); font-weight: 700; font-size: 15px; cursor: pointer; }
+.ohm-row select option { background: var(--surface); color: var(--text); font-weight: 600; }
+.ohm-row select option:checked { background: var(--accent); color: var(--accent-text); }
+.ohm-ctl { flex: 1; min-width: 0; max-width: min(440px, 60dvw); display: flex; align-items: center; justify-content: flex-end; }
+.ohm-check input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 50px; height: 28px; border-radius: 999px; background: color-mix(in srgb, var(--text-dim) 38%, transparent); position: relative; cursor: pointer; transition: background .15s; flex: none; }
+.ohm-check input[type=checkbox]:checked { background: var(--accent); }
+.ohm-check input[type=checkbox]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
+.ohm-check input[type=checkbox]:checked::before { left: 25px; }
+.ohm-segmented { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-alt); border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text-dim) 30%, transparent); }
+.ohm-seg { border: 0; background: transparent; color: var(--text-dim); font-weight: 700; font-size: 14px; padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: background .12s, color .12s; }
+.ohm-seg.active { background: var(--accent); color: var(--accent-text); }
+.ohm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
+.ohm-sym { display: flex; align-items: center; gap: 16px; padding: 6px 4px; }
+.ohm-emoji { font-size: 48px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
+.ohm-symimg { width: 56px; height: 56px; object-fit: contain; flex: none; }
+.ohm-pay { font-size: 13px; line-height: 1.6; }
+.ohm-pay div { display: flex; gap: 6px; }
+.ohm-pay b { min-width: 42px; }
+.ohm-pay span { color: var(--accent); font-weight: 700; }
+.ohm-body p { color: var(--text-dim); line-height: 1.6; }
+.ohm-body p b { color: var(--text); }
+.ohm-feature { display: block; width: 100%; height: auto; margin: 10px 0; }
+.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-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); }
+.ohm-callout--warning b { color: #b07d09; }
+.ohm-subh { margin: 22px 0 8px; font-size: 15px; font-weight: 800; letter-spacing: .5px; color: var(--text); }
+.ohm-legal { font-size: 12px; line-height: 1.6; color: var(--text-dim); opacity: .85; }
+.ohm-hr { border: 0; border-top: 1px solid color-mix(in srgb, var(--text-dim) 30%, transparent); margin: 18px 0; }
+.ohm-media { display: flex; align-items: center; gap: 18px; margin: 14px 0; }
+.ohm-media--right { flex-direction: row-reverse; }
+.ohm-media > img { width: 40%; max-width: 320px; height: auto; flex: none; }
+.ohm-media-body { flex: 1; }
+.ohm-media-body h4 { margin: 0 0 6px; font-size: 16px; color: var(--text); }
+.ohm-media-body p { margin: 0; }
+.ohm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0; }
+.ohm-fcard { padding: 8px 6px; text-align: center; }
+.ohm-fcard img { display: block; width: 48px; height: 48px; margin: 0 auto 8px; }
+.ohm-fcard h5 { margin: 0 0 4px; font-size: 14px; color: var(--text); }
+.ohm-fcard p { margin: 0; font-size: 12px; line-height: 1.5; }
+.ohm-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
+.ohm-table th { text-align: left; padding: 8px 10px; font-weight: 800; color: var(--text); border-bottom: 2px solid color-mix(in srgb, var(--text-dim) 35%, transparent); }
+.ohm-table td { padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--text-dim) 18%, transparent); }
+.ohm-table td:first-child { color: var(--text); font-weight: 700; }
+.ohm-table td:not(:first-child) { color: var(--accent); font-weight: 700; }
+.ohm-steps { margin: 12px 0; padding-left: 22px; color: var(--text-dim); line-height: 1.7; }
+.ohm-steps li { margin: 5px 0; }
+.ohm-steps b { color: var(--text); }
+.ohm-group { margin: 8px 0; }
+`;
+
+// src/mountHud.ts
+function showReplayModal(ui, info, buttonKey, onSelect) {
+  const cur = info.currency ?? ui.balance.currency.get();
+  const money = (n) => formatAmount(n, cur);
+  ui.showNotice(
+    [
+      { kind: "heading", id: "openui-replay-h", text: "openui.replay.title" },
+      {
+        kind: "stat-grid",
+        id: "openui-replay-g",
+        items: [
+          { 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: money(info.amount) }
+        ]
+      }
+    ],
+    [{ label: buttonKey, variant: "primary", onSelect: () => {
+      ui.hideNotice();
+      onSelect();
+    } }],
+    { blocking: true }
+  );
+}
 function mountHud(app, spec = {}, opts = {}) {
-  const { hooks, ...pixiOpts } = opts;
+  const { hooks, infoMenu, ...pixiOpts } = opts;
   const ui = createUI(spec, hooks);
+  const useInfoMenu = infoMenu !== false && 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 ? false : composeMenu(spec.menu, { locales, localeSelectId: spec.localeSelectId, rulesFallback: spec.rules });
+  const menu = pixiOpts.menu === false || useInfoMenu ? false : composeMenu(spec.menu, { locales, localeSelectId: spec.localeSelectId, rulesFallback: spec.rules });
   if (menu && spec.game && (spec.game.name || spec.game.version)) {
     menu.push({ kind: "legal", id: "openui-game-info", text: [spec.game.name, spec.game.version ? `v${spec.game.version}` : ""].filter(Boolean).join("  \xB7  ") });
   }
   const pixi = new OpenUIPixi(ui, { ...pixiOpts, menu });
   pixi.mount(app);
+  const disposeInfoMenu = useInfoMenu ? mountInfoMenu(app, ui) : void 0;
   const extra = [];
   if (spec.panels?.length) {
     for (const ps of spec.panels) {
@@ -308,6 +619,7 @@ function mountHud(app, spec = {}, opts = {}) {
   });
   const teardown = () => {
     offRelayout();
+    disposeInfoMenu?.();
     for (const v of extra) v.dispose();
     extra.length = 0;
     pixi.unmount();
@@ -343,30 +655,10 @@ function mountHud(app, spec = {}, opts = {}) {
     setReplay: (on2) => ui.setReplay(on2),
     replayStart: (info, onPlay) => {
       ui.setReplay(true);
-      const cur = info.currency ?? ui.balance.currency.get();
-      const money = (n) => formatAmount(n, cur);
-      ui.showNotice(
-        [
-          { kind: "heading", id: "openui-replay-h", text: "openui.replay.title" },
-          {
-            kind: "stat-grid",
-            id: "openui-replay-g",
-            items: [
-              { 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: money(info.amount) }
-            ]
-          }
-        ],
-        [{ label: "openui.replay.play", variant: "primary", onSelect: onPlay }]
-      );
+      showReplayModal(ui, info, "openui.replay.play", () => onPlay?.());
     },
-    replayEnd: (onReplay) => {
-      ui.showNotice(
-        [{ kind: "heading", id: "openui-replay-end", text: "openui.replay.title" }],
-        [{ label: "openui.replay.again", variant: "primary", onSelect: onReplay }]
-      );
+    replayEnd: (info, onReplay) => {
+      showReplayModal(ui, info, "openui.replay.again", onReplay);
     },
     confirmBuy: (o) => {
       if (ui.isDisabled("buyFeature")) return;
@@ -415,7 +707,7 @@ function mountHud(app, spec = {}, opts = {}) {
 
 // src/bootError.ts
 var host = null;
-var esc = (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.";
@@ -429,10 +721,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">${esc(title)}</h1>
-      <p class="openui-be-msg">${esc(message)}</p>
-      ${opts.detail ? `<p class="openui-be-detail">${esc(opts.detail)}</p>` : ""}
-      ${showReload ? `<button class="openui-be-reload" type="button">${esc(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;
@@ -460,6 +752,6 @@ function hideBootError() {
   host = null;
 }
 
-export { PanelBodyView, PanelView, PopoverView, hideBootError, mountHud, showBootError };
+export { PanelBodyView, PanelView, PopoverView, hideBootError, mountHud, mountInfoMenu, showBootError };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map