@bongos/core 1.19.393 → 1.19.394

package/public-landing/projects.html

@@ -324,11 +324,6 @@ summary{min-height:24px;padding:3px 0;}
    used (860) — the two-up grids and the bongo cell fold together */
 @media (max-width:840px){.row2,.choices{grid-template-columns:1fr;}}
 
-/* cosmos's global reduced-motion kill switch zeroes every animation, which
-   leaves the mark's blinking caret parked at FULL opacity — a solid bar beside
-   the wordmark forever. Page-local on purpose: a second reduce block in
-   cosmos.css would shadow the first one tests/landing_page.mjs extracts. */
-@media (prefers-reduced-motion:reduce){.shell .caret{display:none;}}
 </style>
 </head>
 <body>
@@ -350,54 +345,120 @@ summary{min-height:24px;padding:3px 0;}
   <span class="star" style="top:88%;left:42%;width:1.5px;height:1.5px;animation-delay:1.9s;"></span>
 </div>
 
-<!-- ══ THE PERSISTENT SHELL ═══════════════════════════════════════════════════
+<!-- ══ THE BAR ═══════════════════════════════════════════════════════════════
      A header of the PAGE, not of the orb field, so it never drifts, scales or
-     pans with the sky — and it renders in EVERY view including the table. The
-     gate's corner pill was hidden by `body:not(.view-space)`, so the one view
-     where a person scans for their own project was the view with no way out.
-
-     Home is a PAGE (the landing page at /); the other three are VIEWS of this
-     page. They sit in one control because they are all "where can I go from
-     here", but the divider keeps the distinction honest — Home navigates and
-     never takes the current-view pill. ── -->
-<!-- keyboard skip: the chrome above every view is a wordmark, a four-item nav
-     and a right-hand cluster. Hidden until focused (.vh), it becomes a real
-     pill on first Tab and jumps to the #hubMain landmark. -->
+     pans with the sky — and it renders in EVERY view including the table.
+     v2 "the hairline" (task 1003300; the owner's pick, docs/design/
+     projects-hub-direction-v2.md §7): no pill on this bar. Its ground IS the
+     page ground, closed by one hairline, and the only filled shape it can hold
+     is the sign-in door. The mark is static (the self-typing wordmark lives on
+     the landing only, §7) and it is the only way home. The map's search lives
+     here so it stays PUBLIC — a signed-out stranger must be able to search the
+     map — and setView hides it off the map view. Sky, Table, Your projects and
+     New project are the Projects band; the identity chip is the profile band's
+     trigger. No Home, no hall pill, no nav row, no toolbar. ── -->
+<!-- keyboard skip: the chrome above every view is the bar and the two bands
+     that unfold under it. Hidden until focused (.vh), it becomes a real pill
+     on first Tab and jumps to the #hubMain landmark. -->
 <a class="skip vh" href="#hubMain">Skip to content</a>
-<header class="shell">
-  <!-- The mark types the PREFIX and holds `bongos` still, because `bongos` is
-       the word you type and the assistant is what varies — which is also what
-       the vanity doors do (claudebongos.com, geminibongos.com swap the first
-       word, not the second). The typing only runs on the default two-word name;
-       a re-branded instance gets its own wordmark, static.
-       "Still" is literal (task 1002793): the prefix + caret live in #markLeft,
-       whose width is pinned to the coming word BEFORE typing, so letters come
-       and go without bongos moving; #markMeasure is the hidden ruler. The
-       caret is a drawn 2px bar, not a glyph — a block glyph plus the literal
-       space read as two characters of air. Only bongos wears the accent, the
-       same split the landing's static mark already has. -->
-  <a class="mark" href="/"><span class="markLeft" id="markLeft"><span id="markPrefix">cloud</span><span class="caret" aria-hidden="true"></span></span> <span id="markWord">bongos</span><span class="markMeasure" id="markMeasure" aria-hidden="true"></span></a>
-
-  <nav class="navrow" aria-label="Project hub">
-    <a href="/" class="navHome" data-nav="home">Home</a>
-    <span class="navSep" aria-hidden="true"></span>
-    <a href="?view=map"  data-nav="map" aria-current="page">Map</a>
-    <a href="?view=mine" data-nav="mine">Your projects</a>
-    <a href="?view=new"  data-nav="new">New project</a>
-  </nav>
-
-  <div class="shell-right">
-    <!-- the hall lives on a different HOST, so its href must be stamped
-         server-side: clientBranding() deliberately withholds domains, so a
-         client fill can never re-point it. apex-only — a child instance has no
-         hall of its own. -->
-    <!--apex-only:start--><a class="btn-space" data-link-hall href="{{buildersOrigin}}">🏛 Builders' hall</a><!--apex-only:end-->
-    <button type="button" class="mode-toggle" id="modeToggle" title="Switch light / dark" aria-label="Switch light or dark mode">☾</button>
-    <div class="who" id="who"></div>
-    <a class="btn-space" id="signinTop" hidden href="/api/bongos/auth/web/start?return=/projects">Sign in</a>
+<header class="shell bar">
+  <div class="barLeft">
+    <a class="barMark" id="barMark" href="/">
+      <svg viewBox="0 0 26 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.4"
+           stroke-linecap="round" stroke-linejoin="round">
+        <ellipse cx="8.4" cy="5.6" rx="6.6" ry="2.9"/>
+        <path d="M1.8 5.6v6.6a6.6 2.9 0 0 0 13.2 0V5.6"/>
+        <ellipse cx="19.6" cy="8.4" rx="4.7" ry="2.1"/>
+        <path d="M14.9 8.4v4.6a4.7 2.1 0 0 0 9.4 0V8.4"/>
+      </svg>
+      <span data-brand-product-inline>Cloud Bongos</span>
+    </a>
+    <!-- under 480 the search folds into this magnifier, which drops one
+         hairline row of the page ground under the bar; above 480 it is never
+         shown and the field sits in the bar. -->
+    <button class="qToggle" type="button" id="qToggle" aria-expanded="false" aria-controls="qWrap" aria-label="Search projects">
+      <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
+    </button>
+    <!-- the map's search: a bare field with one bottom hairline. Every id is
+         kept (#mapQ, #mapCount, #onlyMine) so the filter path is untouched. -->
+    <div class="qWrap" id="qWrap">
+      <div class="qField">
+        <svg class="qIcon" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
+        <input class="qInput" type="text" id="mapQ" placeholder="Find a project" aria-label="Search projects">
+      </div>
+      <span class="qCount" id="mapCount"></span>
+      <!-- the only-mine filter rides with the search (§7): it filters the same
+           map, folds with the field under 480 and hides with it off the map.
+           Member-gated by paintShellIdentity, as before. -->
+      <label class="switch" title="Show only projects you own or build on">
+        <input type="checkbox" id="onlyMine"><span class="track"></span> Only mine
+      </label>
+    </div>
+  </div>
+  <div class="barRight">
+    <button class="trig" type="button" id="projTrig" data-menu="projects" aria-expanded="false" aria-controls="menuProjects">Projects<svg class="cv" viewBox="0 0 20 20" aria-hidden="true"><path d="m5.6 8 4.4 4.4L14.4 8"/></svg></button>
+    <!-- the glyph shows the mode you would GET: the moon in light, the sun in
+         dark, swapped by cosmos.css on data-mode; the script labels it -->
+    <button type="button" class="modeBtn" id="modeToggle" aria-label="Switch light or dark mode">
+      <svg class="moon" viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor"
+           stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M16.2 12.4A6.8 6.8 0 0 1 7.6 3.8a6.8 6.8 0 1 0 8.6 8.6z"/>
+      </svg>
+      <svg class="sun" viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor"
+           stroke-width="1.4" stroke-linecap="round">
+        <circle cx="10" cy="10" r="3.9"/>
+        <path d="M10 1.6v2.1M10 16.3v2.1M1.6 10h2.1M16.3 10h2.1M4.1 4.1l1.5 1.5M14.4 14.4l1.5 1.5M15.9 4.1l-1.5 1.5M5.6 14.4l-1.5 1.5"/>
+      </svg>
+    </button>
+    <!-- the identity chip IS the profile trigger; renderWho fills it. Signed
+         out it does not exist and the sign-in door takes its slot. -->
+    <button class="trig who" type="button" id="who" data-menu="profile" aria-expanded="false" aria-controls="menuProfile" hidden></button>
+    <a class="signinDoor" id="signinTop" hidden href="/api/bongos/auth/web/start?return=/projects">Sign in</a>
   </div>
 </header>
 
+<!-- ══ THE BANDS ══ The menus are not floating cards. Each is a full-width band
+     that unfolds under the bar's edge and PUSHES the page down, so a
+     destination is a place the page opens into rather than a list that hovers
+     over it. One component, two instances (see the bands block in the script):
+     Escape closes and returns focus to the trigger, the arrows walk the items,
+     a click outside closes, opening one closes the other. Plain links in a
+     disclosure (aria-expanded + aria-controls, no menu role), so what is
+     announced is what ships. ── -->
+<div class="menuBand" id="menuProjects" data-menu="projects" hidden>
+  <div class="bandIn">
+    <ul class="bandRow">
+      <!-- Sky and Table are two VIEWS of the map (§7): both deep-link
+           ?view=map and carry the sub-view; setSub keeps the current one lit -->
+      <li class="bandCell"><a class="bandT" href="?view=map" data-nav="map" data-sub="sky" aria-current="page">Sky</a><span class="bandC">the sky of every project</span></li>
+      <li class="bandCell"><a class="bandT" href="?view=map&amp;sub=table" data-nav="map" data-sub="table">Table</a><span class="bandC">the same projects as rows</span></li>
+      <li class="bandCell"><a class="bandT" href="?view=mine" data-nav="mine">Your projects</a><span class="bandC">the ones you own or build on</span></li>
+      <li class="bandCell"><a class="bandT" href="?view=new" data-nav="new">New project</a><span class="bandC">five questions and a home</span></li>
+    </ul>
+    <!-- under a hairline (§5's About cell): what this is, and the docs. About is the landing's
+         own explanation until goal 1000063's About page takes the anchor over. -->
+    <ul class="bandRow bandMore">
+      <li class="bandCell"><a class="bandT" href="/#about">About</a></li>
+      <li class="bandCell"><a class="bandT" href="/docs">Docs</a></li>
+    </ul>
+  </div>
+</div>
+<div class="menuBand" id="menuProfile" data-menu="profile" hidden>
+  <div class="bandIn bandProfile">
+    <p class="bandWho" id="bandWho"></p>
+    <ul class="bandRow">
+      <li class="bandCell"><a class="bandT" href="?view=mine" data-nav-to="mine">My projects</a></li>
+      <!-- the deferred Settings slot: a place it would go, rendering nothing at
+           all — not even the hairline that declares a list item. Never a
+           disabled item: the apex has no settings page, and on a child with no
+           hall the buildersOrigin token falls back to the page you are on. -->
+      <li class="bandSlot" aria-hidden="true"></li>
+      <!-- the honest hover target; the delegated click upgrades it to the POST -->
+      <li class="bandCell"><a class="bandT signout" href="/api/bongos/auth/logout">Sign out</a></li>
+    </ul>
+  </div>
+</div>
+
 <noscript>
   <div class="viewWrap wrap"><div class="fieldNote">The project hub needs JavaScript — the map, your
     projects, and starting a new one all live here. You can read what this is on the <a href="/">home page</a>.</div></div>
@@ -410,23 +471,6 @@ summary{min-height:24px;padding:3px 0;}
 <main id="hubMain">
 <section id="view-map">
   <h1 class="vh">The project map</h1>
-  <div class="toolbar">
-    <div class="seg" role="group" aria-label="Map display">
-      <button type="button" id="sub-sky" aria-pressed="true">Sky</button>
-      <button type="button" id="sub-table" aria-pressed="false">Table</button>
-    </div>
-
-    <label class="switch" title="Show only projects you own or build on">
-      <input type="checkbox" id="onlyMine"><span class="track"></span> Only mine
-    </label>
-
-    <div class="search">
-      <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
-      <input type="text" id="mapQ" placeholder="Search projects by name or description…" aria-label="Search projects">
-      <span class="count" id="mapCount"></span>
-    </div>
-  </div>
-
   <div class="fieldWrap" id="sub-sky-body">
     <div class="field" id="orbField">
       <div class="ground"></div>
@@ -1026,7 +1070,7 @@ summary{min-height:24px;padding:3px 0;}
 
 </main>
 
-<footer class="foot"><!--apex-only:start--><span>A non-profit, capture-resistant commons. </span><!--apex-only:end-->Built by agents, on <span data-brand-product-inline>Cloud&nbsp;Bongos</span>. <a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" rel="noopener">Open source (AGPL-3.0)</a>.<nav class="footNav" aria-label="Site"><a href="/privacy">Privacy</a><a href="/terms">Terms</a><a href="/contact">Contact</a></nav></footer>
+<footer class="foot"><!--apex-only:start--><span>A non-profit, capture-resistant commons. </span><!--apex-only:end-->Built by agents, on <span data-brand-product-inline>Cloud&nbsp;Bongos</span>. <a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" rel="noopener">Open source (AGPL-3.0)</a>.<nav class="footNav" aria-label="Site"><a href="/privacy">Privacy</a><a href="/terms">Terms</a><a href="/contact">Contact</a><!--apex-only:start--><a data-link-hall href="{{buildersOrigin}}">Builders' hall</a><!--apex-only:end--></nav></footer>
 
 <script>
 /* Brand-pack fill (R57): the server injects window.__BRANDING__ ahead of this
@@ -1057,13 +1101,12 @@ summary{min-height:24px;padding:3px 0;}
     if (m === 'light' || m === 'dark') return m;
     return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
   }
-  /* the glyph shows the mode you would GET, so the label must say the same:
-     a bare ☀/☾ announces as "sun"/"moon" and nothing about what the press does.
+  /* the glyph shows the mode you would GET (the moon in light, the sun in
+     dark — cosmos.css swaps them on data-mode), so the label must say the same.
      No aria-pressed — this swaps a mode, it is not a two-state toggle button. */
   function paintModeToggle() {
     var dark = resolvedMode() === 'dark';
     var el = $('modeToggle');
-    el.textContent = dark ? '☀' : '☾';
     el.setAttribute('aria-label', dark ? 'Switch to light mode' : 'Switch to dark mode');
   }
   $('modeToggle').addEventListener('click', function () {
@@ -1105,6 +1148,7 @@ summary{min-height:24px;padding:3px 0;}
 
   var VIEWS = { map: 1, mine: 1, new: 1, manage: 1 };
   var currentView = 'map';
+  var currentSub = 'sky';    /* the map's sub-view on stage — sky or table (task 1003300) */
   /* the manage view's target project (task 1003041) — set by goToManage() and
      the ?view=manage&id=N deep link, read by loadManage() */
   var manageId = null;
@@ -1129,12 +1173,19 @@ summary{min-height:24px;padding:3px 0;}
     currentView = v;
     Object.keys(VIEWS).forEach(function (k) { $('view-' + k).hidden = (k !== v); });
     document.querySelectorAll('[data-nav]').forEach(function (a) {
-      /* Home is a PAGE, not a view — it never takes the current-view pill */
-      if (a.dataset.nav !== 'home' && a.dataset.nav === v) a.setAttribute('aria-current', 'page');
-      /* the manage view is a page OF your projects — that pill stays lit there */
+      /* Sky and Table are both the map view: only the one whose sub-view is on
+         stage is current (setSub keeps the pair in step) */
+      if (a.dataset.nav === v && (!a.dataset.sub || a.dataset.sub === currentSub)) a.setAttribute('aria-current', 'page');
+      /* the manage view is a page OF your projects — that item stays lit there */
       else if (v === 'manage' && a.dataset.nav === 'mine') a.setAttribute('aria-current', 'page');
       else a.removeAttribute('aria-current');
     });
+    /* the map's search (and the only-mine filter riding with it) is meaningless
+       off the map: HIDE, never disable, and never clear the value — returning to
+       the map restores the filter. It is PUBLIC, so this is not in
+       paintShellIdentity. The folded row (under 480) closes with it. */
+    $('qWrap').hidden = $('qToggle').hidden = (v !== 'map');
+    if (v !== 'map') foldSearch(false);
     /* the manage view's URL names its project — the deep-link contract grew
        an id in task 1003041, so a manage tab is shareable and reload-safe */
     var idPart = (v === 'manage' && manageId) ? '&id=' + encodeURIComponent(manageId) : '';
@@ -1173,8 +1224,12 @@ summary{min-height:24px;padding:3px 0;}
   }
 
   document.querySelectorAll('[data-nav]').forEach(function (a) {
-    if (a.dataset.nav === 'home') return;   /* a real navigation — leave it alone */
-    a.addEventListener('click', function (ev) { ev.preventDefault(); setView(a.dataset.nav, true); });
+    a.addEventListener('click', function (ev) {
+      if (!isPlainClick(ev)) return;   /* ctrl/cmd/shift/middle mean "new tab" everywhere else */
+      ev.preventDefault();
+      setView(a.dataset.nav, true);
+      if (a.dataset.sub) setSub(a.dataset.sub);
+    });
   });
   /* delegated, not swept: a data-nav-to link injected into a card or the manage
      page after boot (addressRow, renderDelete) would never be upgraded by a
@@ -1190,54 +1245,11 @@ summary{min-height:24px;padding:3px 0;}
      manage id too, so a manage entry restores its project */
   window.addEventListener('popstate', function () { closeCard(); setView(viewFromUrl()); });
 
-  /* ── the self-typing mark. `bongos` is the CONSTANT — it is the word you
-     type — and the prefix is what varies, which is exactly what the vanity
-     doors do (claudebongos.com swaps the first word, not the second). Only
-     runs on the default two-word name so a re-branded instance keeps its own
-     wordmark, and never when the visitor asked for reduced motion. ── */
-  (function typeMark() {
-    var parts = productName.toLowerCase().split(/\s+/);
-    var word = parts.pop();
-    var prefix = parts.join(' ');
-    $('markWord').textContent = word;
-    $('markPrefix').textContent = prefix;
-    /* the link's name is its two spans, so mid-type it announces "gem bongos".
-       Label the LINK instead — before the early return, so a re-branded or
-       reduced-motion visitor gets it too. #markLeft stays visible to AT:
-       tests/projects_hub.mjs pins that markup literal. */
-    $('markLeft').parentNode.setAttribute('aria-label', productName + ' — home');
-    if (REDUCED || prefix !== 'cloud' || word !== 'bongos') return;
-    var PREFIXES = ['cloud', 'claude', 'chatgpt', 'gemini'];
-
-    /* Type, HOLD, erase — the landing hero's cadence (index.html), not a
-       symmetric ping-pong. The single reversing interval this replaced turned
-       around on the very tick it completed a word, so `claude bongos` finished
-       and was already being deleted: the reader never got to see the word the
-       whole animation exists to show. A hold is the only part of the cycle that
-       carries meaning; the typing is just how it arrives.
-
-       `cloud` rests longest because it is the real wordmark and the state the
-       mark should sit in most — the others are the joke, and the joke lands
-       once. Same two numbers the hero uses, so the two surfaces read as one
-       system rather than two animations that happen to share a font. */
-    var TYPE = 72, ERASE = 38, HOLD = 900, HOLD_HOME = 2100;
-    var el = $('markPrefix'), box = $('markLeft'), meas = $('markMeasure'), wi = 0;
-    (function cycle() {
-      var w = PREFIXES[wi++ % PREFIXES.length], i = 0;
-      /* pin the box to the coming word's rendered width BEFORE typing: bongos
-         must not move while letters come and go (the owner's call, 2026-08-14).
-         Between words the CSS width transition glides instead of jumping. */
-      meas.textContent = w;
-      box.style.width = (meas.offsetWidth + 4) + 'px';
-      (function type() {
-        if (i <= w.length) { el.textContent = w.slice(0, i++); setTimeout(type, TYPE); }
-        else setTimeout(function erase() {
-          if (el.textContent.length) { el.textContent = el.textContent.slice(0, -1); setTimeout(erase, ERASE); }
-          else cycle();
-        }, w === 'cloud' ? HOLD_HOME : HOLD);
-      })();
-    })();
-  })();
+  /* the static mark (task 1003300, direction record §7): the self-typing
+     wordmark lives on the landing only. Here the glyph and the product name are
+     plain type, and the mark is the only way home — so it is labelled from the
+     product name a re-branded instance stamps, not from its visible text. */
+  $('barMark').setAttribute('aria-label', productName + ' — home');
 
   /* ══ THE MAP ═══════════════════════════════════════════════════════════════
      The public catalog: GET /projects/featured is the PUBLIC projection
@@ -1643,6 +1655,7 @@ summary{min-height:24px;padding:3px 0;}
         (p.isSelf ? '' : ' target="_blank" rel="noopener"') + '>' +
         (p.isSelf ? 'Home →' : 'Open site →') + '</a>'
       : '';
+    closeMenus();
     cardReturn = returnTo || null;
     $('cardScrim').hidden = false;
     pageInert(true);
@@ -1731,7 +1744,95 @@ summary{min-height:24px;padding:3px 0;}
     if (ev.target === $('cardScrim')) closeCard();   /* backdrop only, never the card */
   });
   document.addEventListener('keydown', function (ev) {
-    if (ev.key === 'Escape') closeCard();
+    /* a band claims Escape while it is open — its own listener, registered
+       below this one, closes it; the card's Escape is the page default */
+    if (ev.key === 'Escape' && !openBand()) closeCard();
+  });
+
+  /* ══ THE BANDS (task 1003300) — one disclosure component, two instances: the
+     Projects band and the profile band. Not palette.js's single-control focus
+     trap (a multi-item menu is keyboard-unusable under it); the card's physics
+     instead. Escape closes and RETURNS FOCUS to the trigger, a click outside
+     closes, Tab walks the items in natural order and leaving them closes, the
+     arrows move between items, opening one closes the other, and an item
+     activated closes its band. Plain links in a disclosure — aria-expanded +
+     aria-controls, no menu role — so what is announced is what ships. The open
+     move is CSS (bandIn), so the kill switch owns it. Every read of the profile
+     trigger is by class, and signed out it is simply hidden: nothing here can
+     throw with no session, which is the public map's default state. ══ */
+  function openBand() { return document.querySelector('.menuBand:not([hidden])'); }
+  function closeMenus() {
+    var open = openBand();
+    if (!open) return;
+    var trig = document.querySelector('.trig[aria-expanded="true"]');
+    var inside = open.contains(document.activeElement);
+    open.hidden = true;
+    if (trig) trig.setAttribute('aria-expanded', 'false');
+    /* focus restoration is a property of the close, not of one caller */
+    if (inside && trig) trig.focus();
+  }
+  function openMenu(trig, byKeyboard) {
+    closeMenus();
+    foldSearch(false);
+    trig.setAttribute('aria-expanded', 'true');
+    var band = $(trig.getAttribute('aria-controls'));
+    band.hidden = false;
+    /* Enter/Space on the trigger lands on the first item; a pointer stays put */
+    if (byKeyboard) { var first = band.querySelector('.bandCell:not([hidden]) a'); if (first) first.focus(); }
+  }
+  document.querySelectorAll('.trig').forEach(function (t) {
+    t.addEventListener('click', function (ev) {
+      if (t.getAttribute('aria-expanded') === 'true') closeMenus();
+      else openMenu(t, ev.detail === 0);
+    });
+  });
+  document.addEventListener('click', function (ev) {
+    if (!openBand()) return;
+    if (ev.target.closest && (ev.target.closest('.menuBand') || ev.target.closest('.trig'))) return;
+    closeMenus();
+  });
+  document.addEventListener('keydown', function (ev) {
+    var open = openBand();
+    if (!open) {
+      /* Escape with the folded search open (under 480) folds it and hands focus back */
+      if (ev.key === 'Escape' && $('qWrap').classList.contains('is-open')) { foldSearch(false); $('qToggle').focus(); }
+      return;
+    }
+    if (ev.key === 'Escape') { closeMenus(); return; }
+    if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp') return;
+    var items = Array.prototype.filter.call(open.querySelectorAll('a'), function (a) { return !a.closest('[hidden]'); });
+    if (!items.length) return;
+    var at = items.indexOf(document.activeElement);
+    ev.preventDefault();
+    items[(at + (ev.key === 'ArrowDown' ? 1 : items.length - 1) + items.length) % items.length].focus();
+  });
+  document.querySelectorAll('.menuBand').forEach(function (b) {
+    /* an item is a real link or a view switch: either way its band closes */
+    b.addEventListener('click', function (ev) {
+      if (ev.target.closest && ev.target.closest('a')) closeMenus();
+    });
+    /* Tab out of the band closes it; a null relatedTarget is left alone (the
+       window losing focus, a click on nothing) — the document click covers it */
+    b.addEventListener('focusout', function (ev) {
+      var to = ev.relatedTarget;
+      if (!to || b.contains(to) || (to.closest && to.closest('.trig'))) return;
+      closeMenus();
+    });
+  });
+
+  /* the folded search (under 480): the magnifier opens one hairline row under
+     the bar and hands focus to the field; Escape folds it and returns focus; an
+     opening menu folds it. Above 480 the class is inert — the field is in the bar. */
+  function qFolded() { return getComputedStyle($('qToggle')).display !== 'none'; }
+  function foldSearch(open) {
+    $('qWrap').classList.toggle('is-open', !!open);
+    $('qToggle').setAttribute('aria-expanded', open ? 'true' : 'false');
+  }
+  $('qToggle').addEventListener('click', function () {
+    var open = $('qToggle').getAttribute('aria-expanded') !== 'true';
+    closeMenus();
+    foldSearch(open);
+    if (open) $('mapQ').focus();
   });
 
   /* The platform's own row is not in the catalog (it is synthesized — task
@@ -2244,18 +2345,24 @@ summary{min-height:24px;padding:3px 0;}
     document.addEventListener('keyup', function (e) {
       if (e.key !== 'Shift' || !solo) return;
       solo = false;
-      /* never steal focus out of the open project card (it is aria-modal) */
-      if (currentView !== 'map' || !$('cardScrim').hidden) return;
+      /* one source of truth — the search's own visibility (hidden off the
+         map) — and never steal focus out of the open card or an open band */
+      if ($('qWrap').hidden || !$('cardScrim').hidden || openBand()) return;
       var t = document.activeElement;
       if (t && /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName)) return;
-      var q = $('mapQ');
-      if (q) q.focus();
+      if (qFolded()) foldSearch(true);   /* under 480 the field is behind the magnifier */
+      $('mapQ').focus();
     });
   })();
 
   function setSub(which) {
-    $('sub-sky').setAttribute('aria-pressed', String(which === 'sky'));
-    $('sub-table').setAttribute('aria-pressed', String(which === 'table'));
+    currentSub = which;
+    /* the Sky and Table items of the Projects band are the control (task
+       1003300): the one on stage is current, the other a plain link */
+    document.querySelectorAll('[data-nav="map"][data-sub]').forEach(function (a) {
+      if (a.dataset.sub === which && currentView === 'map') a.setAttribute('aria-current', 'page');
+      else a.removeAttribute('aria-current');
+    });
     $('sub-sky-body').hidden = which !== 'sky';
     $('sub-table-body').hidden = which !== 'table';
     /* the sim runs only while the sky is on stage (C8); anchors that were
@@ -2265,8 +2372,6 @@ summary{min-height:24px;padding:3px 0;}
       startSky();
     } else { stopSky(); hideHover(); }
   }
-  $('sub-sky').addEventListener('click', function () { setSub('sky'); });
-  $('sub-table').addEventListener('click', function () { setSub('table'); });
 
   /* the starfield only paints where --star-display is block (dark mode) */
   (function stars() {
@@ -5240,16 +5345,21 @@ summary{min-height:24px;padding:3px 0;}
   /* ── boot: who am I → my instances ────────────────────────────────────── */
 
   function renderWho() {
-    var w = $('who');
+    var w = $('who'), b = $('bandWho');
+    var login = me ? (me.github_login || 'signed in') : '';
     if (me) {
-      /* the chip carries the one session control this page owes its visitor:
-         Sign out (task 1002952). The anchor's href is the honest hover target;
-         the delegated click below upgrades it to the real POST. */
-      w.innerHTML = (me.avatar_url ? '<img src="' + esc(me.avatar_url) + '" alt="">' : '') +
-        '<span>' + esc(me.github_login || 'signed in') + '</span>' +
-        '<a class="signout" href="' + API + '/auth/logout">Sign out</a>';
+      /* the chip is the profile band's trigger (task 1003300): avatar + login +
+         a chevron. The one session control this page owes its visitor, Sign
+         out (task 1002952), is a static anchor in that band; the delegated
+         click below upgrades it to the real POST. The band names the person. */
+      var who = (me.avatar_url ? '<img src="' + esc(me.avatar_url) + '" alt="">' : '') +
+        '<span class="whoName">' + esc(login) + '</span>';
+      w.innerHTML = who + '<svg class="cv" viewBox="0 0 20 20" aria-hidden="true"><path d="m5.6 8 4.4 4.4L14.4 8"/></svg>';
+      w.setAttribute('aria-label', 'Account, ' + login);
+      b.innerHTML = who;
     } else {
       w.innerHTML = '';
+      b.innerHTML = '';
     }
   }
 
@@ -5273,7 +5383,7 @@ summary{min-height:24px;padding:3px 0;}
     };
     fetch(API + '/auth/logout', { method: 'POST', credentials: 'same-origin' }).then(finish, finish);
   }
-  $('who').addEventListener('click', function (ev) {
+  $('menuProfile').addEventListener('click', function (ev) {
     var a = ev.target.closest && ev.target.closest('a.signout');
     if (!a) return;
     ev.preventDefault();
@@ -5304,8 +5414,11 @@ summary{min-height:24px;padding:3px 0;}
     var signedIn = !!me;
     $('signinTop').hidden = signedIn;
     $('who').hidden = !signedIn;
-    document.querySelector('[data-nav="mine"]').hidden = !signedIn;
+    /* every Your-projects item a band carries (§6 asked for querySelectorAll so
+       a second data-nav="mine" item could never become a signed-out leak) */
+    document.querySelectorAll('[data-nav="mine"]').forEach(function (a) { (a.closest('.bandCell') || a).hidden = !signedIn; });
     $('onlyMine').closest('.switch').hidden = !signedIn;
+    if (!signedIn) closeMenus();
     if (!signedIn && $('onlyMine').checked) { $('onlyMine').checked = false; applyMapFilter(); }
   }
 
@@ -5313,6 +5426,9 @@ summary{min-height:24px;padding:3px 0;}
      any request resolves — /projects?view=new must land on the create view even
      if the identity call is slow or fails. */
   setView(viewFromUrl());
+  /* the Table item's deep link (and the landing's) names the sub-view; a view change
+     never writes it back, so a reload from the band returns to the sky as before */
+  if (new URLSearchParams(location.search).get('sub') === 'table') setSub('table');
 
   fetch(API + '/me', { credentials: 'same-origin' })
     .then(function (res) { if (!res.ok) throw new Error(String(res.status)); return res.json(); })

package/src/module-api.js

@@ -1226,8 +1226,10 @@ const { validateOrRespond, LIMITS, parseId, asyncHandler, corsPublicGet, parsePa
 //         landed since 1.19.391 with no explicit bump. run 33176032603. (task 1002620)
 //   1.19.393 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
 //         landed since 1.19.392 with no explicit bump. run 33177136260. (task 1002620)
+//   1.19.394 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
+//         landed since 1.19.393 with no explicit bump. run 33182535783. (task 1002620)
 // ---------------------------------------------------------------------------
-const CORE_VERSION = '1.19.393'; // CI auto-patch carrier (ADR 0161); see changelog above
+const CORE_VERSION = '1.19.394'; // CI auto-patch carrier (ADR 0161); see changelog above
 
 // A namespaced logger so a module's log lines are attributable + consistent.
 // Usage: const log = api.logger('dev-box'); log.info('mounted');