@bongos/core 1.19.447 → 1.19.449

package/docs/module-api-changelog.md

@@ -1331,5 +1331,9 @@ is load-bearing: the script throws rather than guess if it is missing, and
         landed since 1.19.445 with no explicit bump. run 33341626697. (task 1002620)
   1.19.447 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
         landed since 1.19.446 with no explicit bump. run 33345047021. (task 1002620)
+  1.19.448 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
+        landed since 1.19.447 with no explicit bump. run 33348050270. (task 1002620)
+  1.19.449 — CI auto-patch (publish-on-merge, ADR 0161): carrier for merges
+        landed since 1.19.448 with no explicit bump. run 33406714743. (task 1002620)
 ---------------------------------------------------------------------------
 ```

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

@@ -1,89 +1,156 @@
-/* modules/hall-ui/public/idea.css — the idea-detail page (task 1002929 / R153
-   of goal 1000062).
+/* idea.css — what the IDEA record has that the task record does not
+   (task 1002929 / R153 of goal 1000062; re-skinned into the chrome world by
+   task 1003305, goal 1000081).
 
-   Promoted out of an inline <style> because tests/hall_audit.mjs budgets an inline
-   block at 15 lines and this is ~60: past that the documented pattern (task 2176)
-   is a per-page stylesheet. The exceptions in that budget map are grandfathered or
-   deliberate; a brand-new page has no business claiming one.
+   The shared composition — the way back, the kind eyebrow, the title, the
+   sections, the honest failure heading — is record.css, which idea.html loads
+   first. What is left here is the four shapes only an idea has: its grade badge,
+   its attribution pair, its completeness readout, and the author-only mark
+   control.
 
-   Built on the hall's tokens. No --line/--panel: neither is defined in style.css,
-   so a fallback is all you would ever get and both assume a dark ground the hall
-   does not have by default (--bg is #f5f6f8). */
+   Retired with the re-skin: `.idea-detail__back` (the archetype's `.rec-back`),
+   `.ig-head` and `.ig-title` (the archetype's `.rec-kind` and `.rec-title`), and
+   every compat alias this sheet used to spend — --surface-2 → --glass,
+   --border → --rule-soft, --accent-weak/--accent-text → --accent-tint/--accent-ink.
+   The aliases still EXIST for the pages nobody has re-skinned, which is exactly
+   why spending one here would be legal CSS that quietly opts this sheet back out
+   of the world. `--line` is a WIDTH; the hairline's colour is --rule/--rule-soft. */
 
-/* Page-local, like task.html (task 751) — this page adds a handful of shapes
-   and reuses the hall's tokens for everything else. No --line/--panel here:
-   neither is defined in style.css, so a fallback is all you would ever get
-   and both assume a dark ground the hall does not have by default. */
-
-.idea-detail__back { font-size: 13px; color: var(--ink-soft); text-decoration: none; display: inline-block; margin-bottom: 10px; }
-.idea-detail__back:hover { color: var(--ink); text-decoration: underline; }
-
-/* The grade is the first thing to read: it decides what the rest of the page
-   even contains. Three states, distinguished by colour AND by word — a badge
-   that only differs by hue is unreadable to a chunk of readers. */
-.ig-grade {
-  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px;
-  border-radius: 999px; font-size: 12px; font-weight: 600;
-  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-soft);
-}
-.ig-grade--full  { background: var(--ok-weak);     color: var(--ok);          border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
-.ig-grade--spark { background: var(--warn-weak);   color: var(--warn);        border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
-.ig-grade--quick { background: var(--accent-weak); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
-
-.ig-head { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 4px; }
-.ig-title { margin: 0; font-size: 1.15rem; text-wrap: balance; }
+/* ---- the grade badge is NOT here ------------------------------------------
+   It is the archetype's `.rec-pill`, spent by idea.js's gradeBadge() through
+   GRADE_TONE. The badge is the first thing to read — it decides what the rest of
+   the page even contains — and it is distinguished by colour AND by word,
+   because a badge that differs only by hue is unreadable to a chunk of readers.
+   But a grade CLASSIFIES the record, which is the same job the task record's
+   status pill does, so it is the same component and not a lookalike: this sheet
+   carried a near-verbatim copy of `.rec-pill` down to the token triples, which
+   is a hundred lines of the archetype waiting to drift the first time one of the
+   two was touched. That is precisely what record.css exists to prevent. */
 
+/* ---- the status line ----------------------------------------------------- */
 .ig-meta {
-  font-size: 13px; color: var(--ink-soft); margin: 0 0 16px;
-  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  align-items: baseline;
+  margin: 0 0 var(--sp-md);
+  font-size: 14px;
+  color: var(--ink-soft);
+  font-variant-numeric: tabular-nums;
+}
+.ig-meta strong { color: var(--ink); font-weight: 500; }
+.ig-meta a {
+  display: inline-block;
+  min-height: 24px;
+  padding: 3px 0;
+  line-height: 18px;
+  color: var(--ink);
+  border-bottom: var(--line) solid var(--rule);
 }
-.ig-meta strong { color: var(--ink); font-weight: 600; }
+.ig-meta a:hover { border-bottom-color: var(--ink); text-decoration: none; }
 
-/* Attribution is its own block, not a line in the meta run: on a developed
-   idea it carries TWO people and the whole point of R146 was that both
-   survive. Burying that in a comma list is how one of them gets lost. */
-.ig-credit {
-  display: grid; gap: 6px;
-  padding: 12px 14px; margin: 0 0 18px;
-  border: 1px solid var(--border); border-radius: var(--radius-sm);
-  background: var(--surface-2); font-size: 13px;
+/* ---- attribution --------------------------------------------------------- */
+/* Its own block, not a line in the meta run: a developed idea carries TWO people
+   and the whole point of R146 was that both survive. Burying that in a comma
+   list is how one of them gets lost. v1's bare ledger inside a v3 panel — a
+   hairline on top, air, and the first row drops both — rather than the boxed
+   well it used to be, because in v3 tone does the separation and a bordered card
+   inside a card is the treatment the owner's pick removed. */
+.ig-credit { display: grid; margin: 0 0 var(--sp-md); }
+.ig-credit__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  align-items: baseline;
+  border-top: var(--line) solid var(--rule-soft);
+  padding: 11px 0;
+  font-size: 14px;
 }
-.ig-credit__row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
-.ig-credit__who { color: var(--ink); font-weight: 600; }
+.ig-credit__row:first-child { border-top: 0; padding-top: 0; }
+.ig-credit__who { color: var(--ink); font-weight: 500; }
 .ig-credit__role { color: var(--ink-faint); }
 
-/* The five answers, laid out to be READ: one column, generous leading, a
-   measure that stops around 70 characters. */
-.ig-answers { display: grid; gap: 18px; margin: 4px 0 0; }
-.ig-answer__q { margin: 0 0 4px; font-size: 0.92rem; font-weight: 600; }
-.ig-answer__a { margin: 0; max-width: 70ch; line-height: 1.65; white-space: pre-wrap; }
+/* ---- the five answers ---------------------------------------------------- */
+/* Laid out to be READ: one column, generous leading, and the measured reading
+   width. `--measure` is 48ch MEASURED to render ~60 characters — the old `70ch`
+   here rendered closer to 88, because a `ch` is the zero glyph's width and
+   Manrope's zero is much wider than its average lowercase. */
+.ig-answers { display: grid; gap: var(--sp-md); margin: var(--sp-md) 0 0; }
+.ig-answer__q {
+  margin: 0 0 8px;
+  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);
+}
+.ig-answer__a {
+  margin: 0;
+  max-width: var(--measure);
+  font-size: 15px;
+  line-height: 1.65;
+  color: var(--ink-soft);
+  white-space: pre-wrap;
+}
 .ig-answer__a[data-empty="1"] { color: var(--ink-faint); font-style: italic; }
 
-.ig-score { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
-.ig-score__track { width: 140px; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
-.ig-score__fill { height: 100%; border-radius: 4px; background: var(--accent); }
+/* ---- the completeness readout -------------------------------------------- */
+/* A READOUT, never an input: every number in it comes from the server's scorer.
+   The three bands describe the TEXT, not a verdict — the pass bar lives in the
+   economy module and this bar deliberately does not know it — which is why they
+   are the state colours and not the accent. */
+.ig-score { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--sp-xs); }
+.ig-score__track { width: 140px; height: 6px; border-radius: 3px; background: var(--skeleton); overflow: hidden; }
+.ig-score__fill { display: block; height: 100%; border-radius: 3px; background: var(--info); }
 .ig-score__fill[data-band="full"] { background: var(--ok); }
 .ig-score__fill[data-band="part"] { background: var(--warn); }
 .ig-score__fill[data-band="thin"] { background: var(--danger); }
-.ig-score__n { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
-
-.ig-body { max-width: 70ch; line-height: 1.65; white-space: pre-wrap; margin: 4px 0 0; }
-.ig-empty { color: var(--ink-faint); font-size: 0.9rem; }
-.ig-note { font-size: 0.82rem; color: var(--ink-faint); line-height: 1.55; margin: 14px 0 0; }
-.ig-sub { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
-.ig-sub__h { margin: 0 0 8px; font-size: 0.95rem; }
+.ig-score__n {
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+}
 
-/* ---- the mark control (task 1002930 / R154) -----------------------------
-   Author-only, and rendered as its own block rather than a button in a toolbar:
-   offering your idea up for someone else to develop is a decision, and the one
-   sentence explaining what it means to you is the part that makes it one. */
-.ig-mark {
-  margin-top: 20px;
-  padding: 14px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--surface-2);
+/* ---- the prose ----------------------------------------------------------- */
+.ig-body {
+  margin: var(--sp-xs) 0 0;
+  max-width: var(--measure);
+  font-size: 15px;
+  line-height: 1.65;
+  color: var(--ink-soft);
+  white-space: pre-wrap;
 }
-.ig-mark__lede { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft); max-width: 62ch; line-height: 1.55; }
-.ig-mark__err { margin: 8px 0 0; font-size: 13px; color: var(--danger); }
+.ig-body[data-empty="1"] { color: var(--ink-faint); font-style: italic; }
+.ig-empty { margin: 0; font-size: 14px; color: var(--ink-faint); }
+.ig-note {
+  margin: var(--sp-md) 0 0;
+  max-width: var(--measure);
+  font-size: 13.5px;
+  line-height: 1.55;
+  color: var(--ink-faint);
+}
+.ig-note a { display: inline-block; min-height: 24px; padding: 3px 4px; margin: 0 -4px; line-height: 18px; }
+.ig-sub { margin-top: var(--sp-lg); padding-top: var(--sp-sm); border-top: var(--line) solid var(--rule-soft); }
+.ig-sub__h {
+  margin: 0;
+  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);
+}
+
+/* ---- the mark control (task 1002930 / R154) ------------------------------ */
+/* Author-only, and its own block rather than a button in a toolbar: offering
+   your idea up for someone else to develop is a decision, and the one sentence
+   explaining what it means to you is the part that makes it one. It is the page's
+   one live thing, so `.btn` — the accent door — is warm here and nowhere else. */
+.ig-mark { margin-top: var(--sp-lg); padding-top: var(--sp-sm); border-top: var(--line) solid var(--rule-soft); }
+.ig-mark__lede { margin: 0 0 var(--sp-sm); max-width: var(--measure); font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
+.ig-mark__err { margin: var(--sp-xs) 0 0; font-size: 13.5px; color: var(--danger); }
 .ig-mark__err:empty { display: none; }

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

@@ -9,6 +9,9 @@
   <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-07-02-shell1">
+  <!-- The record archetype, shared with task.html (task 1003305). idea.css below
+       carries only what an idea record has and a task record does not. -->
+  <link rel="stylesheet" href="/builders/record.css">
   <link rel="stylesheet" href="/builders/idea.css">
 </head>
 <body data-page="idea" data-page-title="Idea">
@@ -23,14 +26,21 @@
         <!-- This page is deliberately not in the nav (it is always reached from a
              link), so a deep-linked visitor needs a way back before the body loads
              — the task.html precedent. -->
-        <a class="idea-detail__back" href="/ideas">← Back to Ideas</a>
-        <p class="page-head__sub" id="idea-sub">Loading idea…</p>
+        <div class="rec-crumb">
+          <a class="rec-back" href="/ideas">
+            <svg class="rec-back__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M9.4 3.6 5 8l4.4 4.4"/><path d="M5 8h7.2"/></svg>Back to ideas</a>
+          <p class="rec-sub" id="idea-sub">Loading idea</p>
+        </div>
       </div>
 
       <main id="hall-main">
         <section class="scroll" id="idea-scroll" aria-labelledby="idea-h">
           <div id="idea-body">
-            <p class="deeplink-card__title" id="idea-h">Loading…</p>
+            <!-- The h1 is present in EVERY state, this one included: the
+                 one-header-main-h1 floor measures the rendered DOM, and a page
+                 whose heading only arrives with the fetch has none while it
+                 loads, and none at all when the read fails. -->
+            <h1 class="rec-big" id="idea-h">Loading the idea</h1>
           </div>
         </section>
       </main>

package/modules/hall-ui/public/idea.js

@@ -64,10 +64,16 @@
   // Colour AND word. A badge distinguished only by hue tells a colour-blind
   // reader nothing, and this badge decides how to read the whole page.
   const GRADE_WORD = { full: 'Full Idea', spark: 'Big Idea Spark', quick: 'Quick idea' };
+  // A grade classifies the record, which is the status vocabulary's job — the
+  // same job the task record's status pill does, so it is the same COMPONENT.
+  // `.rec-pill` in record.css is that component; a private copy in idea.css was
+  // a hundred lines of the archetype waiting to drift, which is the exact thing
+  // the shared sheet exists to prevent.
+  const GRADE_TONE = { full: 'ok', spark: 'warn', quick: 'info' };
 
   function gradeBadge(grade) {
     const g = GRADE_WORD[grade] ? grade : 'quick';
-    return `<span class="ig-grade ig-grade--${escapeHtml(g)}">${escapeHtml(GRADE_WORD[g])}</span>`;
+    return `<span class="rec-pill rec-pill--${escapeHtml(GRADE_TONE[g])}">${escapeHtml(GRADE_WORD[g])}</span>`;
   }
 
   function scoreRow(score) {
@@ -213,8 +219,11 @@
     const grade = GRADE_WORD[idea.grade] ? idea.grade : 'quick';
     const parts = [];
 
-    parts.push(`<div class="ig-head">${gradeBadge(grade)}</div>`);
-    parts.push(`<h1 class="ig-title" id="idea-h">${escapeHtml(idea.title || `Idea ${idea.id}`)}</h1>`);
+    // The record's head, in the shared archetype: the kind eyebrow carries the
+    // grade badge the way the task record's carries its status, so the two pages
+    // open on the same line even though they hold different facts.
+    parts.push(`<p class="rec-kind">Idea ${gradeBadge(grade)}</p>`);
+    parts.push(`<h1 class="rec-title" id="idea-h"><span class="rec-title__id">${escapeHtml(String(idea.id))}</span>${escapeHtml(idea.title || 'Untitled idea')}</h1>`);
     parts.push(statusLine(idea));
     parts.push(credit(idea));
 
@@ -261,8 +270,12 @@
     if (btn) btn.addEventListener('click', () => { toggleMark(idea); });
   }
 
+  // The honest failure. It keeps the <h1> for the same reason the loading state
+  // does: a render is a render, and one-header-main-h1 measures the DOM it gets.
   function fail(msg) {
-    $('#idea-body').innerHTML = `<p class="deeplink-card__title" id="idea-h">${escapeHtml(msg)}</p>`;
+    $('#idea-body').innerHTML =
+      `<p class="rec-kind">Idea</p><h1 class="rec-big" id="idea-h">${escapeHtml(msg)}</h1>` +
+      `<div class="rec-actions rec-sec"><a class="btn btn--ghost" href="${hallBase()}/ideas">Open the idea composer</a></div>`;
     $('#idea-sub').textContent = '';
   }
 

package/modules/hall-ui/public/idea.states.json

@@ -0,0 +1,14 @@
+{
+  "_": "The hall's IDEA RECORD through modules/ui-design/kit/render.js (task 1003305). Same harness note as task.states.json: the idea's five answers, its completeness bar and its author-only mark control need a LOADED idea, so run it against the hall-preview harness:\n\n  node scripts/hall-preview/server.js --port 4612 --fixture-me\n  node modules/ui-design/kit/render.js --states modules/hall-ui/public/idea.states.json --base-in http://builders.localhost:4612 --base-out http://builders.localhost:4612",
+  "page": "/idea/12",
+  "surface": "hall-ui",
+  "stub": { "prefix": "/builders/" },
+  "modeQuery": false,
+  "ignoreRequests": ["/api/(gds|bongos)/"],
+  "ignoreConsole": ["/api/(gds|bongos)/", "\b401\b", "\b404\b", "Unauthorized", "Not Found", "load failed"],
+  "states": {
+    "record": { "auth": true, "actions": [["wait", 600]], "expect": { "visible": ["#idea-body", "#idea-h"] } },
+    "missing": { "auth": true, "url": "/idea/999999", "actions": [["wait", 600]], "expect": { "visible": ["#idea-h"] } }
+  },
+  "reducedMotion": { "auth": true, "actions": [["wait", 600]] }
+}