@myrtilleio/redline 0.1.0

package/client/composer.js

@@ -0,0 +1,384 @@
+// ---------------------------------------------------------------- composer
+
+// “ul in div.plan-featured · 100 checks…” — enough to tell a list from its card.
+function targetSummary(el, a) {
+  if (!el) return a && a.target ? a.target.selector : 'Page';
+  const parent = el.parentElement && el.parentElement !== document.body ? el.parentElement : null;
+  const text = asBuilt(() => el.innerText || el.getAttribute('alt') || el.getAttribute('aria-label') || '').replace(/\s+/g, ' ').trim();
+  return `${label(el)}${parent ? ' in ' + label(parent) : ''}${text ? ' · ' + (text.length > 40 ? text.slice(0, 40) + '…' : text) : ''}`;
+}
+
+// Put the composer beside what it's about rather than on top of it: right, left,
+// below or above the element; on narrow screens, dock it to the opposite half.
+function placeComposer(form, rect, point) {
+  // In a scaled-down device frame the composer is zoomed back up (uiZoom): measure
+  // its on-screen size, and divide positions by the zoom, which CSS applies to them.
+  const box = form.getBoundingClientRect();
+  const w = box.width, fh = box.height, gap = 12, m = 8, z = uiZoom;
+  const fits = (x, y) => x >= m && y >= m && x + w <= innerWidth - m && y + fh <= innerHeight - m;
+  const clampY = (y) => Math.min(Math.max(y, m), innerHeight - fh - m);
+  const clampX = (x) => Math.min(Math.max(x, m), innerWidth - w - m);
+  let pos = null;
+  if (innerWidth < 520) {
+    const lower = rect ? rect.top + rect.height / 2 > innerHeight / 2 : false;
+    Object.assign(form.style, { left: m / z + 'px', right: m / z + 'px', width: 'auto', top: lower ? m / z + 'px' : 'auto', bottom: lower ? 'auto' : m / z + 'px' });
+    return;
+  }
+  if (rect) {
+    const options = [
+      [rect.right + gap, clampY(rect.top), 'left top'],
+      [rect.left - w - gap, clampY(rect.top), 'right top'],
+      [clampX(rect.left), rect.bottom + gap, 'top left'],
+      [clampX(rect.left), rect.top - fh - gap, 'bottom left'],
+    ];
+    pos = options.find(([x, y]) => fits(x, y));
+  }
+  // Grow out of the side that faces the element.
+  form.style.setProperty('--origin', pos ? pos[2] : 'center');
+  if (!pos) {
+    const p = point || { x: innerWidth / 2, y: innerHeight / 2 };
+    pos = [p.x + gap + w > innerWidth - m ? p.x - w - gap : p.x + gap, p.y - 20];
+  }
+  form.style.left = clampX(pos[0]) / z + 'px';
+  form.style.top = clampY(pos[1]) / z + 'px';
+}
+
+function openComposer({ annotation, draft, el, point, compact }) {
+  closeComposer();
+  hideMarkChip(true);
+  const a = annotation || null;
+  const target = el || (a && anchorEl(a)) || null;
+  let verdict = a ? a.verdict : state.verdict;
+  const tags = a ? a.tags || [] : []; // kept as they were; the card no longer asks for them
+  // Once the agent has joined in (or asked), the card is a conversation: your first
+  // note and the replies above, and the field below becomes a reply.
+  const replyMode = !!a && !!a.thread && a.thread.length > 0;
+  const original = a && !replyMode ? a.comment || '' : '';
+  let touched = false;
+  let request = a ? a.request || null : null;
+  const changed = () => (touched = true);
+
+  const text = h('textarea', {
+    placeholder: a && a.kind === 'stroke' ? 'Add a note about this mark (optional)…' : 'What should the AI keep or change?',
+    'aria-label': 'Comment',
+  });
+  text.value = original;
+
+  const grow = () => {
+    const before = text.offsetHeight;
+    text.style.height = 'auto';
+    text.style.height = Math.min(text.scrollHeight + 2, 240) + 'px';
+    if (form.isConnected && text.offsetHeight !== before) replace();
+  };
+  // What the card is about on screen: the drawn area of a box, else the element.
+  const focusRect = () => {
+    const region = (a && a.region) || (draft && draft.region);
+    if (target && region) {
+      const r = target.getBoundingClientRect();
+      const t = a && a.target && a.target.rect;
+      const sx = t && t.w ? r.width / t.w : 1, sy = t && t.h ? r.height / t.h : 1;
+      const left = r.left + region.x * sx, top = r.top + region.y * sy;
+      return { left, top, width: region.w * sx, height: region.h * sy, right: left + region.w * sx, bottom: top + region.h * sy };
+    }
+    return target ? target.getBoundingClientRect() : null;
+  };
+  const replace = () => placeComposer(form, focusRect(), point || pinPoint(a));
+  text.addEventListener('input', () => {
+    changed();
+    grow();
+  });
+
+  // ---- Adjust: live edits on the element (built on first open)
+  let editor = null;
+  const adjustSlot = h('div', { class: 'adjust-slot', hidden: true });
+  const adjustBtn = h('button', { type: 'button', class: 'btn small', 'aria-expanded': 'false', title: 'Change size, spacing, colour or wording right on the page', html: ICONS.sliders + ' Adjust' });
+  const adjustCount = h('span', { class: 'adj-count' });
+  function openAdjust(show) {
+    if (!target) return toast('This element is not on the page right now');
+    if (!editor) {
+      editor = createEditor(target, a && a.edits, () => {
+        changed();
+        adjustCount.textContent = editor.count() ? String(editor.count()) : '';
+      });
+      adjustSlot.append(editor.node);
+      adjustCount.textContent = editor.count() ? String(editor.count()) : '';
+    }
+    adjustSlot.hidden = !show;
+    adjustBtn.setAttribute('aria-expanded', String(show));
+    form.classList.toggle('wide', show);
+    replace();
+  }
+  adjustBtn.addEventListener('click', () => openAdjust(adjustSlot.hidden));
+  adjustBtn.append(adjustCount);
+
+  // ---- References and Options (built once the form exists)
+  let refs = null;
+  let options = null;
+
+  const resolved = a && a.status === 'resolved';
+  // The card shows the essentials: why, and the ink (meaning). Everything else
+  // (Adjust, Reference, the agent's options, Move, Delete) is one ⋯ away, and opens
+  // by itself when this item already uses any of it.
+  const kindName = a && a.kind === 'stroke' ? describeMark(a.stroke && a.stroke.paths).replace(/ \(.*\)$/, '')
+    : (draft && draft.region) || (a && a.region) ? 'Box' : 'Element';
+  const thread = replyMode
+    ? h('div', { class: 'thread' },
+        a.comment ? h('div', { class: 'msg you' }, a.comment) : null,
+        (a.thread || []).filter((m) => !(resolved && m.tag === 'resolved' && m === a.thread[a.thread.length - 1])).map((m) => h('div', { class: `msg ${m.by === 'agent' ? 'agent' : 'you'}` }, m.tag === 'resolved' ? h('span', { class: 'tag' }, 'Fixed') : null, m.text)))
+    : null;
+  const more = h('div', { class: 'more-section' });
+  const hasExtras = a && (a.edits || (a.references && a.references.length) || a.variants || a.request);
+  more.hidden = !hasExtras;
+  const inkChip = h('button', { type: 'button', class: 'ink-chip', 'aria-haspopup': 'menu' });
+  const paintInk = () => {
+    const ink = inkOf(verdict);
+    inkChip.replaceChildren(h('i', { style: `background:${COLORS[verdict]}` }), ink.name);
+    inkChip.title = `Meaning: ${ink.name}. Click to change`;
+  };
+  inkChip.addEventListener('click', () => openMenu(inkChip, INKS.map((i) => ({ label: i.name, key: i.key, swatch: COLORS[i.v], checked: verdict === i.v, run: () => api.setVerdict(i.v) }))));
+  const moreBtn = h('button', { type: 'button', class: 'btn icon more-btn', title: 'More: adjust, reference, move, delete', 'aria-label': 'More options', 'aria-expanded': String(!more.hidden), html: ICONS.more });
+  moreBtn.addEventListener('click', () => {
+    more.hidden = !more.hidden;
+    moreBtn.setAttribute('aria-expanded', String(!more.hidden));
+    replace();
+  });
+  text.placeholder = replyMode ? 'Reply…'
+    : a && a.kind === 'stroke' ? 'Why? (optional: the mark already says it)' : 'Why? (optional)';
+
+  const form = h(
+    'form',
+    { class: 'composer', 'aria-label': 'Feedback note' },
+    h('header', {},
+      h('div', { class: 'what' },
+        h('b', {}, kindName, a && a.quote ? ` “${a.quote.slice(0, 40)}${a.quote.length > 40 ? '…' : ''}”` : ''),
+        h('code', { title: target ? cssPath(target) : '' }, targetSummary(target, a)),
+      ),
+      h('button', { type: 'button', class: 'btn icon', title: 'Close', 'aria-label': 'Close', html: ICONS.close, onclick: () => closeComposer() }),
+    ),
+    resolved ? h('div', { class: 'resolution' }, h('b', {}, 'Fixed'), a.resolution ? ': ' + a.resolution : '') : null,
+    a ? thumbStrip(a) : null,
+    thread,
+    text,
+    more,
+  );
+  fillAppend(more,
+    resolved ? null : h('div', { class: 'tools-row' }, adjustBtn),
+    resolved ? null : adjustSlot,
+  );
+  // Attaching an image (paste, drop, picker) shows the section it lives in.
+  refs = createReferences(form, a && a.references, (list) => {
+    changed();
+    if (list.length && more.hidden) {
+      more.hidden = false;
+      moreBtn.setAttribute('aria-expanded', 'true');
+      replace();
+    }
+  });
+  if (!resolved) more.querySelector('.tools-row').append(refs.node);
+
+  const optionHandlers = {
+    onPreview: () => applyPreviews(),
+    // Only a request left over from before options became the agent's call can be withdrawn.
+    async onRequest(n) {
+      request = n ? { variants: n } : null;
+      if (a) {
+        await store.update(a.id, { request });
+        a.request = request || undefined;
+        toast(n ? 'Asked your agent for options' : 'Request cancelled');
+      } else changed();
+      renderOptions();
+    },
+    // Picking saves everything typed with it, and turns the item into a Fix.
+    async onPick(key) {
+      await save({ chosen: key, verdict: 'fix' });
+      toast(`Picked option ${key}${a.verdict !== 'fix' ? ' and marked it Fix' : ''}. Your agent will build it.`);
+    },
+  };
+  // For a new note, the request is saved with it; for an existing one, right away.
+  const optionSubject = () => a || { request };
+  options = createOptions(optionSubject(), optionHandlers);
+  function renderOptions() {
+    const next = createOptions(optionSubject(), optionHandlers);
+    options.node.replaceWith(next.node);
+    options = next;
+  }
+  fillAppend(more,
+    // Options are the agent's to offer when it isn't sure; they appear here when it does.
+    resolved || !(a && (a.variants || []).length) ? null : h('div', { class: 'section-label' }, 'Options'),
+    resolved ? null : options.node,
+    a ? h('div', { class: 'more-actions' },
+      a.kind === 'note' ? h('button', { type: 'button', class: 'btn small', title: 'Point this note at a different element', 'aria-label': 'Move note', html: ICONS.move + ' Move' }) : null,
+      h('button', { type: 'button', class: 'btn small danger', title: 'Delete', 'aria-label': 'Delete', html: ICONS.trash + ' Delete' }),
+    ) : null,
+  );
+  const moveBtn = more.querySelector('[aria-label="Move note"]');
+  if (moveBtn) moveBtn.addEventListener('click', () => startRetarget(a));
+  const delBtn = more.querySelector('[aria-label="Delete"]');
+  if (delBtn) delBtn.addEventListener('click', () => remove(a));
+  // A fixed mark asks one question: is it right? Accept it, or say what's still wrong.
+  let redo = false;
+  const submitBtn = h('button', { type: 'submit', class: 'btn primary', title: `Save (${MOD_KEY}+Enter)` }, 'Save');
+  const checkRow = resolved
+    ? h('div', { class: 'actions' },
+        h('button', {
+          type: 'button',
+          class: 'btn',
+          onclick: (e) => {
+            redo = true;
+            text.hidden = false;
+            text.placeholder = 'What is still wrong?';
+            text.focus();
+            e.currentTarget.parentElement.replaceWith(saveRow);
+            replace();
+          },
+        }, '↺ Redo'),
+        h('span', { class: 'grow' }),
+        h('button', {
+          type: 'button',
+          class: 'btn primary accept',
+          onclick: async () => {
+            await store.update(a.id, { accepted: true });
+            closeComposer(true);
+            await load();
+            toast(toCheck().length ? `Accepted. ${toCheck().length} left to check` : 'Accepted');
+          },
+        }, '✓ Accept'),
+      )
+    : null;
+  const saveRow = h('div', { class: 'actions' }, resolved ? null : inkChip, h('span', { class: 'grow' }), resolved ? null : moreBtn, submitBtn);
+  if (resolved) text.hidden = true;
+  fillAppend(form, checkRow || saveRow);
+  paintInk();
+
+  async function save(extra) {
+    // Redo: back to a draft for your next round, with what's still wrong as a reply.
+    if (redo && a) {
+      extra = { status: 'open', draft: true, accepted: false, reply: text.value.trim() || 'Not quite yet.', ...(target ? { target: describeEl(target) } : {}), ...extra };
+    }
+    const body = replyMode || redo
+      ? { verdict, tags, ...(text.value.trim() && !redo ? { reply: text.value.trim() } : {}), ...extra }
+      : { verdict, comment: text.value.trim(), tags, ...extra };
+    if (editor) body.edits = editor.edits();
+    body.references = refs.list().length ? refs.list() : undefined;
+    if (a && a.references && !body.references) body.references = []; // removed the last one
+    try {
+      if (a) await store.update(a.id, body);
+      else if (draft) {
+        const el2 = target || document.body;
+        await store.create({ ...draft, ...body, request, draft: true, target: describeEl(el2), page: PAGE, ...captureContext(el2) });
+      }
+      closeComposer(true);
+      await load();
+      if (!a) toast(body.edits ? 'Note saved with your edit' : 'Note saved');
+    } catch (err) {
+      toast('Could not save: ' + err.message);
+    }
+  }
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    save();
+  });
+  form.addEventListener('keydown', (e) => {
+    // Enter in a one-line field (Adjust values, uploads) must not submit the note.
+    if (e.key === 'Enter' && !(e.metaKey || e.ctrlKey) && /^(input|select)$/i.test(e.composedPath()[0].tagName)) e.preventDefault();
+    if (e.key === 'Enter' && !e.shiftKey && e.composedPath()[0] === text && text.value.indexOf('\n') < 0 && text.value.length < 120) {
+      e.preventDefault();
+      save();
+    } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      save();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      closeComposer(true);
+    }
+    e.stopPropagation();
+  });
+
+  const api = {
+    annotation: a,
+    el: target,
+    focusRect,
+    openedAt: Date.now(),
+    untouched: () => !touched && !text.value.trim(),
+    // Keep what was typed when the composer closes by clicking elsewhere;
+    // only Esc and Cancel discard.
+    dirty: () => (a ? text.value.trim() !== original || verdict !== a.verdict || touched : !!text.value.trim() || touched),
+    commit: () => save(),
+    // Called by applyPreviews(): layer this composer's unsaved edit and shown option on top.
+    reapply() {
+      if (editor) editor.apply();
+      const key = options && options.showing();
+      if (a && key) applyVariant(a, key);
+    },
+    setVerdict(v) {
+      verdict = v;
+      changed();
+      paintInk();
+    },
+  };
+  state.composer = api;
+  // After a pen stroke the card starts small (verdict + comment), so it doesn't
+  // sit under the hand that's still drawing; "More" brings back the rest.
+  if (compact) {
+    form.classList.add('compact');
+    form.querySelector('.actions').prepend(
+      h('button', { type: 'button', class: 'btn small more', onclick: (e) => (form.classList.remove('compact'), e.currentTarget.remove(), replace()) }, 'More'),
+    );
+  }
+  root.append(form);
+  api.form = form;
+  applyPreviews(); // this item's saved edit/option now comes from the composer
+  if (a && a.edits) openAdjust(false);
+
+  grow();
+  replace();
+
+  if (target) placeBox(focusBox, focusRect());
+  text.focus({ preventScroll: true });
+}
+
+function closeComposer(discard) {
+  const c = state.composer;
+  if (!c) return;
+  state.composer = null;
+  const saving = !discard && c.dirty() ? c.commit() : null;
+  // Leave quickly; instantly when closed from the keyboard.
+  if (state.viaKeyboard || matchMedia('(prefers-reduced-motion: reduce)').matches) c.form.remove();
+  else {
+    c.form.classList.replace('composer', 'composer-out'); // styled the same, but no longer "the" note
+    c.form.inert = true;
+    setTimeout(() => c.form.remove(), 130);
+  }
+  focusBox.style.display = 'none';
+  focusBox.classList.remove('flash');
+  if (!saving) applyPreviews(); // drop unsaved edits; a save reloads and re-applies
+  if (state.pendingReload) Promise.resolve(saving).finally(() => location.reload());
+}
+
+async function remove(a) {
+  try {
+    await store.remove(a.id);
+    closeComposer(true);
+    await load();
+    toast(`Deleted #${a.n}`, {
+      label: 'Undo',
+      async run() {
+        const { id, status, createdAt, updatedAt, ...rest } = a;
+        await store.create(rest);
+        await load();
+      },
+    });
+  } catch (err) {
+    toast('Could not delete: ' + err.message);
+  }
+}
+
+// Clicking anywhere outside the composer (in browse/pen mode) closes it.
+addEventListener(
+  'pointerdown',
+  (e) => {
+    if (state.composer && !eventIsOurs(e) && state.mode !== 'select') closeComposer();
+  },
+  true,
+);