@bongos/core 1.24.50 → 1.24.52

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

@@ -90,6 +90,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/tweak-editor-lib.js?v=2026-09-28-tw23"></script>
 <script src="/builders/studio-lib.js?v=2026-10-09-day"></script>

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

@@ -26,7 +26,6 @@
   --aq-glass: rgba(255, 255, 255, .075);
   --aq-glass-edge: rgba(255, 255, 255, .18);
   --aq-glass-rim: rgba(255, 255, 255, .22);
-  --aq-drop: rgba(0, 0, 0, .55);
   --aq-ink: #ffffff;
   --aq-ink-soft: #c0c0c0;
   --aq-ink-faint: #a8a8a8;
@@ -44,14 +43,8 @@
   --aq-rule: rgba(255, 255, 255, .12);
   --aq-face: var(--font-body, Manrope, "Segoe UI", system-ui, sans-serif);
   --aq-mono: var(--font-mono, "JetBrains Mono", ui-monospace, Consolas, monospace);
-  position: fixed;
-  inset: 0;
-  z-index: var(--z-modal, 160);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  box-sizing: border-box;
+  /* the layer, the placement and the gutter are the shared .hall-scrim's
+     (controls.css, task 1005085); only the artboard's tint is its own */
   background: var(--aq-scrim);
   color: var(--aq-ink);
   font-family: var(--aq-face);
@@ -60,7 +53,6 @@ html[data-theme="dark"] .aq-overlay { --aq-scrim: rgba(4, 5, 9, .42); }
 @media (prefers-color-scheme: dark) {
   html:not([data-theme]) .aq-overlay { --aq-scrim: rgba(4, 5, 9, .42); }
 }
-.aq-overlay[hidden] { display: none; }
 html.aq-open { overflow: hidden; }
 
 /* FITS THE SCREEN (task 1004381). The artboard's 1180 by 820 is a ceiling, never
@@ -80,7 +72,7 @@ html.aq-open { overflow: hidden; }
   border: 1px solid var(--aq-glass-edge);
   backdrop-filter: blur(30px) saturate(160%);
   -webkit-backdrop-filter: blur(30px) saturate(160%);
-  box-shadow: inset 0 1px 0 var(--aq-glass-rim), 0 40px 90px var(--aq-drop);
+  box-shadow: inset 0 1px 0 var(--aq-glass-rim), var(--ds-shadow-pop);
   display: flex;
   flex-direction: column;
   gap: 16px;

package/modules/hall-ui/public/approval-queue.js

@@ -79,11 +79,16 @@
     };
 
     const scrim = document.createElement('div');
-    scrim.className = 'aq-overlay';
+    // The shared overlay layer (controls.css .hall-scrim, task 1005085); the
+    // glass inside is the artboard's own.
+    scrim.className = 'hall-scrim aq-overlay';
     scrim.hidden = true;
     scrim.innerHTML = '<div class="aq-dialog" role="dialog" aria-modal="true" aria-labelledby="aq-title" tabindex="-1"></div>';
     root.appendChild(scrim);
     const dialog = scrim.querySelector('.aq-dialog');
+    // The hall's one dialog behaviour (hall-dialog.js, task 1005085): Escape, the
+    // focus trap, a click on the scrim, the scroll lock and focus back to the opener.
+    const modal = window.OTBDialog.bind(scrim, { panel: dialog, lockClass: 'aq-open', initialFocus: () => dialog, onClose: closed });
 
     const current = () => state.queue[state.idx] || null;
 
@@ -296,14 +301,11 @@
     // `pageId` (optional) lands on that page's card when it is in the queue, so a
     // row elsewhere that says "needs to be reviewed" opens its own card.
     async function open(pageId, { reload = true } = {}) {
-      state.opener = document.activeElement;
       state.open = true;
       state.error = null;
       state.noteOpen = false;
-      scrim.hidden = false;
-      document.documentElement.classList.add('aq-open');
       paint();
-      dialog.focus();
+      modal.open();
       if (reload || !state.loaded) await loadQueue();
       if (typeof pageId === 'string') {
         const at = state.queue.findIndex((q) => q.page_id === pageId);
@@ -315,17 +317,17 @@
       if (first) first.focus();
     }
 
-    function close() {
+    function close() { modal.close(); }
+
+    // Whatever closed it (the close button, Escape, the scrim), the queue settles here.
+    function closed() {
       state.open = false;
-      scrim.hidden = true;
-      document.documentElement.classList.remove('aq-open');
       // A decided page leaves the queue for good; the next open starts fresh.
       if (state.outcome.size) {
         state.queue = state.queue.filter((q) => !state.outcome.has(q.task_id));
         state.outcome.clear();
         state.idx = 0;
       }
-      if (state.opener && state.opener.focus) state.opener.focus();
     }
 
     // A switch repaints the dialog, so the pressed pill is focused again: a
@@ -338,7 +340,6 @@
     }
 
     scrim.addEventListener('click', (ev) => {
-      if (ev.target === scrim) return close();
       const t = ev.target.closest('button');
       if (!t || t.disabled) return undefined;
       if (('close' in t.dataset)) return close();
@@ -353,17 +354,9 @@
       return undefined;
     });
 
+    // Escape and the Tab trap are the shared dialog's (OTBDialog.bind above).
     scrim.addEventListener('keydown', (ev) => {
-      if (ev.key === 'Escape') { ev.preventDefault(); close(); return; }
-      if (ev.key === 'Enter' && ev.target && ev.target.id === 'aq-note') { ev.preventDefault(); decide('sent'); return; }
-      if (ev.key !== 'Tab') return;
-      // Keep focus inside the dialog while it is open (aria-modal).
-      const f = [...dialog.querySelectorAll('button:not([disabled]), input, [tabindex="0"]')];
-      if (!f.length) return;
-      const first = f[0];
-      const last = f[f.length - 1];
-      if (ev.shiftKey && document.activeElement === first) { ev.preventDefault(); last.focus(); }
-      else if (!ev.shiftKey && document.activeElement === last) { ev.preventDefault(); first.focus(); }
+      if (ev.key === 'Enter' && ev.target && ev.target.id === 'aq-note') { ev.preventDefault(); decide('sent'); }
     });
 
     scrim.addEventListener('input', (ev) => {

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

@@ -93,6 +93,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></script>
 <!-- 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/atlas.js?v=2026-09-02-index" defer></script>

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

@@ -62,6 +62,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></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 branding pack's currency label, loaded BEFORE blockers.js. -->

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

@@ -64,6 +64,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></script>
 <!-- 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/hall-kit.js"></script>

package/modules/hall-ui/public/bulk-toolbar.js

@@ -246,8 +246,12 @@
       if (!entries.length) return;
       const label = entries.length === 1 ? `#${entries[0][1]}` : `${entries.length} tasks`;
       const pronoun = entries.length === 1 ? 'It returns' : 'They return';
-      if (!window.confirm(`Release ${label}? ${pronoun} to the queue and no ${curLabel()} are earned.`)) return;
       const btn = el('release');
+      if (!(await window.OTBDialog.confirm({
+        title: `Release ${label}?`,
+        body: `${pronoun} to the queue and no ${curLabel()} are earned.`,
+        confirmLabel: 'Release', danger: true, trigger: btn,
+      }))) return;
       if (btn) { btn.disabled = true; btn.textContent = 'Releasing…'; }
       try {
         const out = await claimAction.releaseMany(entries);

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

@@ -109,6 +109,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers" defer></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals" defer></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark" defer></script>
+<script src="/builders/hall-dialog.js" defer></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/gov-living.js?v=2026-10-09-positions1" defer></script>
 <script src="/builders/gov-feeds.js?v=2026-10-09-living3" defer></script>

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

@@ -163,6 +163,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/collab-lib.js?v=2026-09-24-archive"></script>
 <script src="/builders/collab.js?v=2026-09-24-archive"></script>

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

@@ -55,6 +55,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></script>
 <!-- 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/hall-kit.js"></script>

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

@@ -221,3 +221,103 @@ select:disabled, input[type="text"]:disabled, input[type="search"]:disabled, tex
   cursor: not-allowed;
 }
 select option { background: var(--bg-card); color: var(--ink); }
+
+/* ---------- the danger button ----------
+   The one fill a confirm spends on an act that cannot be taken back (delete a
+   rank, end every session). The status red, with the card's own ground as its
+   text: --danger is measured at 4.5:1 against --bg-card in both modes
+   (tests/hall_tokens.mjs), so the pair holds whichever way round it is read. */
+.btn--danger {
+  color: var(--bg-card);
+  background: var(--danger);
+  border-color: transparent;
+}
+.btn--danger:hover:not(:disabled) {
+  color: var(--bg-card);
+  background: color-mix(in srgb, var(--danger) 86%, var(--ink));
+  text-decoration: none;
+}
+
+/* ---------- the dialog (task 1005085) ----------
+   THE HALL'S ONE DIALOG. hall-dialog.js builds it (OTBDialog.open / .confirm)
+   or binds a page's own <dialog class="hall-dialog"> (OTBDialog.bind). It is
+   DESIGN.md's panel lifted over the page: bg-card, one hairline, the panel
+   corner, and the one shadow the hall spends, on an element that floats over
+   the scrim. A native dialog opens with showModal(), so it sits in the top
+   layer; the z-index is the ladder's modal step for any reader that does not.
+   .hall-scrim is the same layer for a div overlay (the approval queue's and the
+   studio's glass): fixed over the page, centred, darkened by --scrim. */
+.hall-dialog {
+  z-index: var(--ds-z-modal);
+  box-sizing: border-box;
+  width: min(480px, calc(100vw - 2 * var(--ds-space-sm)));
+  max-height: calc(100dvh - 2 * var(--ds-space-md));
+  overflow-y: auto;
+  margin: auto;
+  padding: var(--ds-space-md);
+  color: var(--ink);
+  background: var(--bg-card);
+  border: var(--line) solid var(--rule);
+  border-radius: var(--ds-radius-panel);
+  box-shadow: var(--ds-shadow-pop);
+}
+.hall-dialog--wide { width: min(720px, calc(100vw - 2 * var(--ds-space-sm))); }
+.hall-dialog::backdrop { background: var(--scrim); }
+.hall-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: var(--ds-space-md);
+  background: var(--scrim);
+}
+.hall-scrim[hidden] { display: none; }
+.hall-scrim > .hall-dialog { max-height: 100%; }
+.hall-dialog__head {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ds-space-xs);
+  margin: 0 0 var(--ds-space-xs);
+}
+.hall-dialog__title {
+  flex: 1;
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: var(--ds-text-3xl);
+  font-weight: 500;
+  line-height: 1.25;
+  color: var(--ink);
+}
+.hall-dialog__x {
+  flex: none;
+  min-width: 32px;
+  min-height: 32px;
+  margin: -4px -6px 0 0;
+  padding: 0;
+  font: inherit;
+  font-size: var(--ds-text-4xl);
+  line-height: 1;
+  color: var(--ink-soft);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-pill);
+  cursor: pointer;
+}
+.hall-dialog__x:hover { color: var(--ink); }
+.hall-dialog__body p {
+  margin: 0 0 var(--ds-space-xs);
+  font-size: var(--ds-text-md);
+  line-height: 1.5;
+  color: var(--ink-soft);
+}
+.hall-dialog__body p:last-child { margin-bottom: 0; }
+.hall-dialog__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--ds-space-xs);
+  margin-top: var(--ds-space-md);
+}

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

@@ -2,9 +2,9 @@
    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.
+   the three dialogs are the hall's one dialog (controls.css .hall-dialog,
+   task 1005085). What is left here is what only this page has: the quoted
+   string as evidence, the reason as prose, the places a duplicate lives.
 
    px and tokens throughout, and state is COLOUR — the pill's verification
    vocabulary — never opacity. Opacity dims the panel behind the text as well
@@ -67,16 +67,12 @@
 .cd-find .filter input[type="search"] { width: 100%; }
 .cd-search-count { margin: 0 0 14px; }
 
-/* The three dialogs are the family modal on a native <dialog>: bg-card, one rule
-   hairline, no shadow. The backdrop is a SCRIM — it has to darken what is behind
-   it in EITHER mode, so it can take no ground token and no mix of --ink (which is
-   white on black). That is why it was a literal; task 1003495 gave the value a
-   home in style.css as --scrim instead, so the sheet keeps none. */
-.cd-dialog { width: min(480px, calc(100vw - 32px)); color: var(--ink); }
-.cd-dialog::backdrop { background: var(--scrim); }
+/* The three dialogs are the hall's one dialog (controls.css .hall-dialog: the
+   panel, the scrim, the shadow, task 1005085). What stays is the form inside. */
+.cd-dialog .cd-dialog__target { margin: var(--ds-space-xs) 0 0; font-size: var(--ds-text-sm-plus); line-height: 1.5; color: var(--ink-soft); }
 .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); }
+.cd-dialog .cd-dialog__err { min-height: 18px; margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--danger); }
 
 /* The placeholder rule, shown only for a sentence that has holes in it (task
    1003114 / R03). It is a CONSTRAINT, not a footnote — losing a hole is the one

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

@@ -77,10 +77,10 @@
 <!-- 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. 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">
+     Escape) dressed as the hall's one dialog (controls.css .hall-dialog, task 1005085). -->
+<dialog id="cd-dialog" class="hall-dialog cd-dialog" aria-labelledby="cd-dialog-h">
   <form method="dialog" id="cd-form">
-    <h3 class="scroll__h" id="cd-dialog-h">Flag this copy</h3>
+    <h3 class="hall-dialog__title" id="cd-dialog-h">Flag this copy</h3>
     <p class="cd-dialog__target" id="cd-dialog-target"></p>
     <div class="ov-form">
       <div class="ov-field ov-field--wide">
@@ -103,17 +103,17 @@
       <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="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 class="hall-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>
   </form>
 </dialog>
 
 <!-- Closing a flag asks for a note for the same reason opening one does. -->
-<dialog id="cd-close-dialog" class="ov-modal cd-dialog">
+<dialog id="cd-close-dialog" class="hall-dialog cd-dialog" aria-labelledby="cd-close-h">
   <form method="dialog" id="cd-close-form">
-    <h3 class="scroll__h">Close this flag</h3>
+    <h3 class="hall-dialog__title" id="cd-close-h">Close this flag</h3>
     <p class="cd-dialog__target" id="cd-close-target"></p>
     <div class="ov-form">
       <div class="ov-field ov-field--wide">
@@ -135,9 +135,9 @@
       <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="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 class="hall-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>
   </form>
 </dialog>
@@ -147,9 +147,9 @@
      wrong, a proposal says this is what it should say instead, and one of them
      creates work on the board. The textarea opens PREFILLED with the current
      wording — an artist edits a sentence, they do not retype it from memory. -->
-<dialog id="cd-propose-dialog" class="ov-modal cd-dialog">
+<dialog id="cd-propose-dialog" class="hall-dialog cd-dialog" aria-labelledby="cd-propose-h">
   <form method="dialog" id="cd-propose-form">
-    <h3 class="scroll__h">Propose new wording</h3>
+    <h3 class="hall-dialog__title" id="cd-propose-h">Propose new wording</h3>
     <p class="cd-dialog__target" id="cd-propose-target"></p>
     <div class="ov-form">
       <div class="ov-field ov-field--wide">
@@ -168,9 +168,9 @@
       <p class="ov-form__why">Nothing changes yet. This files a task carrying your wording; whoever claims it lands the diff, and it ships graded like every other change.</p>
     </div>
     <p class="cd-dialog__err" id="cd-propose-err" role="alert"></p>
-    <div class="ov-modal__actions">
-      <button type="button" class="btn-ghost" id="cd-propose-cancel">Cancel</button>
-      <button type="button" class="btn-accent" id="cd-propose-submit">File the change</button>
+    <div class="hall-dialog__actions">
+      <button type="button" class="btn btn--ghost" id="cd-propose-cancel">Cancel</button>
+      <button type="button" class="btn" id="cd-propose-submit">File the change</button>
     </div>
   </form>
 </dialog>
@@ -181,6 +181,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/hall-kit.js"></script>
 <script src="/builders/copy-desk.js?v=2026-09-01-redesign"></script>

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

@@ -354,6 +354,10 @@
   // the composer
   // ---------------------------------------------------------------------------
 
+  // The three dialogs are the hall's one dialog (hall-dialog.js, task 1005085):
+  // the shared Escape, focus trap, scrim click and focus return.
+  const dialog = (sel) => window.OTBDialog.bind($(sel));
+
   function openComposer(t) {
     target = t;
     $('#cd-dialog-target').innerHTML = t.string_id
@@ -361,7 +365,7 @@
       : `${pill('', 'whole surface')} <span class="ov-key ov-key--faint">${escapeHtml(t.surface)}</span>`;
     $('#cd-reason').value = '';
     $('#cd-dialog-err').textContent = '';
-    $('#cd-dialog').showModal();
+    dialog('#cd-dialog').open();
   }
 
   async function submitFlag() {
@@ -387,7 +391,7 @@
       $('#cd-dialog-err').textContent = d.what_this_means || d.why || err.message || 'Could not file the flag.';
       return;
     }
-    $('#cd-dialog').close();
+    dialog('#cd-dialog').close();
     toast('Flagged. It is in the queue.');
     await loadQueue();
     if ($('#cd-search').value.trim()) await runSearch();
@@ -423,7 +427,7 @@
         + `Keep all ${n} — move them if the new sentence needs them elsewhere, but do not remove one: `
         + 'the values come from the code, and dropping one is a code change.';
     }
-    $('#cd-propose-dialog').showModal();
+    dialog('#cd-propose-dialog').open();
   }
 
   async function submitProposal() {
@@ -463,7 +467,7 @@
       err.textContent = d.what_this_means || d.why || e.message || 'Could not file the change.';
       return;
     }
-    $('#cd-propose-dialog').close();
+    dialog('#cd-propose-dialog').close();
     const task = (res.data && res.data.task) || {};
     toast(res.data && res.data.created === false
       ? `Already filed — task #${task.id} carries this exact change.`
@@ -486,7 +490,7 @@
     $('#cd-close-note').value = '';
     $('#cd-close-task').value = '';
     $('#cd-close-err').textContent = '';
-    $('#cd-close-dialog').showModal();
+    dialog('#cd-close-dialog').open();
   }
 
   async function submitClose() {
@@ -506,7 +510,7 @@
       $('#cd-close-err').textContent = d.what_this_means || d.why || err.message || 'Could not close the flag.';
       return;
     }
-    $('#cd-close-dialog').close();
+    dialog('#cd-close-dialog').close();
     toast('Closed.');
     await loadQueue();
   }
@@ -560,11 +564,11 @@
     if (closeBtn) openCloser(closeBtn.dataset.flag);
   });
 
-  $('#cd-cancel').addEventListener('click', () => $('#cd-dialog').close());
+  $('#cd-cancel').addEventListener('click', () => dialog('#cd-dialog').close());
   $('#cd-submit').addEventListener('click', submitFlag);
-  $('#cd-propose-cancel').addEventListener('click', () => $('#cd-propose-dialog').close());
+  $('#cd-propose-cancel').addEventListener('click', () => dialog('#cd-propose-dialog').close());
   $('#cd-propose-submit').addEventListener('click', submitProposal);
-  $('#cd-close-cancel').addEventListener('click', () => $('#cd-close-dialog').close());
+  $('#cd-close-cancel').addEventListener('click', () => dialog('#cd-close-dialog').close());
   $('#cd-close-submit').addEventListener('click', submitClose);
 
   (async () => {

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

@@ -82,6 +82,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/hall-kit.js"></script>
 <!-- the shared ask card the move is drawn with (task 1004829) -->

package/modules/hall-ui/public/goal-inbox.js

@@ -583,10 +583,10 @@
       // The slices still render into their divs below (kept off-screen in
       // #attention-slices), and refresh() rebuilds the cards from what they hold.
       '<div class="attn-cards" id="attention-cards"></div>' +
-      '<dialog class="attn-dialog" id="attention-dialog" aria-labelledby="attention-dialog-h">' +
-        '<div class="attn-dialog__head"><h3 class="attn-dialog__h" id="attention-dialog-h"></h3>' +
-        '<button type="button" class="attn-dialog__x" id="attention-dialog-x" aria-label="Close">×</button></div>' +
-        '<div class="attn-dialog__body" id="attention-dialog-body"></div>' +
+      '<dialog class="hall-dialog hall-dialog--wide" id="attention-dialog" aria-labelledby="attention-dialog-h">' +
+        '<div class="hall-dialog__head"><h3 class="hall-dialog__title" id="attention-dialog-h"></h3>' +
+        '<button type="button" class="hall-dialog__x" id="attention-dialog-x" data-dialog-close aria-label="Close">×</button></div>' +
+        '<div class="hall-dialog__body attn-dialog__body" id="attention-dialog-body"></div>' +
       '</dialog>' +
       '<div id="attention-slices" hidden>' +
       // task 1003464: the system's own notices — rebase owed, an input the
@@ -692,36 +692,51 @@
     cards.innerHTML = html.join('');
   }
 
-  function openCard(id) {
-    const dlg = host.querySelector('#attention-dialog');
+  // The window is the hall's one dialog (hall-dialog.js, task 1005085): the
+  // shared panel, scrim, Escape, focus trap and focus return. Closing it by any
+  // road (the mark, Escape, the scrim) moves the slice back and redraws the cards.
+  let lastCard = null;
+  function windowHandle() {
+    const dlg = host && host.querySelector('#attention-dialog');
+    if (!dlg) return null;
+    return window.OTBDialog.bind(dlg, {
+      onClose: restoreSlice,
+      // the cards were redrawn, so the opener is gone: focus its successor
+      returnFocus: (op) => (op && op.isConnected ? op
+        : (lastCard && host.querySelector(`[data-attn-open="${CSS.escape(lastCard)}"]`)) || host.querySelector('.attn-card')),
+    });
+  }
+
+  function openCard(id, trigger) {
+    const h = windowHandle();
     const div = host.querySelector(`#attention-slices > #${CSS.escape(id)}`);
-    if (!dlg || !div) return;
+    if (!h || !div) return;
     host.querySelector('#attention-dialog-h').textContent = sliceFacts(div).title;
     host.querySelector('#attention-dialog-body').appendChild(div);
     openSlice = div;
-    if (typeof dlg.showModal === 'function') dlg.showModal(); else dlg.setAttribute('open', '');
+    lastCard = id;
+    h.open(trigger);
   }
 
-  function closeCard() {
-    const dlg = host && host.querySelector('#attention-dialog');
+  function restoreSlice() {
     if (openSlice) {
       host.querySelector('#attention-slices').appendChild(openSlice);
       openSlice = null;
     }
-    if (dlg && dlg.open && typeof dlg.close === 'function') dlg.close();
     renderCards();
   }
 
+  function closeCard() {
+    const h = windowHandle();
+    if (h && h.isOpen()) h.close();
+    else restoreSlice();
+  }
+
   function wireCards() {
     host.addEventListener('click', (e) => {
       const card = e.target.closest('[data-attn-open]');
-      if (card) { openCard(card.getAttribute('data-attn-open')); return; }
-      if (e.target.closest('#attention-dialog-x')) { closeCard(); return; }
-      // a click on the backdrop lands on the <dialog> itself
-      if (e.target.id === 'attention-dialog') closeCard();
+      if (card) openCard(card.getAttribute('data-attn-open'), card);
     });
-    const dlg = host.querySelector('#attention-dialog');
-    if (dlg) dlg.addEventListener('close', () => { if (openSlice) closeCard(); });
   }
 
   // The card's shared visibility contract: any slice renderer calls refresh()

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

@@ -141,6 +141,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></script>
 <script src="/builders/palette.js" defer></script>
 
 <script src="/builders/idea-objects.js?v=2026-09-27-split"></script>

package/modules/hall-ui/public/goals-page.js

@@ -540,8 +540,14 @@
   async function doGoalRelease(claimId, taskId, btn) {
     const key = `release:${claimId}`;
     if (pendingClaims.has(key)) return;
-    if (!window.confirm(`Release your claim on #${taskId}? It returns to the queue and no ${curLabel()} are earned.`)) return;
+    // Held while the confirm is open too, so a second click cannot stack a second dialog.
     pendingClaims.add(key);
+    const yes = await window.OTBDialog.confirm({
+      title: `Release your claim on #${taskId}?`,
+      body: `It returns to the queue and no ${curLabel()} are earned.`,
+      confirmLabel: 'Release', danger: true, trigger: btn,
+    });
+    if (!yes) { pendingClaims.delete(key); return; }
     if (btn) { btn.disabled = true; btn.textContent = 'Releasing…'; }
     try {
       const out = await claimAction.release(claimId, taskId);

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

@@ -254,6 +254,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <!-- task 1004727: the ONE karma vote control every task/idea list renders -->

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

@@ -158,6 +158,7 @@
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers"></script>
 <script src="/builders/craft-mode.js?v=2026-11-05-goals"></script>
 <script src="/builders/shell.js?v=2026-11-07-brand-mark"></script>
+<script src="/builders/hall-dialog.js"></script>
 <!-- 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/hall-kit.js"></script>