@bongos/core 1.24.82 → 1.24.83

package/modules/hall-ui/public/options-menu.js

@@ -254,6 +254,7 @@
     if (!state.menu.some(function (g) { return g.items.some(function (it) { return it.id === id; }); })) return false;
     state.active = id;
     groupsEl.dataset.active = id;
+    nameScreen(e);
     Array.prototype.forEach.call(groupsEl.querySelectorAll('.opt-embed'), function (s) { s.classList.remove('opt-embed--on'); });
     if (e.embed) frameFor(e, anchor).classList.add('opt-embed--on');
     else if (state.onNative) state.onNative(id, anchor);
@@ -271,6 +272,22 @@
     return true;
   }
 
+  // The open screen's name, over the screen (Helm, task 1005194): the entry's own
+  // label, so no new words. Drawn for the eye only: the rail's aria-current link
+  // and each frame's aria-label already say which screen is open.
+  function nameScreen(e) {
+    if (!groupsEl || !groupsEl.insertBefore || typeof document === 'undefined') return;
+    var h = document.getElementById('opt-screen');
+    if (!h) {
+      h = document.createElement('p');
+      h.id = 'opt-screen';
+      h.className = 'opt-screen';
+      h.setAttribute('aria-hidden', 'true');
+      groupsEl.insertBefore(h, groupsEl.firstChild);
+    }
+    h.textContent = e.label;
+  }
+
   function markActive() {
     if (!railEl) return;
     Array.prototype.forEach.call(railEl.querySelectorAll('.opt-link'), function (a) {
@@ -306,7 +323,10 @@
   // The rail: the search box, then the groups. Typing filters; Enter opens the first match.
   function draw() {
     railEl.classList.add('opt-rail');
+    // The panel's own name shows only where the top bar is away (settings.css); the
+    // <nav> already carries the same word as its aria-label.
     railEl.innerHTML =
+      '<p class="opt-title" aria-hidden="true">Options</p>' +
       '<label class="opt-search"><span class="sr-only">Search settings</span>' +
       '<input type="search" id="opt-search" placeholder="Search settings" autocomplete="off" spellcheck="false"></label>' +
       '<div class="opt-list"></div>';

package/modules/hall-ui/public/primer.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-view2">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm2">
   <link rel="stylesheet" href="/builders/room.css">
   <link rel="stylesheet" href="/builders/primer.css?v=2026-07-02-shell1">
   <link rel="stylesheet" href="/builders/diagram-viewer.css?v=2026-11-04-reading-room">

package/modules/hall-ui/public/profile.html

@@ -14,7 +14,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-view2">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm2">
   <!-- The PANEL archetype (task 1003308) before the page's own sheet. -->
   <link rel="stylesheet" href="/builders/panel.css">
   <link rel="stylesheet" href="/builders/hall-ask.css">

package/modules/hall-ui/public/project-settings.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-view2">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm2">
   <link rel="stylesheet" href="/builders/oversight.css">
   <link rel="stylesheet" href="/builders/project-settings.css?v=2026-11-02-outflow">
 </head>

package/modules/hall-ui/public/roster.html

@@ -8,7 +8,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-view2">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm2">
   <!-- task 1003441: the identity cell (avatar, name, login). It was shared with
        the cross-project /people page until task 1003444 deleted it. -->
   <link rel="stylesheet" href="/builders/roster.css">

package/modules/hall-ui/public/settings.css

@@ -1,18 +1,24 @@
 /* settings.css — what Settings has and the rest of the panel family does not
-   (task 1003308, goal 1000081; the archetype is panel.css). The grouped layout
-   behind the section rail, the group head, the token ladder,
-   the volume line and the image-key banner. Every colour is a `var()` of the
-   world's tier; the one literal pair is the Discord mark, named below.
+   (task 1003308, goal 1000081; the archetype is panel.css). The options menu
+   and the screen it opens, the token ladder, the volume line and the image-key
+   banner. Every colour is a `var()` of the world's tier; the one literal pair
+   is the Discord mark, named below.
 
-   The rail itself (.section-rail / .rail-link) is the shell's, built by
-   OTBKit.makeSectionRail in switch mode; this sheet only widens its column to
-   the mock's and keeps one group visible at a time. */
+   THE OPTIONS MENU IS A HELM SCREEN (task 1005194, ADR 0402; the menu is ADR
+   0401). Left, the menu: one night panel closed left and right by the strong
+   ice hairline, the search over the entries, each entry a full-width row in
+   the name voice on a hairline, the open one the accent bar. Right, the open
+   screen: its name in the name voice over the strong hairline, then its
+   sections as plain rows on hairlines, not cards. In game mode the panel runs
+   the window's full height and names itself. The Helm pieces are the hall
+   tier's tokens (style.css); the rows' words, order and addresses are
+   options-menu.js's, unchanged. */
 
-/* ---- grouped layout: left rail + one visible group ------------------------ */
+/* ---- the layout: the menu panel + the one open screen --------------------- */
 .settings-layout {
   display: grid;
-  grid-template-columns: 206px minmax(0, 1fr);
-  gap: 30px;
+  grid-template-columns: minmax(0, min(var(--helm-panel-w), 32%)) minmax(0, 1fr);
+  gap: var(--ds-space-xl);
   align-items: start;
 }
 .settings-layout[hidden] { display: none !important; }
@@ -30,43 +36,98 @@
 .settings-groups > [data-group][hidden] { display: none !important; }
 /* A screen opened in the menu's frame (options-menu.js): one shows at a time. */
 .settings-groups > .opt-embed.opt-embed--on { display: block; }
-.settings-groups .scroll { margin: 0 0 var(--sp-sm); }
+/* ---- the open screen: its name, then its sections as rows on hairlines -------
+   options-menu.js writes the open entry's own label into .opt-screen. A section
+   is not a card here: no ground, no corner, one soft hairline under it, its
+   title in the name voice. */
+.settings-groups { --opt-screen-h: calc(var(--ds-space-xl) + var(--ds-space-lg)); }
+.opt-screen {
+  margin: 0;
+  padding: 0 0 var(--ds-space-sm);
+  border-bottom: var(--line-strong) solid var(--rule);
+  font-family: var(--name-face);
+  font-size: var(--ds-text-figure);
+  font-weight: var(--name-weight);
+  letter-spacing: var(--name-space-tight);
+  text-transform: var(--name-case);
+  line-height: 1;
+  overflow-wrap: anywhere;
+  color: var(--ink);
+  text-shadow: var(--name-glow);
+}
+.settings-groups .scroll {
+  margin: 0;
+  padding: var(--ds-space-md) 0;
+  background: none;
+  border: 0;
+  border-bottom: var(--line) solid var(--rule-soft);
+  border-radius: var(--press-radius);
+}
+.settings-groups .scroll__h {
+  font-family: var(--name-face);
+  font-size: var(--ds-text-2xl);
+  font-weight: var(--name-weight);
+  letter-spacing: var(--name-space-tight);
+  text-transform: var(--name-case);
+  color: var(--ink);
+}
 .settings-groups .scroll__lede { font-size: 14.5px; }
-/* the rail's items at the mock's height: the shell's 28px rows are Standing's
-   density, and a settings group is a destination, not a scroll-spy stop */
-/* ---- the options menu rail (task 1005144, ADR 0401) ------------------------
-   A search box over a vertical list of groups. Sticky beside the open screen, so
-   the menu stays in reach while a long screen scrolls. */
-.opt-rail { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 96px); overflow-y: auto; }
-html[data-fullscreen="on"] .opt-rail { top: 24px; max-height: calc(100vh - 48px); }
-.opt-search { display: block; margin: 0 0 var(--sp-xs); }
-.opt-search input { width: 100%; min-height: 38px; padding: 0 14px; border-radius: var(--radius-pill); border: var(--line) solid var(--glass-edge); background: var(--glass); color: var(--ink); font: inherit; font-size: var(--ds-text-md); }
-.opt-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
-.opt-head { margin: var(--sp-sm) 0 2px; padding: 0 14px; font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-faint); }
-.opt-link { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 38px; padding: 4px 14px; border-radius: var(--radius-pill); color: var(--ink-soft); font-size: var(--ds-text-md); text-decoration: none; }
-.opt-link:hover { color: var(--ink); background: var(--glass); }
-.opt-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
-.opt-link--active { color: var(--ink); background: var(--glass); }
-.opt-link--active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: var(--radius-pill); background: var(--accent); }
-.opt-link__where { font-size: var(--ds-text-xs); color: var(--ink-faint); }
-.opt-none { margin: var(--sp-xs) 0; padding: 0 14px; font-size: var(--ds-text-sm-plus); color: var(--ink-soft); }
-/* The frame fills the column to the bottom of the window; the screen in it scrolls itself. */
-.opt-embed__frame { display: block; width: 100%; height: calc(100vh - 96px); min-height: 480px; border: 0; border-radius: var(--radius); background: transparent; }
-html[data-fullscreen="on"] .opt-embed__frame { height: calc(100vh - 48px); }
 
-/* the group head: the group's name in the display voice over a hairline, with
-   its own address in the mono face beside it (a machine's word keeps its case) */
-.grp__head {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: var(--sp-sm);
-  margin: 0 0 var(--sp-sm);
-  padding-bottom: var(--sp-xs);
-  border-bottom: var(--line) solid var(--glass-edge);
+/* ---- the options menu (task 1005144, ADR 0401; Helm, task 1005194) -----------
+   The night panel: the search, then the entries. Sticky beside the open screen,
+   so the menu stays in reach while a long screen scrolls; it scrolls itself. */
+.opt-rail {
+  position: sticky; top: 72px; box-sizing: border-box;
+  display: flex; flex-direction: column;
+  max-height: calc(100vh - 96px); overflow-y: auto;
+  padding: var(--ds-space-md) 0;
+  background: var(--night-glass);
+  border: 0 solid var(--rule); border-left-width: var(--line-strong); border-right-width: var(--line-strong);
+}
+/* the panel's own name: only where the top bar is away (full screen, game mode),
+   since with the bars up the top bar already says it */
+.opt-title {
+  display: none;
+  margin: 0 0 var(--ds-space-md); padding: 0 var(--ds-space-lg);
+  font-family: var(--name-face); font-size: var(--ds-text-headline); font-weight: var(--name-weight);
+  letter-spacing: var(--name-space-wide); text-transform: var(--name-case); line-height: 1.15;
+  color: var(--ink); text-shadow: var(--name-glow);
+}
+html[data-fullscreen="on"] .opt-title { display: block; }
+/* the search: the hall's one field (controls.css), on the glass, as wide as the panel */
+.opt-search { display: block; margin: 0 0 var(--ds-space-sm); padding: 0 var(--ds-space-lg); }
+.opt-search input { width: 100%; min-height: 46px; background: var(--glass); font-size: var(--ds-text-xl); }
+.opt-head {
+  margin: var(--ds-space-sm) 0 0; padding: var(--ds-space-hair) var(--ds-space-lg);
+  font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space);
+  text-transform: var(--label-case); color: var(--ink-soft);
+}
+/* an entry: a full-width row in the name voice on a soft hairline. The ring sits
+   inside the row (the start screen's rule), so it reads on the accent bar too. */
+.opt-link {
+  display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;
+  min-height: var(--ds-space-xl); padding: var(--ds-space-hair) var(--ds-space-lg);
+  border-bottom: var(--line) solid var(--rule-soft);
+  color: var(--ink); text-decoration: none;
+  font-family: var(--name-face); font-size: var(--ds-text-3xl); font-weight: 400;
+  letter-spacing: var(--name-space-tight); text-transform: var(--name-case); line-height: 1.2;
+  transition: background-color var(--ds-dur-fast) var(--ds-ease);
+}
+.opt-list > .opt-link:last-child { border-bottom-color: transparent; }
+.opt-link:hover { color: var(--ink); background: var(--glass); text-decoration: none; }
+.opt-link:focus-visible { outline: 0; border-radius: var(--press-radius); box-shadow: var(--press-focus); }
+/* the open entry is the one thing lit: the accent bar under its dark ink */
+.opt-link--active, .opt-link--active:hover {
+  color: var(--accent-on); background: var(--accent); border-bottom-color: transparent;
+  font-weight: var(--name-weight-lit); box-shadow: var(--accent-glow);
 }
-.grp__h { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.1vw, 29px); line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
-.grp__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
+.opt-link--active:focus-visible { box-shadow: var(--press-focus), var(--accent-glow); }
+/* where a search hit lives: said, not named, so it is the body voice */
+.opt-link__where { font-family: var(--font-body); font-size: var(--ds-text-xs); letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
+.opt-none { margin: var(--ds-space-xs) 0; padding: 0 var(--ds-space-lg); font-size: var(--ds-text-sm-plus); color: var(--ink-soft); }
+/* The frame fills the column to the bottom of the window, under the screen's name; the screen in it scrolls itself. */
+.opt-embed__frame { display: block; width: 100%; height: calc(100vh - 96px - var(--opt-screen-h)); min-height: 480px; border: 0; border-radius: var(--press-radius); background: transparent; }
+html[data-fullscreen="on"] .opt-embed__frame { height: calc(100vh - 48px - var(--opt-screen-h)); }
 
 @media (max-width: 860px) {
   /* Collapse to one column: the menu sits above the open screen, no longer sticky. */
@@ -74,8 +135,14 @@ html[data-fullscreen="on"] .opt-embed__frame { height: calc(100vh - 48px); }
   .opt-rail { position: static; max-height: none; }
   .opt-embed__frame { height: 80vh; }
 }
-@media (max-width: 520px) {
-  .grp__head { flex-direction: column; align-items: flex-start; gap: 4px; }
+@media (min-width: 861px) {
+  /* Full screen and game mode: the panel is the window's full height, from the top
+     edge. The pull is the room the shell leaves a plain page above its content for
+     the corner button (style.css, data-fullscreen-plain). */
+  html[data-fullscreen="on"] .opt-rail {
+    top: 0; height: 100vh; max-height: none;
+    margin-top: -60px; padding-top: var(--ds-space-xl);
+  }
 }
 
 /* ---- the token ladder (CLI access) ------------------------------------------

package/modules/hall-ui/public/settings.html

@@ -11,13 +11,13 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-view2">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm2">
   <!-- The PANEL archetype (task 1003308): the row, the switch, the field, the
        chip control and the family's voices, shared with profile and pair.
        settings.css then holds only what this page
        has — the rail layout, the group head, the token ladder, the voices grid. -->
   <link rel="stylesheet" href="/builders/panel.css">
-  <link rel="stylesheet" href="/builders/settings.css">
+  <link rel="stylesheet" href="/builders/settings.css?v=2026-11-11-helm2">
   <!-- task 1005094: the device cards and their Run button in Your Autobongos runner. -->
   <link rel="stylesheet" href="/builders/runner-button.css">
 </head>
@@ -432,7 +432,7 @@
 <!-- task 1005044: the old deep links to the agent settings that moved to My agents -->
 <script src="/builders/settings-moved.js?v=2026-11-03-moved"></script>
 <!-- task 1005144: the ONE options menu — the rail, its search, and the screens it opens in a frame. -->
-<script src="/builders/options-menu.js?v=2026-11-11-view2"></script>
+<script src="/builders/options-menu.js?v=2026-11-11-helm2"></script>
 <script src="/builders/settings.js?v=2026-11-10-options"></script>
 <!-- task 1003341: the Active sessions panel. Its own file rather than more of
      settings.js, which sits close to the 1500-line size ratchet. -->

package/modules/hall-ui/public/street.html

@@ -10,7 +10,7 @@
   <!-- The faces (Manrope, JetBrains Mono) come from the branding pack's font
        links, injected into this head by the server like every hall page's
        (tests/hall_tokens.mjs: no hall page hardcodes a web-font stylesheet). -->
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-view2">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm2">
   <link rel="stylesheet" href="/builders/street.css?v=2026-11-11-helm">
   <link rel="stylesheet" href="/builders/street-card.css?v=2026-10-04-record1">
   <link rel="stylesheet" href="/builders/street-deck.css?v=2026-10-17-tidy">

package/modules/hall-ui/public/studio.html

@@ -12,7 +12,7 @@
   <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-view2">
+  <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm2">
   <link rel="stylesheet" href="/builders/studio.css?v=2026-10-09-day">
   <link rel="stylesheet" href="/builders/approval-queue.css?v=2026-09-29-aqfix">
   <link rel="stylesheet" href="/builders/home-gallery.css?v=2026-11-04-studio">