@bongos/core 1.19.448 → 1.19.450

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]] }
+}

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

@@ -1,145 +1,186 @@
-/* modules/hall-ui/public/ideas.css — the Ideas tab (task 1002928 / BV1.R152 of
-   goal 1000062).
-
-   Built on the hall's existing tokens (style.css), not a new palette. Only the
-   shapes this page needs are here: a wide-screen two-column composer with the
-   meter alongside, collapsing to one column where there is no room for it.
-
-   USES THE REAL TOKEN NAMES — --border / --surface-2 / --accent / --ok / --warn /
-   --danger / --radius, so every token below re-derives on its own and this page
-   needs no theme-specific block at all. (The sibling trap this note used to warn
-   about — copy-desk.css reaching for an undefined --line / --panel and getting a
-   dark-ground fallback on the light theme — was fixed in task 1003303, when the
-   chrome-world tier defined --line as a WIDTH and those borders would otherwise
-   have gone invalid.) */
-
-/* The composer and its meter sit side by side once there is room. Below that
-   width the meter stacks ABOVE the fields — a readout you cannot see while
-   typing is not a live meter. */
-@media (min-width: 62rem) {
-  .app-content > main { padding-right: 20rem; }
-  .fi-meter {
-    position: fixed;
-    top: 6.5rem;
-    right: 1.5rem;
-    width: 17rem;
-    max-height: calc(100vh - 8rem);
-    overflow-y: auto;
-  }
-}
-
+/* ideas.css — the Ideas tab: the Full Idea composer, its live completeness meter
+   and the spark queue (task 1002928 / BV1.R152 of goal 1000062; re-skinned into
+   the chrome world by task 1003305, goal 1000081).
+
+   The composer is NOT a record, so it does not load record.css. What it is, is a
+   form beside a readout: the fields are the world's own field (the base
+   `select, input, textarea` rule in style.css), the meter is a panel on the
+   shell's right rail, and the queue is v1's bare ledger inside a v3 panel.
+
+   TWO THINGS THE RE-SKIN REMOVED, both of them structural rather than paint:
+
+   - THE SHELL OVERRIDE. This sheet used to set `.app-content > main
+     { padding-right: 20rem }` and pin the meter at `top: 6.5rem`. A page reaching
+     into shell layout is invisible from the shell, and the 6.5rem was a hand-copy
+     of the topbar height that nothing kept in step with `--topbar-h`. Both halves
+     now live in style.css as `.app-content--railed` + `.app-rail`, which the page
+     OPTS INTO from its markup. Do not re-paste the override.
+   - THE COMPAT ALIASES. --border → --rule / --rule-soft, --surface-2 → --glass.
+     They still exist for the pages nobody has re-skinned, so spending one here
+     would be legal CSS that quietly opts this sheet back out of the world.
+
+   The `opacity: 0.7`-style dimming this sheet used throughout is gone too: a
+   token says which ink it means (--ink-soft, --ink-faint) and survives a theme
+   flip, where an opacity on inherited ink is a different colour in each mode and
+   measures differently against the ground. */
+
+/* ---- the composer form --------------------------------------------------- */
 .fi-label {
   display: block;
-  margin: 1.1rem 0 0.3rem;
-  font-size: 0.9rem;
-  font-weight: 600;
+  margin: var(--sp-md) 0 6px;
+  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);
+}
+.fi-hint {
+  display: block;
+  margin-top: 4px;
+  font-family: var(--font-body);
+  font-size: 13px;
+  letter-spacing: normal;
+  text-transform: none;
+  color: var(--ink-faint);
 }
-.fi-hint { font-weight: 400; font-size: 0.8rem; opacity: 0.7; }
 
+/* The base rule in style.css already carries the world's field — the hairline,
+   the pill radius, the ink. Only what a full-width multi-line field needs is
+   here; a textarea takes --radius-sm from the base rule, not the pill. */
 .fi-input,
 .fi-text {
   width: 100%;
-  padding: 0.55rem 0.7rem;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--surface-2);
-  color: inherit;
-  font: inherit;
+  max-width: var(--measure);
   line-height: 1.55;
 }
-.fi-text { resize: vertical; min-height: 5.5rem; }
-.fi-input:focus,
-.fi-text:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
+.fi-text { resize: vertical; min-height: 6rem; padding: 10px 14px; }
+/* The world's two-tone focus ring, the same one :focus-visible paints — a field
+   is not exempt from the indicator every other control gets. */
+.fi-input:focus-visible,
+.fi-text:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 8px var(--bg); }
 
-.fi-fields { margin-top: 0.5rem; }
-.fi-field + .fi-field { margin-top: 0.35rem; }
+.fi-fields { margin-top: var(--sp-xs); }
+.fi-field + .fi-field { margin-top: 6px; }
 
-.fi-fieldnote { margin: 0.3rem 0 0; font-size: 0.78rem; opacity: 0.7; min-height: 1.1em; }
-.fi-fieldnote[data-ok="1"] { opacity: 0.85; color: var(--ok); }
+/* The per-field note: how much more text this answer wants. It goes GREEN when
+   the field has cleared its floor — the status vocabulary, because "this answer
+   is complete enough" is verification state and not a live control. */
+.fi-fieldnote { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-faint); min-height: 1.1em; }
+.fi-fieldnote[data-ok="1"] { color: var(--ok); }
 
-.fi-note { font-size: 0.85rem; opacity: 0.75; }
+.fi-note { font-size: 13.5px; color: var(--ink-faint); }
 
-.fi-err {
-  margin: 0.9rem 0 0;
-  font-size: 0.87rem;
-  line-height: 1.5;
-  color: var(--danger);
-}
+.fi-err { margin: var(--sp-sm) 0 0; max-width: var(--measure); font-size: 14px; line-height: 1.5; color: var(--danger); }
 .fi-err[data-visible="0"] { display: none; }
 
-.fi-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.6rem 0.75rem;
-  align-items: center;
-  margin-top: 1.2rem;
-}
-.fi-draft { font-size: 0.8rem; opacity: 0.7; }
-
-/* ---- the meter ---------------------------------------------------------- */
+.fi-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-top: var(--sp-md); }
+.fi-draft { font-size: 12.5px; color: var(--ink-faint); }
 
+/* ---- the meter ----------------------------------------------------------- */
+/* A panel like any other in v3: --bg-card at the full radius, tone doing the
+   separation, no drawn edge. Its position is the shell's (.app-rail) — this
+   sheet says what it LOOKS like, never where it sits. */
 .fi-meter {
-  border: 1px solid var(--border);
+  background: var(--bg-card);
+  border: var(--line) solid transparent;
   border-radius: var(--radius);
-  background: var(--surface-2);
-  padding: 0.9rem 1rem 1rem;
-  margin: 1.5rem;
+  padding: var(--sp-sm) var(--sp-sm) var(--sp-md);
+}
+.fi-meter__h {
+  margin: 0 0 var(--sp-xs);
+  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);
 }
-.fi-meter__h { margin: 0 0 0.6rem; font-size: 0.95rem; }
 
-.fi-gauge { display: flex; align-items: center; gap: 0.6rem; }
+.fi-gauge { display: flex; align-items: baseline; gap: 12px; }
 .fi-gauge__track {
   flex: 1;
-  height: 0.55rem;
-  border-radius: 0.3rem;
-  background: var(--border);
+  align-self: center;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--skeleton);
   overflow: hidden;
 }
+/* The three bands describe the TEXT, not a verdict — the pass bar lives in the
+   economy module and this readout deliberately does not know it. State colours,
+   never the accent: nothing here is pressable or live. */
 .fi-gauge__fill {
   height: 100%;
   width: 0;
-  border-radius: 0.3rem;
+  border-radius: 3px;
+  background: var(--info);
   transition: width 0.18s ease-out;
-  background: var(--accent);
 }
-/* Three bands describing the TEXT, not a verdict — the pass bar lives in the
-   economy module and this readout deliberately does not know it. */
 .fi-gauge__fill[data-band="thin"] { background: var(--danger); }
 .fi-gauge__fill[data-band="part"] { background: var(--warn); }
 .fi-gauge__fill[data-band="full"] { background: var(--ok); }
-.fi-gauge__n { margin: 0; font-size: 0.9rem; font-variant-numeric: tabular-nums; min-width: 4.2rem; text-align: right; }
-
-.fi-meter__list { list-style: none; margin: 0.85rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
-.fi-mrow { display: grid; gap: 0.2rem; }
-.fi-mrow__l { font-size: 0.76rem; opacity: 0.8; line-height: 1.3; }
-.fi-mrow__bar { display: block; height: 0.3rem; border-radius: 0.2rem; background: var(--border); overflow: hidden; }
-.fi-mrow__fill { display: block; height: 100%; width: 0; border-radius: 0.2rem; background: var(--accent); transition: width 0.18s ease-out; }
-
-.fi-meter__note { margin: 0.9rem 0 0; font-size: 0.76rem; opacity: 0.65; line-height: 1.5; }
-
-/* ---- the spark queue + develop mode (task 1002930 / R154) --------------- */
+/* The figure takes the display face at 300 with tabular numerals, so a live
+   re-score cannot reflow the row it sits in (DESIGN.md, The Tabular Rule). */
+.fi-gauge__n {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: 22px;
+  line-height: 1;
+  letter-spacing: -0.03em;
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+  min-width: 4.2rem;
+  text-align: right;
+}
 
-.fi-queue { display: grid; gap: 10px; }
+.fi-meter__list { list-style: none; margin: var(--sp-sm) 0 0; padding: 0; display: grid; gap: 8px; }
+.fi-mrow { display: grid; gap: 4px; }
+/* --ink-soft, not --ink-faint: these five are the questions themselves, and on
+   the dark card the faint tier left the whole readout illegible at a glance
+   even though the pair clears AA. */
+.fi-mrow__l { font-size: 12px; line-height: 1.3; color: var(--ink-soft); }
+.fi-mrow__bar { display: block; height: 4px; border-radius: 2px; background: var(--skeleton); overflow: hidden; }
+.fi-mrow__fill { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--info); transition: width 0.18s ease-out; }
+
+.fi-meter__note { margin: var(--sp-sm) 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-faint); }
+
+/* ---- the spark queue + develop mode (task 1002930 / R154) ---------------- */
+/* v1's bare ledger inside a v3 panel: a hairline on top, air, and the first row
+   drops both. It used to be a stack of bordered wells, which in v3 is a card
+   inside a card — the treatment the owner's pick removed. */
+.fi-queue { display: grid; }
 .fi-spark {
-  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
-  padding: 12px 14px;
-  border: 1px solid var(--border); border-radius: var(--radius-sm);
-  background: var(--surface-2);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 14px;
+  align-items: baseline;
+  border-top: var(--line) solid var(--rule-soft);
+  padding: 14px 0;
 }
-.fi-spark__title { margin: 0; font-weight: 600; font-size: 0.92rem; flex: 1 1 20rem; }
-.fi-spark__title a { color: inherit; }
-.fi-spark__who { font-size: 0.8rem; color: var(--ink-faint); }
-.fi-spark__go { font-size: 0.84rem; white-space: nowrap; }
-.fi-queue-empty { font-size: 0.88rem; color: var(--ink-faint); }
-
-/* The spark being developed. Bordered on the leading edge rather than boxed: it
-   is context for the fields below it, not a competing card. */
+.fi-spark:first-child { border-top: 0; padding-top: 0; }
+.fi-spark__title { margin: 0; flex: 1 1 20rem; font-size: 14.5px; color: var(--ink); }
+.fi-spark__title a { display: inline-block; min-height: 24px; padding: 3px 0; line-height: 18px; color: inherit; }
+.fi-spark__who { font-size: 12.5px; color: var(--ink-faint); }
+.fi-spark__go { flex: none; white-space: nowrap; }
+.fi-queue-empty { font-size: 13.5px; color: var(--ink-faint); }
+
+/* The spark being developed. A band on the leading edge rather than a box: it is
+   context for the fields below it, not a competing card. Amber because a spark
+   is an idea awaiting work, which is what --warn means in this vocabulary. */
 .fi-develop {
-  margin: 0 0 6px;
-  padding: 2px 0 2px 14px;
+  margin: 0 0 var(--sp-xs);
+  padding: 2px 0 2px var(--sp-sm);
   border-left: 3px solid var(--warn);
 }
-.fi-develop__label { margin: 0; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--warn); }
-.fi-develop__title { margin: 4px 0 0; font-weight: 600; }
-.fi-develop__body { margin: 4px 0 0; max-width: 70ch; line-height: 1.6; white-space: pre-wrap; color: var(--ink-soft); font-size: 0.9rem; }
-.fi-develop__who { margin: 6px 0 0; font-size: 0.8rem; color: var(--ink-faint); }
+.fi-develop__label {
+  margin: 0;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--warn);
+}
+.fi-develop__title { margin: 6px 0 0; font-size: 15px; font-weight: 500; color: var(--ink); }
+.fi-develop__body { margin: 6px 0 0; max-width: var(--measure); font-size: 14px; line-height: 1.6; color: var(--ink-soft); white-space: pre-wrap; }
+.fi-develop__who { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-faint); }

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

@@ -18,8 +18,18 @@
   <div class="app-scrim" id="app-scrim" hidden></div>
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
-    <div class="app-content">
-      <div class="page-head"><p class="page-head__sub" id="fi-sub">Loading the idea template…</p></div>
+    <!-- --railed reserves the room the meter occupies (style.css, "the right
+         rail"). This page used to take that room by overriding
+         `.app-content > main` from its own sheet, which is a page editing shell
+         layout — invisible from the shell, and it hard-coded a topbar height. -->
+    <div class="app-content app-content--railed">
+      <!-- The page's own name, in the LABEL voice — the display face is saved for
+           section headings (the work.html precedent, task 1003304). The page had
+           no h1 at all, so it failed one-header-main-h1 on every render. -->
+      <div class="page-head page-head--board">
+        <h1 class="page-head__h">Ideas</h1>
+        <p class="page-head__sub" id="fi-sub">Loading the idea template…</p>
+      </div>
 
       <main id="hall-main">
         <!-- The spark queue (task 1002930 / R154). ABOVE the composer, because
@@ -91,9 +101,9 @@
 </div>
 
 <!-- The meter rides along beside the form on a wide screen and above it on a
-     narrow one (CSS decides). It is a READOUT, never an input: every number in
-     it comes from the server's own scorer. -->
-<aside class="fi-meter" id="fi-meter" aria-labelledby="fi-meter-h" hidden>
+     narrow one (the shell's .app-rail decides). It is a READOUT, never an input:
+     every number in it comes from the server's own scorer. -->
+<aside class="fi-meter app-rail" id="fi-meter" aria-labelledby="fi-meter-h" hidden>
   <h2 class="fi-meter__h" id="fi-meter-h">Completeness</h2>
   <div class="fi-gauge">
     <div class="fi-gauge__track"><div class="fi-gauge__fill" id="fi-gauge-fill"></div></div>

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

@@ -0,0 +1,15 @@
+{
+  "_": "The hall's IDEA COMPOSER through modules/ui-design/kit/render.js (task 1003305). The five questions are rendered from GET /inbox/template and the spark queue from GET /inbox/sparks, so the populated form needs the hall-preview harness; the kit's own stub answers neither and renders the honest `could not load the idea template` line instead, which is the `no-template` state below.\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/ideas.states.json --base-in http://builders.localhost:4612 --base-out http://builders.localhost:4612\n\nThe right rail is the shell's `.app-content--railed` reserve, so the 62rem breakpoint is exercised at 1440 and stacked at 390/320 — which is the whole reason all three widths are rendered.",
+  "page": "/ideas",
+  "surface": "hall-ui",
+  "stub": { "prefix": "/builders/" },
+  "modeQuery": false,
+  "ignoreRequests": ["/api/(gds|bongos)/"],
+  "_console": "The 501 is the harness, not the page: the meter re-scores through POST /inbox/score on every keystroke and scripts/hall-preview/server.js answers every write with preview_readonly by design. Declared rather than hidden.",
+  "ignoreConsole": ["/api/(gds|bongos)/", "\b401\b", "\b404\b", "\b501\b", "Unauthorized", "Not Found", "Not Implemented", "load failed"],
+  "states": {
+    "compose": { "auth": true, "actions": [["wait", 700]], "expect": { "visible": ["#fi-form", "#fi-fields", "#fi-queue"] } },
+    "develop": { "auth": true, "url": "/ideas?develop=1000884", "actions": [["wait", 700]], "expect": { "visible": ["#fi-develop"] } }
+  },
+  "reducedMotion": { "auth": true, "actions": [["wait", 700]] }
+}