npm - @myrtilleio/redline - Versions diffs - 0.1.0 - Mend

@myrtilleio/redline 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/README.md +281 -0
package/bin/redline.js +375 -0
package/client/boot.js +146 -0
package/client/check.js +926 -0
package/client/composer.js +384 -0
package/client/core.js +1610 -0
package/client/devices.js +273 -0
package/client/edits.js +389 -0
package/client/keyboard.js +110 -0
package/client/panel.js +222 -0
package/client/pen.js +324 -0
package/client/references.js +114 -0
package/client/select.js +180 -0
package/client/shots.js +357 -0
package/client/variants.js +117 -0
package/examples/demo-site/hero.svg +18 -0
package/examples/demo-site/index.html +96 -0
package/examples/demo-site/styles.css +64 -0
package/integrations/claude-code/redline.md +27 -0
package/package.json +42 -0
package/src/account.js +101 -0
package/src/bundle.js +33 -0
package/src/demo.js +137 -0
package/src/format.js +346 -0
package/src/guards.js +108 -0
package/src/inject.js +15 -0
package/src/mcp.js +380 -0
package/src/report.js +199 -0
package/src/server.js +477 -0
package/src/shots.js +311 -0
package/src/store.js +544 -0
package/src/sync.js +126 -0
package/src/taste.js +80 -0
package/src/verify.js +71 -0

package/client/devices.js ADDED Viewed

@@ -0,0 +1,273 @@
+// ---------------------------------------------------------------- devices
+// Desktop, tablet and mobile side by side. Each device is a real iframe of the
+// page at that width (so media queries apply), running its own overlay: notes
+// made in the mobile frame are recorded at 390px. The top window's toolbar drives
+// all frames, and scrolling one scrolls the others: the frame you are using leads,
+// the others follow it instantly, and nothing a follower does is sent back.
+const DEVICES = [
+  { id: 'desktop', label: 'Desktop', w: 1440, h: 900 },
+  { id: 'tablet', label: 'Tablet', w: 820, h: 1180 },
+  { id: 'mobile', label: 'Mobile', w: 390, h: 844 },
+];
+const FRAME_PREFIX = 'redline-frame|';
+const FRAME = window.parent !== window && typeof window.name === 'string' && window.name.startsWith(FRAME_PREFIX)
+  ? { device: window.name.slice(FRAME_PREFIX.length) }
+  : null;
+let uiZoom = 1; // in a scaled-down frame, the composer is zoomed back up to normal size
+let stage = null;
+let frames = []; // [{ d, iframe, box }]
+let syncScroll = prefs('syncScroll') !== false;
+let leader = null; // the frame the reviewer last touched: the only one whose scrolling is followed
+let shown = new Set(prefs('devicesShown') || DEVICES.map((d) => d.id)); // which devices are on stage
+const post = (win, msg) => win && win.postMessage({ redline: true, ...msg }, location.origin);
+// ---- top window
+function toggleDevices() {
+  if (FRAME) return post(window.parent, { type: 'key', action: 'devices' });
+  state.devices ? closeDevices() : openDevices();
+}
+function forwardToFrames(msg) {
+  for (const f of frames) post(f.iframe.contentWindow, msg);
+}
+function openDevices() {
+  closeComposer();
+  if (state.panel) togglePanel();
+  state.devices = true;
+  host.dataset.devices = '';
+  frames = DEVICES.filter((d) => shown.has(d.id)).map((d) => {
+    const iframe = h('iframe', { name: FRAME_PREFIX + d.id, src: location.href, title: `${d.label} (${d.w}px)` });
+    iframe.style.width = d.w + 'px';
+    iframe.style.height = d.h + 'px';
+    return { d, iframe, box: h('div', { class: 'device-box' }, iframe), label: h('div', { class: 'device-label' }, `${d.label} · ${d.w}px`) };
+  });
+  stage = h('div', { class: 'stage', role: 'region', 'aria-label': 'Devices' },
+    h('div', { class: 'stage-head' },
+      h('b', {}, 'Devices'),
+      h('span', { class: 'hint' }, 'Select or draw in any frame: notes record that screen width.'),
+      h('span', { class: 'grow' }),
+      // Fewer devices on stage means bigger frames.
+      DEVICES.map((d) =>
+        h('label', {},
+          h('input', {
+            type: 'checkbox',
+            checked: shown.has(d.id),
+            onchange: (e) => {
+              e.target.checked ? shown.add(d.id) : shown.size > 1 ? shown.delete(d.id) : (e.target.checked = true);
+              prefs('devicesShown', [...shown]);
+              stage.remove();
+              openDevices();
+            },
+          }),
+          d.label)),
+      h('span', { class: 'sep-v' }),
+      h('label', {},
+        h('input', { type: 'checkbox', checked: syncScroll, onchange: (e) => prefs('syncScroll', (syncScroll = e.target.checked)) }),
+        'Sync scroll'),
+      h('button', { class: 'btn small', onclick: closeDevices, html: ICONS.close + ' Close' }),
+    ),
+    h('div', { class: 'stage-frames' }, frames.map((f) => h('div', { class: 'device' }, f.label, f.box))),
+  );
+  root.insertBefore(stage, bar); // the toolbar stays on top
+  // The page underneath is fully covered by the stage: stop rendering it, so the
+  // three frames get the machine (the overlay lives outside <body> and stays).
+  hideUnderlay(true);
+  layoutDevices();
+  addEventListener('resize', layoutDevices);
+  renderBar();
+}
+function closeDevices() {
+  // Frames save any note in progress first (a note is kept, never silently dropped).
+  if (frames.length) {
+    forwardToFrames({ type: 'commit' });
+    const s = stage;
+    frames = [];
+    setTimeout(() => s && s.remove(), 400);
+    stage = null;
+  }
+  if (stage) stage.remove();
+  stage = null;
+  frames = [];
+  state.devices = false;
+  hideUnderlay(false);
+  delete host.dataset.devices;
+  removeEventListener('resize', layoutDevices);
+  renderBar();
+  load();
+}
+let underlay = null;
+function hideUnderlay(on) {
+  const b = document.body;
+  if (!b) return;
+  if (on && underlay === null) {
+    underlay = b.style.getPropertyValue('content-visibility');
+    b.style.setProperty('content-visibility', 'hidden', 'important');
+  } else if (!on && underlay !== null) {
+    b.style.removeProperty('content-visibility');
+    if (underlay) b.style.setProperty('content-visibility', underlay);
+    underlay = null;
+  }
+}
+// Give every device the same on-screen height, as large as the window allows.
+function layoutDevices() {
+  if (!stage) return;
+  const gaps = 24 * (frames.length - 1) + 32;
+  const height = Math.max(200, Math.min(innerHeight - 140, (innerWidth - gaps) / frames.reduce((sum, f) => sum + f.d.w / f.d.h, 0)));
+  for (const f of frames) {
+    const scale = height / f.d.h;
+    f.scale = scale;
+    f.iframe.style.transform = `scale(${scale})`;
+    f.box.style.width = f.d.w * scale + 'px';
+    f.box.style.height = height + 'px';
+    post(f.iframe.contentWindow, { type: 'scale', scale });
+  }
+}
+/** Push mode, verdict and preview settings to the frames (or, from a frame, up to the top window). */
+function syncFrames() {
+  if (FRAME) return post(window.parent, { type: 'set', mode: state.mode, verdict: state.verdict });
+  for (const f of frames) post(f.iframe.contentWindow, { type: 'sync', mode: state.mode, verdict: state.verdict, previewEdits: state.previewEdits });
+}
+/** Open an item in the frame whose width it was made at. Returns false if not in Devices view. */
+function focusInDevices(a) {
+  if (!state.devices || FRAME) return false;
+  const bp = breakpoint((a.viewport && a.viewport.w) || 1440);
+  const f = frames.find((x) => breakpoint(x.d.w) === bp) || frames[0];
+  post(f.iframe.contentWindow, { type: 'focus', id: a.id });
+  return true;
+}
+addEventListener('message', (e) => {
+  const msg = e.data;
+  if (!msg || msg.redline !== true || e.origin !== location.origin) return;
+  if (!FRAME) {
+    const from = frames.find((f) => f.iframe.contentWindow === e.source);
+    if (!from) return;
+    if (msg.type === 'ready') {
+      post(e.source, { type: 'scale', scale: from.scale || 1 });
+      post(e.source, { type: 'sync', mode: state.mode, verdict: state.verdict, previewEdits: state.previewEdits });
+    } else if (msg.type === 'set') {
+      if (msg.verdict !== state.verdict) setVerdict(msg.verdict);
+      if (msg.mode !== state.mode) setMode(msg.mode);
+    } else if (msg.type === 'key') {
+      // Shortcuts pressed inside a frame that belong to the whole view.
+      if (msg.action === 'devices') toggleDevices();
+      if (msg.action === 'panel') togglePanel();
+      if (msg.action === 'previews') togglePreviews();
+    } else if (msg.type === 'lead') {
+      leader = from;
+    } else if (msg.type === 'scroll' && syncScroll && from === leader) {
+      for (const f of frames) if (f !== from) post(f.iframe.contentWindow, { type: 'scroll', ratio: msg.ratio, anchor: msg.anchor });
+    }
+    return;
+  }
+  if (e.source !== window.parent) return;
+  if (msg.type === 'scale') {
+    // Zoom the composer back up, but not so much it swallows a small frame; pins likewise.
+    uiZoom = Math.min(1 / msg.scale, 1.6);
+    host.style.setProperty('--ui-zoom', String(uiZoom));
+    host.style.setProperty('--pin-scale', String(Math.min(1 / msg.scale, 2)));
+  } else if (msg.type === 'commit') {
+    closeComposer();
+  } else if (msg.type === 'hoverKey') {
+    hoverKey(msg.key);
+  } else if (msg.type === 'sync') {
+    // Applied directly (not through setMode) so it doesn't echo back up.
+    state.mode = msg.mode;
+    state.verdict = msg.verdict;
+    if (state.previewEdits !== msg.previewEdits) {
+      state.previewEdits = msg.previewEdits;
+      applyPreviews();
+    }
+    showHover(null);
+    renderBar();
+  } else if (msg.type === 'scroll') {
+    // Follow at the next frame, to the latest position only (a burst of wheel steps
+    // is one jump per frame, not a queue to work through).
+    const first = !followTo;
+    followTo = msg;
+    if (first) requestAnimationFrame(() => {
+      const m = followTo;
+      followTo = null;
+      scrollToAnchor(m.anchor, m.ratio);
+    });
+  } else if (msg.type === 'focus') {
+    const a = state.annotations.find((x) => x.id === msg.id);
+    if (a) focusAnnotation(a);
+  }
+});
+// ---- inside a frame
+let followTo = null;
+function initFrame() {
+  host.dataset.frame = '';
+  state.collapsed = false;
+  post(window.parent, { type: 'ready' });
+  // Only the reviewer's own scrolling leads: a wheel, a touch, a key or a click in this
+  // frame (a link's smooth scroll included, while it lasts). Scrolls we were told to do
+  // as a follower have no input behind them, so they are never sent back.
+  let userAt = -1e9, lastScroll = 0, leading = false, leadSent = 0;
+  const touched = () => {
+    userAt = performance.now();
+    if (userAt - leadSent > 250) {
+      leadSent = userAt;
+      post(window.parent, { type: 'lead' });
+    }
+  };
+  for (const t of ['wheel', 'touchstart', 'touchmove', 'keydown', 'pointerdown']) addEventListener(t, touched, { capture: true, passive: true });
+  let queued = false;
+  addEventListener(
+    'scroll',
+    () => {
+      const now = performance.now();
+      leading = now - userAt < 700 || (leading && now - lastScroll < 200);
+      lastScroll = now;
+      if (!leading || queued) return;
+      queued = true;
+      requestAnimationFrame(() => {
+        queued = false;
+        const max = document.documentElement.scrollHeight - innerHeight;
+        post(window.parent, { type: 'scroll', ratio: max > 0 ? scrollY / max : 0, anchor: scrollAnchor() });
+      });
+    },
+    { passive: true },
+  );
+}
+// Scroll sync by content: the section at the top of one frame is brought to the
+// top of the others (page lengths differ a lot between desktop and mobile).
+const ANCHOR_Y = 80; // below a typical sticky header
+function sectionOf(el) {
+  for (let n = el; n && n !== document.body; n = n.parentElement) {
+    if (n.id || /^(SECTION|HEADER|FOOTER|ARTICLE)$/.test(n.tagName) || (n.parentElement && /^(MAIN|BODY)$/.test(n.parentElement.tagName))) return n;
+  }
+  return null;
+}
+function scrollAnchor() {
+  const el = pageElementAt(innerWidth / 2, ANCHOR_Y);
+  const section = el && sectionOf(el);
+  if (!section) return null;
+  const r = section.getBoundingClientRect();
+  return { selector: cssPath(section), frac: r.height ? (ANCHOR_Y - r.top) / r.height : 0 };
+}
+function scrollToAnchor(anchor, ratio) {
+  const el = anchor && queryOne(anchor.selector);
+  const r = el && el.getBoundingClientRect();
+  // Instant: a page's own scroll-behavior: smooth would make every follower trail behind.
+  const top = r && r.height ? scrollY + r.top + anchor.frac * r.height - ANCHOR_Y : ratio * Math.max(0, document.documentElement.scrollHeight - innerHeight);
+  scrollTo({ top, behavior: 'instant' });
+}

package/client/edits.js ADDED Viewed

@@ -0,0 +1,389 @@
+// ---------------------------------------------------------------- live edits
+// The reviewer adjusts an element right on the page (size, spacing, colour,
+// wording). Redline keeps the exact before → after values as the instruction for
+// the agent, and previews them on the page until the agent has made them real.
+const EDIT_GROUPS = [
+  {
+    name: 'Text',
+    fields: [
+      { prop: 'font-size', kind: 'len', min: 1 },
+      { prop: 'font-weight', kind: 'select', options: ['300', '400', '500', '600', '700', '800', '900'] },
+      { prop: 'line-height', kind: 'len', min: 0 },
+      { prop: 'letter-spacing', kind: 'len', step: 0.1 },
+      { prop: 'color', kind: 'color' },
+      { prop: 'text-align', kind: 'select', options: ['left', 'center', 'right', 'justify'] },
+    ],
+  },
+  {
+    name: 'Box',
+    fields: [
+      { prop: 'padding', kind: 'sides', min: 0 },
+      { prop: 'margin', kind: 'sides' },
+      { prop: 'gap', kind: 'len', min: 0 },
+      { prop: 'border-radius', kind: 'len', min: 0 },
+      { prop: 'background-color', kind: 'color' },
+      { prop: 'max-width', kind: 'len', min: 0 },
+      { prop: 'opacity', kind: 'num', step: 0.05, min: 0, max: 1 },
+    ],
+  },
+];
+const SIDES = ['top', 'right', 'bottom', 'left'];
+// ---- previews: inline !important styles, remembered so they can be undone
+const previewed = new Map(); // element -> { props: Map(prop -> [value, priority]), text?: string }
+function setPreview(el, prop, value) {
+  let rec = previewed.get(el);
+  if (!rec) previewed.set(el, (rec = { props: new Map() }));
+  if (!rec.props.has(prop)) rec.props.set(prop, [el.style.getPropertyValue(prop), el.style.getPropertyPriority(prop)]);
+  el.style.setProperty(prop, value, 'important');
+}
+function setTextPreview(el, text) {
+  let rec = previewed.get(el);
+  if (!rec) previewed.set(el, (rec = { props: new Map() }));
+  if (rec.text === undefined) rec.text = el.textContent;
+  el.textContent = text;
+}
+function clearPreviews() {
+  for (const [el, rec] of previewed) {
+    for (const [prop, [value, priority]] of rec.props) {
+      if (value) el.style.setProperty(prop, value, priority);
+      else el.style.removeProperty(prop);
+    }
+    if (rec.text !== undefined && el.textContent !== rec.text) el.textContent = rec.text;
+  }
+  previewed.clear();
+  clearVariantPreviews();
+}
+function editTargets(a, edits = a.edits) {
+  if (!edits) return [];
+  if (edits.scope === 'all' && edits.selector) {
+    try {
+      return [...document.querySelectorAll(edits.selector)].filter((el) => !isOurs(el));
+    } catch {
+      return [];
+    }
+  }
+  const el = anchorEl(a);
+  return el ? [el] : [];
+}
+function applyEdits(a, edits = a.edits) {
+  for (const el of editTargets(a, edits)) {
+    for (const p of edits.props || []) setPreview(el, p.prop, p.to);
+  }
+  // Wording only changes on the element itself, even when styles apply to all.
+  const el = anchorEl(a);
+  if (edits && edits.text && el) setTextPreview(el, edits.text.to);
+}
+/**
+ * Show every open item's proposed edits and chosen option on the page (unless the
+ * reviewer toggled to "original"). Resolved items aren't previewed: their change is in the code now.
+ */
+function applyPreviews() {
+  clearPreviews();
+  if (!state.previewEdits || SHOT) return;
+  const editing = state.composer && state.composer.annotation && state.composer.annotation.id;
+  for (const a of state.annotations) {
+    if (a.status === 'resolved' || a.id === editing) continue;
+    if (a.edits) applyEdits(a);
+    if (a.chosen) applyVariant(a, a.chosen);
+  }
+  if (state.composer && state.composer.reapply) state.composer.reapply();
+}
+function hasPreviews() {
+  return state.annotations.some((a) => a.status !== 'resolved' && (a.edits || a.chosen));
+}
+function togglePreviews() {
+  if (FRAME) return post(window.parent, { type: 'key', action: 'previews' });
+  state.previewEdits = !state.previewEdits;
+  applyPreviews();
+  renderBar();
+  toast(state.previewEdits ? 'Showing your proposed changes' : 'Showing the page as built');
+}
+// ---- "all similar": tag + stable classes (h2.section-title), or for a
+// class-less element, by its parent's classes (article.card > h3)
+function classSelector(el) {
+  const classes = [...el.classList].filter((c) => /^[a-zA-Z][\w-]{0,40}$/.test(c) && !/(^(css|sc|jsx|svelte|emotion)-)|\d{3,}|^_/.test(c) && !STATE_CLASS.test(c));
+  return classes.length ? el.tagName.toLowerCase() + classes.map((c) => '.' + CSS.escape(c)).join('') : null;
+}
+function similarSelector(el) {
+  const own = classSelector(el);
+  if (own) return own;
+  const parent = el.parentElement && classSelector(el.parentElement);
+  return parent ? `${parent} > ${el.tagName.toLowerCase()}` : null;
+}
+// ---- reading current values
+function px(v) {
+  const n = parseFloat(v);
+  return Number.isFinite(n) ? n : 0;
+}
+function currentValue(el, prop) {
+  const cs = getComputedStyle(el);
+  if (prop === 'line-height' && cs.lineHeight === 'normal') return (px(cs.fontSize) * 1.2).toFixed(1) + 'px';
+  if (prop === 'letter-spacing' && cs.letterSpacing === 'normal') return '0px';
+  if (prop === 'gap' && (cs.rowGap === 'normal' || !cs.rowGap)) return '0px';
+  if (prop === 'max-width' && cs.maxWidth === 'none') return 'none';
+  if (prop === 'color' || prop === 'background-color') return hex(cs.getPropertyValue(prop));
+  if (prop === 'gap') return cs.rowGap;
+  return cs.getPropertyValue(prop);
+}
+function toHex6(c) {
+  const v = hex(c);
+  return /^#[0-9a-f]{6}$/i.test(v) ? v : '#000000';
+}
+// ---- the Adjust panel
+/**
+ * Build the Adjust panel for `el`. `saved` is the item's existing edits, if any.
+ * onChange() fires after every change so the composer can mark itself dirty.
+ */
+function createEditor(el, saved, onChange) {
+  const baseline = new Map(); // prop -> computed value before any edit
+  const changes = new Map(); // prop -> new value
+  let scope = saved && saved.scope === 'all' ? 'all' : 'element';
+  const similar = similarSelector(el);
+  let text = saved && saved.text ? { ...saved.text } : null;
+  const read = (prop) => {
+    if (!baseline.has(prop)) baseline.set(prop, asBuilt(() => currentValue(el, prop)));
+    return changes.has(prop) ? changes.get(prop) : baseline.get(prop);
+  };
+  // Baselines must come from the page without our own previews on it.
+  const baseFromSaved = new Map((saved && saved.props ? saved.props : []).map((p) => [p.prop, p]));
+  for (const [prop, p] of baseFromSaved) {
+    baseline.set(prop, p.from);
+    changes.set(prop, p.to);
+  }
+  const targets = () => {
+    if (scope === 'all' && similar) {
+      try {
+        return [...document.querySelectorAll(similar)].filter((n) => !isOurs(n));
+      } catch {}
+    }
+    return [el];
+  };
+  function apply() {
+    for (const t of targets()) for (const [prop, value] of changes) setPreview(t, prop, value);
+    if (text) setTextPreview(el, text.to);
+  }
+  function set(prop, value) {
+    if (value === baseline.get(prop)) changes.delete(prop);
+    else changes.set(prop, value);
+    applyPreviews(); // re-derive from saved items, then layer this editor's changes on top
+    apply();
+    renderCount();
+    onChange();
+  }
+  const count = h('span', { class: 'adj-count' });
+  const renderCount = () => {
+    const n = changes.size + (text ? 1 : 0);
+    count.textContent = n ? `${n} change${n === 1 ? '' : 's'}` : '';
+  };
+  function numberField(prop, opts, labelText, sideProp) {
+    const p = sideProp || prop;
+    const value = read(p);
+    const unit = opts.kind === 'num' ? '' : 'px';
+    const input = h('input', { type: 'text', inputmode: 'decimal', class: 'adj-num', 'aria-label': p, value: value === 'none' ? '' : String(px(value)) });
+    if (value === 'none') input.placeholder = 'none';
+    const commit = (n) => {
+      if (opts.min !== undefined) n = Math.max(opts.min, n);
+      if (opts.max !== undefined) n = Math.min(opts.max, n);
+      n = Math.round(n * 100) / 100;
+      input.value = String(n);
+      set(p, n + unit);
+    };
+    input.addEventListener('change', () => {
+      const n = parseFloat(input.value);
+      if (Number.isFinite(n)) commit(n);
+    });
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault(); // apply the value; don't submit the note
+        const n = parseFloat(input.value);
+        if (Number.isFinite(n)) commit(n);
+        return;
+      }
+      if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
+      e.preventDefault();
+      const step = (opts.step || 1) * (e.shiftKey ? 10 : 1);
+      commit((parseFloat(input.value) || 0) + (e.key === 'ArrowUp' ? step : -step));
+    });
+    // Drag the label sideways to scrub the value, like in Figma.
+    const lab = h('span', { class: 'adj-label', title: 'Drag to adjust · ↑↓ in the field (Shift ×10)' }, labelText);
+    lab.addEventListener('pointerdown', (e) => {
+      e.preventDefault();
+      lab.setPointerCapture(e.pointerId);
+      const start = parseFloat(input.value) || 0;
+      const x0 = e.clientX;
+      const move = (ev) => commit(start + Math.round((ev.clientX - x0) / 2) * (opts.step || 1) * (ev.shiftKey ? 10 : 1));
+      const up = () => {
+        lab.removeEventListener('pointermove', move);
+        lab.removeEventListener('pointerup', up);
+      };
+      lab.addEventListener('pointermove', move);
+      lab.addEventListener('pointerup', up);
+    });
+    return h('label', { class: 'adj-field' + (sideProp ? ' side' : '') }, lab, h('span', { class: 'adj-input' }, input, unit && !sideProp ? h('span', { class: 'adj-unit' }, unit) : null));
+  }
+  function field(f) {
+    if (f.kind === 'len' || f.kind === 'num') return h('div', { class: 'adj-row' }, numberField(f.prop, f, f.prop.replace(/-/g, ' ')));
+    if (f.kind === 'sides') {
+      return h('div', { class: 'adj-row' },
+        h('span', { class: 'adj-name' }, f.prop),
+        h('div', { class: 'adj-sides' }, SIDES.map((side) => numberField(f.prop, f, side[0].toUpperCase(), `${f.prop}-${side}`))),
+      );
+    }
+    if (f.kind === 'select') {
+      const cur = read(f.prop);
+      const sel = h('select', { class: 'adj-select', 'aria-label': f.prop }, f.options.map((o) => h('option', { value: o, selected: String(cur) === o }, o)));
+      if (!f.options.includes(String(cur))) sel.prepend(h('option', { value: cur, selected: true }, cur));
+      sel.addEventListener('change', () => set(f.prop, sel.value));
+      return h('div', { class: 'adj-row' }, h('span', { class: 'adj-name' }, f.prop.replace(/-/g, ' ')), sel);
+    }
+    if (f.kind === 'color') {
+      const cur = read(f.prop);
+      const swatch = h('input', { type: 'color', class: 'adj-color', 'aria-label': f.prop, value: toHex6(cur) });
+      const code = h('input', { type: 'text', class: 'adj-hex', 'aria-label': f.prop + ' value', value: cur });
+      swatch.addEventListener('input', () => {
+        code.value = swatch.value;
+        set(f.prop, swatch.value);
+      });
+      code.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          code.dispatchEvent(new Event('change'));
+        }
+      });
+      code.addEventListener('change', () => {
+        swatch.value = toHex6(code.value);
+        set(f.prop, code.value.trim());
+      });
+      return h('div', { class: 'adj-row' }, h('span', { class: 'adj-name' }, f.prop.replace(/-/g, ' ')), h('span', { class: 'adj-colorwrap' }, swatch, code));
+    }
+    return null;
+  }
+  // Wording: only for elements whose content is plain text, so markup can't be lost.
+  const canEditText = el.children.length === 0 && (el.textContent || '').trim().length > 0;
+  const textBtn = h('button', { type: 'button', class: 'btn small', disabled: !canEditText, title: canEditText ? 'Type the new wording right on the page' : 'Select an element that holds only text to edit its wording' }, 'Edit text');
+  textBtn.addEventListener('click', () => {
+    const from = text ? text.from : el.textContent;
+    host.dataset.textEdit = '';
+    el.contentEditable = 'plaintext-only';
+    el.focus();
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    getSelection().removeAllRanges();
+    getSelection().addRange(range);
+    toast('Type the new text · Enter or click away to finish');
+    const finish = () => {
+      el.removeEventListener('blur', finish);
+      el.removeEventListener('keydown', key);
+      el.contentEditable = 'false';
+      el.removeAttribute('contenteditable');
+      delete host.dataset.textEdit;
+      const to = el.textContent;
+      text = to !== from ? { from, to } : null;
+      // Put the original back under our preview bookkeeping, then preview the new wording.
+      el.textContent = from;
+      applyPreviews();
+      apply();
+      renderCount();
+      onChange();
+      if (state.composer) state.composer.form.querySelector('textarea').focus({ preventScroll: true });
+    };
+    const key = (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        el.blur();
+      } else if (e.key === 'Escape') {
+        el.textContent = from;
+        el.blur();
+      }
+    };
+    el.addEventListener('blur', finish);
+    el.addEventListener('keydown', key);
+  });
+  const similarCount = similar ? document.querySelectorAll(similar).length : 0;
+  const scopeBox = similarCount > 1
+    ? h('label', { class: 'adj-scope' },
+        h('input', {
+          type: 'checkbox',
+          checked: scope === 'all',
+          onchange: (e) => {
+            scope = e.target.checked ? 'all' : 'element';
+            applyPreviews();
+            apply();
+            onChange();
+          },
+        }),
+        `Apply to all ${similarCount} `, h('code', {}, similar))
+    : null;
+  const reset = h('button', {
+    type: 'button',
+    class: 'btn small',
+    onclick: () => {
+      changes.clear();
+      text = null;
+      applyPreviews();
+      renderCount();
+      onChange();
+      node.replaceWith((node = build()));
+    },
+  }, 'Reset');
+  function build() {
+    return h('div', { class: 'adjust' },
+      // Text starts open; Box only when it holds edits, to keep the panel short.
+      EDIT_GROUPS.map((g, i) =>
+        h('details', { class: 'adj-group', open: i === 0 || g.fields.some((f) => [...changes.keys()].some((p) => p.startsWith(f.prop))) },
+          h('summary', {}, g.name),
+          g.fields.map(field))),
+      h('div', { class: 'adj-foot' }, textBtn, reset, count),
+      scopeBox,
+    );
+  }
+  let node = build();
+  renderCount();
+  return {
+    get node() {
+      return node;
+    },
+    count: () => changes.size + (text ? 1 : 0),
+    countEl: count,
+    apply,
+    /** The edits to save, or null when nothing changed. */
+    edits() {
+      const props = [...changes].map(([prop, to]) => ({ prop, from: baseline.get(prop) || '', to }));
+      if (!props.length && !text) return null;
+      return { scope: scope === 'all' && similar ? 'all' : 'element', selector: scope === 'all' ? similar : cssPath(el), props, text: text || undefined };
+    },
+  };
+}