@bongos/core 1.19.458 → 1.19.460

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

@@ -1,124 +1,79 @@
-/* modules/hall-ui/public/copy-desk.css — the Copy desk tab (task 1003113 / R02
-   of goal 1000074).
+/* modules/hall-ui/public/copy-desk.css — the Copy desk page (task 1003113 /
+   R02 of goal 1000074), rebuilt on the hall's row archetype by task 1003471:
+   the counts are the shell's glass .stat-row, every list is a run of
+   oversight.css's .ov-row, the filters and the search are the kit's .filters,
+   the two dialogs are the family's .ov-modal on a native <dialog>. What is
+   left here is what only this page has: the quoted string as evidence, the
+   reason as prose, the places a duplicate lives, the dialog's scrim.
 
-   Built on the hall's existing tokens (style.css) rather than a new palette: the
-   page whose subject is "does this project speak with one voice" would be a poor
-   place to introduce a second visual one. Only the shapes this page needs are
-   defined here. */
+   px and tokens throughout, and state is COLOUR — the pill's verification
+   vocabulary — never opacity. Opacity dims the panel behind the text as well
+   as the text, which is why the first cut read muddy rather than quiet. */
 
-.cd-stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
-  gap: 0.75rem;
-  margin: 0.5rem 0 1rem;
-}
-.cd-stat {
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-  padding: 0.75rem 0.9rem;
-  border: var(--line) solid var(--rule-soft);
-  border-radius: var(--radius-sm);
-  background: var(--glass);
-}
-.cd-stat__n { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
-.cd-stat__l { font-size: 0.8rem; opacity: 0.7; }
-
-.cd-note { font-size: 0.85rem; opacity: 0.75; line-height: 1.5; }
-/* 4px, not --radius-sm: a 10px radius on a 16px-tall inline span reads as a
-   pill, and the tier has no smaller token. Deliberate, not missed. */
-.cd-note code {
-  padding: 0.05rem 0.3rem;
-  border-radius: 0.25rem;
-  background: var(--glass);
-  font-size: 0.95em;
-}
-
-.cd-filters { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin: 0.5rem 0 1rem; }
-.cd-filters__label { font-size: 0.8rem; opacity: 0.7; }
-.cd-filters__select,
-.cd-browse__input,
-.cd-dialog__select,
-.cd-dialog__input,
-.cd-dialog__text {
-  padding: 0.4rem 0.6rem;
-  border: var(--line) solid var(--rule-soft);
-  border-radius: var(--radius-sm);
-  background: var(--bg-deep);
-  color: inherit;
-  font: inherit;
-}
-
-.cd-browse { margin: 0.5rem 0 1rem; }
-.cd-browse__label { display: block; font-size: 0.8rem; opacity: 0.7; margin-bottom: 0.3rem; }
-.cd-browse__input { width: 100%; max-width: 34rem; }
-
-.cd-list { display: flex; flex-direction: column; gap: 0.6rem; }
-.cd-empty { padding: 1rem; opacity: 0.65; font-size: 0.9rem; }
-
-.cd-card {
-  padding: 0.85rem 1rem;
-  border: var(--line) solid var(--rule-soft);
-  border-radius: var(--radius-sm);
+/* The summary strip sits closer to its provenance line than to the next panel.
+   The inline code takes 4px, not --radius-sm: a 10px radius on a 16px-tall
+   inline span reads as a pill, and the tier has no smaller token. */
+.cd-summary { margin-bottom: 12px; }
+.cd-registry-note { margin: 0 0 var(--sp-md); max-width: 72ch; }
+.cd-registry-note code,
+.cd-search-count code {
+  padding: 1px 5px;
+  border-radius: 4px;
   background: var(--glass);
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  color: var(--ink-soft);
 }
-.cd-card--slim { padding: 0.6rem 0.8rem; }
-.cd-card__head { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; }
-.cd-card__target { margin: 0.2rem 0 0.45rem; line-height: 1.5; }
-.cd-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; margin-top: 0.5rem; }
 
 /* The quoted string is the product's own words, shown as evidence — so it is
-   visually set apart from this page's own voice. Wrapping is preserved because
-   leading and trailing space in a string is often exactly what is wrong. */
+   set apart from this page's own voice: mono, in the ink, wrapping preserved
+   because leading and trailing space in a string is often exactly what is
+   wrong. It is the row's title, so it sits at the title's line, in the mono's
+   own size and weight. */
 .cd-quote {
   quotes: '"' '"';
   font-family: var(--font-mono);
-  font-size: 0.9em;
+  font-size: 13.5px;
+  font-weight: 400;
+  letter-spacing: 0;
+  color: var(--ink);
   white-space: pre-wrap;
-  word-break: break-word;
+  overflow-wrap: anywhere;
 }
-.cd-where { font-size: 0.8rem; opacity: 0.6; font-family: var(--font-mono); }
-.cd-byline { font-size: 0.8rem; opacity: 0.65; margin-left: auto; }
-.cd-reason { margin: 0.3rem 0 0; line-height: 1.55; }
-.cd-snapshot-label { font-size: 0.8rem; opacity: 0.6; }
-.cd-closed { margin: 0.5rem 0 0; font-size: 0.85rem; opacity: 0.8; line-height: 1.5; }
-.cd-places { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.8rem; opacity: 0.65; font-family: var(--font-mono); }
+.cd-snapshot-label { font-size: 12.5px; font-weight: 400; color: var(--ink-faint); }
 
-.cd-tag {
-  display: inline-block;
-  padding: 0.1rem 0.45rem;
-  border: var(--line) solid var(--rule);
-  border-radius: var(--radius-pill);
-  font-size: 0.72rem;
-  letter-spacing: 0.02em;
-  opacity: 0.85;
-}
-.cd-tag--kind { font-weight: 600; opacity: 1; }
-/* 'untouched' is the only state that is WORK, so it is the only one that carries
-   colour — a queue where everything is highlighted highlights nothing. */
-.cd-tag--untouched { border-color: currentColor; opacity: 1; }
-.cd-tag--flagged,
-.cd-tag--settled,
-.cd-tag--moved { opacity: 0.6; }
-.cd-tag--gone { opacity: 0.75; font-style: italic; }
+/* The reason is the judgement the artist reads, so it takes the body ink at
+   body size rather than the sub line's soft ink, and the detail-lines' 72ch
+   rather than the clause measure: a reason is a paragraph. */
+.cd-reason { font-size: 14px; color: var(--ink); max-width: 72ch; }
+.cd-closed { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); max-width: 72ch; }
+.cd-closed b { color: var(--ink); font-weight: 500; }
 
-.cd-dialog {
-  width: min(34rem, 92vw);
-  padding: 1.25rem;
-  border: var(--line) solid var(--rule);
-  border-radius: var(--radius);
-  background: var(--bg-card);
-  color: inherit;
+/* Where a duplicate lives: one mono line per place and no hairlines — seven
+   near-identical file:line lines ruled apart read as a table nobody laid out. */
+.cd-places {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--ink-faint);
 }
-/* The one literal this sheet keeps. Pure black with alpha used as a SCRIM is
-   the single exception the Fifteen Rule names, and a backdrop cannot take a
-   ground token: it has to darken whatever is behind it in either mode. */
+.cd-places li { overflow-wrap: anywhere; }
+
+/* The search field takes the room a phrase needs. */
+.cd-find .filter { flex: 1 1 280px; max-width: 520px; }
+.cd-find .filter input[type="search"] { width: 100%; }
+.cd-search-count { margin: 0 0 14px; }
+
+/* The two dialogs are the family modal on a native <dialog>: bg-card, one rule
+   hairline, no shadow. The backdrop is the one literal this sheet keeps — pure
+   black with alpha as a SCRIM is the exception the Fifteen Rule names, and a
+   backdrop cannot take a ground token: it has to darken whatever is behind it
+   in either mode. */
+.cd-dialog { width: min(480px, calc(100vw - 32px)); color: var(--ink); }
 .cd-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
-.cd-dialog__h { margin: 0 0 0.5rem; font-size: 1.1rem; }
-.cd-dialog__target { margin: 0 0 0.9rem; line-height: 1.5; }
-.cd-dialog__label { display: block; margin: 0.75rem 0 0.25rem; font-size: 0.85rem; font-weight: 600; }
-.cd-dialog__hint { display: block; font-weight: 400; font-size: 0.78rem; opacity: 0.65; line-height: 1.45; margin-top: 0.1rem; }
-.cd-dialog__select, .cd-dialog__input, .cd-dialog__text { width: 100%; }
-.cd-dialog__text { resize: vertical; line-height: 1.5; }
-.cd-dialog__err { min-height: 1.2rem; margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--danger); line-height: 1.45; }
-.cd-dialog__actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.9rem; }
+.cd-dialog .ov-form { margin: 14px 0 0; }
+.cd-dialog textarea { resize: vertical; line-height: 1.5; }
+.ov-modal .cd-dialog__err { min-height: 18px; margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--danger); }

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

@@ -9,6 +9,7 @@
   <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/oversight.css">
   <link rel="stylesheet" href="/builders/copy-desk.css">
 </head>
 <body data-page="copy-desk" data-page-title="Copy desk">
@@ -19,42 +20,33 @@
   <div class="app-body">
     <header class="app-topbar" id="app-topbar"></header>
     <div class="app-content">
-      <!-- task 1003307: the board page head. Copy desk 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: the page's own name in the LABEL voice, not a
+           display line — on a working surface it is the least interesting
+           thing on it. -->
       <div class="page-head page-head--board">
         <h1 class="page-head__h">Copy desk</h1>
         <p class="page-head__sub" id="cd-sub">Loading the copy desk…</p>
       </div>
 
       <main id="hall-main">
-        <!-- The counts. Deliberately four numbers and not a dashboard: open work,
-             the fast pile (targets that have since been edited away), untouched
-             duplicates, and how big the inventory is. -->
-        <section class="scroll" id="cd-summary-scroll" aria-labelledby="cd-summary-h">
-          <h2 id="cd-summary-h" class="scroll__h">Where the words stand</h2>
-          <div class="cd-stats" id="cd-stats"></div>
-          <p class="cd-note" id="cd-registry-note"></p>
-        </section>
+        <!-- The counts: the shell's glass band of figures at the top of the page,
+             not a panel of boxes. Deliberately four numbers and not a dashboard:
+             open work, the fast pile (targets that have since been edited away),
+             untouched duplicates, and how big the inventory is — each with the
+             clause that says what it means. The provenance line under it names
+             the artifact this whole page describes. -->
+        <section class="stat-row ov-summary cd-summary" id="cd-summary-scroll" aria-label="Where the words stand"></section>
+        <p class="ov-foot cd-registry-note" id="cd-registry-note"></p>
 
-        <!-- The queue. -->
+        <!-- The queue. Every flag is a row of the hall's row archetype: the
+             string as the title (the product's own words, as evidence), the
+             reason as the prose under it, the kind and the target's state as
+             pills, who flagged it as a fact, when in the right column. -->
         <section class="scroll" id="cd-flags-scroll" aria-labelledby="cd-flags-h">
           <h2 id="cd-flags-h" class="scroll__h">Flagged</h2>
-          <p class="scroll__lede">Copy someone has judged as needing attention, with their reason. Anyone can file one; closing it needs Metic+, or that it is your own.</p>
-          <div class="cd-filters">
-            <label class="cd-filters__label" for="cd-status">Show</label>
-            <select id="cd-status" class="cd-filters__select">
-              <option value="open" selected>Open</option>
-              <option value="resolved">Resolved</option>
-              <option value="dismissed">Dismissed</option>
-              <option value="all">Everything</option>
-            </select>
-            <label class="cd-filters__label" for="cd-surface">Surface</label>
-            <select id="cd-surface" class="cd-filters__select"><option value="">All surfaces</option></select>
-          </div>
-          <div class="cd-list" id="cd-flags"><div class="cd-empty">Loading…</div></div>
+          <p class="scroll__lede">Copy someone has judged as needing attention, with their reason. Anyone can file one; closing it needs the <span id="cd-close-rank">Metic</span> rank or above, or that it is your own.</p>
+          <div id="cd-filters"></div>
+          <div id="cd-flags"><div class="empty-state"><p>Loading…</p></div></div>
         </section>
 
         <!-- The one signal a machine can compute with no judgement layer at all
@@ -63,7 +55,7 @@
         <section class="scroll" id="cd-dupes-scroll" aria-labelledby="cd-dupes-h">
           <h2 id="cd-dupes-h" class="scroll__h">Said more than once</h2>
           <p class="scroll__lede">The same sentence, in several places. Sometimes that is right and the answer is to dismiss it; sometimes it is seven copies of an error message that should have been one. Nobody has looked at the ones marked untouched.</p>
-          <div class="cd-list" id="cd-dupes"><div class="cd-empty">Loading…</div></div>
+          <div id="cd-dupes"><div class="empty-state"><p>Loading…</p></div></div>
         </section>
 
         <!-- Find any string in the product and flag it. Without this the queue
@@ -71,13 +63,9 @@
         <section class="scroll" id="cd-find-scroll" aria-labelledby="cd-find-h">
           <h2 id="cd-find-h" class="scroll__h">Find something to flag</h2>
           <p class="scroll__lede">Search every string the product shows a person, by what it says or the file it lives in.</p>
-          <div class="cd-browse">
-            <label class="cd-browse__label" for="cd-search">Search the copy</label>
-            <input type="search" id="cd-search" class="cd-browse__input" autocomplete="off"
-                   placeholder="a phrase you saw, or a file name…">
-            <p class="cd-note" id="cd-search-count" role="status" aria-live="polite"></p>
-          </div>
-          <div class="cd-list" id="cd-results"></div>
+          <div class="cd-find" id="cd-find"></div>
+          <p class="ov-foot cd-search-count" id="cd-search-count" role="status" aria-live="polite"></p>
+          <div id="cd-results"></div>
         </section>
       </main>
 
@@ -88,50 +76,68 @@
 
 <!-- The flag composer. A dialog rather than an inline field because the reason is
      the point: a one-line input invites "typo", and the queue is only worth
-     reading if the reasons are. -->
-<dialog id="cd-dialog" class="cd-dialog">
+     reading if the reasons are. A native <dialog> (its own focus trap and
+     Escape) dressed as the family's confirm modal. -->
+<dialog id="cd-dialog" class="ov-modal cd-dialog">
   <form method="dialog" id="cd-form">
-    <h3 class="cd-dialog__h" id="cd-dialog-h">Flag this copy</h3>
+    <h3 class="scroll__h" id="cd-dialog-h">Flag this copy</h3>
     <p class="cd-dialog__target" id="cd-dialog-target"></p>
-    <label class="cd-dialog__label" for="cd-kind">What kind of wrong?</label>
-    <select id="cd-kind" class="cd-dialog__select">
-      <option value="off-voice">Off voice — says it in the wrong register</option>
-      <option value="slop">Slop — reads as machine-written</option>
-      <option value="unclear">Unclear — a person would not know what to do</option>
-      <option value="stale">Stale — describes something that changed</option>
-      <option value="duplicate">Duplicate — should be said once, in one place</option>
-      <option value="typo">Typo or grammar</option>
-      <option value="other" selected>Something else</option>
-    </select>
-    <label class="cd-dialog__label" for="cd-reason">Why? <span class="cd-dialog__hint">The artist reads this instead of guessing. A pointer with no judgement costs them a look and tells them nothing.</span></label>
-    <textarea id="cd-reason" class="cd-dialog__text" rows="4" minlength="10" required
-              placeholder="What is wrong with it, and what would better look like?"></textarea>
+    <div class="ov-form">
+      <div class="ov-field ov-field--wide">
+        <label class="ov-field__l" for="cd-kind">What kind of wrong?</label>
+        <select id="cd-kind">
+          <option value="off-voice">Off voice — says it in the wrong register</option>
+          <option value="slop">Slop — reads as machine-written</option>
+          <option value="unclear">Unclear — a person would not know what to do</option>
+          <option value="stale">Stale — describes something that changed</option>
+          <option value="duplicate">Duplicate — should be said once, in one place</option>
+          <option value="typo">Typo or grammar</option>
+          <option value="other" selected>Something else</option>
+        </select>
+      </div>
+      <div class="ov-field ov-field--wide">
+        <label class="ov-field__l" for="cd-reason">Why?</label>
+        <textarea id="cd-reason" rows="4" minlength="10" required
+                  placeholder="What is wrong with it, and what would better look like?"></textarea>
+      </div>
+      <p class="ov-form__why">The artist reads this instead of guessing. A pointer with no judgement costs them a look and tells them nothing.</p>
+    </div>
     <p class="cd-dialog__err" id="cd-dialog-err" role="alert"></p>
-    <div class="cd-dialog__actions">
-      <button type="button" class="btn btn--ghost" id="cd-cancel">Cancel</button>
-      <button type="button" class="btn" id="cd-submit">File the flag</button>
+    <div class="ov-modal__actions">
+      <button type="button" class="btn-ghost" id="cd-cancel">Cancel</button>
+      <button type="button" class="btn-accent" id="cd-submit">File the flag</button>
     </div>
   </form>
 </dialog>
 
 <!-- Closing a flag asks for a note for the same reason opening one does. -->
-<dialog id="cd-close-dialog" class="cd-dialog">
+<dialog id="cd-close-dialog" class="ov-modal cd-dialog">
   <form method="dialog" id="cd-close-form">
-    <h3 class="cd-dialog__h">Close this flag</h3>
+    <h3 class="scroll__h">Close this flag</h3>
     <p class="cd-dialog__target" id="cd-close-target"></p>
-    <label class="cd-dialog__label" for="cd-close-status">Outcome</label>
-    <select id="cd-close-status" class="cd-dialog__select">
-      <option value="resolved" selected>Resolved — the copy was changed</option>
-      <option value="dismissed">Dismissed — looked at, leaving it as it is</option>
-    </select>
-    <label class="cd-dialog__label" for="cd-close-task">Task that carried the fix <span class="cd-dialog__hint">Optional. This is the ledger link — a copy change ships as a task like every other change.</span></label>
-    <input type="number" id="cd-close-task" class="cd-dialog__input" placeholder="e.g. 1003113" min="1">
-    <label class="cd-dialog__label" for="cd-close-note">Note <span class="cd-dialog__hint">The next person to notice this sentence reads your note instead of re-litigating it.</span></label>
-    <textarea id="cd-close-note" class="cd-dialog__text" rows="3" minlength="10" required></textarea>
+    <div class="ov-form">
+      <div class="ov-field ov-field--wide">
+        <label class="ov-field__l" for="cd-close-status">Outcome</label>
+        <select id="cd-close-status">
+          <option value="resolved" selected>Resolved — the copy was changed</option>
+          <option value="dismissed">Dismissed — looked at, leaving it as it is</option>
+        </select>
+      </div>
+      <div class="ov-field ov-field--wide">
+        <label class="ov-field__l" for="cd-close-task">Task that carried the fix</label>
+        <input type="number" id="cd-close-task" placeholder="e.g. 1003113" min="1">
+      </div>
+      <p class="ov-form__why">Optional. This is the ledger link — a copy change ships as a task like every other change.</p>
+      <div class="ov-field ov-field--wide">
+        <label class="ov-field__l" for="cd-close-note">Note</label>
+        <textarea id="cd-close-note" rows="3" minlength="10" required></textarea>
+      </div>
+      <p class="ov-form__why">The next person to notice this sentence reads your note instead of re-litigating it.</p>
+    </div>
     <p class="cd-dialog__err" id="cd-close-err" role="alert"></p>
-    <div class="cd-dialog__actions">
-      <button type="button" class="btn btn--ghost" id="cd-close-cancel">Cancel</button>
-      <button type="button" class="btn" id="cd-close-submit">Close it</button>
+    <div class="ov-modal__actions">
+      <button type="button" class="btn-ghost" id="cd-close-cancel">Cancel</button>
+      <button type="button" class="btn-accent" id="cd-close-submit">Close it</button>
     </div>
   </form>
 </dialog>
@@ -141,6 +147,7 @@
 <script src="/builders/shell.js?v=2026-07-02-shell1"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-23-contrib"></script>
-<script src="/builders/copy-desk.js?v=2026-08-18-r02"></script>
+<script src="/builders/hall-kit.js"></script>
+<script src="/builders/copy-desk.js?v=2026-09-01-redesign"></script>
 </body>
 </html>