@bongos/core 1.24.29 → 1.24.31

package/modules/hall-ui/public/home-gallery.js

@@ -0,0 +1,349 @@
+// modules/hall-ui/public/home-gallery.js — the artist's Home: a bench in the museum
+// (task 1005060, Home v16 step 3; mock docs/design/mocks/hall/home/v16-artistry.html,
+// record modules/hall-ui/records/home-city.md § "The gallery").
+//
+// In Artistry, Home is not the city: it is a seat on a bench in the city's art museum,
+// facing a quiet wall. One signed work hangs at a time; swipe, drag, the arrows or the
+// arrow keys move along the wall. Most popular first (the default), or Latest. Each
+// work is labelled the way a museum labels a wall — small, at the work's foot, opening
+// closer on a click — with the artist's signature in their hand on the wall under it
+// and one heart that never changes size. Full screen (the button or F) is the art
+// alone, its signature and heart. "The full gallery" hangs every work at once.
+//
+// The owner's rule is the whole design: "not about quality but about appreciation".
+// So a work shows how many builders appreciated it only in its credit line, and
+// nothing here ranks a person.
+//
+// It is not a hall widget of its own (Home's stats zone holds one): home-city.js
+// attaches it beside the city and shows it when the craft is Artistry. It asks for the
+// wall only then — one bounded read (GET /home/gallery, at most 60 works), again only
+// when the order changes — and writes one thing, the viewer's own heart
+// (PUT /home/gallery/:id/heart). Ledger text lands as text, never markup; a picture
+// is shown only from the hall's own task-visuals route.
+//
+// Motion is CSS (the track's slide, the label's zoom), which the hall's reduced-motion
+// rule stops; this file only sets where things are.
+(function () {
+  'use strict';
+
+  var API = '/api/bongos';
+  var ART_URL = /^\/api\/(bongos|gds)\/task-visuals\/task-\d{1,12}-[0-9a-f]{16}\.(png|jpg|gif|webp)$/;
+  var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  var HEART = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 13.6S2 10 2 6a3 3 0 0 1 6-1 3 3 0 0 1 6 1c0 4-6 7.6-6 7.6Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>';
+
+  // ---- pure: the label's words (node-testable) ----
+  function day(iso) {
+    var m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(iso || ''));
+    return m ? { y: Number(m[1]), m: Number(m[2]) - 1, d: Number(m[3]) } : null;
+  }
+  function longDate(iso) { var x = day(iso); return x ? x.d + ' ' + MONTHS[x.m] + ' ' + x.y : ''; }
+  function year(iso) { var x = day(iso); return x ? x.y : ''; }
+  function bio(since) { var x = day(since); return x ? 'On this project since ' + MONTHS[x.m] + ' ' + x.y : 'On this project'; }
+  // how an artist signs: a first name and an initial, and the year — "Sana O. ’26"
+  function signature(name, shipped) {
+    var parts = String(name || '').trim().split(/\s+/).filter(Boolean);
+    var sig = parts.length > 1 ? parts[0] + ' ' + parts[parts.length - 1].charAt(0) + '.' : (parts[0] || '');
+    var y = year(shipped);
+    return y ? sig + ' ’' + String(y).slice(2) : sig;
+  }
+  // a page tweak's title can carry the branding pack's holes ({{productName}})
+  function fillHoles(s, brand) {
+    return String(s || '').replace(/\{\{\s*([A-Za-z]+)\s*\}\}/g, function (_, k) { return brand && typeof brand[k] === 'string' ? brand[k] : ''; })
+      .replace(/^\s*[—–:-]\s*|\s*[—–:-]\s*$/g, '').trim();
+  }
+  function artFor(work, mode) {
+    var a = work && work.art ? work.art : {};
+    var u = mode === 'dark' ? (a.dark || a.light) : (a.light || a.dark);
+    return typeof u === 'string' && ART_URL.test(u) ? u : null;
+  }
+  // the studio's links back into the gallery: ?work=<id> or ?gallery=all
+  function landing(search) {
+    var q = String(search || '');
+    var w = /[?&]work=(\d{1,12})(?:&|$)/.exec(q);
+    return { work: w ? w[1] : null, all: /[?&]gallery=all(?:&|$)/.test(q) };
+  }
+  function credit(work) {
+    var n = Math.max(0, Number(work.hearts) || 0);
+    return 'Gift of the artist to the project. Shipped ' + longDate(work.shipped) + '. Appreciated by ' + n + (n === 1 ? ' builder.' : ' builders.');
+  }
+
+  var Lib = { landing: landing, longDate: longDate, bio: bio, signature: signature, fillHoles: fillHoles, artFor: artFor, credit: credit, ART_URL: ART_URL };
+  if (typeof module !== 'undefined' && module.exports) module.exports = Lib;
+  if (typeof window === 'undefined') return;
+
+  // ---- the page ----
+  function el(tag, cls, attrs, text) {
+    var e = document.createElement(tag);
+    if (cls) e.className = cls;
+    if (attrs) Object.keys(attrs).forEach(function (k) { e.setAttribute(k, attrs[k]); });
+    if (text != null) e.textContent = text;
+    return e;
+  }
+  function mode() {
+    var t = document.documentElement.dataset.theme;
+    if (t === 'light' || t === 'dark') return t;
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  function brand() {
+    var b = window.__BRANDING__ || {};
+    return { productName: b.productName || (b.identity && b.identity.productName) || '', worldName: b.worldName || (b.identity && b.identity.worldName) || '', tagline: b.tagline || '' };
+  }
+
+  function attach(host) {
+    var api = null, list = [], at = 0, order = 'popular', loaded = false, asking = 0, first = true;
+    var root = el('div', 'hg');
+    root.innerHTML =
+      '<div class="hg-room" tabindex="0" aria-roledescription="gallery">' +
+        '<div class="hg-vinyl">' +
+          '<h2 class="hg-h">The collection</h2>' +
+          '<p class="hg-sub">Works by the people of this project</p>' +
+          '<div class="hg-sort" role="group" aria-label="Order the works">' +
+            '<button type="button" data-order="popular" aria-pressed="true">Most popular</button>' +
+            '<button type="button" data-order="latest" aria-pressed="false">Latest</button>' +
+          '</div>' +
+          '<nav class="hg-ways" aria-label="Elsewhere in the museum">' +
+            '<button type="button" class="hg-way hg-way-all" aria-pressed="false">The full gallery <span aria-hidden="true">→</span></button>' +
+            '<a class="hg-way" href="/studio">Your studio <span aria-hidden="true">→</span></a>' +
+          '</nav>' +
+        '</div>' +
+        '<div class="hg-wall"><div class="hg-track"></div></div>' +
+        '<div class="hg-salon" role="list" aria-label="The full gallery" hidden></div>' +
+        '<p class="hg-empty" hidden>No signed works hang here yet. A page an artist tweaks, or a design that ships with its picture, hangs here once it ships.</p>' +
+        '<button type="button" class="hg-edge hg-prev" aria-label="Previous work"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 4 7 12l8 8"/></svg></button>' +
+        '<button type="button" class="hg-edge hg-next" aria-label="Next work"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 4l8 8-8 8"/></svg></button>' +
+        '<div class="hg-count" aria-live="polite"></div>' +
+        '<div class="hg-cap" aria-hidden="true"></div>' +
+        '<button type="button" class="hg-fsbtn" aria-label="Full screen: only the art (F)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 6V2.5H6M10 2.5h3.5V6M13.5 10v3.5H10M6 13.5H2.5V10"/></svg></button>' +
+        '<div class="hg-bench" aria-hidden="true"></div>' +
+      '</div>';
+    host.appendChild(root);
+    var ROOM_LABEL = 'The gallery: one work at a time. Use the left and right arrow keys, or swipe. F for full screen.';
+    var ALL_LABEL = 'The full gallery: every work at once. Choose one to sit in front of it.';
+    var room = root.querySelector('.hg-room'), track = root.querySelector('.hg-track'), salon = root.querySelector('.hg-salon');
+    var prev = root.querySelector('.hg-prev'), next = root.querySelector('.hg-next'), count = root.querySelector('.hg-count');
+    var wayAll = root.querySelector('.hg-way-all'), empty = root.querySelector('.hg-empty');
+    room.setAttribute('aria-label', ROOM_LABEL);
+
+    function hang(w, i) {
+      var b = brand(), title = fillHoles(w.title, b) || 'Untitled';
+      var sec = el('section', 'hg-hang', { 'aria-label': title + ', by ' + w.artist.name });
+      var work = el('div', 'hg-work');
+      var canvas = el('div', 'hg-canvas');
+      canvas.dataset.i = String(i);
+      work.appendChild(canvas);
+      var label = el('div', 'hg-label');
+      var text = el('div', 'hg-text', { role: 'button', tabindex: '0', 'aria-expanded': 'false', 'aria-label': 'Wall label for ' + title + '. Click to read it closer.' });
+      text.appendChild(el('b', 'hg-who', null, w.artist.name));
+      text.appendChild(el('span', 'hg-bio', null, bio(w.artist.since)));
+      var t = el('span', 'hg-title');
+      t.appendChild(el('i', null, null, title));
+      t.appendChild(document.createTextNode(', ' + year(w.shipped)));
+      text.appendChild(t);
+      text.appendChild(el('span', 'hg-medium', null, w.medium || ''));
+      if (w.place) text.appendChild(el('span', 'hg-place', null, fillHoles(w.place, b)));
+      if (w.words) text.appendChild(el('p', 'hg-words', null, w.words));
+      text.appendChild(el('p', 'hg-credit', null, credit(w)));
+      var sig = el('div', 'hg-sigline');
+      sig.appendChild(el('span', 'hg-sig', null, signature(w.artist.name, w.shipped)));
+      var heart = el('button', 'hg-heart', { type: 'button', 'data-id': w.id, 'aria-pressed': String(!!w.mine), 'aria-label': 'Appreciate ' + title });
+      heart.innerHTML = HEART;
+      sig.appendChild(heart);
+      label.append(text, sig);
+      work.appendChild(label);
+      sec.appendChild(work);
+      return sec;
+    }
+    // only the work in view and its neighbours load their picture
+    function hangNear() {
+      var m = mode();
+      track.querySelectorAll('.hg-canvas').forEach(function (c) {
+        var i = Number(c.dataset.i), w = list[i];
+        if (Math.abs(i - at) > 1 || !w) return;
+        var src = artFor(w, m), img = c.querySelector('img');
+        if (!src) return;
+        if (!img) { img = el('img', null, { alt: w.art && w.art.alt ? w.art.alt : '', loading: 'lazy', decoding: 'async' }); c.appendChild(img); }
+        if (img.getAttribute('src') !== src) img.setAttribute('src', src);
+      });
+    }
+    function render() {
+      track.textContent = '';
+      list.forEach(function (w, i) { track.appendChild(hang(w, i)); });
+      empty.hidden = list.length > 0;
+      room.classList.toggle('is-empty', list.length === 0);
+      go(0, true);
+      if (room.classList.contains('is-all')) renderSalon();
+    }
+    function go(i, instant) {
+      at = Math.max(0, Math.min(list.length - 1, i));
+      if (at < 0) at = 0;
+      if (instant) track.classList.add('is-drag');
+      track.style.transform = 'translateX(' + (-at * 100) + '%)';
+      if (instant) { void track.offsetWidth; track.classList.remove('is-drag'); }
+      prev.disabled = at <= 0;
+      next.disabled = at >= list.length - 1;
+      count.textContent = list.length ? (at + 1) + ' of ' + list.length : '';
+      track.querySelectorAll('.hg-hang.is-reading').forEach(function (h) { read(h, false); });
+      var w = list[at];
+      root.querySelector('.hg-cap').textContent = w ? fillHoles(w.title, brand()) + ' · ' + w.artist.name : '';
+      track.querySelectorAll('.hg-hang').forEach(function (h, n) { h.setAttribute('aria-hidden', String(n !== at)); h.inert = n !== at; });
+      hangNear();
+    }
+    function read(h, on) {
+      h.classList.toggle('is-reading', on);
+      h.querySelector('.hg-text').setAttribute('aria-expanded', String(on));
+    }
+
+    // ---- appreciation: one heart, the viewer's own; the count lives in the credit line ----
+    function paintHeart(w) {
+      root.querySelectorAll('.hg-heart[data-id="' + w.id + '"]').forEach(function (b) { b.setAttribute('aria-pressed', String(!!w.mine)); });
+      track.querySelectorAll('.hg-hang').forEach(function (h, n) { if (list[n] === w) h.querySelector('.hg-credit').textContent = credit(w); });
+      salon.querySelectorAll('.hg-piece[data-id="' + w.id + '"] .hg-pn').forEach(function (n) { n.textContent = String(w.hearts); });
+    }
+    function toggleHeart(id) {
+      var w = list.filter(function (x) { return x.id === id; })[0];
+      if (!w || !api || w.busy) return;
+      var on = !w.mine, was = { mine: w.mine, hearts: w.hearts };
+      w.busy = true; w.mine = on; w.hearts = Math.max(0, w.hearts + (on ? 1 : -1));
+      paintHeart(w);
+      api.request('PUT', API + '/home/gallery/' + encodeURIComponent(id) + '/heart', { body: { on: on } }).then(function (res) {
+        if (res && res.ok && res.data) { w.mine = !!res.data.mine; w.hearts = Number(res.data.hearts) || 0; } else { w.mine = was.mine; w.hearts = was.hearts; }
+      }, function () { w.mine = was.mine; w.hearts = was.hearts; }).then(function () { w.busy = false; paintHeart(w); });
+    }
+
+    // ---- the full gallery: every work at once, salon-style; click one to sit in front of it ----
+    function renderSalon() {
+      salon.textContent = '';
+      var m = mode(), b = brand();
+      list.forEach(function (w, i) {
+        var title = fillHoles(w.title, b) || 'Untitled';
+        var item = el('div', null, { role: 'listitem' });
+        var p = el('button', 'hg-piece', { type: 'button', 'data-i': String(i), 'data-id': w.id, 'aria-label': title + ', by ' + w.artist.name + '. Sit in front of it.' });
+        var pc = el('span', 'hg-pc');
+        var src = artFor(w, m);
+        if (src) pc.appendChild(el('img', null, { src: src, alt: '', loading: 'lazy', decoding: 'async' }));
+        var pt = el('span', 'hg-pt');
+        pt.appendChild(el('i', null, null, title));
+        pt.appendChild(document.createTextNode(' · ' + w.artist.name));
+        var pl = el('span', 'hg-pl');
+        pl.innerHTML = HEART;
+        pl.appendChild(el('span', 'hg-pn', null, String(w.hearts)));
+        p.append(pc, pt, pl);
+        item.appendChild(p);
+        salon.appendChild(item);
+      });
+    }
+    function setAll(on) {
+      room.classList.toggle('is-all', on);
+      salon.hidden = !on;
+      wayAll.setAttribute('aria-pressed', String(on));
+      wayAll.firstChild.textContent = on ? 'Back to the bench ' : 'The full gallery ';
+      room.setAttribute('aria-label', on ? ALL_LABEL : ROOM_LABEL);
+      if (on) renderSalon();
+    }
+
+    // ---- full screen: the art alone, with its signature and heart ----
+    function isFs() { return document.fullscreenElement === room || room.classList.contains('is-fs'); }
+    function setFs(on) {
+      if (on) {
+        if (room.requestFullscreen) room.requestFullscreen().catch(function () { room.classList.add('is-fs'); });
+        else room.classList.add('is-fs');
+      } else {
+        if (document.fullscreenElement && document.exitFullscreen) document.exitFullscreen();
+        room.classList.remove('is-fs');
+      }
+    }
+    document.addEventListener('fullscreenchange', function () { if (document.fullscreenElement !== room) room.classList.remove('is-fs'); });
+
+    // ---- wiring ----
+    prev.addEventListener('click', function () { go(at - 1); });
+    next.addEventListener('click', function () { go(at + 1); });
+    root.querySelector('.hg-fsbtn').addEventListener('click', function () { setFs(!isFs()); });
+    wayAll.addEventListener('click', function () { setAll(!room.classList.contains('is-all')); });
+    root.querySelectorAll('.hg-sort button').forEach(function (b) {
+      b.addEventListener('click', function () {
+        if (order === b.dataset.order) return;
+        order = b.dataset.order;
+        root.querySelectorAll('.hg-sort button').forEach(function (x) { x.setAttribute('aria-pressed', String(x === b)); });
+        load();
+      });
+    });
+    room.addEventListener('keydown', function (e) {
+      if (e.target.closest('input, textarea')) return;
+      if (e.key === 'ArrowLeft') { go(at - 1); e.preventDefault(); }
+      else if (e.key === 'ArrowRight') { go(at + 1); e.preventDefault(); }
+      else if ((e.key === 'f' || e.key === 'F') && !e.metaKey && !e.ctrlKey && !e.altKey) { setFs(!isFs()); e.preventDefault(); }
+      else if (e.key === 'Escape') { if (isFs()) setFs(false); track.querySelectorAll('.hg-hang.is-reading').forEach(function (h) { read(h, false); }); }
+    });
+    track.addEventListener('click', function (e) {
+      var h = e.target.closest('.hg-heart');
+      if (h) { toggleHeart(h.dataset.id); return; }
+      var t = e.target.closest('.hg-text');
+      if (t) { var hang = t.closest('.hg-hang'); read(hang, !hang.classList.contains('is-reading')); }
+    });
+    track.addEventListener('keydown', function (e) {
+      var t = e.target.closest('.hg-text');
+      if (t && (e.key === 'Enter' || e.key === ' ')) { var hang = t.closest('.hg-hang'); read(hang, !hang.classList.contains('is-reading')); e.preventDefault(); }
+    });
+    salon.addEventListener('click', function (e) {
+      var p = e.target.closest('.hg-piece'); if (!p) return;
+      setAll(false); go(Number(p.dataset.i), true); room.focus();
+    });
+    // swipe or drag along the wall
+    var x0 = null, dx = 0, W = 1;
+    room.addEventListener('pointerdown', function (e) {
+      if (room.classList.contains('is-all') || e.target.closest('button, a, .hg-text') || !list.length) return;
+      x0 = e.clientX; dx = 0; W = room.clientWidth || 1; track.classList.add('is-drag');
+      if (room.setPointerCapture) try { room.setPointerCapture(e.pointerId); } catch (_) { /* a synthetic pointer */ }
+    });
+    room.addEventListener('pointermove', function (e) {
+      if (x0 === null) return;
+      dx = e.clientX - x0;
+      track.style.transform = 'translateX(calc(' + (-at * 100) + '% + ' + dx + 'px))';
+    });
+    function end() {
+      if (x0 === null) return;
+      track.classList.remove('is-drag');
+      var step = Math.abs(dx) > W * 0.12 ? (dx < 0 ? 1 : -1) : 0;
+      x0 = null; go(at + step);
+    }
+    room.addEventListener('pointerup', end);
+    room.addEventListener('pointercancel', end);
+    new MutationObserver(function () { hangNear(); if (room.classList.contains('is-all')) renderSalon(); })
+      .observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+
+    function load() {
+      api = api || (window.BongosClient && window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false }));
+      if (!api) return;
+      var mine = ++asking;
+      loaded = true;
+      api.request('GET', API + '/home/gallery?order=' + order).then(function (res) {
+        if (mine !== asking) return;
+        list = res && res.ok && res.data && Array.isArray(res.data.works) ? res.data.works.filter(function (w) { return w && w.id && w.artist; }) : [];
+        render();
+        if (first) { first = false; arrive(); }
+      }, function () { if (mine === asking) { list = []; render(); } });
+    }
+
+    // ---- arriving from the studio (/studio, task 1005061): `?work=<id>` sits you in
+    // front of that work, `?gallery=all` opens the full gallery; read once, then the
+    // address is put back so a reload is an ordinary Home ----
+    function arrive() {
+      var want = landing(window.location.search);
+      if (!want.work && !want.all) return;
+      if (want.all) setAll(true);
+      else { var i = -1; list.forEach(function (w, n) { if (i < 0 && w.id === want.work) i = n; }); if (i >= 0) go(i, true); }
+      try { window.history.replaceState(null, '', window.location.pathname + window.location.hash); } catch (_) { /* an opaque page */ }
+    }
+
+    return {
+      // shown in Artistry; the wall is asked for the first time it is shown
+      show: function (on) {
+        root.hidden = !on;
+        if (on && !loaded) load();
+        if (!on && isFs()) setFs(false);
+      },
+    };
+  }
+
+  window.OTBHomeGallery = { attach: attach, lib: Lib };
+})();

package/modules/hall-ui/public/home-studio.css

@@ -0,0 +1,72 @@
+/* modules/hall-ui/public/home-studio.css — the artist's studio, behind the gallery
+   (task 1005061; mock docs/design/mocks/hall/home/v16-studio.html, record
+   modules/hall-ui/records/home-city.md § "The studio"). The gallery's wall, lit from a
+   north window, nothing loud. Every colour is a hall token or a mix of one; the frame
+   and shadows are black with alpha. The tokens carry both modes. No :root; no motion. */
+
+.hs {
+  --hs-wall: color-mix(in srgb, var(--bg-card) 94%, var(--accent));
+  --hs-wall-low: color-mix(in srgb, var(--bg) 90%, var(--accent-deep));
+  --hs-window: color-mix(in srgb, var(--sea) 9%, transparent);
+  --hs-line: color-mix(in srgb, var(--ink) 11%, transparent);
+  --hg-frame: rgba(0, 0, 0, .82);
+  --hg-shadow: rgba(0, 0, 0, .45);
+  position: relative; padding: 40px 44px 44px; color: var(--ink);
+  background: radial-gradient(ellipse 60% 70% at 0% 0%, var(--hs-window), transparent 70%), linear-gradient(var(--hs-wall), var(--hs-wall-low));
+}
+.hs[hidden] { display: none; }
+.hs-top { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 30px; }
+.hs-ways { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 22px; }
+.hs-h { margin: 0 0 14px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
+.hs-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 44px; }
+.hs-below { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 40px; }
+
+/* the easel */
+.hs-art { border-width: 3px; }
+.hs-blank { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--ink-faint); }
+.hs-what { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 16px; }
+.hs-what__t { min-width: 0; flex: 1; }
+.hs-what b { display: block; font-size: 15px; font-weight: 600; }
+.hs-line { display: block; font-size: 12.5px; color: var(--ink-soft); }
+.hs-what .hg-sig { display: inline-block; margin-top: 6px; }
+.hs-pill { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--accent); color: var(--accent-on, var(--ink)); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
+.hs-pill[hidden] { display: none; }
+.hs-pill:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 3px; }
+
+/* the quiet lists beside it */
+.hs-shelf { margin-bottom: 34px; }
+.hs-row { display: flex; align-items: center; gap: 12px; min-height: 24px; padding: 11px 0; border-top: 1px solid var(--hs-line); color: inherit; text-decoration: none; }
+.hs-row:first-child { border-top: 0; padding-top: 0; }
+.hs-row .t { flex: 1; min-width: 0; }
+.hs-row .t b { display: block; font-size: 13.5px; font-weight: 600; }
+.hs-row .t span { display: block; font-size: 12px; color: var(--ink-soft); }
+.hs-row .t q { display: block; font-size: 13px; font-style: italic; quotes: "“" "”"; }
+a.hs-row:hover .t b, a.hs-row:hover .t q { text-decoration: underline; text-underline-offset: 3px; }
+a.hs-row:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 3px; }
+.hs-dot { flex: none; min-width: 24px; height: 24px; border-radius: 12px; display: grid; place-items: center; padding: 0 7px; box-sizing: border-box; font-size: 11px; font-weight: 700; background: var(--accent); color: var(--accent-on, var(--ink)); }
+.hs-quiet, .hs-more { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
+.hs-more { margin-top: 10px; }
+.hs-desk { margin-top: 14px; }
+
+/* small hung works */
+.hs-works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
+.hs-work { all: unset; cursor: pointer; display: block; min-width: 0; }
+.hs-work:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 6px; }
+.hs-work:hover .hg-pc { transform: translateY(-3px); }
+.hs-cap { display: block; margin-top: 7px; font-size: 11px; }
+.hs-sub { display: flex; align-items: center; gap: 5px; margin-top: 1px; font-size: 10.5px; color: var(--ink-soft); }
+.hs-sub svg { width: 11px; height: 11px; }
+.hs-works .hs-quiet { grid-column: 1 / -1; }
+
+@media (max-width: 900px) {
+  .hs { padding: 24px 20px; }
+  .hs-grid, .hs-below { grid-template-columns: 1fr; gap: 30px; }
+  .hs-ways { margin-left: 0; }
+  .hs-what__t { flex-basis: 100%; }
+  .hs-works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+/* on the /studio page, under its illustrated room */
+.hs-page { padding: 24px; }
+.hs-page .hs { border-radius: var(--radius); }
+@media (max-width: 900px) { .hs-page { padding: 12px; } }

package/modules/hall-ui/public/home-studio.js

@@ -0,0 +1,203 @@
+// modules/hall-ui/public/home-studio.js — the artist's studio, behind the gallery
+// (task 1005061, Home v16 step 4; mock docs/design/mocks/hall/home/v16-studio.html,
+// record modules/hall-ui/records/home-city.md § "The studio").
+//
+// "As an artist you look at other works to get inspiration, and then you are in your
+// studio, where you are at peace and can think best." The studio is the hall's /studio
+// page — the sidebar's Studio, and the gallery's "Your studio" door — and these five
+// shelves sit there under its illustrated room, in the gallery's colours: nothing loud,
+// nothing due. Its doors lead back into Home's gallery (`/?gallery=all`, `/?work=<id>`,
+// read by home-gallery.js).
+//   · On your easel — the page round you hold, and the one way back into it (the tweak
+//     editor); with none, the page the Tweak/CopyWrite Flow would hand you next.
+//   · Waiting for new inspiration — pages whose words changed since an artist last
+//     designed them, a quiet count of changed lines each.
+//   · Words to tune — the newest lines the copy desk has flagged.
+//   · Pinned from the gallery — the works you appreciated on the bench.
+//   · Your works in the collection — what you signed, and how often it was appreciated.
+// No ranks and no leaderboard.
+//
+// Two bounded reads: GET /copy-desk/studio (the easel and the two copy-desk shelves;
+// copy-desk is a module, and without it those shelves say so), then
+// GET /home/studio/works?page=<the easel's page> (the two shelves of works, and the
+// easel's page as it hangs on the wall). It writes nothing. Ledger text
+// lands as text, never markup; a picture comes only through the gallery's own rule.
+(function () {
+  'use strict';
+
+  var API = '/api/bongos';
+  var HEART = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 13.6S2 10 2 6a3 3 0 0 1 6-1 3 3 0 0 1 6 1c0 4-6 7.6-6 7.6Z" fill="currentColor"/></svg>';
+
+  // ---- pure: what the easel says (node-testable) ----
+  function easelWords(easel) {
+    if (!easel) return { title: 'Nothing on your easel', line: 'No page is waiting for an artist at the moment.', act: null };
+    if (easel.held) {
+      return {
+        title: easel.title + (easel.round > 1 ? ' · round ' + easel.round : ''),
+        line: 'Your page, waiting for your words' + (easel.place ? ' · ' + easel.place : '') + '.',
+        act: 'Pick up where you left off',
+      };
+    }
+    return {
+      title: 'Nothing on your easel',
+      line: 'Next up: ' + easel.title + (easel.why ? ', ' + easel.why : '') + '.',
+      act: 'Begin ' + easel.title,
+    };
+  }
+  function linesChanged(n) { return n === 1 ? '1 line changed' : n + ' lines changed'; }
+  // only a path inside the hall: the editor and the copy desk
+  function hallPath(p) { return typeof p === 'string' && /^\/(tweak-editor|copy-desk)(\?[A-Za-z0-9_=:&%.-]*)?$/.test(p) ? p : null; }
+  // where a work hangs in Home's gallery
+  function benchPath(id) { return /^\d{1,12}$/.test(String(id)) ? '/?work=' + id : '/'; }
+
+  var Lib = { easelWords: easelWords, linesChanged: linesChanged, hallPath: hallPath, benchPath: benchPath };
+  if (typeof module !== 'undefined' && module.exports) module.exports = Lib;
+  if (typeof window === 'undefined') return;
+
+  function el(tag, cls, attrs, text) {
+    var e = document.createElement(tag);
+    if (cls) e.className = cls;
+    if (attrs) Object.keys(attrs).forEach(function (k) { e.setAttribute(k, attrs[k]); });
+    if (text != null) e.textContent = text;
+    return e;
+  }
+
+  function mode() {
+    var t = document.documentElement.dataset.theme;
+    if (t === 'light' || t === 'dark') return t;
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  // the gallery's label words and picture rule (home-gallery.js, loaded on this page too)
+  function G() { return (window.OTBHomeGallery && window.OTBHomeGallery.lib) || null; }
+  function art(w) { var g = G(); return g ? g.artFor(w, mode()) : null; }
+  function words(s) { var g = G(); var b = window.__BRANDING__ || {}; return g ? g.fillHoles(s, { productName: b.productName || '', tagline: b.tagline || '' }) : String(s || ''); }
+
+  function attach(parent) {
+    var api = window.BongosClient && window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
+    var root = el('div', 'hs');
+    root.innerHTML =
+      '<div class="hs-top">' +
+        '<div><h2 class="hg-h" id="hs-h">Your studio</h2><p class="hg-sub">Quiet. Nothing here is due.</p></div>' +
+        '<nav class="hs-ways" aria-label="Elsewhere in the museum">' +
+          '<a class="hg-way hs-back" href="/"><span aria-hidden="true">←</span> The bench</a>' +
+          '<a class="hg-way hs-all" href="/?gallery=all">The full gallery</a>' +
+        '</nav>' +
+      '</div>' +
+      '<div class="hs-grid">' +
+        '<section class="hs-easel" aria-labelledby="hs-easel-h"><h3 id="hs-easel-h" class="hs-h">On your easel</h3>' +
+          '<div class="hs-art hg-canvas"></div>' +
+          '<div class="hs-what"><div class="hs-what__t"><b></b><span class="hs-line"></span><span class="hg-sig"></span></div><a class="hs-pill" hidden></a></div>' +
+        '</section>' +
+        '<div class="hs-side">' +
+          '<section class="hs-shelf" aria-labelledby="hs-wait-h"><h3 id="hs-wait-h" class="hs-h">Waiting for new inspiration</h3><div class="hs-rows hs-waiting"></div></section>' +
+          '<section class="hs-shelf" aria-labelledby="hs-words-h"><h3 id="hs-words-h" class="hs-h">Words to tune</h3><div class="hs-rows hs-words"></div>' +
+            '<a class="hg-way hs-desk" href="/copy-desk">The copy desk <span aria-hidden="true">→</span></a></section>' +
+        '</div>' +
+      '</div>' +
+      '<div class="hs-below">' +
+        '<section aria-labelledby="hs-pin-h"><h3 id="hs-pin-h" class="hs-h">Pinned from the gallery</h3><div class="hs-works hs-pinned"></div></section>' +
+        '<section aria-labelledby="hs-yours-h"><h3 id="hs-yours-h" class="hs-h">Your works in the collection</h3><div class="hs-works hs-yours"></div></section>' +
+      '</div>';
+    parent.appendChild(root);
+    var asking = 0;
+
+    function quiet(box, text) { box.textContent = ''; box.appendChild(el('p', 'hs-quiet', null, text)); }
+
+    function paintEasel(easel, works) {
+      var w = easelWords(easel);
+      root.querySelector('.hs-what b').textContent = w.title;
+      root.querySelector('.hs-line').textContent = w.line;
+      var pill = root.querySelector('.hs-pill'), to = easel && hallPath(easel.open);
+      pill.hidden = !(w.act && to);
+      if (w.act && to) { pill.textContent = w.act; pill.setAttribute('href', to); }
+      // the page as it hangs now: its newest work on the wall, if it has one
+      var frame = root.querySelector('.hs-art'), hung = easel && works && works.easel;
+      frame.textContent = '';
+      var src = hung && art(hung);
+      if (src) frame.appendChild(el('img', null, { src: src, alt: '', loading: 'lazy', decoding: 'async' }));
+      else frame.appendChild(el('span', 'hs-blank', null, easel ? 'No picture of this page hangs yet' : ''));
+      var me = works && works.yours && works.yours.works[0], g = G();
+      root.querySelector('.hs-what .hg-sig').textContent = me && g ? g.signature(me.artist.name, '') : '';
+    }
+    function paintWaiting(waiting) {
+      var box = root.querySelector('.hs-waiting');
+      if (!waiting) return quiet(box, 'The copy desk is not switched on in this project.');
+      if (!waiting.pages.length) return quiet(box, 'Nothing is waiting. Every page’s words match its last design.');
+      box.textContent = '';
+      waiting.pages.forEach(function (p) {
+        var to = hallPath(p.open);
+        var row = el(to ? 'a' : 'div', 'hs-row', to ? { href: to } : null);
+        var t = el('span', 't');
+        t.appendChild(el('b', null, null, p.title));
+        t.appendChild(el('span', null, null, (p.place ? p.place + ' · ' : '') + linesChanged(p.changed_lines)));
+        row.append(t, el('span', 'hs-dot', { 'aria-hidden': 'true' }, String(p.changed_lines)));
+        box.appendChild(row);
+      });
+      var more = waiting.total - waiting.pages.length;
+      if (more > 0) box.appendChild(el('p', 'hs-more', null, more === 1 ? 'And 1 more page changed since its last design' : 'And ' + more + ' more pages changed since their last design'));
+    }
+    function paintWords(words) {
+      var box = root.querySelector('.hs-words');
+      root.querySelector('.hs-desk').hidden = !words;
+      if (!words) return quiet(box, 'The copy desk is not switched on in this project.');
+      if (!words.length) return quiet(box, 'No words are flagged. The copy desk is quiet.');
+      box.textContent = '';
+      words.forEach(function (f) {
+        var row = el('a', 'hs-row', { href: '/copy-desk' });
+        var t = el('span', 't');
+        if (f.text) t.appendChild(el('q', null, null, f.text));
+        t.appendChild(el(f.text ? 'span' : 'b', null, null, f.text ? f.reason + (f.place ? ' · ' + f.place : '') : f.reason));
+        row.appendChild(t);
+        box.appendChild(row);
+      });
+    }
+    function paintShelf(box, shelf, mine) {
+      if (!shelf) return quiet(box, 'The collection could not be read. Try again in a moment.');
+      if (!shelf.works.length) return quiet(box, mine ? 'Nothing of yours hangs in the collection yet.' : 'Nothing pinned yet. A heart on the bench pins a work here.');
+      box.textContent = '';
+      shelf.works.forEach(function (w) {
+        var title = words(w.title) || 'Untitled';
+        var b = el('a', 'hs-work', { href: benchPath(w.id), 'data-id': w.id, 'aria-label': title + (mine ? '' : ', by ' + w.artist.name) + '. See it on the bench.' });
+        var pc = el('span', 'hg-pc');
+        var src = art(w);
+        if (src) pc.appendChild(el('img', null, { src: src, alt: '', loading: 'lazy', decoding: 'async' }));
+        var cap = el('span', 'hs-cap');
+        cap.appendChild(el('i', null, null, title));
+        if (!mine) cap.appendChild(document.createTextNode(' · ' + w.artist.name));
+        var sub = el('span', 'hs-sub');
+        if (mine) { sub.innerHTML = HEART; sub.appendChild(document.createTextNode(String(w.hearts))); } else sub.textContent = 'You appreciated this';
+        cap.appendChild(sub);
+        b.append(pc, cap);
+        box.appendChild(b);
+      });
+    }
+
+    function load() {
+      if (!api) return;
+      var mine = ++asking;
+      var get = function (p) { return api.request('GET', API + p).then(function (r) { return r && r.ok ? r.data : null; }, function () { return null; }); };
+      get('/copy-desk/studio').then(function (desk) {
+        var page = desk && desk.easel && desk.easel.page_id;
+        return get('/home/studio/works' + (page ? '?page=' + encodeURIComponent(page) : '')).then(function (works) { return [desk, works]; });
+      }).then(function (res) {
+        if (mine !== asking) return;
+        var desk = res[0], works = res[1];
+        paintEasel(desk && desk.easel, works);
+        paintWaiting(desk ? desk.waiting : null);
+        paintWords(desk ? desk.words : null);
+        paintShelf(root.querySelector('.hs-pinned'), works && works.pinned, false);
+        paintShelf(root.querySelector('.hs-yours'), works && works.yours, true);
+      });
+    }
+
+    // a picture follows the hall's light or dark
+    new MutationObserver(load).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+    load();
+    return { reload: load };
+  }
+
+  window.OTBHomeStudio = { attach: attach, lib: Lib };
+  // the /studio page carries the host; mount once the page has parsed
+  function boot() { var host = document.getElementById('studio-shelves'); if (host && !host.firstChild) attach(host); }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot); else boot();
+})();

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

@@ -53,7 +53,7 @@
 <script src="/builders/dom-utils.js?v=2026-10-25-escape"></script>
 <script src="/builders/shell-trail.js?v=2026-10-08-city-tab"></script>
 <script src="/builders/craft-mode.js?v=2026-10-30-market-watch"></script>
-<script src="/builders/shell.js?v=2026-11-03-update-pill"></script>
+<script src="/builders/shell.js?v=2026-11-04-one-market-watch"></script>
 <script src="/builders/palette.js" defer></script>
 <!-- task-detail.js still owns the #/idea/N and #/blocker/N overlay, so a ref
      written inside an idea's own prose keeps resolving from this page. -->

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

@@ -228,7 +228,7 @@
 <script src="/builders/dom-utils.js?v=2026-10-25-escape"></script>
 <script src="/builders/shell-trail.js?v=2026-10-08-city-tab"></script>
 <script src="/builders/craft-mode.js?v=2026-10-30-market-watch"></script>
-<script src="/builders/shell.js?v=2026-11-03-update-pill"></script>
+<script src="/builders/shell.js?v=2026-11-04-one-market-watch"></script>
 <script src="/builders/palette.js" defer></script>
 <!-- task 1004727: the ONE karma vote control every task/idea list renders -->
 <script src="/builders/vote-control.js"></script>