@bongos/core 1.21.40 → 1.21.41

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

@@ -0,0 +1,320 @@
+// page-notes.js — the Artistry palette's feedback doc (task 1004496, goal
+// 1000095 WA6). Loaded on demand by craft-mode.js: when the palette button is
+// pressed (open) or a page arrives with ?note=N (openNote). Never on page load.
+//
+// A side sheet over the page: write a doc about THIS page (as long as it needs
+// to be), add reference images, and "Turn into ideas" — the server's AI split
+// files each point as its own idea under your name, and the doc stays as the
+// page's reference. Below the writing area, the page's earlier docs; each opens
+// in place. The draft saves as you type, so closing loses nothing.
+//
+// The walls are the server's (modules/page-notes): a draft is its author's, a
+// submitted doc is any signed-in builder's. This file only draws.
+(function () {
+  'use strict';
+
+  var API = '/api/bongos/page-notes';
+  var IMAGE_RE = /!\[([^\]\n]{0,120})\]\(\/api\/bongos\/page-notes\/images\/(\d{1,18})\)/g;
+  var MAX_IMAGE_BYTES = 4 * 1024 * 1024;
+  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;
+
+  function esc(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+    });
+  }
+  function page() {
+    var b = document.body || { dataset: {} };
+    var slug = String((b.dataset && b.dataset.page) || 'home').toLowerCase().replace(/[^a-z0-9_-]/g, '-').slice(0, 64) || 'home';
+    var title = (b.dataset && b.dataset.pageTitle) || String(document.title || '').split(/\s[—-]\s/)[0] || slug;
+    var path = String((window.location && window.location.pathname) || '/').replace(/[^A-Za-z0-9/_.-]/g, '').slice(0, 200) || '/';
+    return { id: 'builders:' + slug, path: path, title: title.slice(0, 120) };
+  }
+  function api(method, path, body) {
+    var opts = { method: method, credentials: 'same-origin', headers: {} };
+    if (body !== undefined) { opts.headers['content-type'] = 'application/json'; opts.body = JSON.stringify(body); }
+    return fetch(API + path, opts).then(function (r) {
+      return r.json().catch(function () { return {}; }).then(function (j) {
+        if (!r.ok) {
+          var e = new Error((j && j.error && j.error.message) || (r.status === 401 ? 'Sign in to write page feedback.' : 'That did not work. Try again in a moment.'));
+          e.status = r.status;
+          throw e;
+        }
+        return j;
+      });
+    });
+  }
+  function day(iso) {
+    var d = iso ? new Date(iso) : null;
+    return d && !isNaN(d) ? d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) : '';
+  }
+  function plural(n, one, many) { return n + ' ' + (n === 1 ? one : many); }
+
+  // The doc, read: headings, lists, paragraphs, and only this module's own images.
+  function renderBody(md) {
+    var out = [], para = [], list = [];
+    function flushPara() { if (para.length) { out.push('<p>' + para.join('<br>') + '</p>'); para = []; } }
+    function flushList() { if (list.length) { out.push('<ul>' + list.map(function (x) { return '<li>' + x + '</li>'; }).join('') + '</ul>'); list = []; } }
+    function inline(line) {
+      return esc(line).replace(IMAGE_RE, function (_m, alt, id) {
+        return '<img class="pn-doc__img" src="' + API + '/images/' + id + '" alt="' + alt + '" loading="lazy">';
+      });
+    }
+    String(md || '').split('\n').forEach(function (raw) {
+      var line = raw.replace(/\s+$/, '');
+      var h = /^(#{1,3})\s+(.*)$/.exec(line);
+      var li = /^\s*[-*]\s+(.*)$/.exec(line);
+      if (!line.trim()) { flushPara(); flushList(); return; }
+      if (h) { flushPara(); flushList(); out.push('<h3 class="pn-doc__h">' + inline(h[2]) + '</h3>'); return; }
+      if (li) { flushPara(); list.push(inline(li[1])); return; }
+      flushList();
+      para.push(inline(line));
+    });
+    flushPara(); flushList();
+    return out.join('');
+  }
+
+  // ---------- the sheet ----------
+  function shellHtml(p) {
+    return '<div class="pn__panel" role="dialog" aria-modal="true" aria-labelledby="pn-title">' +
+      '<div class="pn__head">' +
+        '<p class="pn__eyebrow">Page feedback · ' + esc(p.title) + '</p>' +
+        '<h2 class="pn__title" id="pn-title">What should this page be?</h2>' +
+        '<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>' +
+      '<div class="pn__body" id="pn-body"><p class="pn__quiet">Opening your doc…</p></div>' +
+    '</div>';
+  }
+  function writeHtml() {
+    var n = state.note, imgs = state.images;
+    return '<label class="pn__label" for="pn-text">Your feedback</label>' +
+      '<textarea class="pn__text" id="pn-text" rows="14" placeholder="Write what you see on this page and what it should be. Long is fine: each separate point becomes its own idea.">' + esc(n.body_md) + '</textarea>' +
+      '<div class="pn__tools">' +
+        '<label class="pn__add"><input type="file" id="pn-file" accept="' + TYPES.join(',') + '" multiple>Add images</label>' +
+        '<span class="pn__quiet" id="pn-count">' + imgs.length + ' of ' + MAX_IMAGES + ' images</span>' +
+        '<span class="pn__quiet pn__saved" id="pn-saved" aria-live="polite"></span>' +
+      '</div>' +
+      (imgs.length ? '<div class="pn__thumbs">' + imgs.map(function (i) {
+        return '<img class="pn__thumb" src="' + esc(i.url) + '" alt="' + esc(i.name || 'reference image') + '">';
+      }).join('') + '</div>' : '') +
+      '<p class="pn__error" id="pn-error" role="alert"></p>' +
+      '<div class="pn__foot">' +
+        '<p class="pn__hint">When you submit, an AI splits this into separate ideas, filed under your name. The doc stays here as this page\'s reference.</p>' +
+        '<button class="pn__submit" type="button" data-pn-submit>Turn into ideas</button>' +
+      '</div>' +
+      listHtml();
+  }
+  function listHtml() {
+    var rows = state.list || [];
+    return '<section class="pn__list" aria-labelledby="pn-list-h"><h3 class="pn__list-h" id="pn-list-h">This page\'s reference docs</h3>' +
+      (rows.length ? '<ul class="pn__rows">' + rows.map(function (r) {
+        return '<li><button class="pn__row" type="button" data-pn-note="' + esc(r.id) + '">' +
+          '<span class="pn__row-meta">' + esc(r.author_name) + ' · ' + esc(day(r.submitted_at)) + ' · ' +
+            (r.status === 'filed' ? esc(plural(r.idea_count, 'idea', 'ideas')) : 'splitting…') + '</span>' +
+          '<span class="pn__row-text">' + esc(String(r.excerpt || '').replace(IMAGE_RE, '[image]').replace(/\s+/g, ' ').slice(0, 160)) + '</span>' +
+        '</button></li>';
+      }).join('') + '</ul>' : '<p class="pn__quiet">None yet. Yours will be the first.</p>') +
+    '</section>';
+  }
+  function ideasHtml(ideas) {
+    if (!ideas || !ideas.length) return '';
+    return '<ul class="pn__ideas">' + ideas.map(function (i) {
+      return '<li><a href="/#/idea/' + esc(i.id) + '">' + esc(i.title) + '</a></li>';
+    }).join('') + '</ul>';
+  }
+  function readHtml(doc) {
+    var n = doc.note;
+    var filed = n.status === 'filed';
+    return '<button class="pn__back" type="button" data-pn-back>← ' + (state && state.note ? 'Back to your doc' : 'This page\'s docs') + '</button>' +
+      '<p class="pn__row-meta">' + esc(n.author_name) + ' · ' + esc(day(n.submitted_at)) + ' · ' + esc(n.page_title || n.page_id) + '</p>' +
+      '<div class="pn-doc">' + renderBody(n.body_md) + '</div>' +
+      (filed
+        ? '<h3 class="pn__list-h">It became ' + esc(plural(doc.ideas.length, 'idea', 'ideas')) + '</h3>' + ideasHtml(doc.ideas)
+        : '<p class="pn__quiet">Being split into ideas…</p>');
+  }
+  function doneHtml(doc) {
+    return '<p class="pn__done">Filed as ' + esc(plural(doc.ideas.length, 'idea', 'ideas')) + ' under your name.</p>' +
+      ideasHtml(doc.ideas) +
+      '<p class="pn__hint">The doc is now this page\'s reference. Every idea links back to it.</p>' +
+      '<button class="pn__back" type="button" data-pn-new>Write another</button>';
+  }
+
+  function body() { return sheet && sheet.querySelector('#pn-body'); }
+  function setError(msg) { var e = sheet && sheet.querySelector('#pn-error'); if (e) e.textContent = msg || ''; }
+  function setSaved(msg) { var e = sheet && sheet.querySelector('#pn-saved'); if (e) e.textContent = msg || ''; }
+
+  function setTitle(text) { var h = sheet && sheet.querySelector('#pn-title'); if (h) h.textContent = text; }
+  function showWrite() {
+    var b = body();
+    if (!b) return;
+    setTitle('What should this page be?');
+    b.innerHTML = writeHtml();
+    var t = b.querySelector('#pn-text');
+    if (t) { t.addEventListener('input', queueSave); t.focus(); }
+    var f = b.querySelector('#pn-file');
+    if (f) f.addEventListener('change', function () { addImages(Array.prototype.slice.call(f.files || [])); f.value = ''; });
+  }
+  function currentText() { var t = sheet && sheet.querySelector('#pn-text'); return t ? t.value : (state && state.note ? state.note.body_md : ''); }
+  function queueSave() {
+    setSaved('');
+    if (saveTimer) clearTimeout(saveTimer);
+    saveTimer = setTimeout(save, 700);
+  }
+  function save() {
+    if (saveTimer) { clearTimeout(saveTimer); saveTimer = null; }
+    if (!state || !state.note || state.note.status !== 'draft') return Promise.resolve();
+    var text = currentText();
+    if (text === state.note.body_md) return Promise.resolve();
+    return api('PATCH', '/' + state.note.id, { body_md: text }).then(function () {
+      state.note.body_md = text;
+      setSaved('Saved');
+    }, function (e) { setError(e.message); });
+  }
+  function readFile(file) {
+    return new Promise(function (resolve, reject) {
+      var r = new FileReader();
+      r.onload = function () { resolve(String(r.result || '')); };
+      r.onerror = function () { reject(new Error('That file could not be read.')); };
+      r.readAsDataURL(file);
+    });
+  }
+  function addImages(files) {
+    setError('');
+    var chain = Promise.resolve();
+    files.forEach(function (file) {
+      chain = chain.then(function () {
+        if (TYPES.indexOf(file.type) === -1) throw new Error('Images only: PNG, JPG, GIF or WebP.');
+        if (file.size > MAX_IMAGE_BYTES) throw new Error('Each image can be up to 4 MB.');
+        if (state.images.length >= MAX_IMAGES) throw new Error('A doc can carry up to ' + MAX_IMAGES + ' images.');
+        return readFile(file).then(function (data) {
+          return api('POST', '/' + state.note.id + '/images', { content_type: file.type, data: data, name: String(file.name || '').slice(0, 120) });
+        }).then(function (j) {
+          state.images.push(j.image);
+          var name = String(j.image.name || 'image').replace(/[\]\[()]/g, '');
+          var t = sheet.querySelector('#pn-text');
+          var text = t ? t.value : '';
+          var at = t && typeof t.selectionStart === 'number' ? t.selectionStart : text.length;
+          var md = (at && text[at - 1] !== '\n' ? '\n' : '') + '![' + name + '](' + j.image.url + ')\n';
+          state.note.body_md = text;
+          var next = text.slice(0, at) + md + text.slice(at);
+          return api('PATCH', '/' + state.note.id, { body_md: next }).then(function () {
+            state.note.body_md = next;
+            showWrite();
+            setSaved('Saved');
+          });
+        });
+      });
+    });
+    chain.catch(function (e) { setError(e.message); });
+  }
+  function submit() {
+    setError('');
+    var btn = sheet.querySelector('[data-pn-submit]');
+    if (btn) btn.disabled = true;
+    save().then(function () {
+      return api('POST', '/' + state.note.id + '/submit');
+    }).then(function () {
+      var b = body();
+      if (b) b.innerHTML = '<p class="pn__done" aria-live="polite">Splitting your feedback into ideas…</p>';
+      poll(state.note.id, 0);
+    }, function (e) { if (btn) btn.disabled = false; setError(e.message); });
+  }
+  function poll(id, tries) {
+    pollTimer = setTimeout(function () {
+      api('GET', '/' + id).then(function (doc) {
+        if (!sheet) return;
+        if (doc.note.status === 'filed') { state.note = null; body().innerHTML = doneHtml(doc); refreshList(); return; }
+        if (tries < 60) poll(id, tries + 1);
+        else body().innerHTML = '<p class="pn__quiet">Still splitting. It will appear in this page\'s docs when it is done.</p>';
+      }, function () { if (tries < 60) poll(id, tries + 1); });
+    }, tries ? 2000 : 1200);
+  }
+  function refreshList() {
+    return api('GET', '?page_id=' + encodeURIComponent(page().id)).then(function (j) { if (state) state.list = j.notes || []; }, function () { /* the list is a convenience */ });
+  }
+  function openDraft() {
+    var p = page();
+    return Promise.all([
+      api('POST', '', { page_id: p.id, page_path: p.path, page_title: p.title }),
+      refreshList(),
+    ]).then(function (r) {
+      state.note = r[0].note;
+      state.images = r[0].images || [];
+      showWrite();
+    }, function (e) {
+      var b = body();
+      if (b) b.innerHTML = '<p class="pn__error" role="alert">' + esc(e.message) + '</p>';
+    });
+  }
+  function showNote(id) {
+    var b = body();
+    setTitle('Feedback on this page');
+    if (b) b.innerHTML = '<p class="pn__quiet">Opening the doc…</p>';
+    return save().then(function () { return api('GET', '/' + id); }).then(function (doc) {
+      if (b) { b.innerHTML = readHtml(doc); var back = b.querySelector('[data-pn-back]'); if (back) back.focus(); }
+    }, function (e) {
+      if (b) b.innerHTML = '<p class="pn__error" role="alert">' + esc(e.message) + '</p><button class="pn__back" type="button" data-pn-back>← Back</button>';
+    });
+  }
+
+  function onClick(e) {
+    if (e.target === sheet) { close(); return; }
+    var btn = e.target.closest && e.target.closest('button');
+    if (!btn) return;
+    if (btn.hasAttribute('data-pn-close')) 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')) {
+      if (state.note && !btn.hasAttribute('data-pn-new')) showWrite();
+      else { body().innerHTML = '<p class="pn__quiet">Opening your doc…</p>'; openDraft(); }
+    }
+  }
+  function onKey(e) {
+    if (!sheet) return;
+    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; });
+    if (!f.length) return;
+    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() {
+    if (sheet) return false;
+    returnFocus = document.activeElement;
+    state = { note: null, images: [], list: [] };
+    sheet = document.createElement('div');
+    sheet.className = 'pn';
+    sheet.id = 'page-notes';
+    sheet.innerHTML = shellHtml(page());
+    sheet.addEventListener('click', onClick);
+    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();
+    return true;
+  }
+  function close() {
+    if (!sheet) return;
+    save();
+    if (pollTimer) { clearTimeout(pollTimer); pollTimer = null; }
+    document.removeEventListener('keydown', onKey, true);
+    if (sheet.parentNode) sheet.parentNode.removeChild(sheet);
+    sheet = null;
+    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); }); },
+    close: close,
+    renderBody: renderBody,
+    page: page,
+  };
+})();

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

@@ -115,9 +115,9 @@
 
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
-<script src="/builders/shell-trail.js?v=2026-10-03-looks"></script>
-<script src="/builders/craft-mode.js?v=2026-10-03-looks"></script>
-<script src="/builders/shell.js?v=2026-10-03-looks"></script>
+<script src="/builders/shell-trail.js?v=2026-10-04-palette"></script>
+<script src="/builders/craft-mode.js?v=2026-10-04-palette"></script>
+<script src="/builders/shell.js?v=2026-10-04-palette"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <!-- the shared markdown reader (window.OTBMdReader) — primer.js renders through

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

@@ -206,9 +206,9 @@
 
 <!-- The app shell (sidebar + top bar). Dependency-free; loaded FIRST so the
      chrome exists before the page script runs. -->
-<script src="/builders/shell-trail.js?v=2026-10-03-looks"></script>
-<script src="/builders/craft-mode.js?v=2026-10-03-looks"></script>
-<script src="/builders/shell.js?v=2026-10-03-looks"></script>
+<script src="/builders/shell-trail.js?v=2026-10-04-palette"></script>
+<script src="/builders/craft-mode.js?v=2026-10-04-palette"></script>
+<script src="/builders/shell.js?v=2026-10-04-palette"></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 profile.js, which pulls from it. -->

package/modules/hall-ui/public/project-settings.html

@@ -58,9 +58,9 @@
 
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
-<script src="/builders/shell-trail.js?v=2026-10-03-looks"></script>
-<script src="/builders/craft-mode.js?v=2026-10-03-looks"></script>
-<script src="/builders/shell.js?v=2026-10-03-looks"></script>
+<script src="/builders/shell-trail.js?v=2026-10-04-palette"></script>
+<script src="/builders/craft-mode.js?v=2026-10-04-palette"></script>
+<script src="/builders/shell.js?v=2026-10-04-palette"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-16-gate"></script>

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

@@ -77,9 +77,9 @@
 
 <!-- The app shell (sidebar + top bar). Dependency-free; loaded FIRST so the
      chrome exists before the page script runs. -->
-<script src="/builders/shell-trail.js?v=2026-10-03-looks"></script>
-<script src="/builders/craft-mode.js?v=2026-10-03-looks"></script>
-<script src="/builders/shell.js?v=2026-10-03-looks"></script>
+<script src="/builders/shell-trail.js?v=2026-10-04-palette"></script>
+<script src="/builders/craft-mode.js?v=2026-10-04-palette"></script>
+<script src="/builders/shell.js?v=2026-10-04-palette"></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 ranks.js, which pulls from it. -->

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

@@ -41,9 +41,9 @@
 
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
-<script src="/builders/shell-trail.js?v=2026-10-03-looks"></script>
-<script src="/builders/craft-mode.js?v=2026-10-03-looks"></script>
-<script src="/builders/shell.js?v=2026-10-03-looks"></script>
+<script src="/builders/shell-trail.js?v=2026-10-04-palette"></script>
+<script src="/builders/craft-mode.js?v=2026-10-04-palette"></script>
+<script src="/builders/shell.js?v=2026-10-04-palette"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-14-domutils"></script>

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

@@ -53,9 +53,9 @@
 
 <!-- The app shell (sidebar + top bar). Dependency-free; loaded FIRST so the
      chrome exists before the page script runs. -->
-<script src="/builders/shell-trail.js?v=2026-10-03-looks"></script>
-<script src="/builders/craft-mode.js?v=2026-10-03-looks"></script>
-<script src="/builders/shell.js?v=2026-10-03-looks"></script>
+<script src="/builders/shell-trail.js?v=2026-10-04-palette"></script>
+<script src="/builders/craft-mode.js?v=2026-10-04-palette"></script>
+<script src="/builders/shell.js?v=2026-10-04-palette"></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 — rank labels, number formats) + the

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

@@ -111,9 +111,9 @@
 
 <!-- The app shell (sidebar + top bar). Dependency-free; loaded FIRST so the
      chrome exists before the page script runs. -->
-<script src="/builders/shell-trail.js?v=2026-10-03-looks"></script>
-<script src="/builders/craft-mode.js?v=2026-10-03-looks"></script>
-<script src="/builders/shell.js?v=2026-10-03-looks"></script>
+<script src="/builders/shell-trail.js?v=2026-10-04-palette"></script>
+<script src="/builders/craft-mode.js?v=2026-10-04-palette"></script>
+<script src="/builders/shell.js?v=2026-10-04-palette"></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 sessions.js so it can pull from it. -->

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

@@ -435,9 +435,9 @@
 
 <!-- The app shell (sidebar + top bar). Dependency-free; loaded FIRST so the
      chrome exists before the page scripts run. -->
-<script src="/builders/shell-trail.js?v=2026-10-03-looks"></script>
-<script src="/builders/craft-mode.js?v=2026-10-03-looks"></script>
-<script src="/builders/shell.js?v=2026-10-03-looks"></script>
+<script src="/builders/shell-trail.js?v=2026-10-04-palette"></script>
+<script src="/builders/craft-mode.js?v=2026-10-04-palette"></script>
+<script src="/builders/shell.js?v=2026-10-04-palette"></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 consuming IIFEs. -->

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

@@ -203,9 +203,9 @@
   </div>
 </div>
 
-<script src="/builders/shell-trail.js?v=2026-10-03-looks"></script>
-<script src="/builders/craft-mode.js?v=2026-10-03-looks"></script>
-<script src="/builders/shell.js?v=2026-10-03-looks"></script>
+<script src="/builders/shell-trail.js?v=2026-10-04-palette"></script>
+<script src="/builders/craft-mode.js?v=2026-10-04-palette"></script>
+<script src="/builders/shell.js?v=2026-10-04-palette"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/city-draw.js?v=2026-10-02-street1"></script>
 <script src="/builders/street-draw.js?v=2026-10-02-street1"></script>

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

@@ -176,9 +176,9 @@
 
 <div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
 
-<script src="/builders/shell-trail.js?v=2026-10-03-looks"></script>
-<script src="/builders/craft-mode.js?v=2026-10-03-looks"></script>
-<script src="/builders/shell.js?v=2026-10-03-looks"></script>
+<script src="/builders/shell-trail.js?v=2026-10-04-palette"></script>
+<script src="/builders/craft-mode.js?v=2026-10-04-palette"></script>
+<script src="/builders/shell.js?v=2026-10-04-palette"></script>
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-23-contrib"></script>
 <!-- The kit, for its ONE renderer: the full-size ship-time visual figure

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

@@ -1550,6 +1550,150 @@ html[data-theme="light"][data-craft="ideating"] .app-sidebar {
     radial-gradient(1.5px 1.5px at 170px 260px, rgba(184, 137, 28, .25), transparent);
 }
 
+/* THE MODE TOOLS (task 1004496, craft-mode.js TOOLS): a round button beside the
+   switch, in the mode's colour, shown only in its own mode. Artistry's palette
+   opens the page feedback doc (page-notes.js). */
+.craft-tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px; height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: none;
+  color: var(--craft, var(--ink-soft));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--craft, var(--ink)) 40%, transparent);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.craft-tool:hover { background: color-mix(in srgb, var(--craft, var(--ink)) 12%, transparent); }
+.craft-tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.craft-tool[aria-disabled="true"] { opacity: .45; cursor: default; }
+.craft-tool__icon { width: 16px; height: 16px; flex-shrink: 0; }
+/* With room, the tool says what it does, so it cannot be read as the mode's own
+   pill (same palette glyph); under 1180px it folds to the icon, as the switch does. */
+.craft-tool__label { font-size: 13px; white-space: nowrap; }
+@media (min-width: 1181px) {
+  .craft-tool { width: auto; gap: 6px; padding: 0 12px 0 10px; }
+}
+@media (max-width: 1180px) { .craft-tool__label { display: none; } }
+
+/* The page feedback doc: a sheet from the right over a scrim. */
+html.pn-open { overflow: hidden; }
+.pn {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal);
+  display: flex;
+  justify-content: flex-end;
+  background: var(--scrim);
+}
+.pn__panel {
+  position: relative;
+  width: min(560px, 100%);
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-card);
+  color: var(--ink);
+  box-shadow: 0 0 0 1px var(--glass-edge), var(--shadow-pop);
+}
+.pn__head { position: relative; padding: 22px 64px 14px 24px; border-bottom: 1px solid var(--rule-soft); }
+.pn__eyebrow {
+  margin: 0 0 6px;
+  font-family: var(--label-face);
+  font-size: 11px;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  color: var(--craft, var(--ink-faint));
+}
+.pn__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: -0.02em; }
+.pn__close {
+  position: absolute; top: 14px; right: 14px;
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-pill);
+  background: none; color: var(--ink-soft); cursor: pointer;
+}
+.pn__close svg { width: 18px; height: 18px; }
+.pn__close:hover { color: var(--ink); background: var(--glass); }
+.pn__body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 28px; display: flex; flex-direction: column; gap: 12px; }
+.pn__label { font-size: 13px; color: var(--ink-soft); }
+.pn__text {
+  width: 100%;
+  min-height: 260px;
+  box-sizing: border-box;
+  padding: 14px 16px;
+  border: 1px solid var(--rule);
+  border-radius: var(--radius-sm);
+  background: var(--bg);
+  color: var(--ink);
+  font: inherit;
+  font-size: 15px;
+  line-height: 1.55;
+  resize: vertical;
+}
+.pn__text:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
+.pn__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
+.pn__add {
+  position: relative;
+  display: inline-flex; align-items: center;
+  min-height: 34px; padding: 0 14px;
+  border-radius: var(--radius-pill);
+  box-shadow: inset 0 0 0 1px var(--rule);
+  font-size: 13.5px; color: var(--ink); cursor: pointer;
+}
+.pn__add:hover { background: var(--glass); }
+.pn__add:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
+.pn__add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
+.pn__quiet { margin: 0; font-size: 13px; color: var(--ink-faint); }
+.pn__saved { margin-left: auto; }
+.pn__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
+.pn__thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--bg-deep); }
+.pn__error { margin: 0; font-size: 13.5px; color: var(--danger); }
+.pn__error:empty { display: none; }
+.pn__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 4px; }
+.pn__hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
+.pn__foot .pn__hint { flex: 1 1 240px; }
+.pn__submit {
+  min-height: 40px; padding: 0 20px; border: 0; border-radius: var(--radius-pill);
+  background: var(--accent); color: var(--accent-on); font: inherit; font-weight: 500; cursor: pointer;
+}
+.pn__submit:hover { background: var(--accent-lift); }
+.pn__submit:disabled { opacity: .55; cursor: default; }
+.pn__submit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.pn__list { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
+.pn__list-h {
+  margin: 0 0 8px;
+  font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space);
+  text-transform: var(--label-case); color: var(--ink-faint); font-weight: 400;
+}
+.pn__rows, .pn__ideas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
+.pn__row {
+  display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--radius-sm);
+  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
+}
+.pn__row:hover { background: var(--glass); }
+.pn__row:focus-visible, .pn__back:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.pn__row-meta { font-size: 12px; color: var(--ink-faint); }
+.pn__row-text { font-size: 14px; color: var(--ink-soft); }
+.pn__ideas a { display: inline-block; padding: 6px 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
+.pn__back {
+  align-self: flex-start; min-height: 32px; padding: 0 12px; margin-left: -12px; border: 0;
+  border-radius: var(--radius-pill); background: none; color: var(--ink-soft); font: inherit; font-size: 13.5px; cursor: pointer;
+}
+.pn__back:hover { color: var(--ink); background: var(--glass); }
+.pn__done { margin: 0; font-size: 16px; }
+.pn-doc { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
+.pn-doc p, .pn-doc ul { margin: 0 0 12px; }
+.pn-doc__h { margin: 16px 0 6px; font-size: 16px; font-weight: 500; }
+.pn-doc__img { display: block; max-width: 100%; height: auto; margin: 8px 0; border-radius: 8px; }
+@media (max-width: 640px) {
+  .pn__head { padding: 18px 60px 12px 16px; }
+  .pn__body { padding: 14px 16px 24px; }
+}
+
 /* THE BACK LINK (task 1004430): at the head of the bar when the page was
    reached from inside another hall page. 24px floor on both axes. */
 .topbar-back {

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

@@ -54,9 +54,9 @@
 
 <!-- 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-trail.js?v=2026-10-03-looks"></script>
-<script src="/builders/craft-mode.js?v=2026-10-03-looks"></script>
-<script src="/builders/shell.js?v=2026-10-03-looks"></script>
+<script src="/builders/shell-trail.js?v=2026-10-04-palette"></script>
+<script src="/builders/craft-mode.js?v=2026-10-04-palette"></script>
+<script src="/builders/shell.js?v=2026-10-04-palette"></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 task.js can pull from it. -->

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

@@ -138,9 +138,9 @@
   </div>
 </div>
 
-<script src="/builders/shell-trail.js?v=2026-10-03-looks"></script>
-<script src="/builders/craft-mode.js?v=2026-10-03-looks"></script>
-<script src="/builders/shell.js?v=2026-10-03-looks"></script>
+<script src="/builders/shell-trail.js?v=2026-10-04-palette"></script>
+<script src="/builders/craft-mode.js?v=2026-10-04-palette"></script>
+<script src="/builders/shell.js?v=2026-10-04-palette"></script>
 <script src="/builders/palette.js" defer></script>
 
 <script src="/builders/idea-objects.js?v=2026-09-27-split"></script>