@bongos/core 1.21.164 → 1.21.165

package/modules/hall-ui/public/craft-mode.js

@@ -34,7 +34,6 @@
     governing: '<path d="M2 6 8 2.5 14 6M3.5 6.5v6M6.5 6.5v6M9.5 6.5v6M12.5 6.5v6M2 13.5h12"/>',
     brush: '<path d="M13.6 2.4 7.4 8.6"/><path d="M7.4 8.6c-1.3-.7-3-.1-3.4 1.5-.3 1.3-.8 2.2-1.9 2.9 2.4.7 4.6.1 5.6-1.4.6-.9.5-2.1-.3-3Z"/>',
     note: '<path d="M9.5 2.5h-6v11h9v-6"/><path d="M5.5 8h5M5.5 10.5h3.5"/><path d="M12.5 1.5v4M10.5 3.5h4"/>',
-    write: '<path d="M2.5 13.5h11"/><path d="M10.4 2.6l2.9 2.9-6.4 6.4H4V9z"/>',
     modes: '<rect x="2.5" y="2.5" width="4.5" height="4.5" rx="1"/><rect x="9" y="2.5" width="4.5" height="4.5" rx="1"/><rect x="2.5" y="9" width="4.5" height="4.5" rx="1"/><rect x="9" y="9" width="4.5" height="4.5" rx="1"/>',
   };
   // The four crafts. `short` is the switch's label; `line` is the
@@ -342,8 +341,9 @@
     artistry: [
       // Named "Artist review" since task 1004499: the public site's button
       // (public-landing assets/artist-review.js) opens this same panel.
-      // `menu`: hovering it opens the review-mode menu (task 1004686, below).
-      { id: 'palette', icon: 'artistry', short: 'Review', label: 'Artist review: write feedback on this page', script: 'page-notes.js', api: 'OTBPageNotes', menu: true },
+      // `docked` (task 1004771): no top-bar button. The panel itself sits on
+      // the right edge behind a small tab, and carries the review-mode choice.
+      { id: 'palette', icon: 'artistry', short: 'Review', label: 'Artist review: write feedback on this page', script: 'page-notes.js', api: 'OTBPageNotes', docked: true },
       // Task 1004497: this page's words, edited where they stand as a proposed wording change.
       { id: 'paintbrush', icon: 'brush', short: 'Edit words', label: 'Edit this page\'s words', script: 'paintbrush.js', api: 'OTBPaintbrush' },
     ],
@@ -393,21 +393,24 @@
     b.setAttribute('aria-label', t.label);
     b.title = t.label;
     b.innerHTML = icon(t.icon, 'craft-tool__icon') + '<span class="craft-tool__label">' + esc(t.short) + '</span>';
-    b.addEventListener('click', function (e) {
-      // A phone has no hover, so there a tap on Review opens its menu instead.
-      if (t.menu && narrow()) { toggleReviewMenu(e && e.detail === 0); return; }
-      openTool(t, b);
+    b.addEventListener('click', function () { openTool(t, b); });
+    return b;
+  }
+  function toolNode(t) { return document.getElementById('craft-tool-' + t.id); }
+  // A docked tool has no button: in its mode the panel is docked at the edge,
+  // out of it the panel goes. Only a tool already loaded needs closing.
+  function applyDocked(mode) {
+    var want = toolsFor(mode);
+    for (var m in TOOLS) TOOLS[m].forEach(function (t) {
+      if (!t.docked) return;
+      if (want.indexOf(t) !== -1) loadTool(t).then(function (api) { if (api.dock) api.dock(); }, function () { /* the page still works */ });
+      else if (window[t.api] && window[t.api].close) window[t.api].close();
     });
-    return t.menu ? reviewGroup(t, b) : b;
-  }
-  // The node a tool occupies in the bar: its button, or Review's whole group.
-  function toolNode(t) {
-    var b = document.getElementById('craft-tool-' + t.id);
-    return b && t.menu && b.parentNode && b.parentNode.id === REVIEW_GROUP ? b.parentNode : b;
   }
   function applyTools(mode) {
     var sw = document.getElementById('craft-switch');
-    var own = toolsFor(mode);
+    applyDocked(mode);
+    var own = toolsFor(mode).filter(function (t) { return !t.docked; });
     var old = document.querySelectorAll ? document.querySelectorAll('[data-craft-tool]') : [];
     for (var i = old.length - 1; i >= 0; i--) {
       if (own.some(function (t) { return t.id === old[i].getAttribute('data-craft-tool'); })) continue;
@@ -429,26 +432,19 @@
       var el = document.getElementById('craft-tool-' + t.id);
       if (el && el.classList) el.classList.toggle('craft-tool--guest', !!review && TOOLS.artistry.indexOf(t) === -1);
     });
-    var on = document.getElementById('craft-tool-palette');
-    if (on) {
-      on.classList.toggle('craft-tool--reviewing', !!review);
-      var word = on.querySelector && on.querySelector('.craft-tool__label');
-      if (word) word.textContent = review ? 'Reviewing' : 'Review';
-    }
   }
 
   // ---------- artist review mode (task 1004686) ----------
-  // Hovering Artistry's Review button opens a menu of the four experiences
-  // (owner, 2026-10-09, in the owner's order and words). Picking one makes the hall
+  // The review panel's Review mode row (page-notes.js, task 1004771) offers the four
+  // experiences (owner, 2026-10-09, in the owner's order and words). Picking one makes the hall
   // wear that mode on every page — its tabs, its look, its tools — the way a
   // builder in it sees it, while the artist keeps Artistry's tools and small
   // sky-style doodles are scribbled into the top bar's empty space (craft-review.js draws them,
-  // loaded only in review mode; craft-review.css styles it and the menu).
+  // loaded only in review mode; craft-review.css styles it).
   // The artist's own mode stays Artistry: the experience is this session's
   // alone (sessionStorage), and choosing any mode from the switch or the
   // picker ends it. Cosmetic like the mode: a tab the gate hides stays hidden.
   var REVIEW_KEY = 'hall-craft-review';
-  var REVIEW_GROUP = 'craft-review';
   var EXPERIENCES = [
     { id: 'ideating', label: 'Ideator experience' },
     { id: 'governing', label: 'Governing experience' },
@@ -478,138 +474,6 @@
     apply('artistry');
   }
 
-  // The menu. Hover opens it where a pointer can hover; the chevron (or, on a
-  // phone, Review itself) opens it by click, tap or keyboard. Built on every
-  // open, so the checked experience is always the live one.
-  var closeTimer = null;
-  // Hover is a mouse's alone: a touch also fires pointer events, and a laptop
-  // with a touch screen can report no hover at all, so ask the pointer itself.
-  function byMouse(e) { return !!e && e.pointerType === 'mouse'; }
-  function reviewMenuHtml() {
-    var items = '<button class="craft-review__item" type="button" role="menuitem" data-review-act="write">' +
-      icon('write', 'craft-review__icon') + '<span>Write feedback on this page</span></button>' +
-      '<p class="craft-review__head" role="presentation">Review mode</p>';
-    items += EXPERIENCES.map(function (x) {
-      var on = review === x.id;
-      return '<button class="craft-review__item" type="button" role="menuitemradio" aria-checked="' + (on ? 'true' : 'false') + '" data-review-pick="' + x.id + '">' +
-        icon(x.id, 'craft-review__icon') + '<span>' + esc(x.label) + '</span>' +
-        (on ? '<svg class="craft-review__check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7"/></svg>' : '') +
-        '</button>';
-    }).join('');
-    if (review) {
-      items += '<button class="craft-review__item craft-review__item--stop" type="button" role="menuitem" data-review-act="stop">' +
-        '<svg class="craft-review__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" aria-hidden="true"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7"/></svg><span>Stop reviewing</span></button>';
-    }
-    return items;
-  }
-  function menuEl() { return document.getElementById(REVIEW_GROUP + '-menu'); }
-  function menuItems() {
-    var m = menuEl();
-    return m && m.querySelectorAll ? Array.prototype.slice.call(m.querySelectorAll('[role^="menuitem"]')) : [];
-  }
-  function openReviewMenu(focusFirst) {
-    var m = menuEl(), more = document.getElementById(REVIEW_GROUP + '-more');
-    if (!m) return;
-    clearTimeout(closeTimer);
-    if (m.hasAttribute('hidden')) {
-      m.innerHTML = reviewMenuHtml();
-      m.removeAttribute('hidden');
-      if (more) more.setAttribute('aria-expanded', 'true');
-      document.addEventListener('click', onOutside, true);
-    }
-    if (focusFirst) {
-      var first = menuItems()[0];
-      if (first && first.focus) first.focus();
-    }
-  }
-  function closeReviewMenu(refocus) {
-    var m = menuEl(), more = document.getElementById(REVIEW_GROUP + '-more');
-    clearTimeout(closeTimer);
-    document.removeEventListener('click', onOutside, true);
-    if (!m || m.hasAttribute('hidden')) return;
-    m.setAttribute('hidden', '');
-    if (more) more.setAttribute('aria-expanded', 'false');
-    if (refocus) {
-      var back = narrow() ? document.getElementById('craft-tool-palette') : more;
-      if (back && back.focus) back.focus();
-    }
-  }
-  function toggleReviewMenu(focusFirst) {
-    var m = menuEl();
-    if (m && !m.hasAttribute('hidden')) closeReviewMenu(false); else openReviewMenu(focusFirst);
-  }
-  function onOutside(e) {
-    var g = document.getElementById(REVIEW_GROUP);
-    if (g && g.contains && !g.contains(e.target)) closeReviewMenu(false);
-  }
-  function onMenuClick(e) {
-    var btn = e.target.closest && e.target.closest('button');
-    if (!btn) return;
-    var pick = btn.getAttribute('data-review-pick');
-    var act = btn.getAttribute('data-review-act');
-    if (!pick && !act) return;
-    closeReviewMenu(false);
-    if (pick) startReview(pick);
-    else if (act === 'stop') stopReview();
-    else if (act === 'write') openTool(toolFor('palette'), document.getElementById('craft-tool-palette'));
-  }
-  // The menu keys: arrows move, Home and End jump, Escape closes back to the
-  // button that opened it, Tab closes and lets focus move on.
-  function onMenuKey(e) {
-    var items = menuItems();
-    var at = items.indexOf(document.activeElement);
-    var to = null;
-    if (e.key === 'ArrowDown') to = (at + 1) % items.length;
-    else if (e.key === 'ArrowUp') to = (at - 1 + items.length) % items.length;
-    else if (e.key === 'Home') to = 0;
-    else if (e.key === 'End') to = items.length - 1;
-    else if (e.key === 'Escape') { e.preventDefault(); closeReviewMenu(true); return; }
-    else if (e.key === 'Tab') { closeReviewMenu(false); return; }
-    if (to === null || !items[to]) return;
-    e.preventDefault();
-    items[to].focus();
-  }
-  function reviewGroup(t, b) {
-    var g = document.createElement('span');
-    g.id = REVIEW_GROUP;
-    g.className = 'craft-review';
-    var more = document.createElement('button');
-    more.type = 'button';
-    more.id = REVIEW_GROUP + '-more';
-    more.className = 'craft-review__more';
-    more.setAttribute('aria-haspopup', 'menu');
-    more.setAttribute('aria-expanded', 'false');
-    more.setAttribute('aria-controls', REVIEW_GROUP + '-menu');
-    more.setAttribute('aria-label', 'Review mode: see the hall as another mode');
-    more.title = 'Review mode: see the hall as another mode';
-    more.innerHTML = '<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4.5 6 7.5 9 4.5"/></svg>';
-    more.addEventListener('click', function (e) { toggleReviewMenu(e && e.detail === 0); });
-    more.addEventListener('keydown', function (e) {
-      if (e.key === 'ArrowDown') { e.preventDefault(); openReviewMenu(true); }
-    });
-    var menu = document.createElement('div');
-    menu.id = REVIEW_GROUP + '-menu';
-    menu.className = 'craft-review__menu';
-    menu.setAttribute('role', 'menu');
-    menu.setAttribute('aria-label', 'Review mode');
-    menu.setAttribute('hidden', '');
-    menu.addEventListener('click', onMenuClick);
-    menu.addEventListener('keydown', onMenuKey);
-    b.addEventListener('keydown', function (e) {
-      if (e.key === 'ArrowDown') { e.preventDefault(); openReviewMenu(true); }
-    });
-    g.addEventListener('pointerenter', function (e) { if (byMouse(e)) openReviewMenu(false); });
-    g.addEventListener('pointerleave', function (e) {
-      if (!byMouse(e)) return;
-      clearTimeout(closeTimer);
-      closeTimer = setTimeout(function () { closeReviewMenu(false); }, 220);
-    });
-    g.appendChild(b);
-    g.appendChild(more);
-    g.appendChild(menu);
-    return g;
-  }
-
   // The scribble wall: the top bar's empty space, doodled on while reviewing.
   // craft-review.js draws it (decorative, aria-hidden); every motion is CSS,
   // so the reduced-motion kill switch leaves three finished doodles standing.
@@ -637,7 +501,7 @@
     loadTool(wallTool).then(function (api) {
       var live = document.getElementById(WALL);
       if (live === wall && review === mode) wall.innerHTML = api.wallHtml(mode);
-    }, function () { /* a bare wall; the menu still says you are reviewing */ });
+    }, function () { /* a bare wall; the review panel's mode row still says which */ });
   }
   // sessionStorage: this session's mode, or that the picker was already shown.
   var MODE_KEY = 'hall-craft';
@@ -703,7 +567,7 @@
   function choose(mode, keep) {
     mode = valid(mode);
     if (!mode || !offered(mode)) return;
-    if (review) { drop('sessionStorage', REVIEW_KEY); review = null; closeReviewMenu(false); }
+    if (review) { drop('sessionStorage', REVIEW_KEY); review = null; }
     set('sessionStorage', MODE_KEY, mode);
     set('sessionStorage', ASKED_KEY, '1');
     if (keep === true) set('localStorage', KEEP_KEY, mode);
@@ -909,6 +773,16 @@
     review: startReview,
     stopReview: stopReview,
     EXPERIENCES: EXPERIENCES.map(function (x) { return x.id; }),
+    // The review panel's Review mode row (page-notes.js) draws the four
+    // experiences; `short` is the mode switch's own word for each, so the
+    // row and the switch never name one mode two ways.
+    experiences: function () {
+      return EXPERIENCES.map(function (x) {
+        var m = MODES.filter(function (y) { return y.id === x.id; })[0];
+        return { id: x.id, label: x.label, short: m ? m.short : x.label };
+      });
+    },
+    iconHtml: icon,
     open: openPicker,
     ALWAYS_TABS: ALWAYS_TABS.slice(),
     tabsFor: tabsFor,

package/modules/hall-ui/public/craft-review.css

@@ -1,10 +1,10 @@
-/* craft-review.css — artist review mode (task 1004686; craft-mode.js draws the
-   menu, craft-review.js the wall). Imported by style.css, beside page-notes.css.
+/* craft-review.css — artist review mode (task 1004686; craft-review.js draws
+   the wall). Imported by style.css, beside page-notes.css.
 
-   The Review button becomes a split pill: Review still opens the feedback doc,
-   and the chevron (or, where a pointer can hover, the whole pill) opens a menu
-   of the four experiences. While an artist reviews one, small black-and-white
-   doodles in the sky's hand are scribbled into the top bar's empty space.
+   The experience under review is picked in the review panel's own Review mode
+   row (page-notes.js, task 1004771); the top bar has no Review button any more.
+   While an artist reviews one, small black-and-white doodles in the sky's hand
+   are scribbled into the top bar's empty space.
 
    Every colour is a token (tests/hall_audit.mjs holds that). Every motion is
    CSS on transform and opacity, and the hall's reduced-motion kill switch
@@ -13,126 +13,13 @@
    An @import lands BEFORE style.css's own rules, so a rule here that restyles
    .craft-tool must out-rank it (two classes), or style.css silently wins. */
 
-/* ---------- the split pill ---------- */
-.craft-review {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-  border-radius: var(--radius-pill);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--craft, var(--ink)) 40%, transparent);
-}
-.craft-review > .craft-tool {
-  box-shadow: none;
-  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
-}
-.craft-review__more {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 32px;
-  padding: 0 4px 0 0;
-  border: 0;
-  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
-  background: none;
-  color: var(--craft, var(--ink-soft));
-  cursor: pointer;
-}
-.craft-review__more svg { width: 12px; height: 12px; transition: transform 200ms cubic-bezier(.2, .7, .3, 1); }
-.craft-review__more[aria-expanded="true"] svg { transform: rotate(180deg); }
-.craft-review__more:hover { background: color-mix(in srgb, var(--craft, var(--ink)) 12%, transparent); }
-.craft-review__more:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
-@media (min-width: 1181px) {
-  .craft-review > .craft-tool { padding-right: 6px; }
-}
-@media (max-width: 1180px) {
-  .craft-review > .craft-tool { width: 30px; }
-}
-
-/* Reviewing: the pill takes a wash of the experience's colour, says
-   "Reviewing", and a drop of wet paint hangs from it. */
-.craft-tool.craft-tool--reviewing { position: relative; background: color-mix(in srgb, var(--craft, var(--sea)) 14%, transparent); }
-.craft-tool.craft-tool--reviewing::after {
-  content: '';
-  position: absolute;
-  left: 13px;
-  bottom: -4px;
-  width: 4px;
-  height: 7px;
-  border-radius: 0 0 3px 3px;
-  background: var(--craft, var(--sea));
-}
-
-/* ---------- the menu ---------- */
-.craft-review__menu {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  z-index: var(--z-drawer);
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 248px;
-  padding: 6px;
-  box-sizing: border-box;
-  background: var(--bg-card);
-  border-radius: var(--radius);
-  box-shadow: 0 0 0 1px var(--glass-edge), var(--shadow-pop);
-}
-.craft-review__menu[hidden] { display: none; }
-/* A bridge over the gap, so a pointer travelling down to the menu never
-   leaves the pill and the hover menu does not close under it. */
-.craft-review__menu::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
-.craft-review__head {
-  margin: 8px 12px 2px;
-  font-family: var(--label-face);
-  font-size: 11px;
-  letter-spacing: .12em;
-  text-transform: uppercase;
-  color: var(--ink-faint);
-}
-.craft-review__item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-height: 36px;
-  padding: 0 12px;
-  border: 0;
-  border-radius: var(--radius-sm);
-  background: none;
-  color: var(--ink);
-  font: inherit;
-  font-size: 14px;
-  text-align: left;
-  white-space: nowrap;
-  cursor: pointer;
-}
-.craft-review__item:hover { background: color-mix(in srgb, var(--craft, var(--ink)) 10%, transparent); }
-.craft-review__item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
-.craft-review__icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-soft); }
-.craft-review__item[aria-checked="true"] { color: var(--craft, var(--ink)); font-weight: 500; }
-.craft-review__item[aria-checked="true"] .craft-review__icon { color: var(--craft, var(--ink)); }
-.craft-review__check { width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; }
-.craft-review__item--stop { margin-top: 4px; border-top: 1px solid var(--rule-soft); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
-
-/* A phone: no hover and no room for the chevron, so Review itself opens the
-   menu (craft-mode.js), and the menu spans the bar instead of hanging off a
-   pill that may sit near the left edge. */
-@media (max-width: 640px) {
-  .craft-review { position: static; }
-  .craft-review__more { display: none; }
-  .craft-review > .craft-tool { width: 28px; border-radius: var(--radius-pill); }
-  .craft-review__menu { top: calc(100% + 6px); left: 12px; right: 12px; min-width: 0; }
-  .craft-review__item { min-height: 44px; }
-}
 /* Under 360px the bar holds two tools, not three: reviewing Ideating, its
    own Ideas button folds away (craft-mode.js marks it a guest). */
 @media (max-width: 359px) { .craft-tool.craft-tool--guest { display: none; } }
 
 /* ---------- the scribble wall ---------- */
 /* The top bar's empty space, between the title and the controls. Where none
-   is left (a phone), the Review pill still says "Reviewing". */
+   is left (a phone), the review panel's mode row still says which. */
 .craft-graffiti {
   position: relative;
   flex: 1 1 0;

package/modules/hall-ui/public/page-notes.css

@@ -16,7 +16,9 @@
   --pn-glass: var(--glass, rgba(255, 255, 255, .08));
 }
 
-/* The page feedback doc: a sheet from the right over a scrim. */
+/* A sheet from the right over a scrim: the lightbulb's panel (lightbulb.js), and
+   the feedback doc wherever it is OPENED rather than docked (the public site's
+   Artist review button, artist-review.js). */
 html.pn-open { overflow: hidden; }
 .pn {
   position: fixed;
@@ -26,6 +28,67 @@ html.pn-open { overflow: hidden; }
   justify-content: flex-end;
   background: var(--pn-scrim);
 }
+/* The page feedback doc (.pn--dock, task 1004771): docked on the right with no
+   scrim and no scroll lock, so the reviewer keeps scrolling the page while
+   writing about it. A small tab on its left edge slides it away and back
+   (.pn--collapsed). */
+.pn.pn--dock {
+  inset: 0 0 0 auto;
+  display: block;
+  width: min(560px, calc(100% - 36px));
+  background: none;
+  transition: transform .25s ease;
+}
+.pn--collapsed { transform: translateX(100%); }
+/* Tucked away, the panel's controls leave the tab order once it has slid out. */
+.pn--collapsed .pn__panel { visibility: hidden; transition: visibility 0s .25s; }
+@media (prefers-reduced-motion: reduce) { .pn.pn--dock { transition: none; } }
+.pn__tab {
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  transform: translateY(-50%);
+  display: inline-flex; align-items: center; justify-content: center;
+  flex-direction: column; gap: 10px;
+  width: 36px; height: 96px; padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm, 8px) 0 0 var(--radius-sm, 8px);
+  background: var(--bg-card);
+  color: var(--craft, var(--ink));
+  box-shadow: 0 0 0 1px var(--craft, var(--rule)), var(--pn-shadow-pop);
+  cursor: pointer;
+}
+.pn__tab:hover { background: var(--pn-glass); }
+.pn__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.pn__tab-icon { width: 18px; height: 18px; }
+.pn__tab-chev { width: 12px; height: 12px; transition: transform .25s ease; }
+.pn--collapsed .pn__tab-chev { transform: rotate(180deg); }
+@media (prefers-reduced-motion: reduce) { .pn__tab-chev { transition: none; } }
+/* The Review mode row: which experience the hall wears while reviewed. */
+.pn__modes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
+.pn__modes-h {
+  width: 100%;
+  font-family: var(--label-face);
+  font-size: 11px;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.pn__mode {
+  display: inline-flex; align-items: center; gap: 6px;
+  min-height: 30px; padding: 0 12px;
+  border: 1px solid var(--rule);
+  border-radius: var(--radius-pill);
+  background: none;
+  color: var(--ink-soft);
+  font: inherit; font-size: 13px;
+  cursor: pointer;
+}
+.pn__mode:hover { color: var(--ink); background: var(--pn-glass); }
+.pn__mode[aria-pressed="true"] { color: var(--ink); border-color: var(--craft, var(--ink)); background: var(--pn-glass); }
+.pn__mode:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.pn__mode-icon { width: 14px; height: 14px; }
+.pn__mode--stop { border-style: dashed; }
 .pn__panel {
   position: relative;
   width: min(560px, 100%);

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

@@ -19,7 +19,7 @@
   var MAX_IMAGES = 8;
   var TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
 
-  var sheet = null, returnFocus = null, state = null, saveTimer = null, pollTimer = null;
+  var sheet = null, returnFocus = null, state = null, saveTimer = null, pollTimer = null, docked = false;
 
   function esc(s) {
     return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
@@ -101,11 +101,45 @@
   }
 
   // ---------- the sheet ----------
+  // The tab wears the Review button's own palette glyph (craft-mode.js ICONS
+  // artistry), drawn here too because the public site has no craft-mode.js.
+  var PALETTE_SVG = '<svg class="pn__tab-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+    '<path d="M8 2a6 6 0 1 0 0 12c.9 0 1.4-.6 1.4-1.3 0-.8-.6-1-.6-1.7 0-.6.5-1 1.2-1h1.6A2.4 2.4 0 0 0 14 7.6C14 4.5 11.3 2 8 2Z"/><path d="M5 6.2h.01M7.6 4.6h.01M10.4 5.2h.01M4.6 9h.01" stroke-width="2.2"/></svg>';
+  // The Review mode row: which experience the hall wears while the artist
+  // reviews it (craft-mode.js review mode). Hall only: the public site has no
+  // modes, so it draws nothing there.
+  function craft() { var c = window.OTBCraftMode; return c && c.experiences && c.review ? c : null; }
+  function modesHtml() {
+    var c = craft();
+    if (!c) return '';
+    var on = c.reviewing();
+    return '<div class="pn__modes" role="group" aria-label="Review mode">' +
+      '<span class="pn__modes-h">Review mode</span>' +
+      c.experiences().map(function (x) {
+        return '<button class="pn__mode" type="button" data-pn-mode="' + esc(x.id) + '" aria-pressed="' + (on === x.id ? 'true' : 'false') + '">' +
+          c.iconHtml(x.id, 'pn__mode-icon') + '<span>' + esc(x.short) + '</span></button>';
+      }).join('') +
+      (on ? '<button class="pn__mode pn__mode--stop" type="button" data-pn-mode="">Stop reviewing</button>' : '') +
+    '</div>';
+  }
+  function paintModes() {
+    var row = sheet && sheet.querySelector('#pn-modes');
+    if (row) row.innerHTML = modesHtml();
+  }
+  // Two shapes. Docked (dock(), the hall's artist mode, task 1004771): a
+  // non-modal region at the right edge behind a tab. Opened (open(), e.g. the
+  // public site's Artist review button): the modal sheet over a scrim it was.
   function shellHtml(p) {
-    return '<div class="pn__panel" role="dialog" aria-modal="true" aria-labelledby="pn-title">' +
+    return (docked
+      ? '<button class="pn__tab" type="button" data-pn-tab aria-expanded="true" aria-controls="pn-panel" aria-label="Hide the review panel">' +
+          PALETTE_SVG +
+          '<svg class="pn__tab-chev" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg></button>' +
+        '<div class="pn__panel" id="pn-panel" role="region" aria-labelledby="pn-title">'
+      : '<div class="pn__panel" role="dialog" aria-modal="true" aria-labelledby="pn-title">') +
       '<div class="pn__head">' +
         '<p class="pn__eyebrow">Artist review · ' + esc(p.title) + '</p>' +
         '<h2 class="pn__title" id="pn-title">What should this page be?</h2>' +
+        '<div id="pn-modes">' + modesHtml() + '</div>' +
         '<button class="pn__close" type="button" data-pn-close aria-label="Close">' +
           '<svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><path d="M5 5l8 8M13 5l-8 8"/></svg></button>' +
       '</div>' +
@@ -285,10 +319,18 @@
   }
 
   function onClick(e) {
-    if (e.target === sheet) { close(); return; }
+    if (!docked && e.target === sheet) { close(); return; }
     var btn = e.target.closest && e.target.closest('button');
     if (!btn) return;
-    if (btn.hasAttribute('data-pn-close')) close();
+    if (btn.hasAttribute('data-pn-tab')) toggle();
+    else if (btn.hasAttribute('data-pn-mode')) {
+      var c = craft(), id = btn.getAttribute('data-pn-mode');
+      if (c) { if (id) c.review(id); else c.stopReview(); }
+      paintModes();
+    }
+    // Docked, the X tucks the panel away like Escape: removing it would take
+    // the tab, the reviewer's only way back in, with it.
+    else if (btn.hasAttribute('data-pn-close')) { if (docked) toggle(true); else close(); }
     else if (btn.hasAttribute('data-pn-submit')) submit();
     else if (btn.hasAttribute('data-pn-note')) showNote(btn.getAttribute('data-pn-note'));
     else if (btn.hasAttribute('data-pn-back') || btn.hasAttribute('data-pn-new')) {
@@ -298,6 +340,13 @@
   }
   function onKey(e) {
     if (!sheet) return;
+    // Docked, the panel is not modal: the page behind it stays scrollable and
+    // reachable, and Escape inside it tucks it away behind its tab, draft kept.
+    if (docked) {
+      if (e.key === 'Escape' && sheet.contains(document.activeElement)) { e.preventDefault(); toggle(true); }
+      return;
+    }
+    // Opened, it is the modal sheet: Escape closes it, Tab stays inside it.
     if (e.key === 'Escape') { e.preventDefault(); close(); return; }
     if (e.key !== 'Tab') return;
     var f = Array.prototype.slice.call(sheet.querySelectorAll('button, textarea, input, a[href]')).filter(function (x) { return !x.disabled; });
@@ -305,20 +354,46 @@
     if (e.shiftKey && document.activeElement === f[0]) { e.preventDefault(); f[f.length - 1].focus(); }
     else if (!e.shiftKey && document.activeElement === f[f.length - 1]) { e.preventDefault(); f[0].focus(); }
   }
-  function mountSheet() {
+  // Slide the panel off the right edge, leaving only its tab, or bring it back.
+  // `quiet` (docking) moves no focus. A docked panel opens its draft only
+  // the first time it is shown, so artist mode costs no request until then.
+  function toggle(collapse, quiet) {
+    if (!sheet) return;
+    var on = typeof collapse === 'boolean' ? collapse : !sheet.classList.contains('pn--collapsed');
+    sheet.classList.toggle('pn--collapsed', on);
+    var tab = sheet.querySelector('[data-pn-tab]');
+    if (tab) {
+      tab.setAttribute('aria-expanded', on ? 'false' : 'true');
+      tab.setAttribute('aria-label', on ? 'Show the review panel' : 'Hide the review panel');
+      if (on && !quiet) tab.focus();
+    }
+    if (on) save();
+    else if (state.pending) { state.pending = false; openDraft(); }
+  }
+  // `dock` mounts the docked shape quietly (no focus moved); otherwise the modal sheet.
+  function mountSheet(dock) {
     if (sheet) return false;
-    returnFocus = document.activeElement;
+    docked = !!dock;
+    returnFocus = docked ? null : document.activeElement;
     state = { note: null, images: [], list: [] };
     sheet = document.createElement('div');
-    sheet.className = 'pn';
+    sheet.className = docked ? 'pn pn--dock' : 'pn';
     sheet.id = 'page-notes';
     sheet.innerHTML = shellHtml(page());
     sheet.addEventListener('click', onClick);
+    if (docked) {
+      // A mouse peeks (owner, 2026-10-23): over the tab the panel opens, and the
+      // moment the pointer leaves the panel it tucks away again, draft kept.
+      // Touch and keyboard keep the tab's click, which a hover cannot replace.
+      sheet.querySelector('[data-pn-tab]').addEventListener('pointerenter', function (e) { if (e.pointerType === 'mouse') toggle(false, true); });
+      sheet.addEventListener('pointerleave', function (e) { if (e.pointerType === 'mouse') toggle(true, true); });
+    } else {
+      document.documentElement.classList.add('pn-open');
+    }
     document.addEventListener('keydown', onKey, true);
     document.body.appendChild(sheet);
-    document.documentElement.classList.add('pn-open');
     var c = sheet.querySelector('[data-pn-close]');
-    if (c) c.focus();
+    if (c && !docked) c.focus();
     return true;
   }
   function close() {
@@ -328,14 +403,24 @@
     document.removeEventListener('keydown', onKey, true);
     if (sheet.parentNode) sheet.parentNode.removeChild(sheet);
     sheet = null;
+    docked = false;
     document.documentElement.classList.remove('pn-open');
     if (returnFocus && returnFocus.focus) { try { returnFocus.focus(); } catch (_) { /* gone */ } }
     returnFocus = null;
   }
 
   window.OTBPageNotes = {
-    open: function () { if (mountSheet()) openDraft(); },
-    openNote: function (id) { if (mountSheet()) refreshList().then(function () { return showNote(id); }); },
+    open: function () { if (mountSheet()) openDraft(); else if (docked) toggle(false); },
+    // Artist mode (craft-mode.js, task 1004771): the panel waits at the right
+    // edge, tucked behind its tab; already there, it repaints its mode row.
+    dock: function () {
+      if (mountSheet(true)) { state.pending = true; toggle(true, true); }
+      else paintModes();
+    },
+    openNote: function (id) {
+      if (!mountSheet() && docked) { state.pending = false; toggle(false); }
+      refreshList().then(function () { return showNote(id); });
+    },
     close: close,
     configure: configure,
     ideaHref: ideaHref,