@khanglvm/relay 0.12.2 → 0.13.0

package/src/mcp-ui/board.js

@@ -231,11 +231,11 @@
         label: String(rq.label || rq.question || rq.text || ''),
         description: typeof rq.description === 'string' ? rq.description : '',
         required: rq.required === true,
-        note: rq.note === undefined ? type === 'single' : rq.note === true,
+        note: rq.note === undefined ? (type === 'single' || type === 'rank' || type === 'checklist' || type === 'allocate') : rq.note === true,
         placeholder: typeof rq.placeholder === 'string' ? rq.placeholder : '',
         blocks: normBlocks(rq.blocks, id + '-'),
       };
-      if (type === 'single' || type === 'multi') {
+      if (type === 'single' || type === 'multi' || type === 'rank' || type === 'checklist' || type === 'allocate') {
         const opts = Array.isArray(rq.options) ? rq.options : [];
         q.options = opts.map((o, j) => {
           if (typeof o === 'string' || typeof o === 'number') return { value: String(o), label: String(o) };
@@ -249,7 +249,18 @@
           }
           return { value: String(o), label: String(o) };
         });
-        q.other = type === 'single' ? rq.other !== false : rq.other === true;
+        if (type === 'single' || type === 'multi') q.other = type === 'single' ? rq.other !== false : rq.other === true;
+      }
+      if (type === 'checklist') {
+        const rawSt = Array.isArray(rq.statuses) && rq.statuses.length ? rq.statuses
+          : [{ value: 'pass', label: 'Pass', tone: 'ok' }, { value: 'fail', label: 'Fail', tone: 'bad' }, { value: 'na', label: 'N/A', tone: 'muted' }];
+        q.statuses = rawSt.map((s) => typeof s === 'object' && s
+          ? { value: String(s.value != null ? s.value : s.label || ''), label: String(s.label != null ? s.label : s.value || ''), tone: s.tone ? String(s.tone) : undefined }
+          : { value: String(s), label: String(s) === 'na' ? 'N/A' : String(s) });
+      }
+      if (type === 'allocate') {
+        q.total = Number.isFinite(rq.total) && rq.total > 0 ? Math.floor(rq.total) : 100;
+        if (rq.unit !== undefined) q.unit = String(rq.unit);
       }
       if (type === 'scale') {
         q.min = Number.isFinite(rq.min) ? rq.min : 1;
@@ -260,6 +271,11 @@
       if (type === 'color' && Array.isArray(rq.presets)) {
         q.presets = rq.presets.map((c) => String(c)).filter(Boolean);
       }
+      if (type === 'color' && Array.isArray(rq.palette)) {
+        q.palette = rq.palette.map((p) => typeof p === 'object' && p
+          ? { value: String(p.value != null ? p.value : p.color || ''), label: String(p.label != null ? p.label : (p.name != null ? p.name : (p.value != null ? p.value : p.color || ''))) }
+          : { value: String(p), label: String(p) }).filter((p) => p.value);
+      }
       if (rq.default !== undefined) q.default = rq.default;
       spec.questions.push(q);
     });
@@ -423,6 +439,32 @@
 
   function seedDefaults() {
     for (const q of QS) if (q.default !== undefined) state.answers[q.id] = q.default;
+    // Rank questions carry a full, valid permutation so an untouched rank still
+    // submits a meaningful order (mirrors the browser board's seedRankOrder).
+    for (const q of QS) {
+      if (q.type !== 'rank') continue;
+      const opts = (q.options || []).map((o) => o.value);
+      const prior = Array.isArray(state.answers[q.id]) ? state.answers[q.id] : [];
+      const order = prior.filter((v, i) => opts.includes(v) && prior.indexOf(v) === i);
+      for (const v of opts) if (!order.includes(v)) order.push(v);
+      state.answers[q.id] = order;
+    }
+    for (const q of QS) if (q.type === 'allocate') state.answers[q.id] = seedAllocate(q, state.answers[q.id]);
+    for (const q of QS) if (q.type === 'checklist') state.answers[q.id] = seedChecklist(q, state.answers[q.id]);
+  }
+  function seedAllocate(q, prior) {
+    const m = prior && typeof prior === 'object' && !Array.isArray(prior) ? prior : {};
+    const out = {};
+    for (const o of q.options || []) out[o.value] = Math.max(0, Number(m[o.value]) || 0);
+    return out;
+  }
+  function seedChecklist(q, prior) {
+    const m = prior && typeof prior === 'object' && !Array.isArray(prior) ? prior : {};
+    const optVals = new Set((q.options || []).map((o) => o.value));
+    const stVals = new Set((q.statuses || []).map((s) => s.value));
+    const out = {};
+    for (const k of Object.keys(m)) if (optVals.has(k) && stVals.has(m[k])) out[k] = m[k];
+    return out;
   }
 
   function getValue(q) {
@@ -442,6 +484,17 @@
         return v === 'yes' || v === 'no' ? v : undefined;
       case 'scale':
         return typeof v === 'number' ? v : undefined;
+      case 'rank':
+        return Array.isArray(v) && v.length ? [...v] : undefined;
+      case 'checklist': {
+        const m = v && typeof v === 'object' && !Array.isArray(v) ? v : {};
+        return Object.keys(m).length ? { ...m } : undefined;
+      }
+      case 'allocate': {
+        const m = v && typeof v === 'object' && !Array.isArray(v) ? v : {};
+        const sum = Object.values(m).reduce((a, n) => a + (Number(n) || 0), 0);
+        return sum > 0 ? { ...m } : undefined;
+      }
       default: {
         const t = typeof v === 'string' ? v.trim() : '';
         return t || undefined;
@@ -595,35 +648,182 @@
     input.addEventListener('input', () => { state.answers[q.id] = input.value; clearErr(q.id); });
     return input;
   }
+  // Checklist / allocate — see the browser board's controls (no autosave here).
+  function controlChecklist(q) {
+    const wrap = el('div', { class: 'checklist' });
+    const cur = () => (state.answers[q.id] && typeof state.answers[q.id] === 'object' && !Array.isArray(state.answers[q.id])
+      ? state.answers[q.id] : (state.answers[q.id] = {}));
+    for (const o of q.options) {
+      const seg = el('div', { class: 'chk-seg' });
+      const buttons = [];
+      for (const s of q.statuses) {
+        const b = el('button', { type: 'button', class: 'chk-status' + (s.tone ? ' tone-' + s.tone : '') }, s.label);
+        if (cur()[o.value] === s.value) b.classList.add('sel');
+        b.addEventListener('click', () => {
+          const m = cur();
+          if (m[o.value] === s.value) delete m[o.value];
+          else m[o.value] = s.value;
+          for (const x of buttons) x.btn.classList.toggle('sel', m[o.value] === x.val);
+          clearErr(q.id);
+        });
+        buttons.push({ btn: b, val: s.value });
+        seg.append(b);
+      }
+      wrap.append(el('div', { class: 'chk-row' },
+        el('div', { class: 'chk-body' }, el('div', { class: 'ol' }, o.label), o.description ? el('div', { class: 'od' }, o.description) : null),
+        seg));
+    }
+    return wrap;
+  }
+  function controlAllocate(q) {
+    const wrap = el('div', { class: 'allocate' });
+    const total = q.total || 100;
+    const unit = q.unit ? ' ' + q.unit : '';
+    const cur = () => (state.answers[q.id] = seedAllocate(q, state.answers[q.id]));
+    const sumEl = el('span', { class: 'alloc-sum' });
+    const fill = el('div', { class: 'alloc-bar-fill' });
+    const nums = [];
+    const refresh = () => {
+      const m = cur();
+      const sum = (q.options || []).reduce((a, o) => a + (Number(m[o.value]) || 0), 0);
+      const tail = sum > total ? ' (over by ' + (sum - total) + ')' : sum < total ? ' (' + (total - sum) + ' left)' : ' ✓';
+      sumEl.textContent = sum + ' / ' + total + unit + tail;
+      sumEl.classList.toggle('over', sum > total);
+      sumEl.classList.toggle('exact', sum === total);
+      fill.style.width = Math.min(100, (sum / total) * 100) + '%';
+      fill.classList.toggle('over', sum > total);
+      for (const n of nums) n.el.textContent = String(m[n.value] || 0);
+    };
+    for (const o of q.options) {
+      const m = cur();
+      const range = el('input', { type: 'range', min: '0', max: String(total), step: '1', class: 'alloc-range', 'aria-label': o.label });
+      range.value = String(m[o.value] || 0);
+      const num = el('span', { class: 'alloc-num' }, String(m[o.value] || 0));
+      range.addEventListener('input', () => { cur()[o.value] = Number(range.value) || 0; refresh(); clearErr(q.id); });
+      nums.push({ value: o.value, el: num });
+      wrap.append(el('div', { class: 'alloc-row' },
+        el('div', { class: 'alloc-rowhead' }, el('div', { class: 'ol' }, o.label), num),
+        range,
+        o.description ? el('div', { class: 'od' }, o.description) : null));
+    }
+    wrap.append(el('div', { class: 'alloc-total' },
+      el('div', { class: 'alloc-bar' }, fill),
+      el('div', { class: 'alloc-sumwrap' }, 'Total: ', sumEl)));
+    refresh();
+    return wrap;
+  }
+  // Reorderable priority list — see the browser board's controlRank. Answer is
+  // the ordered array of option values (highest first); always a full permutation.
+  function controlRank(q) {
+    const wrap = el('div', { class: 'rank' });
+    const byVal = new Map(q.options.map((o) => [o.value, o]));
+    let dragFrom = null;
+    function move(from, to) {
+      const arr = state.answers[q.id];
+      if (!Array.isArray(arr) || to < 0 || to >= arr.length || from === to) return;
+      const [x] = arr.splice(from, 1);
+      arr.splice(to, 0, x);
+      paint();
+      clearErr(q.id);
+    }
+    function paint() {
+      wrap.replaceChildren();
+      const order = state.answers[q.id] || [];
+      order.forEach((val, i) => {
+        const o = byVal.get(val);
+        if (!o) return;
+        const up = el('button', { type: 'button', class: 'rank-btn', title: 'Move up', 'aria-label': 'Move "' + o.label + '" up' }, '↑');
+        const down = el('button', { type: 'button', class: 'rank-btn', title: 'Move down', 'aria-label': 'Move "' + o.label + '" down' }, '↓');
+        up.disabled = i === 0;
+        down.disabled = i === order.length - 1;
+        up.addEventListener('click', () => move(i, i - 1));
+        down.addEventListener('click', () => move(i, i + 1));
+        const item = el('div', { class: 'rank-item', draggable: 'true' },
+          el('span', { class: 'rank-badge', 'aria-hidden': 'true' }, String(i + 1)),
+          el('div', { class: 'rank-body' },
+            el('div', { class: 'ol' }, o.label),
+            o.description ? el('div', { class: 'od' }, o.description) : null),
+          el('div', { class: 'rank-ctrls' }, up, down)
+        );
+        item.addEventListener('dragstart', (e) => {
+          dragFrom = i; item.classList.add('dragging');
+          try { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', String(i)); } catch (_) {}
+        });
+        item.addEventListener('dragend', () => { dragFrom = null; item.classList.remove('dragging'); });
+        item.addEventListener('dragover', (e) => { if (dragFrom !== null) { e.preventDefault(); item.classList.add('drop-into'); } });
+        item.addEventListener('dragleave', () => item.classList.remove('drop-into'));
+        item.addEventListener('drop', (e) => {
+          e.preventDefault();
+          const from = dragFrom; dragFrom = null;
+          if (from !== null && from !== i) move(from, i);
+        });
+        wrap.append(item);
+      });
+    }
+    paint();
+    return wrap;
+  }
 
-  function toHex6(c) {
-    const s = String(c || '').trim();
+  // Resolve any CSS color (named/rgb/hsl/hex) to #rrggbb via the browser parser.
+  function cssColorToHex(str) {
+    const s = String(str || '').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';
+    try {
+      const d = document.createElement('div');
+      d.style.color = '';
+      d.style.color = s;
+      if (!d.style.color) return null;
+      d.style.display = 'none';
+      document.body.appendChild(d);
+      const rgb = getComputedStyle(d).color;
+      document.body.removeChild(d);
+      const mm = rgb.match(/(\d+)[,\s]+(\d+)[,\s]+(\d+)/);
+      if (!mm) return null;
+      const h = (n) => Math.max(0, Math.min(255, Number(n))).toString(16).padStart(2, '0');
+      return '#' + h(mm[1]) + h(mm[2]) + h(mm[3]);
+    } catch { return null; }
   }
+  function toHex6(c) { return cssColorToHex(c) || '#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' });
+    const hex = el('input', { type: 'text', class: 'colorhex', placeholder: q.placeholder || '#rrggbb / rgb() / name', 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); };
+    let syncPaletteSel = () => {};
+    const set = (val) => { state.answers[q.id] = val; syncPaletteSel(); clearErr(q.id); };
     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); });
+    hex.addEventListener('input', () => { const v = hex.value.trim(); const h = cssColorToHex(v); if (h) swatch.value = h; set(v); });
+    if (Array.isArray(q.palette) && q.palette.length) {
+      const grid = el('div', { class: 'colorpalette' });
+      const cards = [];
+      for (const p of q.palette) {
+        const labelled = p.label && p.label !== p.value;
+        const card = el('button', { type: 'button', class: 'colorpal-sw', style: 'background:' + p.value, title: (labelled ? p.label + ' · ' : '') + p.value });
+        if (labelled) card.append(el('span', { class: 'colorpal-label' }, p.label));
+        card.addEventListener('click', () => { const h = cssColorToHex(p.value); if (h) swatch.value = h; hex.value = p.value; set(p.value); });
+        if (Annotate && !composing) Annotate.register(card, { blockId: null, questionId: q.id, target: { kind: 'swatch', label: (labelled ? p.label + ' · ' : '') + p.value } });
+        cards.push({ card, val: p.value });
+        grid.append(card);
+      }
+      syncPaletteSel = () => { for (const c of cards) c.card.classList.toggle('sel', state.answers[q.id] === c.val); };
+      wrap.append(grid);
+    }
     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); });
+        b.addEventListener('click', () => { const h = cssColorToHex(c); if (h) swatch.value = h; hex.value = c; set(c); });
         presets.append(b);
       }
       wrap.append(presets);
     }
+    syncPaletteSel();
     return wrap;
   }
 
@@ -659,6 +859,9 @@
       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 if (q.type === 'rank') control.append(controlRank(q));
+      else if (q.type === 'checklist') control.append(controlChecklist(q));
+      else if (q.type === 'allocate') control.append(controlAllocate(q));
       else control.append(controlText(q, q.type === 'textarea'));
       card.append(control);
       if (q.note) {

package/src/server.js

@@ -42,16 +42,21 @@ function readUi(name) {
 // (their bodies are served via /html/b/<id>), embedded images ship only
 // metadata (bytes served via /img/b/<id>), everything else ships as-is.
 function clientBlock(b) {
+  // Cross-block fields preserved when we ship metadata-only (ref = reference-link
+  // target name; pins = image coordinate comments). The default `return b` path
+  // already carries them.
+  const extra = {};
+  if (b && b.ref !== undefined) extra.ref = b.ref;
   if (b && b.type === 'html') {
-    return { id: b.id, type: 'html', height: b.height, hasHtml: Boolean(b.html) };
+    return { id: b.id, type: 'html', height: b.height, hasHtml: Boolean(b.html), ...extra };
   }
   if (b && b.type === 'image' && typeof b.src === 'string' && b.src.startsWith('data:')) {
-    return { id: b.id, type: 'image', alt: b.alt, height: b.height, hasData: true };
+    return { id: b.id, type: 'image', alt: b.alt, height: b.height, hasData: true, ...(b.pins ? { pins: true } : {}), ...extra };
   }
   // Local video: the absolute file path stays server-side; the client gets a
   // flag + mime and loads the bytes (Range-streamed) from /video/b/<id>.
   if (b && b.type === 'video' && typeof b.file === 'string') {
-    return { id: b.id, type: 'video', title: b.title, height: b.height, mime: b.mime, hasFile: true };
+    return { id: b.id, type: 'video', title: b.title, height: b.height, mime: b.mime, hasFile: true, ...extra };
   }
   return b;
 }