@energy8platform/shell 0.2.0 → 0.2.3

package/dist/html.esm.js

@@ -1350,7 +1350,7 @@ class KeyboardController {
 
 // AUTO-GENERATED by scripts/gen-version.mjs — do not edit. Mirrors package.json "version".
 /** The @energy8platform/shell package version, stamped into the game-info footer. */
-const PACKAGE_VERSION = '0.2.0';
+const PACKAGE_VERSION = '0.2.3';
 
 /** Apply defaults to the raw config (the mount target lives on the renderer, not here). */
 function resolveConfig(config) {
@@ -2018,6 +2018,17 @@ const SHELL_CSS = SHELL_FONT_CSS + SHELL_DIGIT_FONT_CSS + `
 #${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-bb-betval { min-width:clamp(50px,14cqh,66px); }
 #${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-bb-betval b { font-size:clamp(9px,2.5cqh,11px); }
 #${SHELL_ROOT_ID} [data-ge="buybonus-overlay"] .ge-bb-betval span { font-size:clamp(5px,1.25cqh,6px); }
+/* Popout S (very short landscape, e.g. 400×225): the height-fit shrank the cards' descriptions to an
+   unreadable ~4px floor with nothing to scroll. Below a ~340px frame height, drop the shrink-to-fit and
+   switch the (non-mobile) buy-bonus to a READABLE vertical stack that scrolls vertically — like mobile.
+   Query the overlay's ge-bb-frame size container so it tracks the popout frame, not the browser window. */
+@container ge-bb-frame (max-height: 340px) {
+  #${SHELL_ROOT_ID}:not(.ge-mobile) [data-ge="buybonus-overlay"] .ge-ov-scroll { overflow-y:auto; }
+  #${SHELL_ROOT_ID}:not(.ge-mobile) [data-ge="buybonus-overlay"] .ge-ov-body { justify-content:flex-start; }
+  #${SHELL_ROOT_ID}:not(.ge-mobile) .ge-bb-grid { flex-direction:column; align-items:center; overflow:visible; }
+  #${SHELL_ROOT_ID}:not(.ge-mobile) .ge-bb-grid .ge-bonus-card {
+    flex:0 0 auto; width:18em; font-size:min(12px, calc(84cqw / 18)); }
+}
 
 /* ═══ desktop control bar — one continuous dark panel; white-disc buttons; BUY BONUS outside-left ═══ */
 /* the dark surface fills the row width (BUY BONUS sits outside, to its left) */
@@ -2569,7 +2580,7 @@ function createOverlay(opts) {
 }
 
 function openSettingsModal(host) {
-    const { root, body } = createOverlay({ title: host.t('Settings'), onClose: () => root.remove() });
+    const { root, body } = createOverlay({ title: host.t('Settings'), onClose: () => host.actions.closeOverlay() });
     root.dataset.ge = 'settings-modal';
     // Sound on/off — backed by the shell's shared `soundOn` state so this toggle and the Shift+M
     // hotkey stay in sync; `setSound` emits `settingChange({ key: 'sound' })` and refreshes the icon.
@@ -2640,7 +2651,7 @@ const SVG_NS = 'http://www.w3.org/2000/svg';
 function openGameInfoModal(host) {
     const { root, body, scroll } = createOverlay({
         title: host.t('Game info'),
-        onClose: () => root.remove(),
+        onClose: () => host.actions.closeOverlay(),
         onBack: () => { root.remove(); host.actions.openSettings(); },
     });
     root.dataset.ge = 'info-modal';
@@ -3486,14 +3497,17 @@ function openAutoplayModal(host) {
 
 /** Build a generic, externally-triggered modal (title + body text + optional action buttons),
  *  on the shared card-modal chrome. Each action runs its `on` then closes; the ✕ (if
- *  `availableClose`) and the actions are the only ways to dismiss. See GameShell.openModal. */
-function buildModal(opts) {
+ *  `availableClose`) and the actions are the only ways to dismiss. See GameShell.openModal.
+ *  Dismissals route through host.actions.closeOverlay() so the controller clears its overlay handle
+ *  (a bare root.remove() leaves the handle stale → keydowns keep routing to a torn-down layer). */
+function buildModal(host, opts) {
+    const close = () => host.actions.closeOverlay();
     const ui = createCardModal({
         ge: 'modal',
         title: opts.title,
         closable: opts.availableClose,
         blur: opts.blurLevel,
-        onClose: () => ui.root.remove(),
+        onClose: close,
     });
     const text = document.createElement('p');
     text.className = 'ge-modal-text';
@@ -3514,7 +3528,7 @@ function buildModal(opts) {
             }
             else
                 btn.classList.add('ge-modal-btn--ghost');
-            btn.addEventListener('click', () => { a.on?.(); ui.root.remove(); });
+            btn.addEventListener('click', () => { a.on?.(); close(); });
             actions.appendChild(btn);
         }
         ui.card.appendChild(actions);
@@ -3725,7 +3739,7 @@ class HtmlRenderer {
                 return { root };
             }
             case 'modal': {
-                const root = buildModal(req.opts);
+                const root = buildModal(this.host, req.opts);
                 return { root, onKey: req.opts.onKey };
             }
         }