@bongos/core 1.21.164 → 1.21.165

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.21.164",
+  "version": "1.21.165",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.21.164",
+      "version": "1.21.165",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "express": "^4.21.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.21.164",
+  "version": "1.21.165",
   "description": "Cloud Bongos — the AI-first build platform core (GDS + platform surfaces + module system), installed as a versioned dependency (ADR 0108).",
   "license": "AGPL-3.0-or-later",
   "main": "src/platform-server.js",

package/release-notes.json

@@ -10034,5 +10034,11 @@
       "id": "1004774",
       "text": "Home got the owner's reshuffle: a slimmer banner with the version's progress bar under it; your picture and rank at the top right, opening on hover into your standing card with a View full profile link; every Needs-attention s"
     }
+  ],
+  "1.21.165": [
+    {
+      "id": "1004771",
+      "text": "Artist review is now a small tab on the right edge of every hall page in artist mode. Hover the tab and the review panel slides out; move the cursor back onto the page and it tucks away, keeping your draft. The page stays scro"
+    }
   ]
 }

package/src/module-api.js

@@ -75,7 +75,7 @@ const { responsibilityFor, ROLE_RESPONSIBILITIES } = require('./role-responsibil
 // MAJOR (see allowBoxScope below): passes the request through untouched.
 function deprecatedNoopMiddleware(_req, _res, next) { next(); }
 
-const CORE_VERSION = '1.21.164'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
+const CORE_VERSION = '1.21.165'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
 
 // A namespaced logger so a module's log lines are attributable + consistent.
 // Usage: const log = api.logger('discord'); log.info('mounted');

package/tests/craft_review_mode.mjs

@@ -1,9 +1,10 @@
 // tests/craft_review_mode.mjs — artist review mode (task 1004686, goal 1000095).
 //
-// Owner ask, 2026-10-09: hovering the Review button in Artistry opens a menu of
-// the four experiences (Ideator, Governing, Building, Artistry); picking one
-// puts the artist into review mode on that mode's view, and graffiti is painted
-// across the top bar's empty space while it lasts. These cases run the REAL
+// Owner ask, 2026-10-09: the artist picks one of the four experiences (Ideator,
+// Governing, Building, Artistry) and reviews the hall in that mode's view, with
+// graffiti across the top bar's empty space while it lasts. Since task 1004771
+// the choice lives in the docked review panel's own Review mode row
+// (page-notes.js; tests/page_notes_panel.mjs runs that row), not a top-bar menu. These cases run the REAL
 // craft-mode.js (and, when it is loaded, the real craft-review.js) over a small
 // DOM, and read the real craft-review.css for the motion rules.
 import assert from 'node:assert/strict';
@@ -83,7 +84,7 @@ function boot({ session = {}, store = {}, narrow = false } = {}) {
   head.onAppend = (tag) => {
     loaded.push(tag.src);
     if (/craft-review\.js/.test(tag.src)) vm.runInContext(REVIEW, sandbox, { filename: 'craft-review.js' });
-    else window.OTBPageNotes = { open: () => opened.push('open'), openNote: () => {} };
+    else window.OTBPageNotes = { open: () => opened.push('open'), openNote: () => {}, dock: () => opened.push('dock'), close: () => opened.push('close') };
     tag.onload();
   };
   vm.runInContext(CRAFT, sandbox, { filename: 'craft-mode.js' });
@@ -93,107 +94,43 @@ function boot({ session = {}, store = {}, narrow = false } = {}) {
   return {
     craft: window.OTBCraftMode, root, topbar, side, sw, title, loaded, opened, session, byId, docListeners,
     tools: () => all(side).filter((n) => n.hasAttribute('data-craft-tool')).map((n) => n.id.replace('craft-tool-', '')),
-    menu: () => byId('craft-review-menu'),
-    menuOpen: () => !!byId('craft-review-menu') && !byId('craft-review-menu').hasAttribute('hidden'),
-    // A click on a menu item: the menu's own listener reads the button off the target.
-    pick: (attrs) => byId('craft-review-menu').fire('click', { target: { closest: () => ({ getAttribute: (k) => (k in attrs ? attrs[k] : null) }) } }),
   };
 }
 const artist = () => ({ 'hall-craft': 'artistry', 'hall-craft-asked': '1' });
 
-test('THE SPLIT PILL: in Artistry, Review rides a group with a review-mode chevron and a closed menu', () => {
+test('NO TOP-BAR REVIEW BUTTON: in Artistry the bar holds Edit words alone, and no review-mode menu', async () => {
   const p = boot({ session: artist() });
-  const pill = p.byId('craft-review');
-  assert.ok(pill, 'the group exists');
-  assert.equal(p.byId('craft-tool-palette').parentNode, pill, 'Review sits in it');
-  const more = p.byId('craft-review-more');
-  assert.equal(more.parentNode, pill);
-  assert.equal(more.getAttribute('aria-haspopup'), 'menu');
-  assert.equal(more.getAttribute('aria-expanded'), 'false');
-  assert.equal(more.getAttribute('aria-controls'), 'craft-review-menu');
-  assert.equal(p.menu().getAttribute('role'), 'menu');
-  assert.ok(p.menu().hasAttribute('hidden'), 'the menu starts closed');
+  await flush();
+  assert.deepEqual(p.tools(), ['paintbrush'], 'the review panel docks at the edge instead (task 1004771)');
+  assert.equal(p.byId('craft-review'), null, 'no split pill');
+  assert.equal(p.byId('craft-review-menu'), null, 'no menu');
+  assert.deepEqual(p.opened, ['dock']);
   assert.equal(p.byId('craft-graffiti'), null, 'no wall until a review starts');
   assert.equal(p.root.getAttribute('data-craft-review'), null);
-  for (const m of ['building', 'ideating', 'governing']) {
-    p.craft.choose(m);
-    assert.equal(p.byId('craft-review'), null, `no Review pill in ${m}`);
-  }
-});
-
-test('THE MENU: write feedback first, then the four experiences in the owner\'s order and words', () => {
-  const p = boot({ session: artist() });
-  p.byId('craft-review-more').click({ detail: 1 });
-  assert.ok(p.menuOpen(), 'the chevron opens it');
-  assert.equal(p.byId('craft-review-more').getAttribute('aria-expanded'), 'true');
-  const html = p.menu().innerHTML;
-  const labels = [...html.matchAll(/<span>([^<]+)<\/span>/g)].map((m) => m[1]);
-  assert.deepEqual(labels, ['Write feedback on this page', 'Ideator experience', 'Governing experience', 'Building experience', 'Artistry experience']);
-  assert.deepEqual([...html.matchAll(/data-review-pick="([a-z]+)"/g)].map((m) => m[1]), ['ideating', 'governing', 'building', 'artistry']);
-  assert.equal((html.match(/role="menuitemradio" aria-checked="true"/g) || []).length, 0, 'nothing is checked before a review');
-  assert.doesNotMatch(html, /Stop reviewing/, 'no way out of a review that has not started');
-  p.byId('craft-review-more').click({ detail: 1 });
-  assert.ok(!p.menuOpen(), 'the chevron closes it again');
-});
-
-test('HOVER opens it for a mouse, never for a touch, and leaving closes it after a beat', async () => {
-  const p = boot({ session: artist() });
-  const pill = p.byId('craft-review');
-  pill.fire('pointerenter', { pointerType: 'touch' });
-  assert.ok(!p.menuOpen(), 'a touch is not a hover');
-  pill.fire('pointerenter', { pointerType: 'mouse' });
-  assert.ok(p.menuOpen(), 'a mouse over the pill opens the menu');
-  pill.fire('pointerleave', { pointerType: 'mouse' });
-  assert.ok(p.menuOpen(), 'it stays a beat, so the pointer can reach the menu');
-  pill.fire('pointerenter', { pointerType: 'mouse' });
-  await new Promise((r) => setTimeout(r, 260));
-  assert.ok(p.menuOpen(), 'coming back in cancels the close');
-  pill.fire('pointerleave', { pointerType: 'mouse' });
-  await new Promise((r) => setTimeout(r, 260));
-  assert.ok(!p.menuOpen(), 'and leaving for good closes it');
-});
-
-test('CLICKING Review still opens the feedback panel; on a phone a tap opens the menu instead', async () => {
-  const p = boot({ session: artist() });
-  p.byId('craft-tool-palette').click({ detail: 1 });
-  await flush();
-  assert.deepEqual(p.opened, ['open'], 'the feedback doc opens, as before');
-  assert.ok(!p.menuOpen());
-  const phone = boot({ session: artist(), narrow: true });
-  phone.byId('craft-tool-palette').click({ detail: 1 });
-  await flush();
-  assert.deepEqual(phone.opened, [], 'no panel on the tap');
-  assert.ok(phone.menuOpen(), 'the menu instead (a phone has no hover)');
-  phone.pick({ 'data-review-act': 'write' });
-  await flush();
-  assert.deepEqual(phone.opened, ['open'], 'and its first line opens the feedback doc');
+  assert.deepEqual(JSON.parse(JSON.stringify(p.craft.experiences().map((x) => x.label))), ['Ideator experience', 'Governing experience', 'Building experience', 'Artistry experience'], 'the four, in the owner\'s order and words, for the review panel row');
 });
 
 test('PICKING an experience: the hall wears that mode, the artist keeps the Review tools, and the wall goes up', async () => {
   const p = boot({ session: artist() });
-  p.byId('craft-review-more').click({ detail: 1 });
-  p.pick({ 'data-review-pick': 'governing' });
-  assert.ok(!p.menuOpen(), 'the menu closes on a pick');
+  p.craft.review('governing');
   assert.equal(p.root.dataset.craft, 'governing', 'the hall wears Governing: its tabs, look and tallies follow');
   assert.equal(p.root.getAttribute('data-craft-review'), 'governing');
   assert.equal(p.craft.current(), 'governing');
   assert.equal(p.craft.reviewing(), 'governing');
   assert.equal(p.session['hall-craft'], 'artistry', 'the artist\'s own mode stays Artistry');
   assert.equal(p.session['hall-craft-review'], 'governing', 'the review lasts the session');
-  assert.deepEqual(p.tools(), ['palette', 'paintbrush'], 'Review and Edit words stay in the bar');
-  assert.ok(p.byId('craft-tool-palette').classList.contains('craft-tool--reviewing'));
+  assert.deepEqual(p.tools(), ['paintbrush'], 'Edit words stays in the bar');
+  await flush();
+  assert.ok(p.opened.filter((x) => x === 'dock').length >= 2, 'the docked panel is told again, so its mode row repaints');
   const wall = p.byId('craft-graffiti');
   assert.ok(wall, 'the graffiti wall is up');
   assert.equal(wall.parentNode, p.topbar, 'in the top bar');
   assert.equal(wall.nextSibling, p.side, 'in the empty space before the controls');
   assert.equal(wall.getAttribute('aria-hidden'), 'true', 'decorative');
   await flush();
-  assert.deepEqual(p.loaded, ['/builders/craft-review.js?v=2026-10-09-test'], 'the wall\'s script loads on demand, at craft-mode.js\'s version');
+  assert.ok(p.loaded.includes('/builders/craft-review.js?v=2026-10-09-test'), 'the wall\'s script loads on demand, at craft-mode.js\'s version');
   assert.equal((wall.innerHTML.match(/class="gx-tag /g) || []).length, 6, 'six doodles');
   assert.doesNotMatch(wall.innerHTML, /<text/, 'scribbles, not words (owner, 2026-10-09)');
-  p.byId('craft-review-more').click({ detail: 1 });
-  assert.match(p.menu().innerHTML, /aria-checked="true" data-review-pick="governing"/, 'the menu checks the live experience');
-  assert.match(p.menu().innerHTML, /data-review-act="stop"/, 'and offers a way out');
 });
 
 test('IT LASTS THE SESSION: a reload keeps the review; a new session starts without one', () => {
@@ -215,7 +152,7 @@ test('IT LASTS THE SESSION: a reload keeps the review; a new session starts with
 test('REVIEWING Ideating shows its own tool too, marked a guest so a tiny phone can fold it away', () => {
   const p = boot({ session: artist() });
   p.craft.review('ideating');
-  assert.deepEqual(p.tools(), ['palette', 'paintbrush', 'lightbulb'], 'the artist\'s tools, then the experience\'s own, in order');
+  assert.deepEqual(p.tools(), ['paintbrush', 'lightbulb'], 'the artist\'s tool, then the experience\'s own, in order');
   assert.ok(p.byId('craft-tool-lightbulb').classList.contains('craft-tool--guest'));
   assert.ok(!p.byId('craft-tool-paintbrush').classList.contains('craft-tool--guest'));
   p.craft.choose('ideating');
@@ -227,13 +164,11 @@ test('ENDING it: Stop reviewing, or any mode from the switch, puts the artist ba
   const p = boot({ session: artist() });
   p.craft.review('building');
   assert.equal(p.root.dataset.craft, 'building');
-  p.byId('craft-review-more').click({ detail: 1 });
-  p.pick({ 'data-review-act': 'stop' });
+  p.craft.stopReview();
   assert.equal(p.root.dataset.craft, 'artistry', 'Stop reviewing is back in Artistry');
   assert.equal(p.root.getAttribute('data-craft-review'), null);
   assert.equal(p.byId('craft-graffiti'), null, 'the wall comes down');
   assert.equal(p.session['hall-craft-review'], undefined, 'and the session forgets it');
-  assert.ok(!p.byId('craft-tool-palette').classList.contains('craft-tool--reviewing'));
   p.craft.review('governing');
   p.craft.choose('artistry');
   assert.equal(p.craft.reviewing(), null, 'choosing a mode from the switch, even Artistry, ends a review');
@@ -242,25 +177,7 @@ test('ENDING it: Stop reviewing, or any mode from the switch, puts the artist ba
   p.craft.choose('governing');
   assert.equal(p.root.dataset.craft, 'governing');
   assert.equal(p.root.getAttribute('data-craft-review'), null, 'Governing chosen for real is not a review');
-  assert.equal(p.byId('craft-review'), null, 'and carries no Review pill');
-});
-
-test('THE KEYS: arrows move through the menu, Escape closes it, an outside click closes it', () => {
-  const p = boot({ session: artist() });
-  p.byId('craft-review-more').click({ detail: 1 });
-  assert.equal(p.docListeners.click && p.docListeners.click.size, 1, 'an open menu listens for a click outside');
-  p.menu().fire('keydown', { key: 'Escape' });
-  assert.ok(!p.menuOpen(), 'Escape closes it');
-  assert.equal(p.docListeners.click.size, 0, 'and stops listening');
-  p.byId('craft-review-more').fire('keydown', { key: 'ArrowDown' });
-  assert.ok(p.menuOpen(), 'ArrowDown on the chevron opens it');
-  [...p.docListeners.click][0]({ target: p.title });
-  assert.ok(!p.menuOpen(), 'a click elsewhere closes it');
-  p.byId('craft-tool-palette').fire('keydown', { key: 'ArrowDown' });
-  assert.ok(p.menuOpen(), 'ArrowDown on Review opens it too');
-  assert.match(CRAFT, /e\.key === 'ArrowUp'/);
-  assert.match(CRAFT, /e\.key === 'Home'/);
-  assert.match(CRAFT, /e\.key === 'End'/);
+  assert.ok(p.opened.includes('close'), 'and the review panel leaves with Artistry');
 });
 
 test('THE WALL is scribbled in CSS only, in ink alone, and stands still under reduced motion', () => {

package/tests/page_notes_panel.mjs

@@ -1,10 +1,10 @@
 // tests/page_notes_panel.mjs — the hall side of the artist's page feedback doc
-// (task 1004496): the palette tool craft-mode.js puts in the top bar, and the
-// reader in page-notes.js. The server half is tests/page_notes.mjs.
+// (task 1004496): the docked review panel craft-mode.js puts at the right edge
+// in Artistry (task 1004771: no top-bar button), and the reader in page-notes.js. The server half is tests/page_notes.mjs.
 //
-// Runs the REAL craft-mode.js over a small DOM: the palette shows in Artistry
-// alone and leaves when the mode changes, pressing it loads page-notes.js once
-// (same ?v as craft-mode.js) and a ?note= link opens the doc in any mode. Then
+// Runs the REAL craft-mode.js over a small DOM: the panel docks in Artistry
+// alone and closes when the mode changes, page-notes.js loads once (same ?v as
+// craft-mode.js) and a ?note= link opens the doc in any mode. Then
 // the REAL page-notes.js reader: it escapes the doc and shows only this module's
 // own images, which is what keeps a doc from pulling a picture off another site.
 import assert from 'node:assert/strict';
@@ -63,7 +63,7 @@ function boot({ session = {}, search = '' } = {}) {
   // "Loading" page-notes.js: record the tag, then define the API it would define.
   head.onAppend = (tag) => {
     loaded.push(tag.src);
-    window.OTBPageNotes = { open: () => opened.push('open'), openNote: (id) => opened.push('note ' + id) };
+    window.OTBPageNotes = { open: () => opened.push('open'), openNote: (id) => opened.push('note ' + id), dock: () => opened.push('dock'), close: () => opened.push('close') };
     tag.onload();
   };
   const sandbox = { window, document, Promise, CustomEvent: class { constructor(t, i) { this.type = t; Object.assign(this, i); } } };
@@ -74,36 +74,31 @@ function boot({ session = {}, search = '' } = {}) {
 }
 const flush = () => new Promise((r) => setTimeout(r, 0));
 
-test('THE PALETTE: in the top bar in Artistry alone, right before the switch, and gone when the mode changes', () => {
+test('THE PANEL: docked at the edge in Artistry alone, with no top-bar button, and closed when the mode changes', async () => {
   const p = boot({ session: { 'hall-craft': 'artistry' } });
-  assert.deepEqual(p.tools().map((t) => t.id), ['craft-tool-palette', 'craft-tool-paintbrush'], 'the palette, then the paintbrush (task 1004497)');
-  // Task 1004686: the palette sits in its split pill (Review + the review-mode chevron).
-  const pill = p.tools()[0].parentNode;
-  assert.equal(pill.id, 'craft-review', 'the palette rides the Review split pill');
-  assert.equal(pill.nextSibling, p.tools()[1], 'the palette comes first');
-  assert.equal(p.tools()[1].nextSibling, p.sw, 'and the pair sits right before the mode switch');
-  assert.equal(p.tools()[0].getAttribute('aria-label'), 'Artist review: write feedback on this page', 'one name with the public site\'s button (task 1004499)');
-  for (const m of ['building', 'governing']) {
-    p.craft.choose(m);
-    assert.equal(p.tools().length, 0, `no palette in ${m}`);
-  }
+  await flush();
+  assert.deepEqual(p.tools().map((t) => t.id), ['craft-tool-paintbrush'], 'the top bar keeps Edit words alone (task 1004771)');
+  assert.equal(p.tools()[0].nextSibling, p.sw, 'right before the mode switch');
+  assert.deepEqual(p.opened, ['dock'], 'the review panel docks instead');
+  for (const m of ['building', 'governing']) p.craft.choose(m);
+  assert.deepEqual(p.opened, ['dock', 'close', 'close'], 'and leaves with Artistry');
   p.craft.choose('ideating');
-  assert.deepEqual(p.tools().map((t) => t.id), ['craft-tool-lightbulb'], 'Ideating swaps them for its lightbulb alone (task 1004498)');
-  p.craft.choose('artistry');
+  assert.deepEqual(p.tools().map((t) => t.id), ['craft-tool-lightbulb'], 'Ideating shows its lightbulb alone (task 1004498)');
   p.craft.choose('artistry');
-  assert.equal(p.tools().length, 2, 'choosing Artistry twice draws one palette and one paintbrush');
-  assert.equal(boot().tools().length, 0, 'and none with no mode at all');
+  await flush();
+  assert.equal(p.opened.filter((x) => x === 'dock').length, 2, 'back in Artistry it docks again');
+  const none = boot();
+  await flush();
+  assert.equal(none.tools().length, 0, 'no tools with no mode at all');
+  assert.deepEqual(none.loaded, [], 'and nothing loads');
 });
 
-test('pressing it loads page-notes.js once, at the same version as craft-mode.js, and opens it', async () => {
+test('the panel script loads once, at the same version as craft-mode.js', async () => {
   const p = boot({ session: { 'hall-craft': 'artistry' } });
-  assert.deepEqual(p.loaded, [], 'nothing loads until the palette is pressed');
-  p.tools()[0].click();
   await flush();
-  p.tools()[0].click();
+  p.craft.choose('artistry');
   await flush();
   assert.deepEqual(p.loaded, ['/builders/page-notes.js?v=2026-10-04-test']);
-  assert.deepEqual(p.opened, ['open', 'open']);
 });
 
 test('a ?note= link opens that doc on arrival, in any mode', async () => {
@@ -152,6 +147,145 @@ test('colours live in the sheets, and the panel and tool are styled there', () =
   // the hall pulls it in through style.css, ahead of every rule.
   const pn = fs.readFileSync(path.join(HALL, 'page-notes.css'), 'utf8');
   for (const sel of ['.pn {', '.pn__panel {', '.pn__text {', '.pn-doc__img {']) assert.ok(pn.includes(sel) && !css.includes(sel), sel);
+  // Task 1004771: the docked, scrimless look is the review panel's alone
+  // (.pn--dock). The lightbulb rides plain .pn and keeps its scrim and its
+  // scroll lock, so docking the review panel cannot quietly change it.
+  assert.match(pn, /html\.pn-open \{ overflow: hidden; \}/, 'the lightbulb keeps its scroll lock');
+  assert.match(pn, /\.pn \{[^}]*inset: 0;[^}]*background: var\(--pn-scrim\);/, 'and its scrim');
+  assert.match(pn, /\.pn\.pn--dock \{[^}]*background: none;/, 'the docked review panel drops both');
+  assert.match(NOTES, /sheet\.className = docked \? 'pn pn--dock' : 'pn';/, 'and only a docked review panel wears it');
+  const bulb = fs.readFileSync(path.join(HALL, 'lightbulb.js'), 'utf8');
+  assert.doesNotMatch(bulb, /pn--dock/, 'the lightbulb does not');
   const at = css.indexOf('@import url("page-notes.css");');
   assert.ok(at !== -1 && at < css.indexOf('{'), 'style.css imports the sheet before any rule');
 });
+
+// ---------- the docked panel, REAL page-notes.js (task 1004771) ----------
+// A small DOM that runs the real sheet: querySelector hands back one cached
+// fake per selector, so the tab, the X and the mode row are real listeners.
+function dockedPanel({ reviewing = null, opened = false } = {}) {
+  const calls = [];
+  let sheet = null;
+  const fake = (name) => {
+    const attrs = {}, listeners = {}, classes = new Set();
+    const kids = {};
+    const el = {
+      name, innerHTML: '', parentNode: null, id: '', className: '',
+      setAttribute(k, v) { attrs[k] = String(v); }, getAttribute(k) { return k in attrs ? attrs[k] : null; },
+      hasAttribute(k) { return k in attrs; }, removeAttribute(k) { delete attrs[k]; },
+      classList: { add: (c) => classes.add(c), remove: (c) => classes.delete(c), contains: (c) => classes.has(c),
+        toggle: (c, on) => { if (on === undefined) on = !classes.has(c); if (on) classes.add(c); else classes.delete(c); return on; } },
+      addEventListener(t, fn) { (listeners[t] ||= []).push(fn); },
+      fire(t, ev = {}) { (listeners[t] || []).forEach((fn) => fn({ target: el, preventDefault() {}, ...ev })); },
+      querySelector(sel) { return (kids[sel] ||= Object.assign(fake(sel), { parentNode: el })); },
+      querySelectorAll() { return []; },
+      contains(n) { for (let x = n; x; x = x.parentNode) if (x === el) return true; return false; },
+      focus() { document.activeElement = el; },
+    };
+    return el;
+  };
+  const body = fake('body');
+  body.appendChild = (c) => { c.parentNode = body; return c; };
+  body.removeChild = (c) => { c.parentNode = null; return c; };
+  body.dataset = { page: 'studio', pageTitle: 'Studio' };
+  const docKeys = [];
+  const document = {
+    body, activeElement: null, title: 'Studio — hall', documentElement: fake('html'),
+    createElement: () => (sheet = fake('div')),
+    addEventListener: (t, fn) => { if (t === 'keydown') docKeys.push(fn); },
+    removeEventListener() {},
+  };
+  const fetch = (url, opts) => {
+    calls.push(opts.method + ' ' + url);
+    return Promise.resolve({ ok: true, json: () => Promise.resolve({ note: { id: 9, status: 'draft', body_md: '' }, images: [], notes: [] }) });
+  };
+  const craft = {
+    reviewing: () => reviewing,
+    review: (id) => { reviewing = id; calls.push('review ' + id); },
+    stopReview: () => { reviewing = null; calls.push('stop'); },
+    experiences: () => [{ id: 'ideating', label: 'Ideator experience', short: 'Ideating' }, { id: 'building', label: 'Building experience', short: 'Building' }],
+    iconHtml: () => '<svg></svg>',
+  };
+  const window = { location: { pathname: '/studio' }, OTBCraftMode: craft };
+  const sandbox = { window, document, fetch, setTimeout, clearTimeout, Promise };
+  vm.createContext(sandbox);
+  vm.runInContext(NOTES, sandbox, { filename: 'page-notes.js' });
+  const api = window.OTBPageNotes;
+  if (opened) api.open(); else api.dock();
+  const press = (attr, value = '') => {
+    const btn = fake('button');
+    btn.setAttribute(attr, value);
+    sheet.fire('click', { target: { closest: () => btn } });
+  };
+  return { api, calls, document, docKeys, body, press, html: document.documentElement, get sheet() { return sheet; }, collapsed: () => sheet.classList.contains('pn--collapsed') };
+}
+
+test('DOCKED: it waits collapsed behind its tab and asks for no draft until it is first shown', async () => {
+  const p = dockedPanel();
+  await flush();
+  assert.ok(p.collapsed(), 'tucked away on arrival');
+  assert.equal(p.sheet.parentNode, p.body, 'but on the page, so its tab shows');
+  assert.deepEqual(p.calls, [], 'no request while nobody has looked');
+  p.sheet.querySelector('[data-pn-tab]').fire('pointerenter', { pointerType: 'mouse' });
+  await flush();
+  assert.ok(!p.collapsed(), 'a mouse on the tab opens it');
+  assert.ok(p.calls.some((c) => /^POST /.test(c)), 'and the draft opens the first time it is shown');
+  const drafts = p.calls.filter((c) => /^POST /.test(c)).length;
+  p.sheet.fire('pointerleave', { pointerType: 'mouse' });
+  assert.ok(p.collapsed(), 'leaving the panel for the page tucks it away');
+  p.sheet.querySelector('[data-pn-tab]').fire('pointerenter', { pointerType: 'mouse' });
+  await flush();
+  assert.equal(p.calls.filter((c) => /^POST /.test(c)).length, drafts, 'showing it again opens no second draft');
+});
+
+test('DOCKED: a touch never peeks, the tab click toggles, Escape and the X tuck it away and keep the tab', async () => {
+  const p = dockedPanel();
+  p.sheet.querySelector('[data-pn-tab]').fire('pointerenter', { pointerType: 'touch' });
+  assert.ok(p.collapsed(), 'a touch is not a hover');
+  p.press('data-pn-tab');
+  await flush();
+  assert.ok(!p.collapsed(), 'the tab click opens it (touch and keyboard)');
+  assert.equal(p.sheet.querySelector('[data-pn-tab]').getAttribute('aria-expanded'), 'true');
+  p.sheet.querySelector('[data-pn-close]').focus();
+  p.docKeys.forEach((fn) => fn({ key: 'Escape', preventDefault() {} }));
+  assert.ok(p.collapsed(), 'Escape inside the panel tucks it away');
+  assert.equal(p.sheet.querySelector('[data-pn-tab]').getAttribute('aria-expanded'), 'false');
+  p.press('data-pn-tab');
+  p.press('data-pn-close');
+  assert.ok(p.collapsed(), 'docked, the X tucks it away too');
+  assert.equal(p.sheet.parentNode, p.body, 'and leaves the tab on the page, the only way back in');
+  p.api.close();
+  assert.equal(p.sheet.parentNode, null, 'leaving Artistry (close) is what removes it');
+});
+
+test('THE MODE ROW names each mode in the mode switch word and starts a review on a press', () => {
+  const p = dockedPanel();
+  assert.match(p.sheet.innerHTML, /<span>Ideating<\/span>/, 'the switch says Ideating, so the row does');
+  assert.doesNotMatch(p.sheet.innerHTML, />Ideator</);
+  assert.doesNotMatch(p.sheet.innerHTML, /Stop reviewing/, 'no way out of a review that has not started');
+  p.press('data-pn-mode', 'building');
+  assert.ok(p.calls.includes('review building'));
+  assert.match(p.sheet.querySelector('#pn-modes').innerHTML, /data-pn-mode="building" aria-pressed="true"/, 'the row repaints with the live one pressed');
+  assert.match(p.sheet.querySelector('#pn-modes').innerHTML, /Stop reviewing/);
+  p.press('data-pn-mode', '');
+  assert.ok(p.calls.includes('stop'), 'Stop reviewing ends it');
+});
+
+test('OPENED, not docked (the public site Artist review button): the modal sheet it always was', async () => {
+  const p = dockedPanel({ opened: true });
+  await flush();
+  assert.equal(p.sheet.className, 'pn', 'no docked look: the scrim and full-viewport sheet stay');
+  assert.ok(p.html.classList.contains('pn-open'), 'the page behind is scroll-locked');
+  assert.match(p.sheet.innerHTML, /role="dialog" aria-modal="true"/);
+  assert.doesNotMatch(p.sheet.innerHTML, /data-pn-tab/, 'no tab');
+  assert.ok(p.calls.some((c) => /^POST /.test(c)), 'the draft opens straight away');
+  p.sheet.fire('pointerleave', { pointerType: 'mouse' });
+  assert.ok(!p.collapsed(), 'a pointer leaving does not tuck a modal sheet');
+  p.docKeys.forEach((fn) => fn({ key: 'Escape', preventDefault() {} }));
+  assert.equal(p.sheet.parentNode, null, 'Escape closes it');
+  assert.ok(!p.html.classList.contains('pn-open'), 'and lifts the scroll lock');
+  const q = dockedPanel({ opened: true });
+  const s = q.sheet;
+  s.fire('click', { target: s });
+  assert.equal(s.parentNode, null, 'a click on the scrim closes it');
+});