@khanglvm/relay 0.12.2 → 0.13.0

package/src/ui/annotate.js

@@ -46,11 +46,15 @@
         return 'Diagram · ' + truncate(t.text || 'element', 50);
       case 'image':
         return truncate(t.label || 'Image', 50);
+      case 'image-point':
+        return (t.label ? truncate(t.label, 30) + ' · ' : 'Image · ') + 'pin ' + Math.round((t.x || 0) * 100) + '%, ' + Math.round((t.y || 0) * 100) + '%';
       case 'table-cell': {
         let s = `Table · row ${(Number(t.row) || 0) + 1} · ${t.col}`;
         if (t.value !== undefined && t.value !== null && t.value !== '') s += ` — “${truncate(t.value, 30)}”`;
         return s;
       }
+      case 'code-line':
+        return 'Line ' + t.line + (t.file ? ' · ' + truncate(t.file, 40) : '');
       case 'text':
         return `“${truncate(t.quote || '', 60)}”`;
       case 'html-element':
@@ -494,13 +498,60 @@
     dom.pop.replaceChildren();
   }
 
+  // ---------- delete a comment (with confirm) ----------
+  // The × that used to delete a comment read as "close the popup". Delete is now
+  // a distinct trash button that opens a confirm modal; "Don't ask again"
+  // (default OFF) suppresses future confirms for the session (persisted best-effort).
+  const ICON_TRASH =
+    '<svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+    '<path d="M2.5 4h11M6 4V2.5h4V4M5 4l.5 9h5l.5-9"/></svg>';
+  const ICON_PENCIL =
+    '<svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+    '<path d="M11.5 2.5l2 2L6 12l-2.5.5.5-2.5 7.5-7.5z"/></svg>';
+  const DEL_SKIP_KEY = 'relay-ann-del-skip';
+  let delConfirmSkip = false;
+  try { delConfirmSkip = localStorage.getItem(DEL_SKIP_KEY) === '1'; } catch { /* sandbox: no storage */ }
+
+  function requestDelete(id, after) {
+    const done = () => { removeAnnotation(id); if (after) after(); };
+    if (delConfirmSkip) { done(); return; }
+    showDeleteConfirm(done);
+  }
+  function showDeleteConfirm(onConfirm) {
+    const scrim = el('div', { class: 'ann-confirm-scrim' });
+    const skip = el('input', { type: 'checkbox' });
+    const cancel = el('button', { class: 'ann-confirm-cancel', type: 'button' }, 'Cancel');
+    const del = el('button', { class: 'ann-confirm-del', type: 'button' }, 'Delete');
+    const close = () => { scrim.remove(); document.removeEventListener('keydown', onKey, true); };
+    const onKey = (e) => { if (e.key === 'Escape') { e.preventDefault(); close(); } };
+    cancel.addEventListener('click', close);
+    scrim.addEventListener('mousedown', (e) => { if (e.target === scrim) close(); });
+    del.addEventListener('click', () => {
+      if (skip.checked) { delConfirmSkip = true; try { localStorage.setItem(DEL_SKIP_KEY, '1'); } catch { /* sandbox */ } }
+      close();
+      onConfirm();
+    });
+    scrim.append(el('div', { class: 'ann-confirm', role: 'alertdialog', 'aria-label': 'Delete comment' },
+      el('div', { class: 'ann-confirm-title' }, 'Delete this comment?'),
+      el('div', { class: 'ann-confirm-msg' }, 'This removes the comment and its replies. It can’t be undone.'),
+      el('label', { class: 'ann-confirm-skip' }, skip, el('span', {}, 'Don’t ask again')),
+      el('div', { class: 'ann-confirm-actions' }, cancel, del)
+    ));
+    document.body.append(scrim);
+    document.addEventListener('keydown', onKey, true);
+    setTimeout(() => { try { cancel.focus(); } catch { /* ignore */ } }, 0);
+  }
+
   function openPopover(info, anchorEl) {
     if (disabled) return;
     ensureDom();
     closePopover();
     hidePin();
     const pop = dom.pop;
-    pop.replaceChildren(el('div', { class: 'ann-pop-label' }, humanize(info.target)));
+    // Header: target label + an explicit CLOSE button, so × always means "close".
+    const popClose = el('button', { class: 'ann-pop-close', type: 'button', title: 'Close', 'aria-label': 'Close' }, '×');
+    popClose.addEventListener('click', closePopover);
+    pop.replaceChildren(el('div', { class: 'ann-pop-head' }, el('div', { class: 'ann-pop-label' }, humanize(info.target)), popClose));
 
     // Existing comments on this exact target, rendered as threads: author
     // chip + time + delete, the comment text, its replies indented below,
@@ -510,14 +561,33 @@
     const renderExisting = () => {
       existingWrap.replaceChildren();
       for (const a of matching(info)) {
-        const del = el('button', { class: 'ann-del', type: 'button', title: 'Delete comment', 'aria-label': 'Delete comment' }, '×');
-        del.addEventListener('click', () => {
-          removeAnnotation(a.id);
-          renderExisting();
+        const del = el('button', { class: 'ann-del', type: 'button', title: 'Delete comment', 'aria-label': 'Delete comment' });
+        del.innerHTML = ICON_TRASH;
+        del.addEventListener('click', () => requestDelete(a.id, renderExisting));
+        const edit = el('button', { class: 'ann-edit', type: 'button', title: 'Edit comment', 'aria-label': 'Edit comment' });
+        edit.innerHTML = ICON_PENCIL;
+        const textEl = el('div', { class: 'ann-pop-text' }, a.text);
+        // Inline edit: swap the text for a textarea + Save/Cancel; Save commits
+        // via editAnnotation, then re-renders. Only the user's own comment is editable.
+        edit.addEventListener('click', () => {
+          const ta = el('textarea', { class: 'ann-ta ann-edit-ta', rows: '3' });
+          ta.value = a.text;
+          const save = el('button', { class: 'ann-save', type: 'button' }, 'Save');
+          const cancel = el('button', { class: 'ann-cancel', type: 'button' }, 'Cancel');
+          save.addEventListener('click', () => { editAnnotation(a.id, ta.value); renderExisting(); });
+          cancel.addEventListener('click', renderExisting);
+          ta.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') { e.stopPropagation(); renderExisting(); }
+            else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); editAnnotation(a.id, ta.value); renderExisting(); }
+          });
+          textEl.replaceWith(el('div', { class: 'ann-edit-form' }, ta, el('div', { class: 'ann-pop-actions' }, save, cancel)));
+          ta.focus();
         });
+        // agent replies aren't editable here — only the top-level user comment
+        const actions = el('div', { class: 'ann-thread-actions' }, a.author === 'user' ? edit : null, del);
         const thread = el('div', { class: 'ann-thread' },
-          el('div', { class: 'ann-thread-head' }, chip(a.author), timeEl(a.createdAt), del),
-          el('div', { class: 'ann-pop-text' }, a.text)
+          el('div', { class: 'ann-thread-head' }, chip(a.author), timeEl(a.createdAt), actions),
+          textEl
         );
         if (Array.isArray(a.replies) && a.replies.length) {
           const list = el('div', { class: 'ann-replies' });
@@ -629,6 +699,16 @@
     changed();
   }
 
+  // Edit a top-level comment's text in place (author edits their own comment).
+  function editAnnotation(id, text) {
+    const a = annotations.find((x) => x.id === id);
+    if (!a) return;
+    const t = String(text).slice(0, 5000).trim();
+    if (!t) return;
+    a.text = t;
+    changed();
+  }
+
   function removeAnnotation(id) {
     const i = annotations.findIndex((a) => a.id === id);
     if (i < 0) return;
@@ -719,11 +799,9 @@
     // The rail has its own header chrome; standalone summaries get a heading.
     if (!isRail) target.append(el('h3', { class: 'ann-sum-head' }, `Comments (${annotations.length})`));
     for (const a of annotations) {
-      const del = el('button', { class: 'ann-del', type: 'button', title: 'Delete comment', 'aria-label': 'Delete comment' }, '×');
-      del.addEventListener('click', (e) => {
-        e.stopPropagation();
-        removeAnnotation(a.id);
-      });
+      const del = el('button', { class: 'ann-del', type: 'button', title: 'Delete comment', 'aria-label': 'Delete comment' });
+      del.innerHTML = ICON_TRASH;
+      del.addEventListener('click', (e) => { e.stopPropagation(); requestDelete(a.id); });
       // Thread meta: reply count, plus an "agent" chip when the latest entry
       // in the thread (last reply, or the comment itself) is agent-authored.
       const replyCount = Array.isArray(a.replies) ? a.replies.length : 0;

package/src/ui/app.js

@@ -212,8 +212,41 @@
       }
     }
   }
+  // Coerce any prior rank value (draft/default) into a complete, deduped
+  // permutation of the option values: keep the known ones in their given order,
+  // then append any options the prior list missed (in authored order).
+  function seedRankOrder(q, prior) {
+    const opts = (q.options || []).map((o) => o.value);
+    const arr = Array.isArray(prior) ? prior : [];
+    const order = arr.filter((v, i) => opts.includes(v) && arr.indexOf(v) === i);
+    for (const v of opts) if (!order.includes(v)) order.push(v);
+    return order;
+  }
+  // Allocate: a complete map {optionValue: number≥0}, seeded from a prior/default.
+  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;
+  }
+  // Checklist: keep only {knownOption: knownStatus} entries from a prior/default.
+  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;
+  }
+
   if (initialPrefill) seedFromPrefill(initialPrefill);
   else for (const q of QS) if (q.default !== undefined) state.answers[q.id] = q.default;
+  // Rank questions always carry a full, valid permutation of their option values
+  // (from a draft/default if present, else the authored order), so a never-touched
+  // rank still returns a meaningful ordering.
+  for (const q of QS) if (q.type === 'rank') state.answers[q.id] = seedRankOrder(q, state.answers[q.id]);
+  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]);
   // If the local mirror was newer than the server (or the server had nothing),
   // the in-memory state now holds input the server hasn't seen — flush it once
   // the rest of the app is wired (see the post-init flush near the heartbeat).
@@ -241,6 +274,18 @@
         return v === 'yes' || v === 'no' ? v : undefined;
       case 'scale':
         return typeof v === 'number' ? v : undefined;
+      case 'rank':
+        // always a full, valid permutation (seeded below) → always answered
+        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;
@@ -721,6 +766,144 @@
     return row;
   }
 
+  // Reorderable priority list. The user drags an item or uses ↑/↓; the answer is
+  // the ordered array of option values (highest priority first). state.answers[q.id]
+  // is kept a full, valid permutation by seedRankOrder so it's always submittable.
+  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);
+      scheduleSave();
+    }
+    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;
+  }
+
+  // Checklist: each option is a row with a segmented status control (Pass/Fail/
+  // N/A by default). Answer is a map {optionValue: statusValue} for set rows.
+  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);
+          scheduleSave();
+        });
+        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;
+  }
+
+  // Allocate: distribute q.total across the options with per-option sliders; a
+  // live total bar shows the running sum / remaining / overage. Answer is a map
+  // {optionValue: number}; an all-zero allocation submits as unanswered.
+  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);
+        scheduleSave();
+      });
+      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;
+  }
+
   function controlText(q, multiline) {
     const input = multiline
       ? el('textarea', { placeholder: q.placeholder || '' })
@@ -734,35 +917,73 @@
     return input;
   }
 
-  // Normalize any CSS color to the #rrggbb the native <input type=color> needs.
-  function toHex6(c) {
-    const s = String(c || '').trim();
+  // Resolve ANY CSS color (named / rgb() / hsl() / hex) to #rrggbb for the
+  // native <input type=color>, using the browser's own parser — multi color-
+  // system support with no library. Returns null for an unparseable color.
+  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; // browser rejected it → invalid color
+      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); scheduleSave(); };
+    let syncPaletteSel = () => {};
+    const set = (val) => { state.answers[q.id] = val; syncPaletteSel(); 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); });
+    hex.addEventListener('input', () => { const v = hex.value.trim(); const h = cssColorToHex(v); if (h) swatch.value = h; set(v); });
+
+    // "Pick from a palette" — labeled swatch cards. Click selects that color as
+    // the answer; each card is registered for annotation (per-color comments).
+    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) 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;
   }
 
@@ -832,6 +1053,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) {