@bongos/core 1.24.60 → 1.24.62

package/modules/hall-ui/public/approval-queue.css

@@ -67,9 +67,11 @@ html.aq-open { overflow: hidden; }
   min-width: 0;
   box-sizing: border-box;
   padding: 26px 30px;
-  border-radius: 30px;
+  /* the shared dialog's corner and hairline (controls.css .hall-dialog, task
+     1005137): the glass is the artboard's, the shape is the hall's one dialog */
+  border-radius: var(--ds-radius-panel);
   background: var(--aq-glass);
-  border: 1px solid var(--aq-glass-edge);
+  border: var(--line) solid var(--aq-glass-edge);
   backdrop-filter: blur(30px) saturate(160%);
   -webkit-backdrop-filter: blur(30px) saturate(160%);
   box-shadow: inset 0 1px 0 var(--aq-glass-rim), var(--ds-shadow-pop);
@@ -309,7 +311,7 @@ html.aq-open { overflow: hidden; }
   .aq-overlay { padding: 8px; align-items: stretch; --aq-scrim: rgba(4, 5, 9, .88); }
   html[data-theme] .aq-overlay,
   html:not([data-theme]) .aq-overlay { --aq-scrim: rgba(4, 5, 9, .88); }
-  .aq-dialog { width: min(100%, calc(100vw - 16px)); height: min(100%, calc(100dvh - 16px)); padding: 18px 16px; border-radius: 22px; overflow-y: auto; gap: 14px; }
+  .aq-dialog { width: min(100%, calc(100vw - 16px)); height: min(100%, calc(100dvh - 16px)); padding: 18px 16px; overflow-y: auto; gap: 14px; }
   .aq-dialog > * { flex-shrink: 0; }
   .aq-head { flex-wrap: wrap; row-gap: 10px; }
   .aq-eyebrow { order: 1; flex: 1 1 auto; }

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

@@ -25,6 +25,11 @@
    in the window, lighter towers with unlit panes, a warm wall and floor, the
    lamp off and a patch of sun on the floor. The glass panels over the room
    follow its sky; the hall chrome still keeps its own light and dark.
+   EXCEPT IN DARK (task 1005137): the day room is a light-theme room. Under the
+   hall's dark theme a cream room sat beside a black rail and bar, so every day
+   rule below is scoped html:not([data-theme="dark"]) and dark keeps the night
+   room at any hour. data-sky is only ever set by studio.js after shell.js has
+   set data-theme, so the one selector covers first paint too.
 
    The second half is the older reviews' garden (R06 of goal 1000074, task
    1003117), which still answers the reviews filed before Tweak Mode (TW14) in
@@ -85,8 +90,8 @@ body[data-page="studio"] {
    inks are set darker than the mockup's so they hold AA on the glass over a
    light wall (records/studio.md): the link, and the credits figure and focus
    ring, which by night are the accent. */
-body[data-page="ai-studio"][data-sky="day"],
-body[data-page="studio"][data-sky="day"] {
+html:not([data-theme="dark"]) body[data-page="ai-studio"][data-sky="day"],
+html:not([data-theme="dark"]) body[data-page="studio"][data-sky="day"] {
   --st-room: #efe7dc;
   --st-frame: #d6c9b7;
   --st-night: #bfdaf0;
@@ -132,17 +137,17 @@ body[data-page="studio"][data-sky="day"] {
 }
 /* The panels' scrim is the day wall's own tint, whatever the hall's theme, set
    on the overlay so it outranks the theme's .42 and the phone's .88. */
-body[data-page="studio"][data-sky="day"] .st-overlay {
+html:not([data-theme="dark"]) body[data-page="studio"][data-sky="day"] .st-overlay {
   --st-scrim: rgba(239, 231, 220, .9);
   color-scheme: light;
 }
-body[data-page="ai-studio"][data-sky="day"] .studio,
-body[data-page="studio"][data-sky="day"] .studio { color-scheme: light; }
+html:not([data-theme="dark"]) body[data-page="ai-studio"][data-sky="day"] .studio,
+html:not([data-theme="dark"]) body[data-page="studio"][data-sky="day"] .studio { color-scheme: light; }
 /* The Approval queue (approval-queue.css) is night glass on its own root; over
    the day room it wears the same day glass as the studio's own panels. Its
    rendered page stays on its paper frame, and its accent button stays the
    accent, which carries black words at AA in either sky. */
-body[data-page="studio"][data-sky="day"] .aq-overlay {
+html:not([data-theme="dark"]) body[data-page="studio"][data-sky="day"] .aq-overlay {
   color-scheme: light;
   --aq-scrim: rgba(239, 231, 220, .9);
   --aq-glass: rgba(255, 255, 255, .75);
@@ -159,7 +164,7 @@ body[data-page="studio"][data-sky="day"] .aq-overlay {
   --aq-link: var(--accent-deep);
   --aq-rule: rgba(60, 40, 20, .12);
 }
-body[data-page="studio"][data-sky="day"] .aq-overlay :focus-visible { outline-color: var(--st-focus); }
+html:not([data-theme="dark"]) body[data-page="studio"][data-sky="day"] .aq-overlay :focus-visible { outline-color: var(--st-focus); }
 
 /* The stage fills the content box: the hall's content column is a reading
    width, and the artboard is the whole window. */
@@ -288,11 +293,11 @@ html[data-fullscreen="on"] body[data-page="studio"] .fullscreen-toggle {
 
 /* The day room: the sun rides higher and larger than the moon, the stars and
    the lamp's glow are gone, the clouds and the patch of sun are there. */
-body[data-sky="day"] .st-moon { left: 394px; top: 42px; width: 76px; height: 76px; box-shadow: 0 0 80px 26px var(--st-moon-halo); }
-body[data-sky="day"] .st-star,
-body[data-sky="day"] .st-glow { opacity: 0; }
-body[data-sky="day"] .st-cloud { opacity: .9; }
-body[data-sky="day"] .st-sunpatch { opacity: .7; }
+html:not([data-theme="dark"]) body[data-sky="day"] .st-moon { left: 394px; top: 42px; width: 76px; height: 76px; box-shadow: 0 0 80px 26px var(--st-moon-halo); }
+html:not([data-theme="dark"]) body[data-sky="day"] .st-star,
+html:not([data-theme="dark"]) body[data-sky="day"] .st-glow { opacity: 0; }
+html:not([data-theme="dark"]) body[data-sky="day"] .st-cloud { opacity: .9; }
+html:not([data-theme="dark"]) body[data-sky="day"] .st-sunpatch { opacity: .7; }
 
 /* The room's only motion: the clouds drift, and a change of sky fades over
    .8s. Both live only without a reduced-motion preference, and style.css's
@@ -312,16 +317,10 @@ body[data-sky="day"] .st-sunpatch { opacity: .7; }
 .st-actions { position: relative; z-index: 1; }
 
 /* ---------------------------------------------------------------------------
-   The top row: the room's name, and the tally pill.
+   The top row: the tally pill. (The room's name, a mono eyebrow above the
+   greeting, went in task 1005137: DESIGN.md bans a label block over the h1.)
    --------------------------------------------------------------------------- */
 .st-top { display: flex; align-items: center; min-height: 48px; gap: 16px; flex-wrap: wrap; }
-.st-eyebrow {
-  font-family: var(--st-mono);
-  font-size: 11px;
-  letter-spacing: .14em;
-  text-transform: uppercase;
-  color: var(--st-ink-faint);
-}
 .st-tally {
   margin-left: auto;
   display: flex;

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

@@ -80,11 +80,10 @@
           <div class="st-leaf st-leaf--2"></div>
         </div>
 
-        <!-- The name of the room, and the artist's tally (GET /copy-desk/tally)
+        <!-- The artist's tally (GET /copy-desk/tally)
              in a glass pill top right. The shell's full-screen button keeps the
              window's corner above it. -->
         <div class="st-top">
-          <span class="st-eyebrow">{{worldName}} · studio</span>
           <div class="st-tally" id="st-tally" hidden>
             <span class="st-tally__item"><span class="st-tally__n st-tally__n--credits" id="st-tally-credits">0</span><span class="st-tally__label">credits</span></span>
             <span class="st-tally__rule" aria-hidden="true"></span>

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

@@ -1307,7 +1307,7 @@ html[data-fullscreen="on"][data-fullscreen-plain="on"] .app-content { padding-to
   display: inline-flex;
   align-items: center;
   gap: 2px;
-  padding: 3px;
+  padding: 2px;
   border-radius: var(--radius-pill);
   box-shadow: inset 0 0 0 1px var(--glass-edge);
   flex-shrink: 0;
@@ -1959,6 +1959,15 @@ html.pb-editing main { padding-bottom: 180px; }
   .topbar-trail .topbar-back svg { display: block; }
   .topbar-trail .topbar-back { padding: 0 8px; }
   .topbar-trail ~ .topbar-title { display: block; }
+  /* The 320 top bar (task 1005137): the menu, the Update pill, the search, the
+     mode switch and the three toggles measured 340px in a 320px bar, so the
+     theme and full-screen icons were cut off at the edge. Here the bar packs
+     tighter and each icon button is 28px — still above the 24px floor — so the
+     whole row fits with room to spare. Pinned in tests/hall_topbar_320.mjs. */
+  .app-topbar { gap: var(--ds-space-hair); padding: 0 var(--ds-space-xs); }
+  .topbar-menu, .theme-toggle, .fullscreen-toggle { width: 28px; height: 28px; }
+  .zoom-toggle { min-width: 28px; height: 28px; padding: 0 6px; }
+  .topbar-side .topbar-jump { min-width: 28px; padding: 0 6px; }
 }
 .zoom-toggle__pct {
   font-size: 12px;
@@ -4335,15 +4344,18 @@ a.stat-tile:hover .stat-tile__sub { color: var(--ink-soft); }
    no new theme vars, so dark mode follows the neutral flip for free. The overlay
    mirrors .deeplink-card's posture (fixed scrim + centred panel, z above the
    drawer) so the two modal surfaces read as one system. */
+/* One shape with its neighbour (task 1005137): the search slot and the mode
+   switch beside it are both a 32px pill with the same glass hairline, where the
+   slot used to be a squarer, filled box next to a round one. */
 .topbar-jump {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 32px;
-  padding: 0 10px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--surface);
+  padding: 0 12px 0 10px;
+  border: 1px solid var(--glass-edge);
+  border-radius: var(--radius-pill);
+  background: none;
   color: var(--ink-faint);
   font: inherit;
   font-size: 13px;

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

@@ -109,6 +109,21 @@ html[data-fullscreen="on"] .sky-stage .top { padding-right: 184px; }
 
 .top { position: fixed; left: 0; right: 0; top: 0; padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 0; display: flex; align-items: flex-start; gap: 16px; pointer-events: none; z-index: 5; }
 .top > * { pointer-events: auto; }
+/* The sky is pannable, so its marks will always pass under the header strip and
+   the legend. Each band stands on a veil of the void that fades into the sky
+   (task 1005137: dots painted over the counts, the what-if pill and the legend).
+   The veil sits inside the band's own stacking layer, under its words and above
+   the canvas, and never catches the pointer. */
+.top::before, .foot::before { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; }
+.top::before { top: 0; bottom: -24px; background: linear-gradient(to bottom, var(--void) 62%, transparent); }
+.foot::before { bottom: 0; top: -24px; background: linear-gradient(to top, var(--void) 62%, transparent); }
+/* the ground the sky's own words stand on: a glow of the void itself, so a dot
+   passing under a count or a legend word dims instead of painting over it — in
+   both modes, since the void is the mode's ground */
+.top, .foot, .composer { --sky-halo: 0 0 6px var(--void), 0 0 14px var(--void), 0 0 2px var(--void); }
+.stats, .gravity, .obj, .alt { text-shadow: var(--sky-halo); }
+/* the composer's hint floats lower than the strip's veil, so it carries its own */
+.gravity:not(:empty) { padding: 2px 12px; border-radius: var(--ds-radius-tile); background: color-mix(in srgb, var(--void) 78%, transparent); }
 .brand { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
 .brand h1 { margin: 0; font-size: 26px; font-weight: 300; letter-spacing: -.035em; line-height: 1.05; white-space: nowrap; }
 .brand h1 em { font-style: normal; color: var(--ink-dim); }
@@ -262,7 +277,9 @@ html[data-fullscreen="on"] .sky-stage .top { padding-right: 184px; }
 .mk.settled { width: 12px; height: 12px; background: transparent; border: 1px solid color-mix(in srgb, var(--ink) 50%, transparent); box-shadow: inset 0 0 0 3px var(--void), inset 0 0 0 4px color-mix(in srgb, var(--ink) 35%, transparent), 0 0 8px color-mix(in srgb, var(--ink) 25%, transparent); }
 .mk.collapsed { width: 9px; height: 9px; background: var(--void); border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); box-shadow: 0 0 0 2px var(--void), 0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent); }
 .mk.unseen { width: 12px; height: 12px; background: transparent; border: 1px dashed color-mix(in srgb, var(--ink) 20%, transparent); }
-.mk.task { width: 4px; height: 4px; background: color-mix(in srgb, var(--ink) 60%, var(--void)); }
+/* `task` is also the hall's task-card class (style.css): its card padding blew the
+   legend's 4px dot up into a 48px blob over its own word, so it is zeroed here. */
+.mk.task { width: 4px; height: 4px; padding: 0; border: 0; background: color-mix(in srgb, var(--ink) 60%, var(--void)); }
 .mk.task.live { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
 .mk.born { width: 10px; height: 10px; background: transparent; border: 1px solid var(--accent); box-shadow: inset 0 0 0 2px var(--void), inset 0 0 0 5px var(--accent); }
 .mk.route { width: 14px; height: 2px; border-radius: 1px; background: var(--chart); box-shadow: 0 0 6px var(--chart); }

package/modules/hall-ui/records/studio.md

@@ -34,7 +34,8 @@ Where it differs from the mockup, and why:
 - **The link, the credits figure and the focus ring are #96410f by day**, not the mockup's #a3481a link and #fb9569 accent: #a3481a on Resume's tint over the wall is 4.3:1, under AA, and the accent is 1.8:1 on the wall.
 - **The quiet inks are #5a595f (faint) and #66656b (dim, hint)** where the mockup has the one #66656b: the studio has three quiet tiers, and each holds AA on the glass and the bare wall (the hint is the lowest, 4.7:1).
 - **The sun, clouds and sun patch are placed for the studio's 560px window** (the mockup's is 520px): the sun at 394/42 and 76px, the clouds about 8% larger, the patch 20px right to sit under the studio's lamp.
-- **The panels follow the sky**: by day the two glass panels and the Approval queue wear white glass (.75) over a scrim of the wall's own tint (.9) in either hall theme and on a phone. The queue's rendered page stays on its paper frame. The mockup draws no panel.
+- **The day room is a light-theme room (task 1005137).** Under the hall's dark theme a cream room sat beside the black rail and bar, so every day rule is scoped `html:not([data-theme="dark"])`: in dark the room is the night room at any hour, and the clock only changes the greeting. The room's mono eyebrow ("{{worldName}} · studio") went in the same task, since DESIGN.md bans a label above the h1, and the Approval queue took the shared dialog's corner and hairline.
+- **The panels follow the sky**: by day the two glass panels and the Approval queue wear white glass (.75) over a scrim of the wall's own tint (.9) on a phone and in the light theme. The queue's rendered page stays on its paper frame. The mockup draws no panel.
 - **"Good morning." while being typed over shows the page's greeting line**, "Good evening.", the one line a tweak can rewrite. Rewritten, it is the greeting at every hour.
 - **On a phone the sun patch lies on the phone's floor** (bottom right, 300 by 70); the mockup hides it under 900px, but the studio's phone keeps its desk.
 - **The stars do not twinkle and the lamp does not breathe at night**: the night room stays as it shipped. This task adds only the day room's drift.

package/modules/hall-ui/specimens/components.css

@@ -3,6 +3,13 @@
    sheets; this lays them out in sections and stops the live toast and the
    dialog from floating, so each sits at rest where it can be looked at. */
 body[data-page="components"] { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--font-body); }
+/* The hall layering (task 1005137): style.css paints the plate and its veil as
+   fixed body::before / body::after at z-index 0, and a hall page lifts its
+   content above them (.app-body is position: relative; z-index: 1). The
+   specimen has no .app-body, so in dark the veil (--plate-veil, black at .82-.93)
+   lay OVER every section and the page read as near-black. Its two blocks take
+   the same lift. Pinned in tests/hall_topbar_320.mjs. */
+.spec-head, .spec-main { position: relative; z-index: 1; }
 .spec-head, .spec-main { box-sizing: border-box; max-width: 980px; margin: 0 auto; padding: 0 var(--ds-space-md); }
 .spec-head { padding-top: var(--ds-space-sm); padding-bottom: var(--ds-space-hair); }
 .spec-kicker { display: inline-block; margin: 0 var(--ds-space-xs) 0 0; vertical-align: middle; font-family: var(--label-face); font-size: var(--label-size); font-weight: 400; letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-faint); }

package/modules/public-landing/public/index.html

@@ -887,11 +887,12 @@ composition A; landing composition v3, picked by the owner 2026-08-27. No roll,
 <!--apex-only:start-->
   <!-- The maker's band (task 1005091): the company is the pack's (identity.company), never
        a name written into the portable landing, and the band drops whole when the pack
-       names none. The medallion is the hub's own asset. -->
+       names none. Its mark is the pack's too (identity.company.mark, task 1005139): no
+       mark in the pack, no image, so another company never wears the hub's medallion. -->
   <!--brand-if:companyName--><section class="band">
     <div class="wrap verro">
-      <img src="/assets/verro-medallion.png" width="384" height="384" loading="lazy" decoding="async"
-           alt="The {{companyName}} mark">
+      <!--brand-if:companyMark--><img src="{{companyMark}}" width="384" height="384" loading="lazy" decoding="async"
+           alt="The {{companyName}} mark"><!--/brand-if:companyMark-->
       <div>
         <p class="wordmark">{{companyName}}</p>
         <p class="body">Built by {{companyName}}, {{productName}} is our way of making AI co-building usable by entire project groups, whether that's a 5,000-person company, a 100-person department, a college research project, or a solo dev.</p>

package/modules/status-ui/public/README.md

@@ -17,7 +17,7 @@ The mirror is a port of these files with three changes:
 
 1. **Availability banner (always truthful):** a top strip reads the external prober's `status.json` from the off-box `status-data` branch (`raw.githubusercontent.com`) — so it shows the *real* up/down even when the droplet (and its API) are down.
 2. **Dev panels (degrade gracefully):** `status.js`'s `API` base points at the absolute droplet origin (`https://example.com`); `/api/bongos/public/*` now sends `<redacted>: *` (see `src/bongos/routes/public.js`) so the panels load cross-origin. Each fetch already `.catch(() => null)`, so when the droplet is down the panels show their empty state instead of breaking the page.
-3. **Assets are relative** so the page works at both the GitHub Pages URL and the custom domain.
+3. **Assets are root-absolute** (`/style.css`, `/status.js`, `/modules/ui-design/public/tokens.css`, `/modules/ui-design/public/brand/…`, `/modules/hall-ui/public/controls.css`): `scripts/status-mirror-sync.js` publishes the shared files at the same paths, so the links resolve on the custom domain (served from the host root). They do not resolve under a GitHub Pages project sub-path (`<owner>.github.io/<repo>/`), so the mirror must be served from a domain root.
 
 ## Probing & alerting
 

package/modules/ui-design/docs/design-contract.md

@@ -248,7 +248,9 @@ Adapters are discovered by the design subsystem at runtime. No static registry
 
 ## 5. CSS variable injection at runtime
 
-The design system renders as CSS custom properties injected into the document at boot, consistent with the existing `themeMarkup` pattern in `src/branding.js`. The naming convention:
+> **What is live (task 1005139).** No served page reads a `--dt-*` variable today. The live surfaces read the fifteen pack tokens that `themeMarkup` (`src/theme-markup.js`) splices into every page, and the `--ds-*` scales of the shared token sheet `modules/ui-design/public/tokens.css`. The `--dt-*` names below are emitted only by the adapters' token-preview bundle (`adapters/claude-design/index.js`, `adapters/figma/index.js`), for a surface authored through an adapter under `src/ui/` — and none exists yet (`config/design-sources.json` is empty). [Task 1005092](https://cloudbongos.com/builders#/task/1005092) will publish the generated `/brand` reference as a Claude Design System; until a surface is authored through an adapter, read this section as the contract that output must follow, not as a description of the served pages.
+
+The design system renders as CSS custom properties injected into the document at boot, consistent with the existing `themeMarkup` pattern in `src/theme-markup.js`. The naming convention:
 
 ```css
 --dt-color-bg:          /* tokens.colors.bg */

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.24.60",
+  "version": "1.24.62",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.24.60",
+      "version": "1.24.62",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "express": "^4.21.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.24.60",
+  "version": "1.24.62",
   "description": "Cloud Bongos — the AI-first build platform core (GDS + platform surfaces + module system), installed as a versioned dependency (ADR 0108).",
   "license": "AGPL-3.0-or-later",
   "main": "src/platform-server.js",

package/release-notes.json

@@ -11335,5 +11335,17 @@
       "id": "1005134",
       "text": "The automatic check that stops pages from typing in their own colours and sizes now also catches colours given a custom name and styles written directly inside a page, so those shortcuts can no longer slip new colours past it."
     }
+  ],
+  "1.24.61": [
+    {
+      "id": "1005139",
+      "text": "The design docs now describe what is actually live, and the landing page shows a company's logo only when that company's settings provide one, so other projects no longer show the Verro Labs medallion."
+    }
+  ],
+  "1.24.62": [
+    {
+      "id": "1005137",
+      "text": "On a phone the hall's top bar now fits without cutting off buttons, the Studio stays a night room in dark mode, the sky page's dots no longer cover its labels, and the components reference page is readable in dark mode."
+    }
   ]
 }

package/src/bongos/serve-internal.js

@@ -146,8 +146,9 @@ function injectBrandingGlobal(html, brand = clientBranding(), mods = clientModul
 // served page can carry a correct cross-host href or canonical/og: URL: a client
 // fill cannot reach them, and a baked one would make every instance advertise
 // whichever instance happened to author the file (task 1002748, direction C5/C6).
-// {{companyName}} {{companySite}} {{companyTagline}} are optional, so a page wraps
-// each clause in a brand-if region that drops whole when its field is empty (task 1002853).
+// {{companyName}} {{companySite}} {{companyTagline}} {{companyMark}} (the company's mark
+// image URL, task 1005139) are optional, so a page wraps each clause in a brand-if region
+// that drops whole when its field is empty (task 1002853).
 // Pure + exported for the test; both origins are injectable so it drives with zero I/O.
 function applyBrandTokens(html, brand = clientBranding(), origin = safePublicOrigin(), hallOrigin = safeBuildersOrigin(), sourceRepo = safeSourceRepoUrl(), instanceBase = safeInstanceBase(), hubOrigin = safeHubOrigin()) {
   const world = (brand.identity && brand.identity.worldName) || '';
@@ -157,7 +158,7 @@ function applyBrandTokens(html, brand = clientBranding(), origin = safePublicOri
   const Cur = cur ? cur.charAt(0).toUpperCase() + cur.slice(1) : cur;
   const hall = hallOrigin || origin || '';
   const company = (brand.identity && brand.identity.company) || {};
-  const conditioned = applyBrandConditionals(html == null ? '' : html, { companyName: company.name, companySite: company.site, companyTagline: company.tagline });
+  const conditioned = applyBrandConditionals(html == null ? '' : html, { companyName: company.name, companySite: company.site, companyTagline: company.tagline, companyMark: company.mark });
   return dropEmptyHrefLinks(conditioned, { publicOrigin: origin || '', buildersOrigin: hall, sourceRepoUrl: sourceRepo || '' })
     .split('{{worldName}}').join(esc(world))
     .split('{{productName}}').join(esc(product))
@@ -167,6 +168,7 @@ function applyBrandTokens(html, brand = clientBranding(), origin = safePublicOri
     .split('{{companyName}}').join(esc(company.name))
     .split('{{companySite}}').join(esc(company.site))
     .split('{{companyTagline}}').join(esc(company.tagline))
+    .split('{{companyMark}}').join(esc(company.mark || ''))
     .split('{{publicOrigin}}').join(esc(origin || ''))
     // a pack that names no hall of its own resolves to its OWN apex — never to
     // whichever instance authored the file

package/src/branding.js

@@ -254,6 +254,8 @@ function clientBranding(b = branding()) {
         name: b.identity?.company?.name || '',
         site: b.identity?.company?.site || '',
         tagline: b.identity?.company?.tagline || '',
+        // the company's mark, an image URL; '' shows none (task 1005139)
+        mark: b.identity?.company?.mark || '',
       },
     },
     currency: {

package/src/module-api.js

@@ -81,7 +81,7 @@ const { sleep } = require('./sleep');
 // MAJOR (see allowBoxScope below): passes the request through untouched.
 function deprecatedNoopMiddleware(_req, _res, next) { next(); }
 
-const CORE_VERSION = '1.24.60'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
+const CORE_VERSION = '1.24.62'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
 
 // A namespaced logger so a module's log lines are attributable + consistent.
 // Usage: const log = api.logger('discord'); log.info('mounted');

package/tests/brand_surfaces.mjs

@@ -214,3 +214,17 @@ test('the landing names its maker only from the pack, and drops the band when th
   const none = stamp('');
   assert.doesNotMatch(none, /class="wrap verro"|held by|Built by ,/, 'the band and the line drop whole');
 });
+
+// task 1005139: the band's image is the pack's (identity.company.mark). A pack that names a
+// company but no mark shows the name without an image — never the hub's medallion.
+test('the maker band shows the company mark only from the pack', () => {
+  const src = fs.readFileSync(path.join(ROOT, 'modules', 'public-landing', 'public', 'index.html'), 'utf8');
+  assert.doesNotMatch(src.replace(/<!--(?!\/?brand-if)[\s\S]*?-->/g, '').replace(/\/\*[\s\S]*?\*\//g, ''), /medallion/, 'no maker\'s image written into the portable page');
+  const stamp = (company) => applyBrandTokens(src, { identity: { productName: 'Acme', worldName: 'Acme', company: { site: '', tagline: '', ...company } } }, '', '', '', '', '');
+  const bare = stamp({ name: 'Rocket Labs', mark: '' });
+  assert.ok(bare.includes('<p class="wordmark">Rocket Labs</p>'), 'the band still shows the name');
+  assert.doesNotMatch(bare, /<img[^>]*alt="The Rocket Labs mark"/, 'no mark in the pack, no image');
+  const marked = stamp({ name: 'Rocket Labs', mark: '/assets/rocket.png' });
+  assert.match(marked, /<img src="\/assets\/rocket\.png"[^>]*alt="The Rocket Labs mark">/, 'the pack\'s mark is the image');
+  assert.equal(clientBranding({ identity: { company: { name: 'R', mark: '/m.png' } } }).identity.company.mark, '/m.png');
+});

package/tests/hall_studio_home.mjs

@@ -639,7 +639,14 @@ try {
     assert.match(CSS, /\.st-light \{[^}]*background: var\(--st-pane\)/, 'the panes are lit by night and unlit by day through one token');
     assert.match(CSS, /body\[data-sky="day"\] \.st-cloud \{ opacity: \.9; \}/);
     assert.match(CSS, /body\[data-sky="day"\] \.st-sunpatch \{ opacity: \.7; \}/);
-    assert.match(CSS, /body\[data-sky="day"\] \.st-star,\s*body\[data-sky="day"\] \.st-glow \{ opacity: 0; \}/, 'no stars, and the lamp is off');
+    assert.match(CSS, /body\[data-sky="day"\] \.st-star,\s*html:not\(\[data-theme="dark"\]\) body\[data-sky="day"\] \.st-glow \{ opacity: 0; \}/, 'no stars, and the lamp is off');
+    // task 1005137: the day room is a light-theme room. Under the hall's dark theme a cream room
+    // sat beside the black rail, so EVERY day rule is scoped off dark and dark keeps the night room.
+    const daySelectors = CSS.replace(/\/\*[\s\S]*?\*\//g, '').split(/[{}]/).filter((_, i) => i % 2 === 0)
+      .flatMap((sel) => sel.split(',')).map((x) => x.trim()).filter((x) => x.includes('[data-sky="day"]'));
+    assert.ok(daySelectors.length >= 10, `the day rules are found (${daySelectors.length})`);
+    for (const sel of daySelectors) assert.ok(sel.startsWith('html:not([data-theme="dark"]) '), `${sel} is scoped off the dark theme`);
+    assert.ok(!/st-eyebrow/.test(CSS + HTML), 'no mono eyebrow above the greeting (DESIGN.md bans a label over the h1)');
     assert.match(HTML, /class="st-cloud st-cloud--1"/);
     assert.match(HTML, /class="st-sunpatch"/);
     const anims = [...CSS.matchAll(/animation:\s*[^;]+;|transition:\s*[^;]+;/g)].map((m) => m.index);

package/tests/hall_topbar_320.mjs

@@ -0,0 +1,145 @@
+// tests/hall_topbar_320.mjs — the hall's top bar fits a 320px phone, and the components
+// specimen sits above the plate veil (task 1005137, goal 1000138).
+//
+// WHY. A visual check of the design system found every hall page 340px wide at 320: the menu, the
+// Update pill, the search, the mode switch and the three toggles did not fit, so the theme and
+// full-screen icons were cut off at the edge. And modules/hall-ui/specimens/components.html read as
+// near-black in dark mode, because style.css's body::after veil (--plate-veil) covered the page: a
+// hall page lifts its content over the plate (.app-body, z-index 1) and the specimen did not.
+// Both are layout, so both are measured in a real browser on the REAL markup and the REAL sheets:
+// the shell's own top bar on the Tasks page with the widest set of buttons a page can carry (the
+// Update pill, the search, the full-screen switch), and the specimen as the kit renders it.
+// Skips when the machine has no system Edge or Chrome, as welcome_boot_browser does.
+import assert from 'node:assert/strict';
+import { test, after } from 'node:test';
+import { createRequire } from 'node:module';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const HALL = path.join(ROOT, 'modules', 'hall-ui', 'public');
+const SPEC = path.join(ROOT, 'modules', 'hall-ui', 'specimens');
+const lib = require(path.join(ROOT, 'modules', 'ui-design', 'kit', 'lib.js'));
+
+let browser = null;
+try { browser = await lib.launchBrowser(); } catch (e) { if (!(e instanceof lib.NoBrowserError)) throw e; }
+after(() => browser && browser.close());
+const skip = !browser && 'no system Edge or Chrome';
+
+const ORIGIN = 'http://hall.test';
+const TYPES = { '.js': 'text/javascript', '.css': 'text/css', '.html': 'text/html' };
+
+// The Tasks page's real markup, its scripts swapped for the shell's own, on a page that opts into
+// the full-screen switch (Studio and Thinking do), so the bar carries every button it can.
+const WORK = fs.readFileSync(path.join(HALL, 'work.html'), 'utf8')
+  .replace(/<script\b[^>]*>[\s\S]*?<\/script>/g, '')
+  .replace(/\{\{[^}]*\}\}/g, '')
+  .replace('<body data-page="work"', '<body data-page="work" data-fullscreen-switch');
+const STUB = '<script>window.__BRANDING__ = { identity: { worldName: "Harbor" } }; window.BongosClient = { createClient: () => ({ request: async () => ({ ok: false, status: 404, data: null }) }) };</script>';
+const SCRIPTS = ['dom-utils.js', 'shell-trail.js', 'craft-mode.js', 'shell.js'].map((f) => `<script src="/builders/${f}"></script>`).join('');
+const PAGE = WORK.replace('</body>', STUB + SCRIPTS + '</body>');
+
+async function context(width, scheme) {
+  const ctx = await browser.newContext({ viewport: { width, height: 700 }, colorScheme: scheme });
+  await ctx.route(ORIGIN + '/**', (route) => {
+    const p = new URL(route.request().url()).pathname;
+    if (p === '/work') return route.fulfill({ contentType: 'text/html', body: PAGE });
+    let f = null;
+    if (p.startsWith('/builders/')) f = path.join(HALL, p.slice('/builders/'.length));
+    else if (p.startsWith('/modules/hall-ui/public/')) f = path.join(HALL, p.slice('/modules/hall-ui/public/'.length));
+    else if (p.startsWith('/modules/ui-design/public/')) f = path.join(ROOT, 'modules', 'ui-design', 'public', p.slice('/modules/ui-design/public/'.length));
+    else if (p.startsWith('/specimens/')) f = path.join(SPEC, p.slice('/specimens/'.length));
+    if (f && TYPES[path.extname(f)] && fs.existsSync(f)) return route.fulfill({ contentType: TYPES[path.extname(f)], body: fs.readFileSync(f) });
+    return route.fulfill({ status: 404, body: '' });
+  });
+  return ctx;
+}
+
+// The bar as update-pill.js and palette.js leave it: the Update pill first in the side, the search
+// shown. Then every button's box, and how wide the document is.
+async function measureBar(width, scheme) {
+  const ctx = await context(width, scheme);
+  const page = await ctx.newPage();
+  await page.goto(ORIGIN + '/work');
+  await page.waitForSelector('#app-topbar .topbar-side #theme-toggle');
+  return page.evaluate(() => {
+    const side = document.querySelector('#app-topbar .topbar-side');
+    if (!document.getElementById('upd-pill')) {
+      const b = document.createElement('button');
+      b.type = 'button'; b.id = 'upd-pill'; b.className = 'upd-pill'; b.setAttribute('data-face', 'ready');
+      b.innerHTML = '<span class="upd-pill__dot" aria-hidden="true"></span><span class="upd-pill__label">Update</span>';
+      side.insertBefore(b, side.firstChild);
+    }
+    const jump = document.getElementById('topbar-jump'); if (jump) jump.hidden = false;
+    const fs = document.getElementById('fullscreen-toggle'); if (fs) fs.hidden = false;
+    const buttons = [...document.querySelectorAll('#app-topbar button')]
+      .filter((b) => getComputedStyle(b).display !== 'none' && b.getClientRects().length)
+      .map((b) => { const r = b.getBoundingClientRect(); return { id: b.id || b.className, left: r.left, right: r.right, w: r.width, h: r.height }; });
+    const bar = document.getElementById('app-topbar').getBoundingClientRect();
+    return { scrollWidth: document.documentElement.scrollWidth, bar: { left: bar.left, right: bar.right }, buttons };
+  }).finally(() => ctx.close());
+}
+
+for (const scheme of ['light', 'dark']) {
+  test(`at 320px the top bar fits, every button inside it and at least 24px (${scheme})`, { skip }, async () => {
+    const m = await measureBar(320, scheme);
+    const ids = m.buttons.map((b) => b.id);
+    for (const want of ['upd-pill', 'topbar-jump', 'zoom-toggle', 'theme-toggle', 'fullscreen-toggle']) {
+      assert.ok(ids.includes(want), `${want} is on the bar (got ${ids.join(', ')})`);
+    }
+    assert.ok(m.scrollWidth <= 320, `the page is ${m.scrollWidth}px wide at 320 (the top bar spills)`);
+    for (const b of m.buttons) {
+      assert.ok(b.left >= 0 && b.right <= 320, `${b.id} sits at ${Math.round(b.left)}..${Math.round(b.right)}, outside 0..320`);
+      assert.ok(b.w >= 24 && b.h >= 24, `${b.id} is ${Math.round(b.w)}x${Math.round(b.h)}, under the 24px floor`);
+    }
+  });
+}
+
+test('the top bar search and the mode switch are one shape: a pill with the same hairline', { skip }, async () => {
+  const ctx = await context(1440, 'dark');
+  const page = await ctx.newPage();
+  await page.goto(ORIGIN + '/work');
+  await page.waitForSelector('#app-topbar #topbar-jump', { state: 'attached' });
+  const s = await page.evaluate(() => {
+    const css = (el) => getComputedStyle(el);
+    const jump = document.getElementById('topbar-jump');
+    jump.hidden = false;   // palette.js shows it; the shape is the sheet's either way
+    const sw = document.getElementById('craft-switch');
+    const root = css(document.documentElement);
+    return {
+      jumpRadius: css(jump).borderTopLeftRadius,
+      switchRadius: css(sw).borderTopLeftRadius,
+      jumpEdge: css(jump).borderTopColor,
+      switchShadow: css(sw).boxShadow,
+      pill: root.getPropertyValue('--ds-radius-pill').trim(),
+    };
+  }).finally(() => ctx.close());
+  assert.equal(s.jumpRadius, s.pill, 'the search is a full pill');
+  assert.equal(s.switchRadius, s.pill, 'the mode switch is a full pill');
+  assert.ok(s.switchShadow.startsWith(s.jumpEdge), `the two share one hairline colour (${s.jumpEdge} vs ${s.switchShadow})`);
+});
+
+test('the components specimen sits above the plate veil in dark (the hall layering)', { skip }, async () => {
+  const ctx = await context(1440, 'dark');
+  const page = await ctx.newPage();
+  await page.goto(ORIGIN + '/specimens/components.html');
+  await page.waitForSelector('.spec-main');
+  const r = await page.evaluate(() => {
+    const veil = getComputedStyle(document.body, '::after');
+    const blocks = [...document.body.children].filter((el) => !/^(SCRIPT|TEMPLATE)$/.test(el.tagName) && getComputedStyle(el).display !== 'none')
+      .map((el) => { const cs = getComputedStyle(el); return { el: el.tagName.toLowerCase() + '.' + el.className, position: cs.position, z: cs.zIndex }; });
+    return { veilImage: veil.backgroundImage, veilZ: veil.zIndex, veilPosition: veil.position, blocks };
+  }).finally(() => ctx.close());
+  // The veil is really there in dark — otherwise this test proves nothing.
+  assert.notEqual(r.veilImage, 'none', 'dark paints the plate veil');
+  assert.equal(r.veilPosition, 'fixed');
+  const veilZ = Number(r.veilZ) || 0;
+  assert.ok(r.blocks.length >= 2, 'the specimen has its head and its main');
+  for (const b of r.blocks) {
+    if (b.position === 'fixed' || b.position === 'absolute') continue;
+    assert.notEqual(b.position, 'static', `${b.el} is static, so the fixed veil paints over it`);
+    assert.ok(Number(b.z) > veilZ, `${b.el} has z-index ${b.z}, not above the veil's ${veilZ}`);
+  }
+});

package/tests/status_company_attribution.mjs

@@ -55,6 +55,6 @@ test('the off-box mirror stamps the footer exactly as the served page does (KEEP
 
 test('clientBranding exposes the company site and tagline the footer stamps from', () => {
   const c = clientBranding({ identity: { company: { name: 'Acme Corp', site: 'https://acme-corp.example', tagline: 'a rocket works' } } });
-  assert.deepEqual(c.identity.company, { name: 'Acme Corp', site: 'https://acme-corp.example', tagline: 'a rocket works' });
-  assert.deepEqual(clientBranding({}).identity.company, { name: '', site: '', tagline: '' });
+  assert.deepEqual(c.identity.company, { name: 'Acme Corp', site: 'https://acme-corp.example', tagline: 'a rocket works', mark: '' });
+  assert.deepEqual(clientBranding({}).identity.company, { name: '', site: '', tagline: '', mark: '' });
 });