@bongos/core 1.19.469 → 1.19.471

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

@@ -1,93 +1,74 @@
-/* modules.css — Page-local styles for the Modules page.
-   Lifted verbatim out of the page's inline <style> block (task 1002176);
-   the ?v= cache-bust is stamped automatically from this file's content hash
-   at boot (src/asset-version.js). */
+/* modules.css — what a MODULE row has that no other oversight row does (task
+   1003472, goal 1000081). The panel, the filter bar, the figure band, the group
+   heads, the row, the toggle and the foot line are all the shell's or the
+   family's (oversight.css); this sheet adds the clamped description, the
+   per-row details disclosure and the lines it opens onto.
 
-/* Page-local styles for Modules, layered on the shared design tokens
-   (style.css) — same pattern as settings.html's page-local block. */
-.mod-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 14px;
-  margin-top: 10px;
-}
-.mod-card {
-  border: var(--line) solid var(--rule-soft);
-  border-radius: var(--radius-sm);
-  background: var(--bg-card);
-  padding: 14px 16px;
+   ROWS, NOT CARDS — the call task 1003472 asked for. Modules was the one hall
+   page already rendering its record's description, so a card looked like the
+   case where prose earns a box. Rendered against the real catalog it is the
+   opposite: the descriptions run from 120 to 1,200 characters, so the 280px
+   auto-fill grid stood a 500px card beside a 120px one, the toggle (the row's
+   one control) sat at a different height in every column, and a builder
+   scanning for a NAME and a STATE read paragraphs to find either. A row puts
+   every title on one x, every switch on another, clamps the prose to two lines
+   and opens the rest on request. The card grammar (.mod-grid/.mod-card), the
+   boxed .mod-browse field and the .mod-chip alias are gone. */
+
+/* The filter bar closes on a hairline, the goals panel's rule: the count and
+   the figures under it read as the panel's content, not as more controls. */
+#mod-filters { margin: 0 0 12px; padding: 0 0 6px; border-bottom: var(--line) solid var(--rule-soft); }
+#mod-filters .filters { margin-bottom: 10px; }
+.mod-count { margin: 0 0 14px; font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
+.mod-count:empty { display: none; }
+
+/* One group after another: the second head carries the family's air above it,
+   and the first row after a head starts flush (oversight.css draws the rule). */
+.mod-panel .ov-group + .ov-group { margin-top: var(--sp-md); }
+.mod-loading { padding: 10px 0; font-size: 13.5px; color: var(--ink-soft); }
+
+/* The description is the sub line, clamped to two lines of the measure so
+   twenty rows scan as twenty rows. The details disclosure under it opens the
+   rest; while it is open the clamp lifts, so the prose is never shown twice. */
+.mod-row__desc {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
 }
-.mod-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-.mod-card__title { font-weight: 650; font-size: 14.5px; color: var(--ink); }
-.mod-card__key { font-size: 12px; color: var(--ink-faint); font-family: var(--font-mono); }
-.mod-card__desc { font-size: 13px; color: var(--ink-soft); margin: 8px 0; }
-.mod-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
-/* Base: the shell's .fact-pill (task 1003307).
-   One override, and it is the reason the pill is not simply reused as-is: the
-   archetype's chip holds a short machine word (a module key, a version id) and
-   is nowrap, but THIS page's chips hold prose: "by <author>", "from <origin>",
-   "upkeep: undeclared". Inheriting nowrap put a single 559px chip on a 320px
-   viewport. A chip that carries a sentence wraps. */
-.mod-chip { white-space: normal; }
-.mod-chip--core { color: var(--info); }
-.mod-chip--own { color: var(--accent-ink); }
-.mod-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
-button.mod-toggle {
-  font-family: var(--font-body);
+.mod-row:has(.mod-more[open]) .mod-row__desc { display: block; -webkit-line-clamp: unset; overflow: visible; }
+
+/* The disclosure is a text control in a 13px facts line: inline-block with the
+   family's padding trick so it clears the 24px floor on both axes. No marker
+   — the word says what it does, and the open state says so too. */
+.mod-more { margin: 8px 0 0; }
+.mod-more > summary {
+  display: inline-block;
+  list-style: none;
+  min-height: 24px;
+  min-width: 24px;
+  padding: 3px 4px;
+  margin: -3px -4px;
+  line-height: 18px;
   font-size: 12.5px;
-  font-weight: 600;
-  padding: 5px 16px;
-  min-width: 78px;
-  border-radius: var(--radius-pill);
-  border: var(--line) solid var(--rule);
-  background: var(--bg-card);
-  color: var(--ink-soft);
+  color: var(--accent-ink);
   cursor: pointer;
 }
-button.mod-toggle[data-on="1"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
-button.mod-toggle:disabled { opacity: 0.5; cursor: default; }
-button.mod-submit {
-  font-family: var(--font-body);
-  font-size: 12px;
-  font-weight: 600;
-  padding: 5px 12px;
-  border-radius: var(--radius-sm);
-  border: var(--line) solid var(--rule);
-  background: transparent;
-  color: var(--ink-soft);
-  cursor: pointer;
-}
-button.mod-submit:disabled { opacity: 0.45; cursor: not-allowed; }
-/* Italic was this sheet's alone — nothing else in the hall sets it, and an
-   empty state is a plain statement, not an aside (task 1003307). */
-.mod-empty { color: var(--ink-faint); font-size: 13px; padding: 10px 0; }
-.mod-note { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
+.mod-more > summary::-webkit-details-marker { display: none; }
+.mod-more > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
+.mod-more > summary::before { content: "details"; }
+.mod-more[open] > summary::before { content: "fewer details"; }
+/* The lines the disclosure opens onto are the family's key/value lines; the
+   list of what a module contributes wraps as chips on its own line. */
+.mod-more .ov-lines { margin-top: 8px; }
+.mod-more .ov-lines .ov-lines__v { text-align: left; margin-left: 0; }
+.mod-more .ov-lines .ov-lines__v .fact-chip { margin: 0 6px 4px 0; }
 
-/* Catalog browse bar (task 1001772) — one filter over both grids. */
-.mod-browse { margin: 0 0 16px; }
-.mod-browse__label {
-  display: block;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--ink-soft);
-  margin-bottom: 6px;
-}
-.mod-browse__input {
-  font-family: var(--font-body);
-  font-size: 13.5px;
-  width: 100%;
-  max-width: 420px;
-  padding: 8px 12px;
-  border-radius: var(--radius-sm);
-  border: var(--line) solid var(--rule);
-  background: var(--bg-card);
-  color: var(--ink);
-}
 /* The marker on an inferred credit — quiet, but hoverable for the reason. */
-.mod-inferred {
-  border: 0;
-  text-decoration: none;
-  cursor: help;
-  color: var(--ink-faint);
-  margin-left: 1px;
-}
+.mod-inferred { border: 0; text-decoration: none; cursor: help; color: var(--ink-faint); margin-left: 1px; }
+
+/* The right column holds the switch and, on a module built here, the submit
+   door under it. The switch is the family's grant toggle: enabled reads in ink,
+   disabled in the faint ink, the accent only on hover. A viewer below the floor
+   sees the state as a pill, not a dead control. */
+.mod-row__right .btn-ghost { white-space: nowrap; }

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

@@ -9,6 +9,10 @@
   <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">
+  <!-- task 1003472: the catalog rides the oversight family's row (a titled row
+       with facts and one action on the right), so the family sheet loads first
+       and modules.css holds only what a module row has that no other row does. -->
+  <link rel="stylesheet" href="/builders/oversight.css">
   <link rel="stylesheet" href="/builders/modules.css">
 </head>
 <body data-page="modules" data-page-title="Modules">
@@ -19,48 +23,53 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
-      <!-- task 1003307: the board page head. Modules shipped with NO <h1> at all
-           (one-header-main-h1 measured 0 on every render), so the re-skin
-           carries the structural fix rather than porting the hole. The heading
-           is the LABEL voice, not a display line: on a working surface the
-           page's own name is the least interesting thing on it. -->
+      <!-- The board page head (task 1003307): the label voice, because on a
+           working surface the page's own name is the least interesting thing on
+           it. The sub says what the page IS; the numbers moved into the panel's
+           figure band (task 1003472), where a number belongs. -->
       <div class="page-head page-head--board">
         <h1 class="page-head__h">Modules</h1>
-        <p class="page-head__sub" id="modules-sub">Loading modules…</p>
+        <p class="page-head__sub" id="modules-sub">Everything this instance can run: what the core ships, what this project built, and who keeps each one true as the core advances.</p>
       </div>
 
       <main id="hall-main">
-        <!-- Browse — one filter over both grids below (task 1001772). -->
-        <div class="mod-browse">
-          <label class="mod-browse__label" for="mod-search">Search the catalog</label>
-          <input type="search" id="mod-search" class="mod-browse__input" autocomplete="off"
-                 placeholder="name, author, origin project, or licence…">
-          <p class="mod-note" id="mod-browse-count" role="status" aria-live="polite"></p>
-        </div>
-
-        <!-- The catalog — every module the CORE ships, which this instance can
-             opt into (ADR 0107 §6: accepted modules land default-off). Each row
-             carries its author + origin credit (§2/§3: credit now, money later). -->
-        <section class="scroll" id="core-scroll" aria-labelledby="core-h">
+        <!-- task 1003472: ONE panel. The search and the state lens sit on a
+             hairline at the top, the figure band under them, then two runs of
+             rows under group heads — shipped with the core, built by this
+             project. Before this the page was a boxed search on the ground over
+             three panels, the middle two holding 280px card grids whose height
+             varied tenfold with the description, so the one control per record
+             (the toggle) landed at a different height on every card. A record
+             carrying this many facts is a row (docs/design/hall-direction-v2.md
+             section 6; the archetype at docs/design/mocks/hall/goals/v3.html). -->
+        <section class="scroll mod-panel" id="core-scroll" aria-labelledby="core-h">
           <h2 id="core-h" class="scroll__h">Module catalog</h2>
-          <p class="scroll__lede">Modules the Cloud Bongos core ships — the shared repository built by its sub-projects, each credited to its author and the project it came from. Enable the ones you want; Metic+ can flip the switch, everyone can see the state.</p>
-          <div class="mod-grid" id="core-grid"><div class="mod-empty">Loading…</div></div>
-        </section>
+          <p class="scroll__lede">The shared repository the core ships and the modules this project built for itself, each credited to its author and the project it came from. Everyone can see the state; the switch is rank-gated.</p>
+          <div id="mod-filters"></div>
+          <p class="mod-count" id="mod-count" role="status" aria-live="polite"></p>
+          <div class="ov-figs" id="mod-figs" aria-label="Catalog at a glance"></div>
 
-        <!-- This instance's own modules — the pool `bongos module submit` draws
-             from. Separate from the catalog because these ship from this repo,
-             not from the core package. -->
-        <section class="scroll" id="own-scroll" aria-labelledby="own-h">
-          <h2 id="own-h" class="scroll__h">Built by this project</h2>
-          <p class="scroll__lede">Modules that live in this instance's own repo rather than arriving with the core. Submit one upstream below to offer it to every other instance.</p>
-          <div class="mod-grid" id="own-grid"><div class="mod-empty">None on disk.</div></div>
-        </section>
+          <!-- Shipped with the core — the catalog this instance opts into
+               (ADR 0107 §6: accepted modules land default-off). -->
+          <div class="ov-group" id="core-group">
+            <div class="ov-group__head">
+              <span class="ov-group__name">Shipped with the core</span>
+              <span class="ov-group__n" id="core-n"></span>
+            </div>
+            <ul class="ov-rows" id="core-grid"><li class="mod-loading">Loading the catalog…</li></ul>
+          </div>
 
-        <!-- Submit for review — the front door to bongos module submit (ADR 0107 §1/§9). -->
-        <section class="scroll" id="submit-scroll" aria-labelledby="submit-h">
-          <h2 id="submit-h" class="scroll__h">Contribute a module upstream</h2>
-          <p class="scroll__lede" id="submit-lede">Submit one of this project's own modules for review, so it can join the shared Cloud Bongos catalog with your name and this project credited.</p>
-          <p class="settings-status" id="submit-status" role="status" aria-live="polite"></p>
+          <!-- Built by this project — the pool `bongos module submit` draws from
+               (ADR 0107 §1/§9). The submit door is on the row, beside the module
+               it files, so the third panel this page used to carry is gone. -->
+          <div class="ov-group" id="own-group">
+            <div class="ov-group__head">
+              <span class="ov-group__name">Built by this project</span>
+              <span class="ov-group__n" id="own-n"></span>
+            </div>
+            <ul class="ov-rows" id="own-grid"></ul>
+            <p class="ov-foot" id="submit-lede">A module built here can be submitted upstream for review, so it can join the shared catalog with your name and this project credited.</p>
+          </div>
         </section>
       </main>
 
@@ -75,6 +84,8 @@
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-23-contrib"></script>
-<script src="/builders/modules.js?v=2026-08-12-catalog"></script>
+<script src="/builders/brand-apply.js"></script>
+<script src="/builders/hall-kit.js"></script>
+<script src="/builders/modules.js?v=2026-09-02-rows"></script>
 </body>
 </html>