@bongos/core 1.19.1081 → 1.20.2

package/tests/hall_tweak_editor.mjs

@@ -26,6 +26,7 @@ const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const PUB = path.join(ROOT, 'modules/hall-ui/public');
 const read = (f) => fs.readFileSync(path.join(PUB, f), 'utf8');
 const lib = require('../modules/hall-ui/public/tweak-editor-lib.js');
+const holes = require('../modules/hall-ui/public/brand-holes.js');
 const pages = require('../modules/copy-desk/pages.js');
 const pageStatus = require('../modules/copy-desk/page-status.js');
 
@@ -69,7 +70,7 @@ const NEXT = {
 // ── the mini-DOM over the page's own markup ────────────────────────────────
 const HTML = read('tweak-editor.html');
 const BODY = /<body[^>]*>([\s\S]*)<\/body>/.exec(HTML)[1].replace(/<script[\s\S]*?<\/script>/g, '');
-const SOURCES = ['dom-utils.js', 'tweak-editor-lib.js', 'tweak-editor.js'].map((f) => [f, read(f)]);
+const SOURCES = ['dom-utils.js', 'brand-holes.js', 'tweak-editor-lib.js', 'tweak-editor.js'].map((f) => [f, read(f)]);
 
 function augment(el) {
   if (el._aug) return el;
@@ -95,12 +96,13 @@ function augment(el) {
   el.scrollHeight = 40;
   el.inert = false;
   el.focus = () => { boot.focused = el; };
+  el.scrollIntoView = () => {};
   el.click = () => { el.clicked = (el.clicked || 0) + 1; };
   return el;
 }
 let boot = null;
 
-function bootEditor({ search = '?page=landing:index', answers = {} } = {}) {
+function bootEditor({ search = '?page=landing:index', answers = {}, stored = {} } = {}) {
   const root = augment(makeEl('body', {}));
   root.innerHTML = BODY;
   const byId = (id) => walk(root, (c) => (c.id === id ? c : null));
@@ -109,6 +111,7 @@ function bootEditor({ search = '?page=landing:index', answers = {} } = {}) {
   let timerId = 0;
   const requests = [];
   const fetches = [];
+  const store = { ...stored };
   const documentObj = {
     title: 'Tweak a page — Cloud Bongos',
     body: root,
@@ -130,30 +133,35 @@ function bootEditor({ search = '?page=landing:index', answers = {} } = {}) {
     },
   };
   const windowObj = {
-    __BRANDING__: {}, __MODULES__: { enabled: {} },
+    __BRANDING__: { identity: { productName: 'Cloud Bongos' } }, __MODULES__: { enabled: {} },
     BongosClient: { createClient: () => client },
-    location: { host: 'builders.cloudbongos.com', hostname: 'builders.cloudbongos.com', protocol: 'https:', search, pathname: '/builders/tweak-editor', assign: (u) => { out.navigated = u; } },
+    location: { host: 'builders.cloudbongos.com', hostname: 'builders.cloudbongos.com', protocol: 'https:', origin: 'https://builders.cloudbongos.com', href: 'https://builders.cloudbongos.com/builders/tweak-editor', search, pathname: '/builders/tweak-editor', assign: (u) => { out.navigated = u; } },
     history: { replaceState: (_, __, u) => { out.replaced = u; } },
-    localStorage: { getItem: () => 'off', setItem() {} },
+    localStorage: { getItem: (k) => (String(k).startsWith('hall-tweak') ? (store[k] === undefined ? null : store[k]) : 'off'), setItem: (k, v) => { store[k] = v; } },
     addEventListener() {},
+    innerHeight: 1000,
+    screen: { availWidth: 1600, availHeight: 1000, availLeft: 0, availTop: 0 },
+    open: (...a) => { out.opened.push(a); return {}; },
     setTimeout: (fn, ms) => { const id = ++timerId; timers.push({ id, fn, ms }); return id; },
     clearTimeout: (id) => { const i = timers.findIndex((t) => t.id === id); if (i >= 0) timers.splice(i, 1); },
   };
   const sandbox = {
     window: windowObj, document: documentObj, location: windowObj.location,
     fetch: async (url, init) => { fetches.push({ url, init }); const a = answers[`FETCH ${init.method} ${url.replace(/^\/api\/bongos/, '')}`]; return { ok: !!(a && a.ok), json: async () => (a ? a.data : null) }; },
-    console, URLSearchParams, setTimeout, clearTimeout,
+    console, URL, URLSearchParams, setTimeout, clearTimeout,
   };
   sandbox.globalThis = sandbox;
   vm.createContext(sandbox);
   for (const [name, src] of SOURCES) vm.runInContext(src, sandbox, { filename: name });
 
-  const fire = (type, target) => (docListeners[type] || []).forEach((fn) => fn({ type, target }));
+  const fire = (type, target, extra) => (docListeners[type] || []).forEach((fn) => fn({ type, target, ...(extra || {}) }));
   const out = {
-    requests, fetches, navigated: null, replaced: null, focused: null,
+    requests, fetches, store, opened: [], navigated: null, replaced: null, focused: null,
     el: byId,
     window: windowObj,
     lines: () => root.querySelectorAll('textarea'),
+    fire: (type, target, extra) => fire(type, target, extra),
+    key: (id, keyName, shiftKey) => { const el = byId(id); const ev = { key: keyName, shiftKey: !!shiftKey, prevented: false, preventDefault() { ev.prevented = true; } }; fire('keydown', el, ev); return ev; },
     type: (key, value) => { const ta = byId(`tw-${key}`); ta.value = value; fire('input', ta); },
     click: async (id) => { const el = byId(id); assert.ok(el, `no #${id}`); fire('click', el); await settle(); await settle(); },
     clickEl: async (el) => { fire('click', el); await settle(); await settle(); },
@@ -207,6 +215,18 @@ try {
     assert.equal(lib.uploadedLabel({ from_file: ['L1', 'L2', 'L3'] }), 'uploaded · 3 lines from your doc');
   });
 
+  await test('the check: next line, counts only lines on the page, remembered per page and reading', () => {
+    assert.equal(lib.nextLineKey(READING.lines, 'L0003'), 'L0004');
+    assert.equal(lib.nextLineKey(READING.lines, 'L0007'), null, 'the last line has no next');
+    assert.equal(lib.nextLineKey(READING.lines, 'L9999'), null);
+    assert.equal(lib.confirmedCount(READING.lines, new Set(['L0001', 'L0004', 'L9999'])), 2);
+    assert.equal(lib.confirmStoreKey('landing:index', 'rh-1'), 'hall-tweak-checked:landing:index:rh-1');
+    assert.deepEqual([...lib.parseConfirmed('["L0002","L9999"]', READING.lines)], ['L0002'], 'a key the reading no longer has is dropped');
+    assert.deepEqual([...lib.parseConfirmed('off', READING.lines)], [], 'junk is nothing checked');
+    assert.deepEqual([...lib.parseConfirmed(null, READING.lines)], []);
+    assert.match(lib.hintText(3, 7), /^Shift \+ Enter checks a line and jumps to the next one\..* 3 of 7 checked\.$/);
+  });
+
   // ── the page, booted ─────────────────────────────────────────────────────
   await test('the page opens on the read: every line in page order, the saved draft in its box, notes and the accent mark', async () => {
     const b = bootEditor({ answers: { 'GET /copy-desk/pages/landing:index/draft': ok(editorRead()) } });
@@ -223,7 +243,7 @@ try {
     assert.equal(b.el('tw-name').textContent, 'Home');
     assert.equal(b.el('tw-surface').textContent, '· landing');
     assert.equal(b.el('tw-title').textContent, 'Home');
-    assert.equal(b.el('tw-open').href, 'https://cloudbongos.com/');
+    assert.equal(b.el('tw-open-tab').href, 'https://cloudbongos.com/');
     assert.equal(b.el('tw-submit').disabled, false);
     assert.equal(b.lines().some((t) => t.readOnly), false);
     // Section headings, one per consecutive run.
@@ -453,14 +473,171 @@ try {
     assert.equal(b.lines().length, 7);
   });
 
+  await test('the check button greens a line, is remembered, and toggles back', async () => {
+    const b = bootEditor({ answers: { 'GET /copy-desk/pages/landing:index/draft': ok(editorRead()) } });
+    await b.settle();
+    assert.equal(b.el('tw-hint').hidden, false, 'the hint teaches Shift + Enter');
+    assert.match(b.el('tw-hint').textContent, /Shift \+ Enter .* 0 of 7 checked\./);
+    const btn = b.el('tw-doc').querySelector('[data-check="L0003"]');
+    await b.clickEl(btn);
+    const row = b.el('tw-L0003').closest('.tw-row');
+    assert.ok(row.classList.contains('tw-row--checked'));
+    assert.equal(btn.getAttribute('aria-pressed'), 'true');
+    assert.match(b.el('tw-hint').textContent, /1 of 7 checked\./);
+    assert.equal(b.store['hall-tweak-checked:landing:index:rh-1'], '["L0003"]', 'kept in the browser, per page and reading');
+    assert.equal(b.requests.filter((r) => r.method !== 'GET').length, 0, 'never sent to the server');
+    await b.clickEl(btn);
+    assert.equal(row.classList.contains('tw-row--checked'), false);
+    assert.equal(b.store['hall-tweak-checked:landing:index:rh-1'], '[]');
+  });
+
+  await test('Shift + Enter checks the line and lands in the next; Enter alone does nothing', async () => {
+    const b = bootEditor({ answers: { 'GET /copy-desk/pages/landing:index/draft': ok(editorRead()) } });
+    await b.settle();
+    const plain = b.key('tw-L0003', 'Enter', false);
+    assert.equal(plain.prevented, false, 'a plain Enter is left alone');
+    assert.equal(b.el('tw-L0003').closest('.tw-row').classList.contains('tw-row--checked'), false);
+    const ev = b.key('tw-L0003', 'Enter', true);
+    assert.equal(ev.prevented, true, 'no new line is typed');
+    assert.ok(b.el('tw-L0003').closest('.tw-row').classList.contains('tw-row--checked'));
+    assert.equal(boot.focused && boot.focused.id, 'tw-L0004', 'the cursor moves to the next line');
+    b.key('tw-L0007', 'Enter', true);
+    assert.ok(b.el('tw-L0007').closest('.tw-row').classList.contains('tw-row--checked'), 'the last line checks too');
+    assert.match(b.el('tw-hint').textContent, /2 of 7 checked\./);
+  });
+
+  await test('restore puts the page words back, takes the check off, and only shows on a changed line', async () => {
+    const puts = [];
+    const b = bootEditor({ answers: {
+      'GET /copy-desk/pages/landing:index/draft': ok(editorRead()),
+      'PUT /copy-desk/pages/landing:index/draft': (body) => { puts.push(body); return ok({ ok: true, outcome: 'saved' }); },
+    } });
+    await b.settle();
+    const doc = b.el('tw-doc');
+    assert.equal(doc.querySelector('[data-restore="L0004"]').hidden, false, 'the changed line offers restore');
+    assert.equal(doc.querySelector('[data-restore="L0003"]').hidden, true, 'an untouched line does not');
+    b.key('tw-L0004', 'Enter', true);
+    assert.ok(b.el('tw-L0004').closest('.tw-row').classList.contains('tw-row--checked'));
+    await b.clickEl(doc.querySelector('[data-restore="L0004"]'));
+    assert.equal(b.el('tw-L0004').value, 'AI agents claim tasks and ship the code.');
+    assert.equal(b.el('tw-L0004').closest('.tw-row').classList.contains('tw-row--checked'), false, 'restore ungreens the line');
+    assert.equal(b.el('tw-L0004').classList.contains('tw-line--changed'), false);
+    assert.equal(doc.querySelector('[data-restore="L0004"]').hidden, true);
+    assert.equal(b.el('tw-counter').textContent, '0 of 7 rewritten · saved');
+    await b.flushTimers();
+    assert.equal(JSON.stringify(puts), JSON.stringify([{ reading_hash: 'rh-1', lines: [] }]), 'the draft saves without it');
+    b.type('L0003', 'Building.');
+    assert.equal(doc.querySelector('[data-restore="L0003"]').hidden, false, 'typing over a line brings restore back');
+  });
+
+  await test('a page you cannot write has no checks, no restore and no hint', async () => {
+    const b = bootEditor({ answers: { 'GET /copy-desk/pages/landing:index/draft': ok(editorRead({ held: false, state: 'ready' })) } });
+    await b.settle();
+    assert.equal(b.el('tw-hint').hidden, true);
+    assert.equal(b.el('tw-doc').querySelectorAll('button').length, 0);
+    const ev = b.key('tw-L0003', 'Enter', true);
+    assert.equal(ev.prevented, false);
+  });
+
   // ── the page's contract with the hall ────────────────────────────────────
+  // ── task 1004381: a brand hole is a chip the artist types around ────────────
+  const HOLED = {
+    id: 'landing:index',
+    reading_hash: 'rh-2',
+    lines: [
+      L('L0001', 'contact', 'Both are how {{productName}} itself works.', 'placed', { file: 'modules/public-landing/public/contact.html', line: 4, string_id: 'c1' }),
+      L('L0002', 'contact', 'Plain words.', 'placed', { file: 'modules/public-landing/public/contact.html', line: 5, string_id: 'c2' }),
+    ],
+  };
+  const holedRead = ({ held = true } = {}) => pageStatus.composeEditor({
+    page: PAGE,
+    readingPage: HOLED,
+    round: { id: 56, status: 'active', holder_id: held ? ME : null, holder_login: held ? 'me' : null, holder_worktree: false, description: pages.roundTaskBody(PAGE, 1) },
+    builderId: ME,
+  });
+  // DOM-shaped children of a chip box, as the browser holds them.
+  const txt = (s) => ({ nodeType: 3, nodeValue: s });
+  const chip = (name) => ({ nodeType: 1, nodeName: 'SPAN', getAttribute: (k) => (k === 'data-hole' ? name : null) });
+
+  await test('brand holes: split, labelled from the pack, compared, and read back from a chip box', () => {
+    const brand = { identity: { productName: 'Cloud Bongos', worldName: '' }, currency: { label: 'credits' } };
+    assert.deepEqual(holes.splitHoles('a {{productName}} b'), [{ text: 'a ' }, { hole: 'productName' }, { text: ' b' }]);
+    assert.equal(holes.holeLabel('productName', brand), 'Cloud Bongos');
+    assert.equal(holes.holeLabel('Currency', brand), 'Credits');
+    assert.equal(holes.holeLabel('worldName', brand), 'worldName', 'an empty pack value names the hole rather than showing nothing');
+    assert.equal(holes.sameHoles('x {{productName}} y', '{{productName}}z'), true);
+    assert.equal(holes.sameHoles('x {{productName}} y', 'x Cloud Bongos y'), false, 'a dropped hole is not the same');
+    assert.equal(holes.sameHoles('{{a}}', '{{a}} {{a}}'), false, 'nor is an added one');
+    assert.equal(holes.holesHtml('<b>{{productName}}</b>', { brand, cls: 'tw-hole', inBox: true }),
+      '&lt;b&gt;<span class="tw-hole" data-hole="productName" contenteditable="false" title="A fixed name the page fills in: {{productName}}">Cloud Bongos</span>&lt;/b&gt;');
+    assert.equal(holes.serializeHoles([txt('This project, '), chip('productName'), txt(' has '), { nodeType: 1, nodeName: 'BR', getAttribute: () => null }, txt('two.')]),
+      'This project, {{productName}} has  two.', 'every typed space is kept, a chip is its token again');
+    // A chip that ends the box gets a zero-width caret stop after it (a browser
+    // cannot put the caret after a trailing non-editable chip); it never saves.
+    const ZW = String.fromCharCode(0x200b);
+    assert.ok(holes.holesHtml('Hi {{productName}}', { brand, inBox: true }).endsWith(`</span>${ZW}`));
+    assert.ok(holes.holesHtml('{{productName}} hi', { brand, inBox: true }).startsWith(`${ZW}<span`));
+    assert.equal(holes.holesHtml('Hi {{productName}}', { brand }).includes(ZW), false, 'display outside a box carries none');
+    assert.equal(holes.serializeHoles([txt(ZW), chip('productName'), txt(`${ZW} today`)]), '{{productName}} today');
+  });
+
+  await test('a line holding {{productName}} is a box with the product name as a fixed chip, and saves the token', async () => {
+    const puts = [];
+    const b = bootEditor({ answers: {
+      'GET /copy-desk/pages/landing:index/draft': ok(holedRead()),
+      'PUT /copy-desk/pages/landing:index/draft': (body) => { puts.push(body); return ok({ ok: true, outcome: 'saved' }); },
+    } });
+    await b.settle();
+    const box = b.el('tw-L0001');
+    assert.equal(box.tagName, 'div', 'a holed line is not a textarea');
+    assert.equal(box.attrs.contenteditable, 'true');
+    assert.equal(box.attrs.role, 'textbox');
+    const c = box.querySelector('.tw-hole');
+    assert.ok(c, 'the hole is a chip');
+    assert.equal(c.attrs['data-hole'], 'productName');
+    assert.equal(c.attrs.contenteditable, 'false', 'the chip cannot be typed into');
+    assert.equal(c.textContent, 'Cloud Bongos', 'it reads as the product name');
+    assert.ok(!/\{\{/.test(box.innerHTML.replace(/title="[^"]*"/g, '')), 'no raw token in the box');
+    assert.equal(b.el('tw-L0002').tagName, 'textarea', 'a line with no hole is untouched');
+
+    box.childNodes = [txt('This project, '), chip('productName'), txt(', has two doors.')];
+    b.fire("input", box);
+    assert.match(b.el('tw-L0001-note').innerHTML, /was: Both are how <span class="tw-hole" data-hole="productName"[^>]*>Cloud Bongos<\/span> itself works\./, 'the was: note shows the chip too');
+    await b.flushTimers();
+    assert.equal(JSON.stringify(puts), JSON.stringify([{ reading_hash: 'rh-2', lines: [{ key: 'L0001', after: 'This project, {{productName}}, has two doors.' }] }]),
+      'the stored words keep the {{token}} and every space around it');
+  });
+
+  await test('deleting or adding a hole is undone on the spot and saves nothing; read-only boxes are not editable', async () => {
+    const puts = [];
+    const b = bootEditor({ answers: {
+      'GET /copy-desk/pages/landing:index/draft': ok(holedRead()),
+      'PUT /copy-desk/pages/landing:index/draft': (body) => { puts.push(body); return ok({ ok: true, outcome: 'saved' }); },
+    } });
+    await b.settle();
+    const box = b.el('tw-L0001');
+    box.childNodes = [txt('Both are how Cloud Bongos itself works.')];
+    b.fire("input", box);
+    assert.equal(b.pending(), 0, 'no save is scheduled');
+    assert.ok(box.querySelector('.tw-hole'), 'the chip is put back');
+    box.childNodes = [txt('Both '), chip('productName'), chip('productName')];
+    b.fire("input", box);
+    assert.equal(b.pending(), 0);
+    await b.flushTimers();
+    assert.equal(puts.length, 0);
+
+    const r = bootEditor({ answers: { 'GET /copy-desk/pages/landing:index/draft': ok(holedRead({ held: false })) } });
+    await r.settle();
+    assert.equal(r.el('tw-L0001').attrs.contenteditable, 'false', 'a page you do not hold cannot be typed into');
+  });
+
   await test('the markup: one h1, the shell\'s full-screen switch, the lib before the page, no web font', () => {
     assert.match(HTML, /<body data-page="tweak-editor"[^>]*data-fullscreen-switch/);
     assert.equal((HTML.match(/<h1\b/g) || []).length, 1);
     assert.ok(HTML.indexOf('tweak-editor-lib.js') < HTML.indexOf('tweak-editor.js?'), 'the lib loads first');
-    assert.match(HTML, /shell\.js\?v=2026-09-28-archive/);
+    assert.match(HTML, /shell\.js\?v=2026-09-29-renderdeploy/);
     assert.equal(/fonts\.googleapis\.com\/css/.test(HTML), false);
-    for (const id of ['tw-bar', 'tw-counter', 'tw-open', 'tw-download', 'tw-upload', 'tw-file', 'tw-submit', 'tw-paper', 'tw-doc', 'tw-notice', 'tw-done', 'tw-take', 'tw-pick', 'tw-picks', 'tw-refused', 'tw-refused-title', 'tw-refused-list', 'tw-refused-next', 'tw-refused-download', 'tw-refused-close']) {
+    for (const id of ['tw-bar', 'tw-counter', 'tw-open', 'tw-open-more', 'tw-divider', 'tw-openwrap', 'tw-open-menu', 'tw-open-tab', 'tw-open-split', 'tw-frame', 'tw-frame-view', 'tw-split-close', 'tw-download', 'tw-upload', 'tw-file', 'tw-submit', 'tw-paper', 'tw-doc', 'tw-notice', 'tw-done', 'tw-take', 'tw-pick', 'tw-picks', 'tw-refused', 'tw-refused-title', 'tw-refused-list', 'tw-refused-next', 'tw-refused-download', 'tw-refused-close']) {
       assert.ok(new RegExp(`id="${id}"`).test(HTML), `#${id} is in the markup`);
     }
     assert.match(HTML, />← studio</);
@@ -468,6 +645,134 @@ try {
     assert.match(HTML, />back to the studio</);
   });
 
+  await test('no visible page title or sub text on the paper; the h1 stays for screen readers', () => {
+    assert.match(HTML, /<h1 class="tw-sr" id="tw-title">/);
+    assert.equal(/tw-intro|tw-head/.test(HTML), false, 'the intro sentence and its block are gone');
+    assert.equal(/Every word on the page, in the order it shows them/.test(HTML), false);
+  });
+
+  await test('split view can frame only its own host; the live site refuses to be framed from another', () => {
+    const here = { origin: 'https://builders.cloudbongos.com', href: 'https://builders.cloudbongos.com/builders/tweak-editor' };
+    assert.equal(lib.canFrame('https://builders.cloudbongos.com/studio', here), true);
+    assert.equal(lib.canFrame('https://cloudbongos.com/', here), false, 'the apex is another origin');
+    assert.equal(lib.canFrame('not a url', { origin: '', href: '' }), false);
+    assert.equal(lib.splitWindowFeatures({ availWidth: 1600, availHeight: 1000, availLeft: 0, availTop: 0 }), 'popup=yes,width=1600,height=500,left=0,top=500', 'the bottom half of the screen');
+    assert.match(lib.splitWindowFeatures(undefined), /^popup=yes,width=\d+,height=\d+,left=0,top=\d+$/);
+  });
+
+  await test('the split button and the divider: last choice, and a size kept between 20% and 80%', () => {
+    assert.equal(lib.openChoice('split'), 'split');
+    assert.equal(lib.openChoice('off'), 'tab', 'anything else is a new tab');
+    assert.equal(lib.openChoice(null), 'tab');
+    assert.equal(lib.OPEN_WORDS.tab, 'open the page ↗');
+    assert.equal(lib.OPEN_WORDS.split, 'open in split view');
+    assert.equal(lib.clampSplit(null), 0.5);
+    assert.equal(lib.clampSplit('off'), 0.5);
+    assert.equal(lib.clampSplit('0.95'), 0.8);
+    assert.equal(lib.clampSplit(0.05), 0.2);
+    assert.equal(lib.clampSplit('0.333'), 0.33);
+    assert.equal(lib.splitFromPointer(700, 1000), 0.3, 'the page takes what lies below the pointer');
+    assert.equal(lib.splitFromPointer(0, 1000), 0.8);
+    assert.equal(lib.splitFromPointer(500, 0), 0.5);
+    assert.equal(lib.splitFromKey(0.5, 'ArrowUp'), 0.55);
+    assert.equal(lib.splitFromKey(0.5, 'ArrowDown'), 0.45);
+    assert.equal(lib.splitFromKey(0.8, 'ArrowUp'), 0.8);
+    assert.equal(lib.splitFromKey(0.5, 'Home'), 0.2);
+    assert.equal(lib.splitFromKey(0.5, 'End'), 0.8);
+    assert.equal(lib.splitFromKey(0.5, 'x'), null);
+  });
+
+  await test('open the page: the arrow opens the menu, and the main button repeats the last choice', async () => {
+    const saved = PAGE.url;
+    PAGE.url = 'https://builders.{apex}/studio';
+    try {
+      const b = bootEditor({ answers: { 'GET /copy-desk/pages/landing:index/draft': ok(editorRead()) } });
+      await b.settle();
+      assert.equal(b.el('tw-open').textContent, 'open the page ↗', 'a new tab by default');
+      assert.equal(b.el('tw-open-tab').attrs.target, '_blank');
+      assert.equal(b.el('tw-frame').hidden, true, 'no frame until asked');
+      assert.ok(!b.el('tw-frame-view').src, 'and nothing loaded');
+      await b.click('tw-open');
+      assert.deepEqual(b.opened.map((a) => a.slice(0, 2)), [['https://builders.cloudbongos.com/studio', '_blank']], 'the main button opens a new tab');
+      assert.equal(b.el('tw-openwrap').classList.contains('is-open'), false, 'and no menu');
+      await b.click('tw-open-more');
+      assert.ok(b.el('tw-openwrap').classList.contains('is-open'), 'the arrow opens the menu');
+      assert.equal(b.el('tw-open-more').getAttribute('aria-expanded'), 'true');
+      await b.click('tw-open-split');
+      assert.equal(b.el('tw-frame').hidden, false);
+      assert.equal(b.el('tw-frame-view').src, 'https://builders.cloudbongos.com/studio', 'the live page, in place');
+      assert.equal(b.el('tw-open-split').textContent, 'close split view');
+      assert.equal(b.el('tw-openwrap').classList.contains('is-open'), false, 'the menu closes after a choice');
+      assert.equal(b.el('tw-open').textContent, 'open in split view', 'the main button now repeats the split');
+      assert.equal(b.store['hall-tweak-open-as'], 'split');
+      assert.equal(b.store['hall-tweak-split'], 'on');
+      await b.click('tw-split-close');
+      assert.equal(b.el('tw-frame').hidden, true);
+      assert.equal(b.el('tw-frame-view').src, 'about:blank', 'closing unloads the page');
+      assert.equal(b.store['hall-tweak-split'], 'off');
+      await b.click('tw-open');
+      assert.equal(b.el('tw-frame').hidden, false, 'the main button reopens the split');
+      assert.equal(b.opened.length, 1, 'no second window for a hall page');
+      assert.equal(b.requests.filter((r) => r.method !== 'GET').length, 0, 'no write');
+    } finally { PAGE.url = saved; }
+  });
+
+  await test('the divider resizes by drag and by arrow keys, and the size is remembered', async () => {
+    const saved = PAGE.url;
+    PAGE.url = 'https://builders.{apex}/studio';
+    try {
+      const b = bootEditor({ answers: { 'GET /copy-desk/pages/landing:index/draft': ok(editorRead()) } });
+      await b.settle();
+      await b.click('tw-open-more');
+      await b.click('tw-open-split');
+      const div = b.el('tw-divider');
+      assert.equal(div.getAttribute('aria-valuenow'), '50');
+      b.fire('pointerdown', div, { clientY: 500, preventDefault() {} });
+      assert.ok(b.el('tw-frame').classList.contains('is-dragging'), 'the frame lets the pointer through while dragging');
+      b.fire('pointermove', div, { clientY: 700 });
+      assert.equal(div.getAttribute('aria-valuenow'), '30');
+      b.fire('pointerup', div, {});
+      assert.equal(b.el('tw-frame').classList.contains('is-dragging'), false);
+      assert.equal(b.store['hall-tweak-split-size'], '0.3');
+      b.fire('pointermove', div, { clientY: 100 });
+      assert.equal(div.getAttribute('aria-valuenow'), '30', 'moving after the drag ends changes nothing');
+      const ev = b.key('tw-divider', 'ArrowUp', false);
+      assert.equal(ev.prevented, true);
+      assert.equal(div.getAttribute('aria-valuenow'), '35');
+      assert.equal(b.store['hall-tweak-split-size'], '0.35');
+    } finally { PAGE.url = saved; }
+  });
+
+  await test('the next page opens the way the last one was left', async () => {
+    const saved = PAGE.url;
+    PAGE.url = 'https://builders.{apex}/studio';
+    try {
+      const b = bootEditor({
+        answers: { 'GET /copy-desk/pages/landing:index/draft': ok(editorRead()) },
+        stored: { 'hall-tweak-open-as': 'split', 'hall-tweak-split': 'on', 'hall-tweak-split-size': '0.4' },
+      });
+      await b.settle();
+      assert.equal(b.el('tw-frame').hidden, false, 'split view is back');
+      assert.equal(b.el('tw-divider').getAttribute('aria-valuenow'), '40', 'at its size');
+      assert.equal(b.el('tw-open').textContent, 'open in split view');
+    } finally { PAGE.url = saved; }
+  });
+
+  await test('a page on the apex splits into its own window docked to the bottom half, and never on load', async () => {
+    const b = bootEditor({
+      answers: { 'GET /copy-desk/pages/landing:index/draft': ok(editorRead()) },
+      stored: { 'hall-tweak-open-as': 'split', 'hall-tweak-split': 'on' },
+    });
+    await b.settle();
+    assert.equal(b.opened.length, 0, 'no popup on load: a browser would block it');
+    assert.equal(b.el('tw-frame').hidden, true, 'nothing framed: the site would refuse');
+    await b.click('tw-open');
+    assert.equal(b.opened.length, 1);
+    assert.deepEqual(b.opened[0].slice(0, 2), ['https://cloudbongos.com/', 'tw-live-page']);
+    assert.equal(b.opened[0][2], 'popup=yes,width=1600,height=500,left=0,top=500');
+    assert.equal(b.el('tw-frame').hidden, true);
+  });
+
   await test('the page writes only the copy-desk routes it names', () => {
     const js = read('tweak-editor.js');
     const writes = [...js.matchAll(/api\.request\('(POST|PUT|PATCH|DELETE)', ([^,]+),/g)].map((m) => `${m[1]} ${m[2]}`);