@bongos/core 1.24.47 → 1.24.49

package/tests/hall_loading.mjs

@@ -36,13 +36,11 @@ test('the loader is drawn from the Bongos mark, in three sizes', () => {
   for (const sel of ['.hall-loading {', '.hall-loading::before {', '.hall-loading::after {', '.hall-loading--page {', '.hall-loading--inline {']) {
     assert.ok(LOADER.includes(sel), `${sel} is declared`);
   }
-  // The same ring arc, core and dot the shell's brand mark draws, so the loader IS the logo.
-  const ring = SHELL.match(/<path class="mr" d="([^"]+)"/)[1];
-  assert.ok(LOADER.includes(`d='${ring}'`), 'the ring is the brand mark\'s arc');
-  assert.ok(SHELL.includes('<circle class="mp" cx="100" cy="100" r="55"'), 'the brand mark\'s core');
-  assert.ok(LOADER.includes("circle cx='100' cy='100' r='55'"), 'is the loader\'s core');
-  assert.ok(SHELL.includes('<circle cx="156" cy="46" r="12" fill="#fb9569"/>'), 'the brand mark\'s dot');
-  assert.ok(LOADER.includes("circle cx='156' cy='46' r='12'"), 'is the loader\'s dot');
+  // The shell's brand mark and the loader are cut from the one mark (task 1005088), so the
+  // loader IS the logo: the shell references mark.svg, the masks are its ring-and-core and dot.
+  assert.ok(SHELL.includes('<use href="/modules/ui-design/public/brand/mark.svg#mark"/>'), 'the brand mark is the one mark');
+  assert.ok(LOADER.includes('--hl-shape: url("/modules/ui-design/public/brand/mark-body.svg")'), 'the loader\'s ring and core');
+  assert.ok(LOADER.includes('--hl-shape: url("/modules/ui-design/public/brand/mark-dot.svg")'), 'the loader\'s dot');
 });
 
 test('it moves in CSS only, on transform and filter only, and rests on the logo', () => {
@@ -74,9 +72,9 @@ test('every colour is a token; the black in the masks is alpha, not paint', () =
   for (const p of paints) assert.match(p, /^(var\(--[a-z-]+\)|color-mix\(in srgb, var\(--ink\) \d+%, var\(--bg-card\)\))$/, `${p} is a token or a mix of one`);
   // The one accent is the dot: the live thing on a waiting page (the One Warm Thing Rule).
   assert.equal((css.match(/var\(--accent\)/g) || []).length, 1, 'the accent paints the dot alone');
-  const masks = [...css.matchAll(/url\("data:image\/svg\+xml,([^"]+)"\)/g)].map((m) => decodeURIComponent(m[1]));
-  assert.equal(masks.length, 2, 'two masks: the ring and core, and the dot');
-  for (const m of masks) assert.doesNotMatch(m.replace(/stroke='black'|fill='none'/g, ''), /fill='|stroke='|#/, 'a mask carries no colour of its own');
+  // The two masks are the brand folder's one-ink shapes (task 1005088): only their alpha counts.
+  const masks = [...css.matchAll(/url\("\/modules\/ui-design\/public\/brand\/(mark-[a-z]+\.svg)"\)/g)].map((m) => m[1]);
+  assert.deepEqual(masks, ['mark-body.svg', 'mark-dot.svg'], 'two masks: the ring and core, and the dot');
 });
 
 test('the page loaders step aside by themselves, and never show without :has()', () => {

package/tests/hall_oversight_world.mjs

@@ -104,10 +104,13 @@ test('the shared confirm modal sits on --z-modal, closed by one hairline and no
 });
 
 test('a number input inside a family field clears the 24px floor', () => {
-  const css = read('oversight.css');
-  const i = css.indexOf('.ov-field input, .ov-field select, .ov-field textarea {');
-  assert.ok(i > 0, 'the field rule exists');
-  assert.match(css.slice(i, i + 500), /min-height: 30px/, 'the field restates the shell\'s 30px pill');
+  // task 1005084: the shared field (controls.css) reaches a number input itself,
+  // at 40px; the family field only stretches it to the row.
+  const shared = read('controls.css').replace(/\/\*[\s\S]*?\*\//g, '');
+  const m = shared.match(/([^{}]*input\[type="number"\][^{}]*)\{([^{}]*min-height[^{}]*)\}/);
+  assert.ok(m, 'the shared field rule covers a number input');
+  assert.ok(Number((m[2].match(/min-height:\s*(\d+)px/) || [])[1]) >= 24, 'and clears the 24px floor');
+  assert.match(read('oversight.css'), /\.ov-field input, \.ov-field select, \.ov-field textarea \{ width: 100%/, 'the family field stretches it');
   assert.match(read('government.html'), /id="gov-assign-builder" type="number"/, 'the builder id is still a number input');
 });
 

package/tests/hall_record_world.mjs

@@ -66,6 +66,7 @@ const read = (f) => fs.readFileSync(path.join(HALL, f), 'utf8');
 
 const styleCss = read('style.css');
 const recordCss = read('record.css');
+const controlsCss = read('controls.css');
 const taskCss = read('task.css');
 const ideaCss = read('idea.css');
 const ideasCss = read('ideas.css');
@@ -83,6 +84,16 @@ const rule = (css, selector) => {
   return m ? m[2] : null;
 };
 const decomment = (css) => css.replace(/\/\*[\s\S]*?\*\//g, '');
+// The body of the first rule in `css` whose selector LIST holds `selector` and
+// declares `prop` (task 1005084: the shared controls.css lists the hall's button
+// names together, so a name is rarely the last selector before the brace).
+const ruleHolding = (css, selector, prop) => {
+  for (const m of css.replace(/\/\*[\s\S]*?\*\//g, '').matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    const sels = m[1].split(',').map((s) => s.trim());
+    if (sels.includes(selector) && new RegExp(`(^|;)\\s*${prop}\\s*:`).test(m[2])) return m[2];
+  }
+  return null;
+};
 
 // ---- 1. the right rail belongs to the shell --------------------------------
 
@@ -134,30 +145,33 @@ test('the ideas composer OPTS IN, and since the fold it opts in WITH THE METER',
 // ---- 2. the button vocabulary that had no rule -----------------------------
 
 test('.btn and .btn--ghost are defined, and say what .btn-accent / .btn-ghost say', () => {
-  const btn = rule(styleCss, '.btn');
+  // task 1005084 moved the hall's buttons into the shared controls.css
+  const btn = ruleHolding(controlsCss, '.btn', 'background');
   assert.ok(btn, '.btn has a rule — six pages rendered browser-default buttons without one');
   assert.match(btn, /background:\s*var\(--accent\)/, '.btn is the accent door');
   assert.match(btn, /color:\s*var\(--accent-on\)/, '--accent-on is the dark ink for the salmon');
-  assert.match(btn, /border-radius:\s*var\(--radius-pill\)/, 'pill or nothing (DESIGN.md, Shapes)');
+  const shape = ruleHolding(controlsCss, '.btn', 'border-radius');
+  assert.match(shape, /border-radius:\s*var\(--radius-pill\)/, 'pill or nothing (DESIGN.md, Shapes)');
   // collab.css's .btn--quiet sets only a border-COLOUR; a modifier cannot paint
   // an edge that was never reserved, so the base has to carry a transparent one.
-  assert.match(btn, /border:\s*var\(--line\)\s+solid\s+transparent/,
+  assert.match(shape, /border:\s*var\(--line\)\s+solid\s+transparent/,
     'the edge is reserved so a modifier that sets only border-color still draws');
-  const ghost = rule(styleCss, '.btn--ghost');
+  const ghost = ruleHolding(controlsCss, '.btn--ghost', 'background');
   assert.ok(ghost, '.btn--ghost has a rule');
-  assert.match(ghost, /background:\s*none/, 'the quiet sibling is a hairline pill, not a fill');
+  assert.match(ghost, /background:\s*transparent/, 'the quiet sibling is a hairline pill, not a fill');
+  assert.equal(ghost, ruleHolding(controlsCss, '.btn-ghost', 'background'), 'and .btn-ghost says the same, in the same rule');
   assert.match(ghost, /border-color:\s*var\(--rule\)/, 'and it takes the reserved edge');
 });
 
 // ---- 3. the world's own bans ------------------------------------------------
 
 test('nothing in the record family paints text white on the accent', () => {
-  const primary = rule(styleCss, '.td-btn--primary');
+  const primary = ruleHolding(controlsCss, '.td-btn--primary', 'background');
   assert.ok(primary, '.td-btn--primary has a rule');
   assert.match(primary, /color:\s*var\(--accent-on\)/, 'the dark ink, not white');
   // Match white as a VALUE, not anywhere in the block: `white-space: nowrap` is
   // a property name and would be read as a colour by a bare /\bwhite\b/.
-  for (const [name, css] of [['style.css .td-btn--primary', primary], ['record.css', decomment(recordCss)],
+  for (const [name, css] of [['controls.css .td-btn--primary', primary], ['record.css', decomment(recordCss)],
     ['task.css', decomment(taskCss)], ['idea.css', decomment(ideaCss)], ['ideas.css', decomment(ideasCss)]]) {
     assert.doesNotMatch(css, /(background|color):\s*(#fff\b|#ffffff\b|white\b)/i,
       `${name} paints a white literal — DESIGN.md bans white on the salmon, and every other ground has a token`);

package/tests/hall_settings_world.mjs

@@ -290,11 +290,14 @@ test('white on the accent is gone, and the Discord mark is the one named excepti
   // base pill rule AND the save rule, so the save rule is found by its own name
   // and the member is asserted against it. (`.pair-approve` was its sibling here
   // until task 1003890 removed the pair page.)
-  const save = ruleOf(panelCss, '.pbtn--save');
+  // task 1005084: the family's buttons are the hall's shared ones (controls.css)
+  const controlsCss = read('controls.css');
+  const saveRule = stripComments(controlsCss).match(/([^{}]*\.pbtn--save[^{}]*)\{([^{}]*background[^{}]*)\}/);
+  const save = saveRule && saveRule[2];
   assert.ok(save, '.pbtn--save has a rule');
   assert.match(save, /background:\s*var\(--accent\)/);
   assert.match(save, /color:\s*var\(--accent-on\)/, 'the dark ink for the salmon — white on it fails AA');
-  const saveSelector = stripComments(panelCss).match(/([^{}]*\.pbtn--save[^{}]*)\{/);
+  const saveSelector = saveRule;
   assert.ok(saveSelector, 'the save rule\'s selector list is readable');
   for (const member of ['.craft-save']) {
     assert.ok(saveSelector[1].split(',').map((s) => s.trim()).includes(member), `${member} is the accent door on its page`);

package/tests/loading_mark.mjs

@@ -38,7 +38,8 @@ const SURFACES = {
   status: { css: STATUS_CSS, loader: section(STATUS_CSS, '/* ---------- The loader (task 1005053') },
 };
 const flat = (s) => s.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\s+/g, ' ');
-const masksOf = (css) => [...css.matchAll(/url\("data:image\/svg\+xml,([^"]+)"\)/g)].map((m) => decodeURIComponent(m[1]));
+// The masks are the brand folder's one-ink shapes (task 1005088), named by file.
+const masksOf = (css) => [...css.matchAll(/url\("\/modules\/ui-design\/public\/brand\/(mark-[a-z]+\.svg)"\)/g)].map((m) => m[1]);
 function keyframes(css, name) {
   const m = css.match(new RegExp(`@keyframes ${name} ?\\{`));
   assert.ok(m, `@keyframes ${name} exists`);
@@ -48,16 +49,11 @@ function keyframes(css, name) {
 }
 
 test('the apex loader is the bar\'s own Bongos mark, and the status loader is the same mark', () => {
-  // The apex bar draws the mark inline (account.html's .bongosMark); the loader's
-  // two masks carry exactly its arc, core and dot, so the loader IS the logo.
+  // The apex bar and the loader are cut from the one mark (task 1005088): the bar references
+  // mark.svg, and the loader's two masks are its ring-and-core and its dot, so the loader IS the logo.
   const bar = read(LANDING, 'account.html');
-  const arc = bar.match(/<path class="mr" d="([^"]+)"/)[1];
-  assert.match(bar, /<circle class="mp" cx="100" cy="100" r="55"/);
-  assert.match(bar, /<circle cx="156" cy="46" r="12" style="fill:var\(--accent\)"\/>/);
-  const [ring, dot] = masksOf(SURFACES.apex.loader);
-  assert.ok(ring.includes(`d='${arc}'`), 'the ring is the bar mark\'s arc');
-  assert.ok(ring.includes("<circle cx='100' cy='100' r='55'/>"), 'the core is the bar mark\'s core');
-  assert.ok(dot.includes("<circle cx='156' cy='46' r='12'/>"), 'the dot is the bar mark\'s dot');
+  assert.match(bar, /<svg class="bongosMark"[^>]*><use href="\/modules\/ui-design\/public\/brand\/mark\.svg#mark"\/><\/svg>/);
+  assert.deepEqual(masksOf(SURFACES.apex.loader), ['mark-body.svg', 'mark-dot.svg']);
   // The status page has no Bongos mark of its own: its loader carries the apex's two
   // masks byte for byte, so the two surfaces cannot drift into two logos.
   assert.deepEqual(masksOf(SURFACES.status.loader), masksOf(SURFACES.apex.loader));
@@ -91,9 +87,7 @@ for (const [name, { css, loader }] of Object.entries(SURFACES)) {
     for (const p of paints) assert.match(p, /^(var\(--[a-z-]+\)|color-mix\(in srgb, ?var\(--ink\) 30%, ?var\(--bg-card\)\))$/, `${p} is a token or a mix of one`);
     // The one accent is the dot: the live thing on a waiting page (the One Warm Thing Rule).
     assert.equal((css.match(/var\(--accent\)/g) || []).length, 1, 'the accent paints the dot alone');
-    const masks = masksOf(loader);
-    assert.equal(masks.length, 2, 'two masks: the ring and core, and the dot');
-    for (const m of masks) assert.doesNotMatch(m.replace(/stroke='black'|fill='none'/g, ''), /fill='|stroke='|#/, 'a mask carries no colour of its own');
+    assert.deepEqual(masksOf(loader), ['mark-body.svg', 'mark-dot.svg'], 'two masks: the ring and core, and the dot');
   });
 
   test(`${name}: the dot shares the ring's grid cell, so no page padding can knock it off`, () => {

package/tests/nav_permission_atoms.mjs

@@ -101,7 +101,8 @@ test('the hall-preview fixture carries every atom /me resolves', () => {
 // task 1005050: Accomplishments left it (folded into Profile; its hashes redirect);
 // task 1005051: Roadmap left it (folded into Goals; /roadmap redirects).
 // task 1005070: the remembered nav (the rail paints before /me).
-const SHELL_SHA = 'dbbe6f2eb49a65c3';
+// task 1005088: the sidebar mark is drawn by reference to the one brand mark.
+const SHELL_SHA = '2845bfedfaf7846f';
 
 test('shell.js has not changed without its cache-bust being bumped', () => {
   const actual = crypto.createHash('sha256').update(SHELL).digest('hex').slice(0, 16);

package/tests/raise.mjs

@@ -157,7 +157,9 @@ test('a stranger gets the gate, never the copy', async () => {
   assert.doesNotMatch(html, /gamification of capitalism/);
   assert.equal(r.headers.get('x-robots-tag'), 'noindex, nofollow, noarchive');
   assert.equal((await get('/raise/media/x.mp4')).status, 401);
-  assert.equal((await get('/raise/assets/logo-ink.svg')).status, 200, 'the gate needs its logo');
+  // the gate's logo is the shared one (task 1005088), served on every host, never a raise copy
+  assert.match(html, /src="\/modules\/ui-design\/public\/brand\/mark-light\.svg"/, 'the gate needs its logo');
+  assert.equal((await get('/raise/assets/logo-ink.svg')).status, 404, 'the old pasted copy is gone');
   assert.match(await (await get('/raise/nda')).text(), /CONFIDENTIALITY|Confidential/i);
 });
 

package/tests/welcome_boot.mjs

@@ -79,8 +79,11 @@ test('the banner is the logo, named from the branding pack, never a hardcoded wo
   assert.equal(W.bannerText, undefined, 'the "Working on the core of" banner is gone');
   const harbor = W.logoHtml({ identity: { worldName: 'Harbor', productName: 'Cloud Bongos' } });
   assert.match(harbor, /<svg class="wb__mark"/, 'no project logo: the Bongos mark');
-  assert.match(harbor, /class="wb__ring"[^>]*pathLength="100"/, 'the ring can draw in');
-  assert.match(harbor, /class="wb__moonlet"[^>]*fill="#fb9569"/, 'the salmon moon');
+  // the parts come from the one mark (task 1005088), whose ring carries pathLength="100"
+  assert.match(harbor, /<use class="wb__ring" href="\/modules\/ui-design\/public\/brand\/mark\.svg#mark-ring"\/>/, 'the ring can draw in');
+  assert.match(harbor, /<use class="wb__planet" href="[^"]*#mark-disc"\/>/, 'the planet');
+  assert.match(harbor, /<use class="wb__moonlet" href="[^"]*#mark-dot"\/>/, 'the moon');
+  assert.match(fs.readFileSync(path.join(ROOT, 'modules', 'ui-design', 'public', 'brand', 'mark.svg'), 'utf8'), /id="mark-ring"[^>]*pathLength="100"/);
   assert.match(harbor, /<span class="wb__name">Harbor<\/span>/);
   assert.match(W.logoHtml(undefined), /<span class="wb__name">this project<\/span>/, 'no branding: still a name');
   const own = W.logoHtml({ identity: { worldName: 'Harbor' }, theme: { logo: '/logo.png?a="b"' } });

package/modules/raise/public/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><style>.p{fill:#17181a}.r{stroke:#17181a}@media (prefers-color-scheme:dark){.p{fill:#e2e1e4}.r{stroke:#e2e1e4}}</style><path class="r" d="M137 31 A78 78 0 1 0 170 66" fill="none" stroke-width="24" stroke-linecap="round"/><circle class="p" cx="100" cy="100" r="50"/><circle cx="156" cy="46" r="18" fill="#fb9569"/></svg>

package/modules/raise/public/logo-ink.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" role="img" aria-label="Cloud Bongos"><path d="M137 31 A78 78 0 1 0 170 66" fill="none" stroke="#17181a" stroke-width="15" stroke-linecap="round"/><circle cx="100" cy="100" r="55" fill="#17181a"/><circle cx="156" cy="46" r="12" fill="#fb9569"/></svg>

package/modules/raise/public/logo-night.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" role="img" aria-label="Cloud Bongos"><path d="M137 31 A78 78 0 1 0 170 66" fill="none" stroke="#e2e1e4" stroke-width="15" stroke-linecap="round"/><circle cx="100" cy="100" r="55" fill="#e2e1e4"/><circle cx="156" cy="46" r="12" fill="#fb9569"/></svg>