@bongos/core 1.19.449 → 1.19.451

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

@@ -1,417 +1,109 @@
-/* primer.css — the primer reader page (V3.R13-followup #406; reworked for the
-   app-shell redesign, task 1723). Long-form reading layout that pairs with
-   /builders/style.css: it only adds the primer-specific reading shell and
-   derives every color from the shared design tokens (--surface, --border,
-   --accent, …) so instance theme packs reskin it for free. */
-
-body.primer-body { background: var(--bg); }
-
-/* ---------- Reading-progress bar ----------
-   Fixed just below the sticky top bar (56px). Spans the viewport but sits
-   BELOW the sidebar in the z ladder (sidebar z-40, topbar z-30) so on desktop
-   the opaque sidebar covers its left edge and it reads as the content's
-   progress, not app chrome. */
-
-.primer-progress {
-  position: fixed;
-  top: var(--topbar-h);
-  inset-inline: 0;
-  height: 3px;
-  background: color-mix(in srgb, var(--accent) 14%, transparent);
-  z-index: 25;
-  pointer-events: none;
-}
-.primer-progress__bar {
-  height: 100%;
-  width: 0;
-  background: var(--accent);
-  transition: width 100ms linear;
-}
-
-/* ---------- Two-column reading layout ---------- */
-
-.primer-layout {
-  display: grid;
-  grid-template-columns: 240px minmax(0, 1fr);
-  gap: 40px;
-  align-items: start;
-  padding-bottom: 24px;
-}
-
-/* ---------- Sticky table of contents (left rail) ---------- */
-
-.primer-toc {
-  position: sticky;
-  top: calc(var(--topbar-h) + 16px);
-  align-self: start;
-}
-.primer-toc__toggle {
-  display: none;
-  width: 100%;
-  padding: 9px 14px;
-  background: var(--surface);
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius-sm);
-  font-family: var(--font-body);
-  font-size: 13.5px;
-  font-weight: 600;
-  color: var(--ink);
-  cursor: pointer;
-  justify-content: space-between;
-  align-items: center;
-}
-.primer-toc__chevron {
-  transition: transform 200ms;
-}
-.primer-toc__toggle[aria-expanded="true"] .primer-toc__chevron {
-  transform: rotate(180deg);
-}
-.primer-toc__inner {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 16px 16px 18px;
-}
-.primer-toc__heading {
-  margin: 0 0 10px;
-  font-size: 11.5px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--ink-faint);
-  border-bottom: 1px solid var(--border);
-  padding-bottom: 8px;
-}
-.primer-toc__list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  counter-reset: toc;
-}
-.primer-toc__list li {
-  margin: 0;
-  padding: 4px 0;
-  counter-increment: toc;
-  line-height: 1.4;
-}
-.primer-toc__list a {
-  /* Two-column grid: a fixed-width numeral gutter wide enough for the
-     longest Roman numeral in any primer (VIII = 3 letters), then the
-     section title flows in column 2. Grid keeps the two columns
-     independent so long numerals never overlap the title. */
-  display: grid;
-  grid-template-columns: 2.4em 1fr;
-  column-gap: 0.4em;
-  font-size: 13.5px;
-  color: var(--ink-soft);
-  transition: color 150ms;
-}
-.primer-toc__list a::before {
-  content: counter(toc, upper-roman) ".";
-  font-size: 12px;
-  color: var(--ink-faint);
-  letter-spacing: 0.03em;
-  text-align: right;
-  /* Align the period baseline with the title's first line. */
-  line-height: 1.4;
-}
-.primer-toc__list a:hover {
-  color: var(--ink);
-  text-decoration: none;
-}
-.primer-toc__list a.is-active {
-  color: var(--accent-text);
-  font-weight: 600;
-}
-.primer-toc__list a.is-active::before {
-  color: var(--accent-text);
-}
-.primer-toc__placeholder {
-  color: var(--ink-faint);
-  padding: 4px 0;
-}
-
-/* ---------- Article column ---------- */
-
-.primer-article {
-  /* Reading-optimized line length. Roughly 60-72ch at 17px body. */
-  max-width: 72ch;
-  font-size: 1.05rem;
-  line-height: 1.7;
-  color: var(--ink);
-}
-
-.primer-loading {
-  color: var(--ink-soft);
-  padding: 40px 0;
-  text-align: center;
-}
-
-.primer-article h1 {
-  /* The primer's own H1 — suppressed; the top bar already names the page. */
-  display: none;
-}
-
-.primer-article h2 {
-  font-family: var(--font-display);
-  font-weight: 700;
-  font-size: 1.45rem;
-  letter-spacing: -0.01em;
-  color: var(--ink);
-  margin: 2.4em 0 0.7em;
-  padding-bottom: 0.45em;
-  border-bottom: 1px solid var(--border);
-  /* Anchor jumps must land below the sticky top bar. */
-  scroll-margin-top: calc(var(--topbar-h) + 16px);
-}
-.primer-article h2:first-of-type {
-  margin-top: 0.4em;
-}
-
-.primer-article h3 {
+/* primer.css — what the PRIMER has that the other reading rooms do not
+   (V3.R13-followup #406; rebuilt into the chrome world by task 1003306).
+
+   The room itself — the reading measure and rhythm, the table of contents, the
+   progress hairline, the framed figure, the skeleton and the failure note — is
+   the shared archetype in room.css, which this page loads first. What is left
+   here is the acknowledge gate: the primer is the one document in the hall a
+   builder must confirm they have read, and no other room has one.
+
+   Three things this sheet used to carry that are gone rather than moved:
+     * `body.primer-body { background: var(--bg) }` — the shell paints the
+       ground now; a page repainting it is a second copy of a value that already
+       has an owner. The class stays on <body> because it is a page hook, not a
+       paint.
+     * `max-width: 72ch` on the article, under a comment reading "Roughly 60-72ch
+       at 17px body". A `ch` is the font's ZERO glyph, not a character, and
+       Manrope's zero is wide: it rendered about 90. The measure is the shell's
+       measured --measure, and it lives in room.css with the prose.
+     * A hand-written `z-index: 25` on the progress bar. It is --z-progress now,
+       named in the shell's ladder beside the topbar it has to sit under.
+
+   No compat alias (--surface / --surface-2 / --border / --border-strong /
+   --accent-weak / --accent-text) appears here. `--line` is a WIDTH; the
+   hairline's colour is --rule / --rule-soft. */
+
+/* ---- the acknowledge gate ------------------------------------------------
+   Its own card under the article, at the same width, so the end of the document
+   and the thing to do about it read as two beats of one column. */
+
+.primer-ack { margin: var(--sp-sm) 0 var(--sp-xl); padding: var(--room-pad); }
+.primer-ack__h {
+  margin: 0 0 14px;
   font-family: var(--font-display);
-  font-weight: 600;
-  font-size: 1.1rem;
-  color: var(--ink);
-  margin: 1.9em 0 0.55em;
-  scroll-margin-top: calc(var(--topbar-h) + 16px);
-}
-
-.primer-article p {
-  margin: 0 0 1.15em;
-}
-.primer-article p:last-child { margin-bottom: 0; }
-
-/* The subtitle line at the very top of the primer markdown. */
-.primer-article > p > em:only-child {
-  font-size: 1.02rem;
-  color: var(--ink-soft);
-}
-
-.primer-article a {
-  color: var(--accent-text);
-  border-bottom: 1px solid var(--border);
-}
-.primer-article a:hover {
-  color: var(--accent);
-  border-bottom-color: var(--accent);
-  text-decoration: none;
-}
-
-.primer-article strong {
+  font-weight: 300;
+  font-size: 28px;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
   color: var(--ink);
-  font-weight: 600;
-}
-.primer-article em {
-  font-style: italic;
-}
-
-.primer-article code {
-  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-  font-size: 0.92em;
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  padding: 1px 5px;
-  border-radius: 4px;
-  color: var(--accent-text);
-}
-
-.primer-article pre {
-  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-  font-size: 0.9em;
-  line-height: 1.55;
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 14px 16px;
-  margin: 1.4em 0;
-  overflow-x: auto;
-  color: var(--ink);
-}
-.primer-article pre code {
-  background: none;
-  border: none;
-  padding: 0;
-  color: inherit;
-  font-size: inherit;
-}
-
-.primer-article ul, .primer-article ol {
-  margin: 0 0 1.2em;
-  padding-left: 1.4em;
 }
-.primer-article li {
-  margin: 0 0 0.35em;
-}
-.primer-article li:last-child { margin-bottom: 0; }
-
-.primer-article hr {
-  border: none;
-  border-top: 1px solid var(--border);
-  margin: 2.4em 0;
-}
-
-/* Tables (the rank ladder). Styled like .ledger but reading-tuned. */
-.primer-article table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1.4em 0;
-  font-size: 0.95em;
-}
-.primer-article th, .primer-article td {
-  text-align: left;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border);
-  vertical-align: top;
-}
-.primer-article th {
-  font-size: 0.78em;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
+.primer-ack__lede {
+  margin: 0 0 var(--sp-md);
+  max-width: var(--measure);
   color: var(--ink-soft);
-  background: var(--surface-2);
 }
-.primer-article tr:last-child td {
-  border-bottom: none;
-}
-
-/* Inlined diagrams. The figure block sits flush in the reading column with
-   a soft card frame so the diagrams don't feel pasted on top of the body text. */
-.primer-figure {
-  margin: 1.8em 0 2em;
-  text-align: center;
-}
-.primer-figure img {
-  max-width: 100%;
-  height: auto;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 12px;
-}
-.primer-figure figcaption {
-  margin-top: 10px;
-  font-size: 12.5px;
+/* The gate is a MEASUREMENT the reader can watch move, not a refusal: the meter
+   says how far through the article they are against the threshold, in the label
+   voice, with the figure tabular so it does not re-space as it counts up. */
+.primer-ack__meter {
+  margin: 0 0 var(--sp-lg);
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
   color: var(--ink-faint);
 }
+.primer-ack__num { color: var(--ink); font-variant-numeric: tabular-nums; }
 
-/* ---------- Footer ack module ---------- */
-
-.primer-ack {
-  max-width: 760px;
-  margin: 24px auto 40px;
-}
-.primer-ack__inner {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 30px 28px;
-  text-align: center;
-}
-.primer-ack__h {
-  font-family: var(--font-display);
-  font-weight: 600;
-  font-size: 1.15rem;
-  color: var(--ink);
-  margin: 0 0 10px;
-}
-.primer-ack__lede {
-  margin: 0 0 20px;
-  color: var(--ink-soft);
-  font-size: 14px;
-}
+/* The locked state is glass, the open state is the accent — the One Warm Thing
+   Rule: the accent lights only what is pressable, and while the gate is shut
+   this is not. aria-disabled (not disabled) keeps the control in the tab order
+   so a keyboard reader can land on it and hear the note below say why. */
 .primer-ack__btn {
-  display: inline-block;
-  padding: 10px 26px;
+  display: inline-flex;
+  align-items: center;
+  min-height: 48px;
+  padding: 0 30px;
   font-family: var(--font-body);
-  font-size: 14px;
-  font-weight: 600;
-  color: #fff;
-  background: var(--accent);
-  border: 1px solid var(--accent-deep);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: background 150ms, transform 100ms;
-}
-.primer-ack__btn:hover:not(:disabled) {
-  background: var(--accent-deep);
-}
-.primer-ack__btn:active:not(:disabled) {
-  transform: translateY(1px);
-}
-.primer-ack__btn:disabled {
-  background: var(--surface-2);
+  font-size: 15px;
   color: var(--ink-faint);
-  border-color: var(--border);
+  background: var(--glass);
+  border: var(--line) solid var(--glass-edge);
+  border-radius: var(--radius-pill);
   cursor: not-allowed;
+  transition: color 200ms cubic-bezier(.2, .7, .3, 1), background 200ms cubic-bezier(.2, .7, .3, 1);
 }
-.primer-ack__note {
-  margin: 14px 0 0;
-  color: var(--ink-soft);
+.primer-ack__btn[aria-disabled="false"] {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-on);
+  cursor: pointer;
 }
+.primer-ack__btn[aria-disabled="false"]:hover { background: var(--accent-lift); }
 
-/* V3.R13-followup-2 (#411): collapsed "already acked" state — the inner
-   box shrinks since there's no big button + lede; the confirmation reads
-   as a single line with the check mark. */
-.primer-ack__inner--acked {
-  padding: 16px 22px;
-}
-.primer-ack__inner--acked .primer-ack__h {
-  margin-bottom: 6px;
-  font-size: 1rem;
-}
-.primer-ack__inner--acked .primer-ack__note {
-  margin-top: 0;
-  color: var(--ink);
+.primer-ack__note {
+  margin: var(--sp-sm) 0 0;
+  max-width: var(--measure);
+  font-size: 13.5px;
+  color: var(--ink-faint);
 }
-.primer-ack__check {
+.primer-ack__check { margin-right: 6px; color: var(--ok); font-weight: 600; }
+/* The way back, once the gate is closed. It is a link in a sentence with no
+   vertical rhythm of its own — measured 84x18 in the acked state — so it takes
+   the shell's remedy for exactly that shape (.scroll__lede a in style.css):
+   go inline-block and buy the height back with padding the line does not pay
+   for. The class is this page's, so the rule is too. */
+.primer-ack__note a {
   display: inline-block;
-  margin-right: 6px;
-  color: var(--ok);
-  font-weight: 700;
-}
-
-/* ---------- Responsive (mobile) ----------
-   Breakpoint mirrors primer.js's matchMedia('(max-width: 760px)') — keep in sync. */
-
-@media (max-width: 760px) {
-  .primer-layout {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 0;
-  }
-  .primer-toc {
-    position: static;
-    margin-bottom: 20px;
-  }
-  .primer-toc__toggle {
-    display: flex;
-  }
-  .primer-toc__inner {
-    display: none;
-    margin-top: 6px;
-  }
-  .primer-toc.is-open .primer-toc__inner {
-    display: block;
-  }
-  .primer-article {
-    font-size: 1rem;
-    line-height: 1.65;
-  }
-  .primer-article h2 {
-    font-size: 1.25rem;
-  }
-  /* A markdown table's column count is fixed by the source, so its min-content
-     width outruns a phone (measured: 79px of page overflow on /drachmae). Give
-     the table its own horizontal scroller instead of letting it drag the page
-     sideways — the .section-rail / .kit-tabs strips already set that precedent.
-     `display: block` is what makes the table box a scrollport; the rows still
-     lay out through the anonymous table box inside it. Nothing here is sticky,
-     so this costs no header behaviour. */
-  .primer-article table {
-    display: block;
-    width: max-content;
-    max-width: 100%;
-    overflow-x: auto;
-  }
-}
+  min-width: 24px;
+  min-height: 24px;
+  padding: 3px 4px;
+  margin: 0 -4px;
+  line-height: 18px;
+}
+
+/* V3.R13-followup-2 (#411): the acked panel collapses — no big button, no
+   lede, just the confirmation line, so a re-read is not shouted at. */
+.primer-ack--acked { padding: var(--sp-md) var(--sp-lg); }
+.primer-ack--acked .primer-ack__h { margin-bottom: 6px; font-size: 20px; }
+.primer-ack--acked .primer-ack__note { margin-top: 0; color: var(--ink-soft); }

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

@@ -9,15 +9,14 @@
   <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">
+  <link rel="stylesheet" href="/builders/room.css">
   <link rel="stylesheet" href="/builders/primer.css?v=2026-07-02-shell1">
   <link rel="stylesheet" href="/builders/diagram-viewer.css?v=2026-06-14-diagviewer-1">
 </head>
-<body class="primer-body" data-page="primer" data-page-title="Primer">
-
-<!-- Reading-progress bar — fills as the reader scrolls through the article.
-     Pinned just below the sticky top bar (z below the sidebar so it reads as
-     the content column's progress, not app chrome). -->
-<div class="primer-progress" aria-hidden="true"><div class="primer-progress__bar" id="primer-progress-bar"></div></div>
+<!-- `room` opts this page into the reading-room archetype's composition tokens
+     (room.css). They sit on the body, never in a page :root — the branding
+     pack's :root is spliced at the end of <head> and outranks one. -->
+<body class="room primer-body" data-page="primer" data-page-title="Primer">
 
 <div class="app">
   <aside class="app-sidebar" id="app-sidebar" aria-label="Primary"></aside>
@@ -26,19 +25,34 @@
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
 
-      <div class="page-head">
+      <!-- Reading-progress hairline — fills as the reader scrolls the article.
+           Sticky under the topbar rather than fixed over the viewport: it is the
+           content column's progress, not app chrome, and --z-progress puts it
+           below the topbar in the ladder for the same reason. -->
+      <div class="primer-progress" aria-hidden="true"><div class="primer-progress__bar" id="primer-progress-bar"></div></div>
+
+      <!-- The reading room announces its document: the label voice on a
+           one-word eyebrow, then the room's name lowercase in the display face.
+           The board's head is deliberately the quiet inverse of this — see
+           .page-head--room in style.css. The page had no <h1> at all before
+           task 1003306, so it failed one-header-main-h1 on every render. -->
+      <div class="page-head page-head--room">
+        <p class="page-head__eyebrow">Docs</p>
+        <h1 class="page-head__h">The primer</h1>
         <p class="page-head__sub">Everything a new builder needs before claiming their first task. About a ten-minute read.</p>
       </div>
 
       <main id="hall-main">
         <div class="primer-layout">
 
-          <!-- Sticky left-rail table of contents. Built from the article's h2s after
-               the markdown renders. Mobile: collapses behind a toggle. -->
+          <!-- Sticky left-rail table of contents. Built from the article's h2s
+               after the markdown renders; the numerals are drawn by room.css's
+               counter, so the markup carries only titles. Mobile: collapses
+               behind a toggle. -->
           <aside class="primer-toc" id="primer-toc" aria-label="Sections in this primer">
             <button type="button" class="primer-toc__toggle" id="primer-toc-toggle" aria-expanded="false" aria-controls="primer-toc-list">
               <span>Sections</span>
-              <span class="primer-toc__chevron" aria-hidden="true">▾</span>
+              <svg class="primer-toc__chevron" viewBox="0 0 10 6" width="10" height="6" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 1.2 5 4.8 9 1.2"/></svg>
             </button>
             <nav class="primer-toc__inner">
               <p class="primer-toc__heading" id="primer-toc-heading">In this primer</p>
@@ -48,25 +62,50 @@
             </nav>
           </aside>
 
-          <!-- Article column — markdown rendered here. Aria role 'main' so screen
-               readers jump straight to the reading content. -->
-          <article class="primer-article" id="primer-article" aria-busy="true">
-            <div class="primer-loading">Loading the primer…</div>
-          </article>
+          <!-- The article column. Three panels of the same card at the same
+               width — skeleton, document, failure — so the column never changes
+               shape as the markdown resolves. -->
+          <div class="primer-col">
 
-        </div>
+            <div class="primer-skeleton scroll" id="primer-skeleton" aria-hidden="true">
+              <span class="primer-sk primer-skeleton__h"></span>
+              <div class="primer-skeleton__p">
+                <span class="primer-sk"></span><span class="primer-sk"></span>
+                <span class="primer-sk"></span><span class="primer-sk"></span>
+                <span class="primer-sk"></span>
+              </div>
+              <div class="primer-skeleton__rule"></div>
+              <div class="primer-skeleton__p">
+                <span class="primer-sk"></span><span class="primer-sk"></span>
+                <span class="primer-sk"></span><span class="primer-sk"></span>
+                <span class="primer-sk"></span>
+              </div>
+            </div>
+
+            <article class="primer-article scroll" id="primer-article" aria-busy="true" hidden></article>
+
+            <div class="primer-note primer-note--error scroll" id="primer-error" hidden>
+              <p class="primer-note__label">The primer did not load</p>
+              <p class="primer-note__body">The markdown behind this page could not be fetched. Reload to try again, or read it in the repo.</p>
+              <p class="primer-note__acts"><a class="btn btn--ghost" href="/builders">Back to home</a></p>
+            </div>
+
+            <!-- Footer ack module. The button is soft-gated with aria-disabled
+                 (NOT disabled) until the reader has scrolled past ~90% of the
+                 article: a real disabled button leaves the tab order, so a
+                 keyboard reader could never land on it and never heard why it
+                 was locked. -->
+            <section class="primer-ack scroll" id="primer-ack" aria-labelledby="primer-ack-h" hidden>
+              <h2 class="primer-ack__h" id="primer-ack-h">Acknowledge the primer</h2>
+              <p class="primer-ack__lede" id="primer-ack-lede">Read to the end and the button below unlocks. It is an honour system — nothing here checks your comprehension.</p>
+              <p class="primer-ack__meter" id="primer-ack-meter">Read <span class="primer-ack__num">0%</span> of the 90% needed</p>
+              <button type="button" class="primer-ack__btn" id="primer-ack-btn" aria-disabled="true" aria-describedby="primer-ack-note-locked">I have read it</button>
+              <p class="primer-ack__note" id="primer-ack-note-locked">Locked until you reach the end of the article above.</p>
+              <p class="primer-ack__note" id="primer-ack-note" hidden></p>
+            </section>
 
-        <!-- Footer ack module — sits below the article. Button is soft-gated (disabled
-             class) until the reader has scrolled past ~90% of the content. The honor-
-             system signal: "I have read it" only enables once they've actually read it. -->
-        <section class="primer-ack" id="primer-ack" hidden>
-          <div class="primer-ack__inner">
-            <h2 class="primer-ack__h">Acknowledge the primer</h2>
-            <p class="primer-ack__lede" id="primer-ack-lede">Scroll through the primer above. Once you've reached the end, the button below activates.</p>
-            <button type="button" class="primer-ack__btn" id="primer-ack-btn" disabled>I have read it</button>
-            <p class="primer-ack__note" id="primer-ack-note" hidden>Already acknowledged — you're all set. <a href="/">Back to home</a>.</p>
           </div>
-        </section>
+        </div>
       </main>
 
       <footer class="app-foot" id="app-foot"></footer>
@@ -79,6 +118,9 @@
 <script src="/builders/shell.js?v=2026-07-02-shell1"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
+<!-- the shared markdown reader (window.OTBMdReader) — primer.js renders through
+     it rather than carrying a second copy of the grammar. -->
+<script src="/builders/md-reader.js" defer></script>
 <script src="/builders/primer.js?v=2026-05-29-primer-1" defer></script>
 <script src="/builders/diagram-viewer.js?v=2026-06-14-diagviewer-1" defer></script>
 <script src="/builders/copy-on-click.js?v=2026-06-01-copy-1" defer></script>