@underpostnet/cyberia 3.3.76 → 3.4.0

package/src/client/components/core/Modal.js

@@ -129,6 +129,9 @@ class Modal {
   /** @type {Object.<string, ModalDataEntry>} */
   static Data = {};
 
+  /** @type {Function|null} Recomputes visibility of the search/home toggle button; set once the slide-menu modal renders it. */
+  static updateBarCustomVisibility = null;
+
   /**
    * Bottom offset of the slide-menu area for the given options.
    * @param {ModalRenderOptions} options
@@ -228,6 +231,10 @@ class Modal {
     const originHeightTopBar = 50;
     options.heightBottomBar = 0;
     options.heightTopBar = 100;
+    // A view sits under its slide menu's bars, so it follows that menu's bar mode unless it
+    // names one — otherwise a 'top-bottom-bar' shell opens every view 100px down instead of 50px.
+    if (options && !options.barMode && options.slideMenu && Modal.Data[options.slideMenu]?.options?.barMode)
+      options.barMode = Modal.Data[options.slideMenu].options.barMode;
     if (options && options.barMode && options.barMode === 'top-bottom-bar') {
       options.heightTopBar = 50;
       options.heightBottomBar = 50;
@@ -297,6 +304,9 @@ class Modal {
               route: options.route,
               RouterInstance: options.RouterInstance,
             });
+            // Path just changed away from (or back to) home — recompute the search/home
+            // toggle's visibility instead of leaving it stuck on its last computed state.
+            setTimeout(() => Modal.updateBarCustomVisibility?.());
           }
 
           break;
@@ -319,10 +329,15 @@ class Modal {
                       padding: 5px;
                     }
                     .default-slide-menu-top-bar-fix-title-container-text {
-                      font-size: 26px;
-                      top: 8px;
                       color: ${darkTheme ? '#ffffff' : '#000000'};
                     }
+                    /* Themes size and offset the title for the 100px banner with !important;
+                       the 50px one has to win over them or the title spills into the menu. */
+                    .slide-menu-top-bar-fix .default-slide-menu-top-bar-fix-title-container-text {
+                      font-size: 26px !important;
+                      top: 8px !important;
+                      left: 0px !important;
+                    }
                   </style>`;
                 } else {
                   style = html`<style>
@@ -415,17 +430,41 @@ class Modal {
               },
               { key: `slide-menu-${idModal}` },
             );
-            // The fixed hamburger only opens the menu: it shows while the top bar is collapsed
-            // and the menu is closed. An open menu (50px or full) carries its own controls and
-            // already pushes the views aside, so neither the button nor the title padding apply.
+            // The fixed hamburger stands in for the top bar's while it is collapsed, opening and
+            // closing the menu alike. Its 50px corner is kept clear two ways: the menu content is
+            // padded down while it shows, and a view title is padded right only while the menu
+            // is closed — an open menu (50px or full) already pushes the views aside.
             const syncFixedMenuButton = () => {
               const fixed = s(`.main-btn-menu-top-fixed-container`);
               if (!fixed) return;
               const collapsed = s(`.main-body-btn-ui-close`) && s(`.main-body-btn-ui-close`).classList.contains('hide');
-              const active = collapsed && Modal.Data[idModal][options.mode].width === 0;
-              fixed.classList[active ? 'remove' : 'add']('hide');
-              s('body').classList[active ? 'add' : 'remove']('main-btn-menu-top-fixed-active');
+              const menuClosed = Modal.Data[idModal][options.mode].width === 0;
+              fixed.classList[collapsed ? 'remove' : 'add']('hide');
+              s('body').classList[collapsed ? 'add' : 'remove']('main-btn-menu-top-fixed-active');
+              s('body').classList[collapsed && menuClosed ? 'add' : 'remove']('main-btn-menu-top-fixed-title-offset');
+            };
+            // Hides the search/home toggle only while it's showing the "close" (home) icon
+            // AND the body is already scrolled to top — nothing left for it to do there.
+            // Reactive: called on every scroll tick and state change, so it restores to its
+            // normal visible state the moment either condition stops holding.
+            const updateBarCustomVisibility = () => {
+              const barCustom = s(`.main-body-btn-bar-custom`);
+              if (!barCustom || !options?.slideMenuTopBarBannerFix) return;
+              const mainBody = s(`.main-body`);
+              const atTop = !!mainBody && mainBody.scrollTop <= 0;
+              const bannerFix = s(`.slide-menu-top-bar-fix`);
+              const bannerVisible = !!bannerFix && parseInt(bannerFix.style.top, 10) >= 0;
+              const isHomePath = location.pathname === getProxyPath();
+              // Never hide while the open (magnifying-glass) icon is showing — that's the
+              // idle "click to search" state, not the "close/home" state this hide targets.
+              const openIconHidden =
+                !!s(`.main-body-btn-ui-bar-custom-open`) &&
+                s(`.main-body-btn-ui-bar-custom-open`).classList.contains('hide');
+              barCustom.classList[bannerVisible && isHomePath && atTop && openIconHidden ? 'add' : 'remove']('hide');
             };
+            // Exposed statically so other code paths (e.g. opening a view/route) can force a
+            // recompute — otherwise the hidden state goes stale once the path stops being home.
+            Modal.updateBarCustomVisibility = updateBarCustomVisibility;
             barConfig.buttons.menu.onClick = () => {
               Modal.Data[idModal][options.mode].width = slideMenuWidth;
               s(`.btn-menu-${idModal}`).classList.add('hide');
@@ -450,6 +489,10 @@ class Modal {
               }
               syncFixedMenuButton();
               Responsive.triggerChanged(`slide-menu-${idModal}`);
+              if (options.onExtendMenu) options.onExtendMenu();
+              Object.keys(this.Data[idModal].onExtendMenuListener).map((keyListener) =>
+                this.Data[idModal].onExtendMenuListener[keyListener](),
+              );
             };
             barConfig.buttons.close.onClick = () => {
               Modal.Data[idModal][options.mode].width = 0;
@@ -474,6 +517,10 @@ class Modal {
               }
               syncFixedMenuButton();
               Responsive.triggerChanged(`slide-menu-${idModal}`);
+              if (options.onCollapseMenu) options.onCollapseMenu();
+              Object.keys(this.Data[idModal].onCollapseMenuListener).map((keyListener) =>
+                this.Data[idModal].onCollapseMenuListener[keyListener](),
+              );
             };
             transition += `, width 0.3s`;
 
@@ -530,14 +577,11 @@ class Modal {
                 Modal.actionBtnCenter();
               };
 
-              // Fixed top-left hamburger, shown only while the top bar is collapsed
-              // (main-body-btn-ui-close hidden). Not needed for 'top-bottom-bar' which
-              // keeps its own center action button in the bottom bar.
-              if (
-                idModal === 'modal-menu' &&
-                options.mode !== 'slide-menu-right' &&
-                options.barMode !== 'top-bottom-bar'
-              ) {
+              // Fixed top-left hamburger, shown only while the bars are collapsed
+              // (main-body-btn-ui-close hidden): it stands in for the left menu hamburger the
+              // collapse hid — the top bar's, or the bottom bar's under 'top-bottom-bar'. A right
+              // menu keeps its floating .main-body-btn-menu beside the menu edge instead.
+              if (idModal === 'modal-menu' && options.mode !== 'slide-menu-right') {
                 append(
                   'body',
                   html`
@@ -548,17 +592,24 @@ class Modal {
                       ${await BtnIcon.instance({
                         style: `height: 100%`,
                         class: `in fll main-btn-menu-top action-bar-box action-btn-center-top-fixed`,
-                        label: html`<div class="abs center">${barConfig.buttons.menu.label}</div>`,
+                        label: html`<div class="abs center">
+                          <span class="btn-bar-center-icon-close hide">${barConfig.buttons.close.label}</span>
+                          <span class="btn-bar-center-icon-menu">${barConfig.buttons.menu.label}</span>
+                        </div>`,
                       })}
                     </div>
                     <style>
+                      /* The menu content starts below the fixed hamburger while it shows. */
+                      body.main-btn-menu-top-fixed-active .html-${idModal} {
+                        padding-top: ${originHeightTopBar}px;
+                      }
                       /* View modals sit at top: 0 while the top bar is collapsed; keep their
                          title clear of the fixed hamburger. The padding eases at the same pace
                          the views slide so the title moves once, not a jump and a slide back. */
                       .title-main-modal {
                         transition: padding-left 0.3s;
                       }
-                      body.main-btn-menu-top-fixed-active .title-main-modal {
+                      body.main-btn-menu-top-fixed-title-offset .title-main-modal {
                         padding-left: ${originHeightTopBar}px;
                       }
                     </style>
@@ -578,19 +629,38 @@ class Modal {
                   s(`.main-body-btn-ui-bar-custom-open`).classList.remove('hide');
                   s(`.main-body-btn-ui-bar-custom-close`).classList.add('hide');
                   s(`.slide-menu-top-bar-fix`).style.top = '0px';
+
+                  setTimeout(async () => {
+                    setTimeout(() => {
+                      s(`.action-btn-home`).click();
+                    });
+                    const mainBody = s(`.main-body`);
+                    if (mainBody && mainBody.scrollTop > 0) {
+                      mainBody.scrollTo({ top: 0, behavior: 'smooth' });
+                    }
+                    updateBarCustomVisibility();
+                  });
                 } else {
                   s(`.main-body-btn-ui-bar-custom-open`).classList.add('hide');
                   s(`.main-body-btn-ui-bar-custom-close`).classList.remove('hide');
                   s(`.slide-menu-top-bar-fix`).style.top = '-100px';
                   s(`.top-bar-search-box-container`).click();
                 }
+                updateBarCustomVisibility();
                 if (Modal.mobileModal()) {
                   btnCloseEvent();
                 }
               };
 
-              let _heightTopBar, _heightBottomBar, _topMenu;
+              let _heightTopBar, _heightBottomBar, _topMenu, _barsAnimationTimeout;
+              // The layout offsets below are set inline, so they only ease while this class is on.
+              const animateBarsToggle = () => {
+                s('body').classList.add('ui-bars-animating');
+                clearTimeout(_barsAnimationTimeout);
+                _barsAnimationTimeout = setTimeout(() => s('body').classList.remove('ui-bars-animating'), 300);
+              };
               s(`.main-body-btn-ui`).onclick = () => {
+                animateBarsToggle();
                 if (s(`.main-body-btn-ui-open`).classList.contains('hide')) {
                   s(`.main-body-btn-ui-open`).classList.remove('hide');
                   s(`.main-body-btn-ui-close`).classList.add('hide');
@@ -599,8 +669,7 @@ class Modal {
                   _topMenu = newInstance(s(`.modal-menu`).style.top);
                   options.heightTopBar = 0;
                   options.heightBottomBar = 0;
-                  s(`.slide-menu-top-bar`).classList.add('hide');
-                  s(`.bottom-bar`).classList.add('hide');
+                  s('body').classList.add('ui-bars-collapsed');
                   syncFixedMenuButton();
                   s(`.modal-menu`).style.top = '0px';
                   s(`.main-body-btn-container`).style.top = '50px';
@@ -615,8 +684,7 @@ class Modal {
                   options.heightBottomBar = _heightBottomBar;
                   s(`.modal-menu`).style.top = _topMenu;
                   s(`.main-body-btn-container`).style.top = `${options.heightTopBar + 50}px`;
-                  s(`.slide-menu-top-bar`).classList.remove('hide');
-                  s(`.bottom-bar`).classList.remove('hide');
+                  s('body').classList.remove('ui-bars-collapsed');
                   syncFixedMenuButton();
                   s(`.main-body`).style.top = `${options.heightTopBar}px`;
                   s(`.main-body`).style.height = `${windowGetH() - options.heightTopBar}px`;
@@ -640,13 +708,62 @@ class Modal {
                   );
                 }
               };
+              updateBarCustomVisibility();
               Modal.setTopBannerLink();
             });
 
             const inputSearchBoxId = `top-bar-search-box`;
             append(
               'body',
-              html` <div class="fix modal slide-menu-top-bar">
+              html`<style>
+                  /* Collapsing slides the bars off-screen instead of removing them; they turn
+                     invisible only once the slide ends, so no hidden control stays focusable. */
+                  .slide-menu-top-bar,
+                  .bottom-bar {
+                    transition:
+                      transform 0.3s ease,
+                      opacity 0.3s ease,
+                      visibility 0s linear 0s !important;
+                  }
+                  body.ui-bars-collapsed .slide-menu-top-bar {
+                    transform: translateY(-100%);
+                  }
+                  body.ui-bars-collapsed .bottom-bar {
+                    transform: translateY(100%) !important;
+                  }
+                  /* A bottom bar rendered inside the top bar leaves with it. */
+                  body.ui-bars-collapsed .slide-menu-top-bar .bottom-bar {
+                    transform: none !important;
+                  }
+                  body.ui-bars-collapsed .slide-menu-top-bar,
+                  body.ui-bars-collapsed .bottom-bar {
+                    visibility: hidden;
+                    pointer-events: none;
+                    transition:
+                      transform 0.3s ease,
+                      opacity 0.3s ease,
+                      visibility 0s linear 0.3s !important;
+                  }
+                  body.ui-bars-animating .main-body,
+                  body.ui-bars-animating .main-body-btn-container {
+                    transition:
+                      top 0.3s ease,
+                      left 0.3s ease,
+                      height 0.3s ease,
+                      opacity 0.3s ease !important;
+                  }
+                  @media (prefers-reduced-motion: reduce) {
+                    .slide-menu-top-bar,
+                    .bottom-bar,
+                    body.ui-bars-collapsed .slide-menu-top-bar,
+                    body.ui-bars-collapsed .bottom-bar,
+                    body.ui-bars-animating .main-body,
+                    body.ui-bars-animating .main-body-btn-container {
+                      transition: none !important;
+                    }
+                  }
+                </style>
+                <div class="fix modal slide-menu-top-bar">
                 <div
                   class="fl top-bar  ${options.barClass ? options.barClass : ''}"
                   style="height: ${originHeightTopBar}px;"
@@ -739,24 +856,28 @@ class Modal {
                     </div>`
                   : ''}
                 ${idModal === 'modal-menu' && options.mode !== 'slide-menu-right'
-                  ? html`<div
-                        class="abs main-btn-menu-top-container"
-                        style="bottom: 0px; left: 0px; z-index: 10; height: ${originHeightTopBar}px; width: ${originHeightTopBar}px"
-                      >
-                        ${await BtnIcon.instance({
-                          style: `height: 100%`,
-                          class: `in fll main-btn-menu-top action-bar-box action-btn-center-top`,
-                          label: html`<div class="abs center">
-                            <i class="far fa-square btn-bar-center-icon-square hide"></i>
-                            <span class="btn-bar-center-icon-close hide">${barConfig.buttons.close.label}</span>
-                            <span class="btn-bar-center-icon-menu">${barConfig.buttons.menu.label}</span>
-                          </div>`,
-                        })}
-                      </div>
+                  ? html`${options.barMode === 'top-bottom-bar'
+                        ? ''
+                        : html`<div
+                            class="abs main-btn-menu-top-container"
+                            style="bottom: 0px; left: 0px; z-index: 10; height: ${originHeightTopBar}px; width: ${originHeightTopBar}px"
+                          >
+                            ${await BtnIcon.instance({
+                              style: `height: 100%`,
+                              class: `in fll main-btn-menu-top action-bar-box action-btn-center-top`,
+                              label: html`<div class="abs center">
+                                <i class="far fa-square btn-bar-center-icon-square hide"></i>
+                                <span class="btn-bar-center-icon-close hide">${barConfig.buttons.close.label}</span>
+                                <span class="btn-bar-center-icon-menu">${barConfig.buttons.menu.label}</span>
+                              </div>`,
+                            })}
+                          </div>`}
 
                       <style>
+                        /* Under 'top-bottom-bar' the left menu hamburger is the bottom bar's, so the
+                           banner has no top bar button to clear. */
                         .a-link-top-banner {
-                          padding-left: 35px;
+                          padding-left: ${options.barMode === 'top-bottom-bar' ? 0 : 35}px;
                         }
                         .main-body-btn-bar-custom {
                           top: 50px !important;
@@ -780,7 +901,11 @@ class Modal {
               }
               s(`.main-btn-sign-up`).click();
             });
-            if (idModal === 'modal-menu' && options.mode !== 'slide-menu-right') {
+            if (
+              idModal === 'modal-menu' &&
+              options.mode !== 'slide-menu-right' &&
+              options.barMode !== 'top-bottom-bar'
+            ) {
               EventsUI.onClick(`.action-btn-center-top`, (e) => {
                 e.preventDefault();
                 Modal.actionBtnCenter();
@@ -1151,6 +1276,7 @@ class Modal {
                   } catch (e) {}
                 }
                 Modal.removeModal(searchBoxHistoryId);
+                updateBarCustomVisibility();
               };
               s('.top-bar-search-box').onblur = () => {
                 hoverFocusCtl.checkDismiss();
@@ -1376,10 +1502,15 @@ class Modal {
                   >
                     ${await BtnIcon.instance({
                       style: `height: 100%`,
-                      class: `in fl${
-                        options.mode === 'slide-menu-right' ? 'r' : 'l'
-                      } main-btn-menu action-bar-box action-btn-center ${
-                        options?.disableTools?.includes('center') ? 'hide' : ''
+                      // The left menu hamburger under 'top-bottom-bar'. Otherwise a left menu is
+                      // toggled from the top bar and a right menu from the floating
+                      // .main-body-btn-menu, so a copy here would only duplicate one of them.
+                      class: `in fl${options.mode === 'slide-menu-right' ? 'r' : 'l'} main-btn-menu action-bar-box action-btn-center ${
+                        options?.disableTools?.includes('center') ||
+                        options.mode === 'slide-menu-right' ||
+                        options.barMode !== 'top-bottom-bar'
+                          ? 'hide'
+                          : ''
                       }`,
                       label: html`
                         <div class="${contentIconClass}">
@@ -1653,6 +1784,8 @@ class Modal {
                   removeEvent();
                 }
               });
+              Scroll.setEvent('.main-body', () => updateBarCustomVisibility());
+              updateBarCustomVisibility();
               setTimeout(window.onresize);
               setRouterReady();
             });
@@ -2884,28 +3017,18 @@ const renderViewTitle = (
     </div>`;
 };
 
-const buildBadgeToolTipMenuOption = (id, sideKey = 'left') => {
-  const option = {
-    id: `tooltip-content-main-btn-${id}`,
-    text: `${Translate.instance(`${id}`)}`,
-    classList: 'tooltip-menu',
-    style: { top: `-40px` },
-  };
-  switch (sideKey) {
-    case 'left':
-      option.style.left = '60px';
-
-      break;
-
-    case 'right':
-      option.style.right = '60px';
-      break;
-
-    default:
-      break;
-  }
-  return option;
-};
+/**
+ * Tooltip badge for a collapsed menu button. ToolTip places it beside the button on the side
+ * the menu leaves free, read from the menu mode when it shows — so a shell never pins an
+ * offset that only holds for one of 'slide-menu' or 'slide-menu-right'.
+ * @param {string} id - Translation key and tooltip id suffix.
+ * @param {'left'|'right'} [sideKey] - Forces the side the menu sits on; omit to follow the mode.
+ */
+const buildBadgeToolTipMenuOption = (id, sideKey) => ({
+  id: `tooltip-content-main-btn-${id}`,
+  text: `${Translate.instance(`${id}`)}`,
+  classList: `tooltip-menu${sideKey ? ` tooltip-menu-side-${sideKey}` : ''}`,
+});
 
 const isSubMenuOpen = (subMenuId) => {
   return s(`.down-arrow-submenu-${subMenuId}`) && s(`.down-arrow-submenu-${subMenuId}`).style.rotate === '180deg';

package/src/client/components/core/SearchBox.js

@@ -832,7 +832,6 @@ class SearchBox {
 
       .search-result-route {
         padding: 10px 12px;
-        margin: 2px;
         text-align: left;
         min-height: 40px;
       }

package/src/client/components/core/ToolTip.js

@@ -58,6 +58,21 @@ class ToolTip {
       const tooltipRect = tooltipEl.getBoundingClientRect();
       let top = containerRect.bottom + window.scrollY + 5;
       let left = containerRect.left + window.scrollX + containerRect.width / 2 - tooltipRect.width / 2;
+      if (options.useMenuBtn) {
+        // Beside the collapsed menu button, on the side the menu leaves free: a right-hand menu
+        // sits on the window edge, so its tooltips open leftwards. A shell may pin the side.
+        const pinned = tooltipEl.querySelector('.tooltip-menu-side-right')
+          ? 'right'
+          : tooltipEl.querySelector('.tooltip-menu-side-left')
+            ? 'left'
+            : null;
+        const menuSide = pinned || (Modal.Data['modal-menu'].options.mode === 'slide-menu-right' ? 'right' : 'left');
+        top = containerRect.top + window.scrollY + (containerRect.height - tooltipRect.height) / 2;
+        left =
+          menuSide === 'right'
+            ? containerRect.left + window.scrollX - tooltipRect.width - 10
+            : containerRect.right + window.scrollX + 10;
+      }
       // Adjust if it goes off-screen
       if (left < 0) left = 5;
       if (left + tooltipRect.width > window.innerWidth) {

package/src/client/components/cryptokoyn/AppShellCryptokoyn.js

@@ -26,8 +26,6 @@ class AppShellCryptokoyn {
     const RouterInstance = RouterCryptokoyn.instance();
 
     const { barConfig } = await Themes[Css.currentTheme]();
-
-    const badgeNotificationMenuStyle = { top: '-33px', left: '24px' };
     const barMode = undefined; // 'top-bottom-bar';
     await Modal.instance({
       id: 'modal-menu',

package/src/client/components/cyberia-portal/RouterCyberiaPortal.js

@@ -56,10 +56,6 @@ class RouterCyberiaPortal {
         title: 'cyberia-entity-engine',
         render: () => s(`.main-btn-cyberia-entity-engine`).click(),
       },
-      '/fallback-world-engine': {
-        title: 'fallback-world-engine',
-        render: () => s(`.main-btn-fallback-world-engine`).click(),
-      },
       '/instance-selection': {
         title: 'instance-selection',
         render: () => s(`.main-btn-instance-selection`).click(),

package/src/client/components/default/AppShellDefault.js

@@ -31,8 +31,6 @@ class AppShellDefault {
     const RouterInstance = RouterDefault.instance();
 
     const { barConfig } = await Themes[Css.currentTheme]();
-
-    const badgeNotificationMenuStyle = { top: '-33px', left: '24px' };
     const barMode = undefined; // 'top-bottom-bar';
     await Modal.instance({
       id: 'modal-menu',
@@ -197,8 +195,7 @@ class AppShellDefault {
             ${await Badge.instance({
               id: 'main-btn-chat',
               type: 'circle-red',
-              style: badgeNotificationMenuStyle,
-              classList: 'hide',
+              classList: 'hide badge-notification-menu',
             })}`,
             attrs: `data-id="chat"`,
             tabHref: `${getProxyPath()}chat`,

package/src/client/components/itemledger/AppShellItemledger.js

@@ -27,8 +27,6 @@ class AppShellItemledger {
     const RouterInstance = RouterItemledger.instance();
 
     const { barConfig } = await Themes[Css.currentTheme]();
-
-    const badgeNotificationMenuStyle = { top: '-33px', left: '24px' };
     const barMode = undefined; // 'top-bottom-bar';
     await Modal.instance({
       id: 'modal-menu',

package/src/client/components/underpost/AppShellUnderpost.js

@@ -227,6 +227,8 @@ class AppShellUnderpost {
       titleRender: () => {
         return '';
       },
+      // mode: 'slide-menu-right',
+      barMode: 'top-bottom-bar',
       mode: 'slide-menu',
       RouterInstance,
       searchCustomImgClass: 'underpost-menu-icon',
@@ -305,6 +307,16 @@ class AppShellUnderpost {
         return panelFormInstance;
       },
     });
+    for (const eventFn of ['onCollapseMenuListener', 'onExtendMenuListener', 'onExpandUiListener', 'onCloseListener']) {
+      Modal.Data['modal-menu'][eventFn]['underpost-panel-form-padding'] = (arg) => {
+        if (s(`.underpost-panel-form-container`))
+          s(`.underpost-panel-form-container`).style.paddingLeft =
+            !s('.main-body-btn-ui-open').classList.contains('hide') &&
+            s(`.btn-bar-center-icon-close`).classList.contains('hide')
+              ? '50px'
+              : '0px';
+      };
+    }
 
     ThemeEvents['underpost-main-theme-event'] = () => {
       const srcLogo = darkTheme

package/src/client/components/underpost/CssUnderpost.js

@@ -49,6 +49,9 @@ const CssCommonUnderpost = async () => {
         font-family: 'retro-font-cta';
         src: URL('${getProxyPath()}assets/fonts/PressStart2P-Regular.ttf') format('truetype');
       }
+      .default-slide-menu-top-bar-fix-title-container {
+        top: 10px;
+      }
 
       /* Landing Page & Object Viewer Styles */
       .landing-container {
@@ -176,6 +179,15 @@ const CssCommonUnderpost = async () => {
       .underpost-panel-subtitle {
         top: 3px !important;
       }
+      /* Clears the fixed hamburger at the pace the bars slide. */
+      .underpost-panel-form-container {
+        transition: padding-left 0.3s ease;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .underpost-panel-form-container {
+          transition: none;
+        }
+      }
       .underpost-panel-cell,
       .underpost-panel-cell p,
       .underpost-panel-cell span,
@@ -236,15 +248,15 @@ class CssUnderpostDark {
           button:hover,
           .a-btn:hover {
             background: #212020;
+            color: #ffcc00 !important;
           }
           .action-bar-box {
             color: white;
           }
           .default-slide-menu-top-bar-fix-title-container-text {
-            color: black !important;
+            color: white !important;
           }
         </style>
-        ${borderChar(2, `#f70808`, ['.default-slide-menu-top-bar-fix-title-container-text'])}
       `
     );
   };
@@ -262,6 +274,7 @@ class CssUnderpostLight {
           button:hover,
           .a-btn:hover {
             background: #d8d8d8;
+            color: #ffcc00 !important;
           }
 
           .action-bar-box {

package/src/client/public/cyberia-docs/CYBERIA-CLIENT.md

@@ -340,6 +340,14 @@ wasm-driver.py --data-server-url=<origin>
 required: the client asserts and stops if it is absent. There is no environment
 fallback, no config file and no runtime override.
 
+`wasm-driver.py` appends any other flag to the client argv. `fetch_init()` reads
+two stream diagnostics:
+
+| Flag                                  | Effect                                                                               |
+| ------------------------------------- | ------------------------------------------------------------------------------------ |
+| `--stream-disable=<mode>[,<mode>...]` | Turns off `audio`, `audio-network`, `audio-runtime`, `atlas` or `dynamic` streaming. |
+| `--stream-profile`                    | Records stream events in `Module.streamTrace` (30,000-entry ring, read in DevTools). |
+
 ### Constants (`src/config.h`)
 
 | Constant                    | Default        | Description                                                                                                      |

package/src/client/public/cyberia-docs/CYBERIA.md

@@ -20,7 +20,7 @@ _Stackable Rendering Layers as a Unified Tokenized Reality_
 <!-- CI/CD and health -->
 <div align="center">
 
-[![Node.js CI](https://img.shields.io/github/actions/workflow/status/underpostnet/engine-cyberia/docker-image.engine-cyberia.ci.yml?branch=main&label=Node.js%20CI)](https://github.com/underpostnet/engine-cyberia/actions/workflows/docker-image.engine-cyberia.ci.yml) [![Test](https://img.shields.io/github/actions/workflow/status/underpostnet/engine-cyberia/coverall.cyberia.ci.yml?branch=main&label=Test)](https://github.com/underpostnet/engine-cyberia/actions/workflows/coverall.cyberia.ci.yml) [![Coverage Status](https://coveralls.io/repos/github/underpostnet/engine-cyberia/badge.svg?branch=main)](https://coveralls.io/github/underpostnet/engine-cyberia?branch=main) [![Socket Badge](https://socket.dev/api/badge/npm/package/cyberia/3.3.76)](https://socket.dev/npm/package/cyberia/overview/3.3.76)
+[![Node.js CI](https://img.shields.io/github/actions/workflow/status/underpostnet/engine-cyberia/docker-image.engine-cyberia.ci.yml?branch=main&label=Node.js%20CI)](https://github.com/underpostnet/engine-cyberia/actions/workflows/docker-image.engine-cyberia.ci.yml) [![Test](https://img.shields.io/github/actions/workflow/status/underpostnet/engine-cyberia/coverall.cyberia.ci.yml?branch=main&label=Test)](https://github.com/underpostnet/engine-cyberia/actions/workflows/coverall.cyberia.ci.yml) [![Coverage Status](https://coveralls.io/repos/github/underpostnet/engine-cyberia/badge.svg?branch=main)](https://coveralls.io/github/underpostnet/engine-cyberia?branch=main) [![Socket Badge](https://socket.dev/api/badge/npm/package/cyberia/3.4.0)](https://socket.dev/npm/package/cyberia/overview/3.4.0)
 
 </div>