@khanglvm/relay 0.10.3 → 0.12.0

package/src/ui/app.js

@@ -88,6 +88,31 @@
   }
   let themeBtn = null;
 
+  // ---------- font scale (A− / A+) ----------
+  // A page-zoom knob: scales the root font-size (every rem) so the whole board
+  // grows/shrinks. Persists like the theme — server pref + localStorage mirror —
+  // so the choice carries across the random-port boards.
+  const FS_KEY = 'qb-fontscale';
+  const FS_MIN = 0.85, FS_MAX = 1.5, FS_STEP = 0.1;
+  let fontScale = Number((boot.pref && boot.pref.fontScale) || localStorage.getItem(FS_KEY));
+  if (!Number.isFinite(fontScale) || fontScale <= 0) fontScale = 1;
+  const clampFs = (n) => Math.min(FS_MAX, Math.max(FS_MIN, Math.round(n * 100) / 100));
+  fontScale = clampFs(fontScale);
+  function applyFontScale() {
+    document.documentElement.style.setProperty('--fs', String(fontScale));
+  }
+  function setFontScale(next) {
+    fontScale = clampFs(next);
+    applyFontScale();
+    try { localStorage.setItem(FS_KEY, String(fontScale)); } catch { /* private mode */ }
+    fetch('/api/pref', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ fontScale }),
+    }).catch(() => {});
+  }
+  applyFontScale();
+
   // ---------- localStorage draft mirror ----------
   // Every autosave is ALSO written to localStorage, keyed by board id. This is
   // the durability layer the server file alone can't provide: if the connection
@@ -698,6 +723,38 @@
     return input;
   }
 
+  // Normalize any CSS color to the #rrggbb the native <input type=color> needs.
+  function toHex6(c) {
+    const s = String(c || '').trim();
+    let m = /^#?([0-9a-fA-F]{6})$/.exec(s);
+    if (m) return '#' + m[1].toLowerCase();
+    m = /^#?([0-9a-fA-F]{3})$/.exec(s);
+    if (m) return '#' + m[1].split('').map((x) => x + x).join('').toLowerCase();
+    return '#000000';
+  }
+  function controlColor(q) {
+    const wrap = el('div', { class: 'colorpick' });
+    const init = (typeof state.answers[q.id] === 'string' && state.answers[q.id]) || (typeof q.default === 'string' ? q.default : '');
+    const swatch = el('input', { type: 'color', class: 'colorswatch' });
+    const hex = el('input', { type: 'text', class: 'colorhex', placeholder: q.placeholder || '#rrggbb', spellcheck: 'false', autocapitalize: 'off' });
+    swatch.value = toHex6(init || '#888888');
+    if (init) { hex.value = init; state.answers[q.id] = init; }
+    const set = (val) => { state.answers[q.id] = val; clearErr(q.id); scheduleSave(); };
+    swatch.addEventListener('input', () => { hex.value = swatch.value; set(swatch.value); });
+    hex.addEventListener('input', () => { const v = hex.value.trim(); if (/^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v)) swatch.value = toHex6(v); set(v); });
+    wrap.append(el('div', { class: 'colorrow' }, swatch, hex));
+    if (Array.isArray(q.presets) && q.presets.length) {
+      const presets = el('div', { class: 'colorpresets' });
+      for (const c of q.presets) {
+        const b = el('button', { type: 'button', class: 'colorpreset', style: 'background:' + c, title: c });
+        b.addEventListener('click', () => { swatch.value = toHex6(c); hex.value = c; set(c); });
+        presets.append(b);
+      }
+      wrap.append(presets);
+    }
+    return wrap;
+  }
+
   // ---------- render ----------
   themeBtn = el('button', { class: 'theme-btn', type: 'button' }, '');
   themeBtn.addEventListener('click', () => {
@@ -712,6 +769,12 @@
   });
   applyTheme();
 
+  const fsDown = el('button', { class: 'fs-btn', type: 'button', title: 'Smaller text', 'aria-label': 'Decrease text size' }, 'A−');
+  const fsUp = el('button', { class: 'fs-btn', type: 'button', title: 'Larger text', 'aria-label': 'Increase text size' }, 'A+');
+  fsDown.addEventListener('click', () => setFontScale(fontScale - FS_STEP));
+  fsUp.addEventListener('click', () => setFontScale(fontScale + FS_STEP));
+  const fsCtrl = el('div', { class: 'fs-ctrl' }, fsDown, fsUp);
+
   // Just reloaded after a live `rly update`? Flag set before reload below.
   try {
     if (sessionStorage.getItem('relay-updated') === '1') {
@@ -723,7 +786,7 @@
   }
 
   const titleEl = el('h1', {}, spec.title);
-  app.append(el('header', { class: 'qb-header' }, titleEl, themeBtn));
+  app.append(el('header', { class: 'qb-header' }, titleEl, el('div', { class: 'qb-controls' }, fsCtrl, themeBtn)));
   // The board title is commentable too: hovering it shows the pin, like the
   // intro and every other content element. (themeBtn stays out of it.)
   if (spec.title) {
@@ -757,6 +820,7 @@
     else if (q.type === 'multi') control.append(controlMulti(q));
     else if (q.type === 'yesno') control.append(segButtons(q, ['yes', 'no'], ['Yes', 'No']));
     else if (q.type === 'scale') control.append(controlScale(q));
+    else if (q.type === 'color') control.append(controlColor(q));
     else control.append(controlText(q, q.type === 'textarea'));
     card.append(control);
     if (q.note) {
@@ -988,6 +1052,24 @@
   }
 
   // ---------- heartbeat ----------
+  // True when the user is actively typing — an open annotation comment popover,
+  // or focus in any text-entry field (comment box, notes, text/color answers,
+  // "Other" inputs). Used to defer the live-update reload so in-progress
+  // comments aren't destroyed mid-keystroke.
+  function isEditable(node) {
+    if (!node) return false;
+    if (node.tagName === 'TEXTAREA') return true;
+    if (node.tagName === 'INPUT') {
+      const t = (node.type || 'text').toLowerCase();
+      return ['text', 'search', 'email', 'url', 'tel', 'number', 'color'].includes(t);
+    }
+    return node.isContentEditable === true;
+  }
+  function userIsComposing() {
+    if (window.RelayAnnotate && typeof RelayAnnotate.isComposing === 'function' && RelayAnnotate.isComposing()) return true;
+    return isEditable(document.activeElement);
+  }
+
   let misses = 0;
   let reloading = false;
   let hb = null;
@@ -1021,6 +1103,16 @@
         );
       }
       if (body && typeof body.rev === 'number' && bootRev !== null && body.rev !== bootRev && !submitted && !reloading) {
+        // Don't yank the board out from under someone mid-comment: an open
+        // annotation popover (its add-comment box + reply inputs) holds text
+        // that isn't in the draft until Save, so a reload would discard it —
+        // and reloading while any field is focused drops the user's cursor and
+        // last keystrokes. Defer until they're done; the heartbeat re-checks
+        // every tick, so the update applies the moment they close/blur.
+        if (userIsComposing()) {
+          showNotice('The agent updated this board — it’ll refresh as soon as you finish your comment.', 'info');
+          return;
+        }
         reloading = true;
         stopHeartbeat();
         clearTimeout(saveTimer);

package/src/ui/blocks.css

@@ -491,6 +491,21 @@ body.blk-full-open { overflow: hidden; }
   height: calc(100vh - 44px) !important; width: 100%;
   margin: 0; border: 0; border-radius: 0;
 }
+/* Full-screen diagrams/images: apply() sizes the child to fit the viewport
+   (FULL_PAD_* in blocks.js mirrors this padding). margin:auto on the single
+   child centers it on both axes AND keeps it scrollable when zoomed past the
+   fit — plain flex centering would clip the top/left and trap the overflow. */
+.blk-mermaid.blk-full,
+.blk-graphviz.blk-full,
+.blk-plantuml.blk-full,
+.blk-imagewrap.blk-full {
+  display: flex; padding: 44px 24px 24px;
+}
+.blk-mermaid.blk-full > svg,
+.blk-graphviz.blk-full > svg,
+.blk-plantuml.blk-full > svg,
+.blk-plantuml.blk-full > .blk-plantuml-img,
+.blk-imagewrap.blk-full > .blk-img { margin: auto; }
 
 /* Small frame on charts + mermaid so they read as a deliberate card, matching
    the graphviz/plantuml/image blocks (already framed). Scoped to the inner
@@ -545,3 +560,28 @@ body.blk-full-open { overflow: hidden; }
 /* code blocks reuse the viewer toolbar (comment + full-screen); the pre keeps
    its own card, the wrapper only hosts the toolbar strip */
 .blk-codewrap { position: relative; }
+
+/* ---------- palette block (swatch cards; hover reveals hex, click copies) ---------- */
+.blk-palette .pal-title { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 2px 0 10px; }
+.blk-palette .pal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
+.pal-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card); }
+.pal-card.pal-spotlight { margin-bottom: 16px; }
+.pal-swatches { display: flex; height: 72px; }
+.pal-spotlight .pal-swatches { height: 104px; }
+.pal-sw { flex: 1; position: relative; cursor: pointer; border: 0; padding: 0; transition: flex .2s var(--ease); }
+.pal-sw:hover { flex: 1.6; }
+.pal-hex { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); font: 600 10px/1 var(--mono, ui-monospace, "SF Mono", monospace); background: rgba(0,0,0,.42); color: #fff; padding: 2px 6px; border-radius: 4px; white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; }
+.pal-sw:hover .pal-hex, .pal-sw.copied .pal-hex { opacity: 1; }
+.pal-sw.copied::after { content: "Copied"; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font: 600 9px/1 var(--sans); background: var(--ok); color: #fff; padding: 2px 7px; border-radius: 4px; }
+.pal-info { padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
+.pal-spotlight .pal-info { padding: 12px 16px; }
+.pal-name { font-size: 14px; font-weight: 600; color: var(--fg); }
+.pal-spotlight .pal-name { font-size: 15px; }
+.pal-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
+.pal-tag { flex: none; font-size: 11px; font-weight: 600; padding: 3px 11px; border-radius: 20px; background: var(--bg-sunken); color: var(--fg-2); }
+.pal-tag.tone-warm { background: #FAECE7; color: #993C1D; }
+.pal-tag.tone-cool { background: #E6F1FB; color: #185FA5; }
+.pal-tag.tone-neutral { background: #F1EFE8; color: #5F5E5A; }
+.pal-tag.tone-nature { background: #EAF3DE; color: #3B6D11; }
+.pal-tag.tone-bold { background: #FBEAF0; color: #72243E; }
+.pal-tag.tone-digital { background: #EEEDFE; color: #3C3489; }

package/src/ui/blocks.js

@@ -31,7 +31,9 @@
 
   // ---------- chart palette (from contract) ----------
   const PALETTE_LIGHT = ['#c2674b', '#4d8a66', '#5a7ca8', '#b9913f', '#8a6da3', '#57534e'];
-  const PALETTE_DARK = ['#d98e67', '#6fbf92', '#7c9fcc', '#d4b061', '#ad8fc2', '#a29c93'];
+  // Brighter/more saturated than the surfaces behind them so series stay legible
+  // on the dark card (#282624) — the muted set washed out at a glance.
+  const PALETTE_DARK = ['#e8a07a', '#74cfa0', '#88b4e8', '#e3c46a', '#c4a0db', '#c2b9ad'];
 
   function cssVar(name) {
     return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
@@ -743,7 +745,8 @@
 
   function themeDefaults(ctx) {
     const grid = cssVar('--border') || '#ece9e4';
-    const tick = cssVar('--muted') || '#8a8580';
+    // axis/legend/title text: --fg-2 reads clearly on dark; --muted was too dim
+    const tick = cssVar('--fg-2') || '#57534e';
     const fontFamily = cssVar('--sans') || 'sans-serif';
     return { grid, tick, fontFamily };
   }
@@ -1426,6 +1429,65 @@
     return container;
   }
 
+  // ---------- palette ----------
+  // Color palettes as swatch cards: hover a swatch to reveal its hex, click to
+  // copy it. One palette may be {featured:true} → a larger spotlight row. Lets
+  // an agent present a curated palette with one structured block instead of
+  // hand-writing HTML. Swatches and the whole block are commentable.
+  function copyColor(text, btn) {
+    const done = () => {
+      btn.classList.add('copied');
+      setTimeout(() => btn.classList.remove('copied'), 900);
+    };
+    try {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(done, () => {});
+        return;
+      }
+    } catch { /* fall through */ }
+    done(); // no clipboard (sandbox) — still flash feedback
+  }
+
+  function paletteCard(p, big, ctx, blockId) {
+    const card = el('div', { class: 'pal-card' + (big ? ' pal-spotlight' : '') });
+    const row = el('div', { class: 'pal-swatches' });
+    for (const c of p.colors) {
+      const sw = el('button', { class: 'pal-sw', type: 'button', style: 'background:' + c, title: 'Copy ' + c });
+      sw.append(el('span', { class: 'pal-hex' }, c));
+      sw.addEventListener('click', () => copyColor(c, sw));
+      if (ctx.annotate) {
+        ctx.annotate.register(sw, {
+          blockId,
+          questionId: ctx.questionId,
+          target: { kind: 'swatch', label: (p.name ? p.name + ' · ' : '') + c },
+        });
+      }
+      row.append(sw);
+    }
+    card.append(row);
+    const info = el('div', { class: 'pal-info' });
+    const meta = el('div', { class: 'pal-meta' });
+    if (p.name) meta.append(el('div', { class: 'pal-name' }, p.name));
+    if (p.sub) meta.append(el('div', { class: 'pal-sub' }, p.sub));
+    info.append(meta);
+    if (p.tag) info.append(el('span', { class: 'pal-tag' + (p.tagTone ? ' tone-' + p.tagTone : '') }, p.tag));
+    if (p.name || p.sub || p.tag) card.append(info);
+    return card;
+  }
+
+  function renderPalette(block, ctx, blockId) {
+    const wrap = el('div', { class: 'blk-palette' });
+    const palettes = Array.isArray(block.palettes) ? block.palettes : [];
+    if (block.title) wrap.append(el('div', { class: 'pal-title' }, block.title));
+    const grid = el('div', { class: 'pal-grid' });
+    for (const p of palettes) {
+      if (p.featured) wrap.append(paletteCard(p, true, ctx, blockId));
+      else grid.append(paletteCard(p, false, ctx, blockId));
+    }
+    if (grid.childNodes.length) wrap.append(grid);
+    return wrap;
+  }
+
   // ---------- viewer controls (zoom / fit / full-screen) ----------
   // Large diagrams get squeezed to the column width; these controls let the
   // user zoom (buttons or cmd/ctrl+wheel) and expand any visual block into a
@@ -1433,6 +1495,9 @@
   // the annotation pins/badges/popover usable while expanded (they live on
   // <body>, which native fullscreen would hide).
   let fullOpen = null; // container currently expanded
+  // full-screen content insets — must mirror the .blk-full padding in blocks.css
+  // so the fit-to-screen scale clears the fixed toolbar + leaves a small margin.
+  const FULL_PAD_X = 24, FULL_PAD_TOP = 44, FULL_PAD_BOTTOM = 24;
 
   // Toolbar icons: full-screen (4-corner expand) and a speech-bubble for the
   // "comment on the whole block" button. Zoom is both cmd/ctrl+wheel AND
@@ -1574,14 +1639,26 @@
       const target = opts.zoomEl;
       const nat = opts.natural();
       const z = container._rlyZ;
+      const full = container.classList.contains('blk-full');
       // A per-block height caps only the compact inline preview. The moment the
       // user zooms in (z !== null) or goes full-screen they want pixel detail, so
       // lift the cap there; restore it when back to the inline fit view.
       if (opts.fitMaxHeight != null) {
-        const fit = z === null && !container.classList.contains('blk-full');
-        target.style.maxHeight = fit ? opts.fitMaxHeight + 'px' : 'none';
+        target.style.maxHeight = z === null && !full ? opts.fitMaxHeight + 'px' : 'none';
       }
-      if (z === null || !nat || !nat.w) {
+      if (z === null && full && nat && nat.w && nat.h) {
+        // Full-screen default: scale the diagram/image to fill the viewport
+        // (contain — enlarge a small one, shrink a big one) so it's readable at
+        // a glance without reaching for the zoom buttons. CSS margin:auto centers
+        // it; it stays pannable once the user zooms past this fit.
+        const availW = window.innerWidth - FULL_PAD_X * 2;
+        const availH = window.innerHeight - FULL_PAD_TOP - FULL_PAD_BOTTOM;
+        const scale = Math.min(availW / nat.w, availH / nat.h);
+        target.style.maxWidth = 'none';
+        target.style.width = Math.max(1, Math.round(nat.w * scale)) + 'px';
+        target.style.height = 'auto';
+        pct.textContent = 'fit';
+      } else if (z === null || !nat || !nat.w) {
         target.style.width = '100%';
         target.style.maxWidth = nat && nat.w ? Math.ceil(nat.w) + 'px' : '100%';
         target.style.height = 'auto';
@@ -1753,6 +1830,10 @@
         inner = renderImage(block, ctx, blockId);
         wrapper.append(inner);
         break;
+      case 'palette':
+        inner = renderPalette(block, ctx, blockId);
+        wrapper.append(inner);
+        break;
       default:
         wrapper.append(el('div', { class: 'blk-error' }, 'Unknown block type: ' + esc(String(block.type))));
     }

package/src/ui/style.css

@@ -68,14 +68,17 @@
 
 * { box-sizing: border-box; }
 html, body { margin: 0; padding: 0; }
+/* Root font size drives every rem on the page; --fs is the user's text-size
+   knob (A−/A+ next to the theme toggle). Base bumped 16→17px for readability. */
+html { font-size: calc(17px * var(--fs, 1)); }
 body {
   background: var(--bg);
   color: var(--fg);
-  font: 16px/1.6 var(--sans);
+  font: 1rem/1.6 var(--sans);
   -webkit-font-smoothing: antialiased;
   transition: background 200ms var(--ease), color 200ms var(--ease), padding 240ms var(--ease);
 }
-.wrap { max-width: 860px; margin: 0 auto; padding: 32px 20px 28px; }
+.wrap { max-width: 1280px; margin: 0 auto; padding: 32px 20px 28px; }
 
 .qb-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
 h1 {
@@ -101,6 +104,18 @@ h1 {
   transition: border-color 150ms var(--ease), color 150ms var(--ease);
 }
 .theme-btn:hover { border-color: var(--accent); color: var(--accent); }
+/* header controls: font-size knob + theme toggle, grouped at the right */
+.qb-controls { display: flex; align-items: center; gap: 8px; flex: none; }
+.fs-ctrl { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; }
+.fs-btn {
+  background: transparent; color: var(--fg-2); border: 0;
+  padding: 6px 11px; cursor: pointer; line-height: 1; font-family: var(--sans);
+  transition: color 150ms var(--ease), background 150ms var(--ease);
+}
+.fs-btn:first-child { font-size: 0.72rem; }
+.fs-btn:last-child { font-size: 0.92rem; }
+.fs-btn + .fs-btn { border-left: 1px solid var(--border-strong); }
+.fs-btn:hover { color: var(--accent); background: var(--accent-soft); }
 
 .card {
   background: var(--card);
@@ -311,3 +326,14 @@ textarea { min-height: 90px; resize: vertical; }
 @media (prefers-reduced-motion: reduce) {
   * { transition: none !important; animation: none !important; }
 }
+
+/* ---------- color picker question (native input + hex + presets) ---------- */
+.colorpick { display: flex; flex-direction: column; gap: 10px; }
+.colorrow { display: flex; align-items: center; gap: 10px; }
+.colorswatch { width: 48px; height: 38px; padding: 0; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--card); cursor: pointer; }
+.colorswatch::-webkit-color-swatch-wrapper { padding: 3px; }
+.colorswatch::-webkit-color-swatch { border: 0; border-radius: 7px; }
+.colorhex { width: 150px; font-family: var(--mono, ui-monospace, "SF Mono", monospace); text-transform: lowercase; }
+.colorpresets { display: flex; flex-wrap: wrap; gap: 8px; }
+.colorpreset { width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(0,0,0,.14); cursor: pointer; padding: 0; transition: transform .12s var(--ease); }
+.colorpreset:hover { transform: scale(1.12); }