@bongos/core 1.19.1081 → 1.20.2

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

@@ -50,6 +50,9 @@ body[data-page="tweak-editor"] .tw-stage {
   --tw-paper-faint: #65656a;
   --tw-shared: #4a5bb8;
   --tw-engineer: #a3481a;
+  --tw-ok: #1f7a44;
+  --tw-ok-wash: rgba(31, 122, 68, .11);
+  --tw-on-ok: #ffffff;
   --tw-line-hover: rgba(23, 24, 26, .035);
   --tw-line-focus: rgba(251, 149, 105, .08);
   --tw-face: var(--font-body, Manrope, "Segoe UI", system-ui, sans-serif);
@@ -228,17 +231,82 @@ html:not([data-fullscreen="on"]) .tw-bar { top: calc(var(--topbar-h, 56px) + 12p
   box-shadow: 0 30px 80px var(--tw-drop);
   padding: 64px 88px 72px 88px;
 }
-.tw-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 34px; }
-.tw-paper h1 {
+/* "open the page" (task 1004386): a menu on hover, focus or tap, and the split
+   view's frame pinned under the words. The menu's padding-top bridges the gap to
+   the button so the pointer never leaves the hover area on its way down. */
+.tw-openwrap { position: relative; }
+.tw-openwrap[hidden] { display: none; }
+.tw-openmenu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 5;
+  min-width: 190px;
+  padding-top: 8px;
+  display: none;
+}
+/* A split button: the main half repeats the last choice, the arrow opens the
+   menu. Click, keyboard and touch; hover alone opens nothing. */
+.tw-openwrap { display: inline-flex; }
+.tw-openwrap.is-open .tw-openmenu { display: block; }
+.tw-stage .tw-btn--main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.tw-stage .tw-btn--more { min-width: 32px; padding-left: 8px; padding-right: 10px; margin-left: 1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
+.tw-stage .tw-openmenu__item {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
   margin: 0;
-  font-family: var(--tw-face);
-  font-size: 40px;
-  font-weight: 300;
-  line-height: 1.2;
-  letter-spacing: -0.03em;
-  color: var(--tw-paper-ink);
+  padding: 10px 16px;
+  border: 1px solid var(--tw-glass-edge);
+  border-radius: 12px;
+  background: var(--tw-bar-back);
+  color: var(--tw-ink);
+  font: inherit;
+  font-size: 14px;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+.tw-stage .tw-openmenu__item + .tw-openmenu__item { margin-top: 4px; }
+.tw-stage .tw-openmenu__item:hover { background: var(--tw-glass-lift); color: var(--tw-ink); }
+.tw-stage .tw-openmenu__item:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: 2px; }
+.tw-frame {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 4;
+  display: flex;
+  flex-direction: column;
+  height: calc(var(--tw-split, .5) * 100vh);
+  background: var(--tw-room);
+  border-top: 1px solid var(--tw-glass-edge);
+  box-shadow: 0 -20px 60px var(--tw-drop);
 }
-.tw-intro { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tw-paper-soft); }
+.tw-frame[hidden] { display: none; }
+.tw-frame__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; }
+.tw-frame__name { font-size: 13px; color: var(--tw-ink-faint); }
+.tw-frame__view { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: #ffffff; }
+/* While dragging, the frame must not swallow the pointer. */
+.tw-frame.is-dragging .tw-frame__view { pointer-events: none; }
+.tw-divider {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  margin-top: -12px;
+  cursor: row-resize;
+  touch-action: none;
+}
+.tw-divider__grip { width: 56px; height: 5px; border-radius: 3px; background: var(--tw-glass-rim); }
+.tw-divider:hover .tw-divider__grip,
+.tw-frame.is-dragging .tw-divider__grip { background: var(--tw-accent); }
+.tw-divider:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: -2px; }
+/* Split view: the words scroll above, the frame holds the bottom share. */
+.tw-stage.tw-split { padding-bottom: calc(var(--tw-split, .5) * 100vh); }
+.tw-stage.tw-split .tw-line { scroll-margin: 96px 0 calc(var(--tw-split, .5) * 100vh + 16px); }
+html[data-fullscreen="on"] .tw-frame { left: 0; }
 .tw-section { margin-bottom: 26px; }
 .tw-paper h2 {
   margin: 0 0 6px 0;
@@ -250,7 +318,46 @@ html:not([data-fullscreen="on"]) .tw-bar { top: calc(var(--topbar-h, 56px) + 12p
   text-transform: uppercase;
   color: var(--tw-paper-faint);
 }
-.tw-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 18px; align-items: start; }
+.tw-row { display: grid; grid-template-columns: minmax(0, 1fr) 68px 150px; gap: 10px 14px; align-items: start; }
+/* A checked line (task 1004385): a light green wash on the row and a filled
+   green check. The check is the artist's own place-keeper; it is never sent. */
+.tw-row--checked .tw-line { background: var(--tw-ok-wash); }
+.tw-row--checked .tw-line:focus,
+.tw-row--checked .tw-line:focus-visible { background: var(--tw-ok-wash); }
+.tw-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-top: 6px; }
+.tw-ctl[hidden] { display: none; }
+.tw-restore,
+.tw-check {
+  box-sizing: border-box;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--tw-paper-faint);
+  border-radius: 50%;
+  background: transparent;
+  color: var(--tw-paper-soft);
+  font: inherit;
+  font-size: 15px;
+  line-height: 1;
+  cursor: pointer;
+}
+.tw-restore[hidden] { display: none; }
+.tw-restore:hover { color: var(--tw-paper-ink); border-color: var(--tw-paper-ink); }
+.tw-check:hover { color: var(--tw-ok); border-color: var(--tw-ok); }
+.tw-check[aria-pressed="true"] { background: var(--tw-ok); border-color: var(--tw-ok); color: var(--tw-on-ok); }
+.tw-restore:focus-visible,
+.tw-check:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: 2px; }
+.tw-hint {
+  margin: 0 0 24px 0;
+  padding: 10px 14px;
+  border-radius: 8px;
+  background: var(--tw-ok-wash);
+  box-shadow: inset 3px 0 0 var(--tw-ok);
+  font-size: 13.5px;
+  line-height: 1.5;
+  color: var(--tw-paper-ink);
+}
+.tw-hint[hidden] { display: none; }
 .tw-line {
   display: block;
   box-sizing: border-box;
@@ -275,6 +382,26 @@ html:not([data-fullscreen="on"]) .tw-bar { top: calc(var(--topbar-h, 56px) + 12p
 .tw-line--changed { box-shadow: inset 3px 0 0 var(--tw-accent); }
 .tw-line[readonly] { cursor: default; }
 .tw-line[readonly]:hover { background: transparent; }
+/* A line holding a brand hole ({{productName}}) is a typed-in box instead of a
+   textarea, so the hole can be a chip the artist types around and never into
+   (task 1004381): the words keep every space the artist types (pre-wrap). */
+.tw-line--holes { min-height: 1.6em; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
+.tw-line--holes[contenteditable="false"] { cursor: default; }
+.tw-line--holes[contenteditable="false"]:hover { background: transparent; }
+.tw-hole {
+  display: inline-block;
+  padding: 0 6px;
+  border-radius: 5px;
+  border: 1px solid var(--tw-rule-soft, rgba(23, 24, 26, .14));
+  background: var(--tw-line-hover);
+  color: var(--tw-paper-soft);
+  font-size: .92em;
+  line-height: 1.4;
+  white-space: nowrap;
+  cursor: default;
+  user-select: all;
+}
+.tw-note .tw-hole { font-size: 1em; padding: 0 4px; }
 .tw-note { padding-top: 9px; font-size: 12px; line-height: 1.4; color: var(--tw-paper-faint); overflow-wrap: anywhere; }
 .tw-note--shared { color: var(--tw-shared); }
 .tw-note--engineer { color: var(--tw-engineer); }
@@ -442,8 +569,12 @@ html:not([data-fullscreen="on"]) .tw-bar { top: calc(var(--topbar-h, 56px) + 12p
   .tw-actions { flex: 1 0 100%; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
   html[data-fullscreen="on"] .tw-actions { margin-right: -44px; }
   .tw-paper { width: calc(100% - 24px); margin-top: 16px; padding: 36px 20px 44px; }
-  .tw-paper h1 { font-size: 32px; }
+  /* The two-row bar is tall here, so the live page never takes more than half. */
+  .tw-frame { height: min(calc(var(--tw-split, .5) * 100vh), 50vh); }
+  .tw-stage.tw-split { padding-bottom: min(calc(var(--tw-split, .5) * 100vh), 50vh); }
   .tw-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
+  .tw-ctl { justify-content: flex-start; padding: 4px 0 6px; }
+  .tw-restore, .tw-check { width: 36px; height: 36px; }
   .tw-note { padding: 0 0 8px 0; }
   .tw-note:empty { display: none; }
   .tw-done__panel { padding: 28px 24px; border-radius: 24px; }

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

@@ -11,7 +11,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/tweak-editor.css?v=2026-09-28-tw23">
+  <link rel="stylesheet" href="/builders/tweak-editor.css?v=2026-09-29-tw26-aqfix">
 </head>
 <!-- THE TWEAK EDITOR (task 1004321 / BV2.TW10, goal 1000095; ADR 0341 D4 and
      D11). docs/design/mocks/tweak-mode/Editor.dc.html is the master design:
@@ -53,7 +53,13 @@
           <span class="tw-name"><span id="tw-name">Tweak a page</span> <span class="tw-surface" id="tw-surface"></span></span>
           <span class="tw-counter" id="tw-counter" aria-live="polite"></span>
           <div class="tw-actions">
-            <a class="tw-btn" id="tw-open" href="/builders/studio" target="_blank" rel="noopener">open the page ↗</a>
+            <div class="tw-openwrap" id="tw-openwrap">
+              <button class="tw-btn tw-btn--main" id="tw-open" type="button">open the page ↗</button><button class="tw-btn tw-btn--more" id="tw-open-more" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="tw-open-menu" aria-label="More ways to open the page">▾</button>
+              <div class="tw-openmenu" id="tw-open-menu" role="menu">
+                <a class="tw-openmenu__item" id="tw-open-tab" role="menuitem" href="/builders/studio" target="_blank" rel="noopener">open in new tab</a>
+                <button class="tw-openmenu__item" id="tw-open-split" type="button" role="menuitem">open in split view</button>
+              </div>
+            </div>
             <button class="tw-btn" id="tw-download" type="button" disabled>download .docx</button>
             <button class="tw-btn" id="tw-upload" type="button" disabled>upload .docx</button>
             <input id="tw-file" type="file" accept=".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document" hidden>
@@ -62,16 +68,25 @@
         </div>
 
         <article class="tw-paper" id="tw-paper" aria-labelledby="tw-title">
-          <div class="tw-head">
-            <h1 id="tw-title">Tweak a page</h1>
-            <p class="tw-intro">Every word on the page, in the order it shows them. Type over anything, or download it, work in Word, and upload it back.</p>
-          </div>
+          <h1 class="tw-sr" id="tw-title">Tweak a page</h1>
+          <p class="tw-hint" id="tw-hint" hidden></p>
           <div class="tw-notice" id="tw-notice" role="status" hidden></div>
           <div id="tw-doc">
             <p class="tw-loading">Reading the page…</p>
           </div>
         </article>
 
+        <!-- Split view: the live page below the words, both on screen at once.
+             Opened from "open the page"; the frame loads only when it opens. -->
+        <section class="tw-frame" id="tw-frame" aria-label="The live page" hidden>
+          <div class="tw-divider" id="tw-divider" role="separator" aria-orientation="horizontal" aria-label="Resize the split: drag, or use the up and down arrows" aria-valuemin="20" aria-valuemax="80" aria-valuenow="50" tabindex="0"><span class="tw-divider__grip"></span></div>
+          <div class="tw-frame__bar">
+            <span class="tw-frame__name">the live page</span>
+            <button class="tw-btn" id="tw-split-close" type="button">close split view</button>
+          </div>
+          <iframe class="tw-frame__view" id="tw-frame-view" title="The live page" referrerpolicy="no-referrer"></iframe>
+        </section>
+
         <!-- Submit: "<page> is in", then next up. Hidden until the submit lands. -->
         <div class="tw-done" id="tw-done" hidden>
           <div class="tw-done__panel" role="dialog" aria-modal="true" aria-labelledby="tw-done-title">
@@ -125,10 +140,11 @@
 
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
-<script src="/builders/shell.js?v=2026-09-28-archive"></script>
+<script src="/builders/shell.js?v=2026-09-29-renderdeploy"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-23-contrib"></script>
-<script src="/builders/tweak-editor-lib.js?v=2026-09-28-tw23"></script>
-<script src="/builders/tweak-editor.js?v=2026-09-28-tw23"></script>
+<script src="/builders/brand-holes.js?v=2026-09-29-aqfix"></script>
+<script src="/builders/tweak-editor-lib.js?v=2026-09-29-tw26"></script>
+<script src="/builders/tweak-editor.js?v=2026-09-29-tw26-aqfix"></script>
 </body>
 </html>

package/modules/hall-ui/public/tweak-editor.js

@@ -41,6 +41,12 @@
     pageId: null,
     ed: null,          // the editor read
     values: {},        // key -> the words in the box
+    checked: new Set(), // keys the artist has checked (browser only)
+    live: null,        // the page's live address
+    split: false,      // the split view is open
+    openAs: 'tab',     // what "open the page" does: the last choice
+    splitSize: 0.5,    // the live page's share of the window
+    drag: false,       // the divider is being dragged
     writable: false,   // the caller holds the round
     save: 'saved',     // saved | saving | failed
     timer: null,
@@ -58,6 +64,105 @@
 
   function lineById(key) { return st.ed.reading.lines.find((l) => l.key === key); }
 
+  function paintHint() {
+    const h = $('tw-hint');
+    if (!st.ed || !st.writable || !st.ed.reading.lines.length) { h.hidden = true; return; }
+    h.textContent = lib.hintText(lib.confirmedCount(st.ed.reading.lines, st.checked), st.ed.reading.lines.length);
+    h.hidden = false;
+  }
+
+  function storeKey() { return lib.confirmStoreKey(st.pageId, st.ed.reading.reading_hash); }
+  function loadChecked() {
+    let raw = null;
+    try { raw = window.localStorage.getItem(storeKey()); } catch (_) { raw = null; }
+    return lib.parseConfirmed(raw, st.ed.reading.lines);
+  }
+  function saveChecked() {
+    try { window.localStorage.setItem(storeKey(), JSON.stringify([...st.checked])); } catch (_) { /* private mode: the checks last this visit */ }
+  }
+
+  function setChecked(key, on) {
+    if (on) st.checked.add(key); else st.checked.delete(key);
+    saveChecked();
+    paintRow(key);
+    paintHint();
+  }
+
+  // Put the page's own words back in the box and take the check off.
+  function restore(key) {
+    const l = lineById(key);
+    const ta = $(`tw-${key}`);
+    if (!l || !ta || !st.writable) return;
+    st.values[key] = l.text;
+    if (ta.classList.contains('tw-line--holes')) ta.innerHTML = boxHtml(l.text);
+    else { ta.value = l.text; fit(ta); }
+    st.checked.delete(key);
+    saveChecked();
+    paintRow(key);
+    paintCounter();
+    paintHint();
+    schedule();
+  }
+
+  // Shift+Enter: check this line and land in the next one.
+  function checkAndAdvance(key) {
+    setChecked(key, true);
+    const next = lib.nextLineKey(st.ed.reading.lines, key);
+    const ta = next && $(`tw-${next}`);
+    if (ta) {
+      ta.focus();
+      ta.scrollIntoView({ block: st.split ? 'nearest' : 'center', behavior: 'smooth' });
+    }
+  }
+
+  // The split view: the live page under the words. The frame loads when it opens.
+  function remember(key, value) {
+    try { window.localStorage.setItem(key, value); } catch (_) { /* private mode: this visit only */ }
+  }
+  function recall(key) {
+    try { return window.localStorage.getItem(key); } catch (_) { return null; }
+  }
+  const OPEN_KEY = 'hall-tweak-open-as';
+  const SPLIT_KEY = 'hall-tweak-split';
+  const SIZE_KEY = 'hall-tweak-split-size';
+
+  function setSplit(on) {
+    if (on && !st.live) return;
+    st.split = on;
+    remember(SPLIT_KEY, on ? 'on' : 'off');
+    $('tw-frame').hidden = !on;
+    $('tw-frame-view').src = on ? st.live : 'about:blank';
+    $('tw-open-split').textContent = on ? 'close split view' : 'open in split view';
+    document.querySelector('main.tw-stage').classList.toggle('tw-split', on);
+    setMenu(false);
+  }
+  function setMenu(open) {
+    $('tw-openwrap').classList.toggle('is-open', open);
+    $('tw-open-more').setAttribute('aria-expanded', String(open));
+  }
+  function setOpenAs(choice) {
+    st.openAs = lib.openChoice(choice);
+    remember(OPEN_KEY, st.openAs);
+    $('tw-open').textContent = lib.OPEN_WORDS[st.openAs];
+  }
+  function setSize(f) {
+    st.splitSize = lib.clampSplit(f);
+    const stage = document.querySelector('main.tw-stage');
+    if (stage && stage.style && stage.style.setProperty) stage.style.setProperty('--tw-split', String(st.splitSize));
+    $('tw-divider').setAttribute('aria-valuenow', String(Math.round(st.splitSize * 100)));
+  }
+  // Split view: in place when the page can be framed from here, otherwise its
+  // own window docked to the bottom half (the site refuses a frame from another host).
+  function openSplit() {
+    if (!st.live) return;
+    if (lib.canFrame(st.live, window.location)) setSplit(!st.split);
+    else { window.open(st.live, 'tw-live-page', lib.splitWindowFeatures(window.screen)); setMenu(false); }
+  }
+  function openTab() {
+    if (st.live) window.open(st.live, '_blank', 'noopener');
+    setMenu(false);
+  }
+
   function paintCounter() {
     if (!st.ed) { $('tw-counter').textContent = ''; return; }
     const changed = lib.changedCount(st.ed.reading.lines, st.values);
@@ -69,14 +174,65 @@
     return n ? { cls: `tw-note tw-note--${n.kind}`, text: n.text } : { cls: 'tw-note', text: '' };
   }
 
+  // BRAND HOLES (task 1004381). A line whose words hold a {{token}} is a typed-in
+  // box, not a textarea: the token is a chip showing the name it stands for
+  // (window.__BRANDING__), which the artist types around and cannot type over,
+  // delete, or lose the spaces beside. The stored value keeps the {{token}}.
+  const H = window.OTBBrandHoles;
+  const holed = (l) => !!(H && H.hasHoles(l.text));
+  const wordsHtml = (text) => (H ? H.holesHtml(text, { cls: 'tw-hole' }) : escapeHtml(text));
+  const boxHtml = (v) => H.holesHtml(v, { cls: 'tw-hole', inBox: true });
+
+  function lineBoxHtml(id, l, v) {
+    const changed = lib.isChanged(l, v) ? ' tw-line--changed' : '';
+    if (holed(l)) {
+      return `<div id="${id}" class="tw-line tw-line--holes${changed}" role="textbox" aria-multiline="true" aria-labelledby="${id}-label" data-key="${escapeHtml(l.key)}" contenteditable="${st.writable ? 'true' : 'false'}" spellcheck="true">${boxHtml(v)}</div>`;
+    }
+    return `<textarea id="${id}" class="tw-line${changed}" rows="${lib.rowsFor(v)}" data-key="${escapeHtml(l.key)}"${st.writable ? '' : ' readonly'} spellcheck="true">${escapeHtml(v)}</textarea>`;
+  }
+
+  // Put the caret at the end of a chip box (after a refused edit is undone).
+  function caretToEnd(el) {
+    try {
+      const r = document.createRange();
+      r.selectNodeContents(el);
+      r.collapse(false);
+      const s = window.getSelection();
+      s.removeAllRanges();
+      s.addRange(r);
+    } catch (_) { /* no selection API: the words are right, the caret is not */ }
+  }
+
+  // What a chip box holds now, or null when the edit removed or added a hole
+  // (the box is then put back as it was: a hole is not the artist's to change).
+  function readHoleBox(el, line) {
+    const v = H.serializeHoles(el.childNodes);
+    if (H.sameHoles(line.text, v)) return v;
+    el.innerHTML = boxHtml(st.values[line.key]);
+    caretToEnd(el);
+    return null;
+  }
+
+  // The check and the restore button beside a line. A read-only page has
+  // neither: there is nothing to check off or put back.
+  function controlsHtml(l, section) {
+    if (!st.writable) return '<span class="tw-ctl"></span>';
+    const on = st.checked.has(l.key);
+    return '<span class="tw-ctl">'
+      + `<button class="tw-restore" type="button" data-restore="${escapeHtml(l.key)}" aria-label="Restore the page's words for this ${escapeHtml(section)} line" title="Restore the original words"${lib.isChanged(l, st.values[l.key]) ? '' : ' hidden'}>↺</button>`
+      + `<button class="tw-check" type="button" data-check="${escapeHtml(l.key)}" aria-pressed="${on}" aria-label="Check this ${escapeHtml(section)} line" title="Check this line (Shift + Enter)">✓</button>`
+      + '</span>';
+  }
+
   function rowHtml(section, l) {
     const v = st.values[l.key];
     const n = noteHtml(l);
     const id = `tw-${l.key}`;
-    return `<div class="tw-row" data-key="${escapeHtml(l.key)}">`
-      + `<label class="tw-sr" for="${id}">${escapeHtml(section)} line</label>`
-      + `<textarea id="${id}" class="tw-line${lib.isChanged(l, v) ? ' tw-line--changed' : ''}" rows="${lib.rowsFor(v)}" data-key="${escapeHtml(l.key)}"${st.writable ? '' : ' readonly'} spellcheck="true">${escapeHtml(v)}</textarea>`
-      + `<span class="${n.cls}" id="${id}-note">${escapeHtml(n.text)}</span>`
+    return `<div class="tw-row${st.checked.has(l.key) ? ' tw-row--checked' : ''}" data-key="${escapeHtml(l.key)}">`
+      + `<label class="tw-sr" id="${id}-label" for="${id}">${escapeHtml(section)} line</label>`
+      + lineBoxHtml(id, l, v)
+      + controlsHtml(l, section)
+      + `<span class="${n.cls}" id="${id}-note">${wordsHtml(n.text)}</span>`
       + '</div>';
   }
 
@@ -105,10 +261,18 @@
     const ta = $(`tw-${key}`);
     if (!l || !ta) return;
     ta.classList.toggle('tw-line--changed', lib.isChanged(l, st.values[key]));
+    const row = ta.closest('.tw-row');
+    if (row) {
+      row.classList.toggle('tw-row--checked', st.checked.has(key));
+      const chk = row.querySelector('[data-check]');
+      if (chk) chk.setAttribute('aria-pressed', String(st.checked.has(key)));
+      const res = row.querySelector('[data-restore]');
+      if (res) res.hidden = !lib.isChanged(l, st.values[key]);
+    }
     const n = noteHtml(l);
     const note = $(`tw-${key}-note`);
     note.className = n.cls;
-    note.textContent = n.text;
+    note.innerHTML = wordsHtml(n.text);
   }
 
   function paintHead() {
@@ -118,8 +282,12 @@
     $('tw-title').textContent = lib.displayTitle(p);
     document.title = `Tweak ${lib.displayTitle(p)} — ${document.title.split(' — ').pop()}`;
     const live = lib.liveUrl(p.url, window.location);
-    const open = $('tw-open');
-    if (live) open.href = live; else open.hidden = true;
+    st.live = live;
+    if (live) $('tw-open-tab').href = live; else $('tw-openwrap').hidden = true;
+    setOpenAs(recall(OPEN_KEY));
+    setSize(recall(SIZE_KEY));
+    // Split view comes back open only where it opens in place: a popup on load would be blocked.
+    if (live && recall(SPLIT_KEY) === 'on' && lib.canFrame(live, window.location) && !st.split) setSplit(true);
     $('tw-download').disabled = false;
     $('tw-upload').disabled = !st.writable;
     $('tw-submit').disabled = !st.writable;
@@ -182,10 +350,12 @@
     st.values = lib.initialValues(st.ed.reading.lines, st.ed.draft);
     st.writable = !!(st.ed.round && st.ed.round.held_by_you && st.ed.round.state === 'writing');
     st.lastSent = JSON.stringify(lib.draftBody(st.ed.reading.reading_hash, st.ed.reading.lines, st.values));
+    st.checked = loadChecked();
     paintHead();
     roundNotice();
     paintDoc();
     paintCounter();
+    paintHint();
   }
 
   // ---------------------------------------------------------------------------
@@ -334,6 +504,7 @@
     st.save = 'saved';
     paintDoc();
     paintCounter();
+    paintHint();
     btn.textContent = lib.uploadedLabel(r.data.merge);
   }
 
@@ -353,6 +524,9 @@
     st.writable = false;
     notice('');
     document.querySelectorAll('textarea.tw-line').forEach((ta) => { ta.readOnly = true; });
+    document.querySelectorAll('.tw-line--holes').forEach((box) => { box.setAttribute('contenteditable', 'false'); });
+    document.querySelectorAll('.tw-ctl').forEach((c) => { c.hidden = true; });
+    paintHint();
     $('tw-upload').disabled = true;
     showDone({});
   }
@@ -422,20 +596,79 @@
   document.addEventListener('input', (ev) => {
     const ta = ev.target;
     if (!ta || !ta.classList || !ta.classList.contains('tw-line') || !st.writable) return;
-    st.values[ta.dataset.key] = ta.value;
-    fit(ta);
+    if (ta.classList.contains('tw-line--holes')) {
+      const v = readHoleBox(ta, lineById(ta.dataset.key));
+      if (v === null) return;
+      st.values[ta.dataset.key] = v;
+    } else {
+      st.values[ta.dataset.key] = ta.value;
+      fit(ta);
+    }
     paintRow(ta.dataset.key);
     paintCounter();
     schedule();
   });
+  document.addEventListener('pointerdown', (ev) => {
+    const d = ev.target && ev.target.closest && ev.target.closest('#tw-divider');
+    if (!d || !st.split) return;
+    ev.preventDefault();
+    st.drag = true;
+    $('tw-frame').classList.add('is-dragging');
+    if (d.setPointerCapture && ev.pointerId !== undefined) { try { d.setPointerCapture(ev.pointerId); } catch (_) { /* fine */ } }
+  });
+  document.addEventListener('pointermove', (ev) => {
+    if (st.drag) setSize(lib.splitFromPointer(ev.clientY, window.innerHeight));
+  });
+  const endDrag = () => {
+    if (!st.drag) return;
+    st.drag = false;
+    $('tw-frame').classList.remove('is-dragging');
+    remember(SIZE_KEY, String(st.splitSize));
+  };
+  document.addEventListener('pointerup', endDrag);
+  document.addEventListener('pointercancel', endDrag);
+
   document.addEventListener('focusout', (ev) => {
     if (ev.target && ev.target.classList && ev.target.classList.contains('tw-line')) flush();
   });
-  document.addEventListener('keydown', (ev) => { if (ev.key === 'Escape') closeRefused(); });
+  document.addEventListener('keydown', (ev) => {
+    if (ev.key === 'Escape') { closeRefused(); setMenu(false); }
+    if (ev.target && ev.target.id === 'tw-divider') {
+      const next = lib.splitFromKey(st.splitSize, ev.key);
+      if (next !== null) { ev.preventDefault(); setSize(next); remember(SIZE_KEY, String(st.splitSize)); }
+    }
+    const ta = ev.target;
+    if (ev.key === 'Enter' && ev.shiftKey && ta && ta.classList && ta.classList.contains('tw-line') && st.writable) {
+      ev.preventDefault();
+      checkAndAdvance(ta.dataset.key);
+      return;
+    }
+    // A chip box is one line of words: a plain Enter adds nothing (a textarea's
+    // newline is tidied to a space by the server anyway).
+    if (ev.key === 'Enter' && ta && ta.classList && ta.classList.contains('tw-line--holes')) ev.preventDefault();
+  });
+  // Paste into a chip box as plain words, so no markup (or a pasted chip) rides in.
+  document.addEventListener('paste', (ev) => {
+    const box = ev.target && ev.target.closest && ev.target.closest('.tw-line--holes');
+    if (!box || !ev.clipboardData) return;
+    ev.preventDefault();
+    const text = String(ev.clipboardData.getData('text/plain') || '').replace(/\s+/g, ' ');
+    document.execCommand('insertText', false, text);
+  });
   window.addEventListener('resize', () => { document.querySelectorAll('textarea.tw-line').forEach(fit); });
 
   document.addEventListener('click', async (ev) => {
     const t = ev.target;
+    const chk = t.closest('[data-check]');
+    if (chk && st.writable) { setChecked(chk.dataset.check, !st.checked.has(chk.dataset.check)); return; }
+    const res = t.closest('[data-restore]');
+    if (res) { restore(res.dataset.restore); return; }
+    if (t.closest('#tw-open-more')) { setMenu(!$('tw-openwrap').classList.contains('is-open')); return; }
+    if (t.closest('#tw-open')) { if (st.openAs === 'split') openSplit(); else openTab(); return; }
+    if (t.closest('#tw-open-tab')) { setOpenAs('tab'); setMenu(false); return; }
+    if (t.closest('#tw-open-split')) { if (!st.split) setOpenAs('split'); openSplit(); return; }
+    if (t.closest('#tw-split-close')) { setSplit(false); return; }
+    if (!t.closest('#tw-openwrap')) setMenu(false);
     if (t.closest('#tw-download')) { download(); return; }
     if (t.closest('#tw-upload')) { $('tw-file').click(); return; }
     if (t.closest('#tw-submit')) { submit(); return; }

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

@@ -162,7 +162,7 @@
 
 <!-- The app shell (sidebar + top bar). Dependency-free; loaded FIRST so the
      chrome exists before the page script runs. -->
-<script src="/builders/shell.js?v=2026-09-28-archive"></script>
+<script src="/builders/shell.js?v=2026-09-29-renderdeploy"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <!-- shared frontend toolkit (window.OTB) — loaded before watch.js, which pulls from it. -->

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

@@ -171,7 +171,7 @@
 
 <!-- The app shell (sidebar + top bar + footer). Dependency-free; runs at parse
      time so the chrome exists before the deferred page scripts execute. -->
-<script src="/builders/shell.js?v=2026-09-28-archive"></script>
+<script src="/builders/shell.js?v=2026-09-29-renderdeploy"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <!-- shared frontend toolkit (window.OTB) — loaded FIRST so work.js can pull from it. -->

package/modules/hall-ui/records/approval-queue.md

@@ -30,3 +30,9 @@ The overlay root is `.aq-overlay` and its palette is its own token tier (`tests/
 ## The proof
 
 `studio.states.json` renders six panel states (approvals, approvals-before, approvals-phone, approvals-note, approved, sent-back) beside the studio's own. Populated, against the hall-preview harness (`node scripts/hall-preview/server.js --port 4634 --fixture-me`), which answers the queue from `copy-desk__approvals.json` (built by the real `composeApprovals`), the renders from `tasks__visuals.json`, and the two decisions from its CANNED WRITES. `HALL_PREVIEW_VISUALS=<dir>` makes the harness serve real images by the fixture's names (the review sheet used TW11's real renders of landing:index). All clean at 1440, 390 and 320, dark and light. Behaviour: `tests/hall_approval_queue.mjs` (the real panel in a vm over the real composer's answer) and `tests/copy_desk_page_approve.mjs` (the routes and the lifecycle port, whole path).
+
+## It fits the screen, and a brand hole reads as the name (task 1004381)
+
+Found on the live site with the first real rounds. **The dialog is capped by the viewport too** (`min(1180px, 100%, 100vw - 48px)` by `min(820px, 100%, 100dvh - 48px)`), not only by its overlay, so no ancestor and no hall zoom (`shell.js` sets CSS `zoom` on `<html>` at 125 and 150 percent) can push it past the edge. The header and the decision row wrap, the rendered page shrinks first, and the words column keeps the artboard's 300px until the page has shrunk, then narrows to 240 (`clamp(240px, 32%, 300px)`). Long words break. Checked with the kit at 1440, 1280, 1024 (a size the kit gained for this, opt-in) and 390, light and dark, and measured at 1.5x hall zoom, where the old sheet ran the hint past the dialog at 900 and 800 wide.
+
+**A `{{productName}}` in a line or its "was:" reads as the product name**, in a quiet chip (`.aq-hole`), from `window.__BRANDING__` through `brand-holes.js` (shared with the tweak editor). The stored text keeps the token; only the display resolves it. `tests/hall_approval_queue.mjs` pins both.

package/modules/hall-ui/records/tweak-editor.md

@@ -26,8 +26,14 @@ The paper is paper and the room is the room whatever the hall's theme: the stage
 - **"pick another" opens the other pages in place** as chips under the actions (the studio artboard's own "pick another"), where the editor artboard linked to the studio, whose flow panel is TW16's.
 - **Boxes grow to their words** rather than the artboard's rows 1 or 2.
 - **A refused upload opens a panel** (task 1004354, `#tw-refused`): the "is in" panel's glass and scrim over the whole window, a headline per refusal (`lib.uploadRefusal`), the server's words, the lines it names, "what to do", and "download this page again" or close (Escape too). An artist uploads from the bar, often far down the page, where the paper's notice was off screen. The notice stays on the paper after the panel closes. The kit has no file-upload action, so the panel is proven in `tests/hall_tweak_editor.mjs` and by shots of a real browser at 1440 and 390, not by a states.json state.
+- **The check, the restore and Shift + Enter (task 1004385, owner-asked).** Beside each line a round restore button (only on a changed line: it puts the page's words back and takes the check off) and a round green check. A checked line takes a light green wash; the owner picked the check over a tint alone. **Shift + Enter** in a line checks it and lands in the next, and a green hint above the words says so (with "N of M checked"), because it is the quickest way through a page. Enter alone is unchanged. The checks are the artist's place-keeper and stay in the browser (`localStorage`, keyed by page and reading hash, so a page that moved never ticks the wrong words); the server has no such field and `WRITES` is unchanged. A page the caller cannot write has none of it. Rules in `tweak-editor-lib.js` (`nextLineKey`, `confirmedCount`, `parseConfirmed`, `confirmStoreKey`, `hintText`).
+- **No page title or sub text at the top of the paper, and "open the page" is a menu (task 1004386, owner-asked).** The bar already names the page, so the paper opens on its first section; the h1 stays, visually hidden, for the one-h1 floor. "open the page" is a **split button** (owner-amended mid-build): the main half repeats the artist's last choice ("open the page ↗" for a new tab, "open in split view"), and the ▾ beside it opens **open in new tab** and **open in split view**. Click, keyboard and touch; hover alone opens nothing, because a hover menu closes when the pointer wanders and does not exist on touch. Split view has a **draggable divider** (mouse, touch, or the arrow keys and Home/End on the focused divider; the live page takes 20% to 80% of the window, `lib.clampSplit`), and the frame stops taking the pointer while it is dragged. The choice, the size and whether split view was open are remembered (`hall-tweak-open-as`, `hall-tweak-split-size`, `hall-tweak-split`), so the next page opens the same way; a split that would be a second window never reopens on load, because a browser blocks a popup nobody clicked. At phone width the live page takes at most half the screen, whatever the saved size, because the two-row bar is tall there. Split view pins the live page under the words (words above, page below, both scroll; "close split view" unloads it; the frame loads only when opened). **The live site answers `X-Frame-Options: SAMEORIGIN`** (set at the proxy in front of the app, not in this repo), so only a page on the editor's own host can be framed. A landing or status page is on another host, so its split view opens the page in a second window docked to the bottom half of the screen (`lib.canFrame`, `lib.splitWindowFeatures`). Allowing framing from the builders host (a `frame-ancestors` rule at the proxy) would let those pages split in place too.
 - **Not on the artboard at all:** the phone layout (the bar becomes a two-row glass card, notes drop under their lines), the shell's full-screen button top right, the read-only and refusal notices on the paper, the chrome view (the switch off), and light mode.
 
 ## The proof
 
 `tweak-editor.states.json` renders six states (doc, typed, chrome, submitted, picking, out). Against the kit's own stub the page renders its could-not-read state; populated, it renders against the hall-preview harness (`node scripts/hall-preview/server.js --port 4631 --fixture-me`), which answers the read from `copy-desk__pages__draft.json` (the real `landing:index` reading, through the real composer, with the artboard's two rewrites as the draft), next up from `copy-desk__next.json`, and the autosave, the submit and the claim from its CANNED WRITES (fixed answers that change nothing). All clean at 1440, 390 and 320, dark and light. The artboard needs the Design runtime, so for the review sheet it was rendered by expanding its own template over its own `renderVals()`; the ship notes of task 1004321 carry the sheet's path and every difference, which is the list above.
+
+## A brand hole is a chip the artist types around (task 1004381)
+
+A line whose words hold a `{{token}}` (the page's own brand placeholder, kept by name in the reading) is a typed-in box (`div.tw-line.tw-line--holes`, `role="textbox"`, `contenteditable`) instead of a textarea, because a textarea cannot hold a chip. The token is a `contenteditable="false"` chip showing the name it stands for (`window.__BRANDING__`, `brand-holes.js`), so the artist types around it and never over it; the box is `white-space: pre-wrap` so every space they type beside it is kept. The value the autosave PUTs is the box read back with each chip as its `{{token}}` again. An edit that deletes or adds a hole is undone on the spot and saves nothing (a hole is not the artist's to change, and `copy-apply.js` now refuses such a line as `placeholder_mismatch` too). Enter adds nothing and a paste lands as plain words. Lines with no hole keep the textarea exactly as before. The first real round (Contact) came back as "This project,{{productName}}has two environments", which is the bug this closes. `tests/hall_tweak_editor.mjs` pins the box, the save, and the undo.