@scattered-light/loomiere 0.0.0-stage → 0.1.0

package/tools/pair-lab/lab.js

@@ -0,0 +1,249 @@
+/*
+ * Pair lab. Served by `loomiere lab`, which supplies /data.json
+ * (the built palettes, their labels and the brand file's current pairs) and accepts
+ * POST /pairs (writes color.pairs into the brand file and rebuilds the tokens).
+ */
+const LEVELS = [['AA-large', 3, 'Large text'], ['AA', 4.5, 'AA'], ['AAA', 7, 'AAA']];
+const AA = 4.5;
+const LIMIT = 240;
+
+const lum = (hex) => {
+  const n = parseInt(hex.slice(1), 16);
+  return [n >> 16, (n >> 8) & 255, n & 255]
+    .map((v) => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; })
+    .reduce((a, v, i) => a + v * [0.2126, 0.7152, 0.0722][i], 0);
+};
+const contrast = (a, b) => { const [x, y] = [lum(a), lum(b)].sort((m, n) => n - m); return (x + 0.05) / (y + 0.05); };
+const levelOf = (r) => [...LEVELS].reverse().find(([, min]) => r >= min)?.[0] ?? null;
+const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+const $ = (id) => document.getElementById(id);
+
+let DATA, all, byKey, STORE;
+let state = { bgRole: 'secondary', bgStep: 'any', fgRole: 'all', min: AA, show: 'visible', starred: {}, hidden: {} };
+const save = () => { try { localStorage.setItem(STORE, JSON.stringify({ ...state, starred: undefined })); } catch { /* private mode */ } };
+
+// Brand files say "white" and "black"; the lab calls the ends paper and ink.
+const toKey = (ref) => (ref === 'white' ? 'paper' : ref === 'black' ? 'ink' : ref);
+const toRef = (key) => (key === 'paper' ? 'white' : key === 'ink' ? 'black' : key);
+const pairId = (bg, fg) => `${bg}|${fg}`;
+const nameOf = (key) => { const c = byKey.get(key); return c ? (c.role === 'base' ? c.step : `${c.label} ${c.step}`) : key; };
+
+/** Names come from the palettes' own labels: "ember-dune", or "ember-deep" within one palette. */
+function autoName(bg, fg) {
+  const word = (c) => (c.role === 'base' ? c.step : c.label);
+  const base = bg.role === fg.role ? `${word(bg)}-${lum(bg.hex) < lum(fg.hex) ? 'deep' : 'soft'}` : `${word(bg)}-${word(fg)}`;
+  const taken = new Set(Object.values(state.starred).map((s) => s.name));
+  if (!taken.has(base)) return base;
+  for (let n = 2; ; n++) if (!taken.has(`${base}-${n}`)) return `${base}-${n}`;
+}
+
+function chipRow(el, items, current, onPick) {
+  el.innerHTML = items.map(([value, label, dot]) => `<button type="button" class="chip" data-v="${value}" aria-pressed="${String(value) === String(current)}">${dot ? `<span class="dot" style="background:${dot}"></span>` : ''}${esc(label)}</button>`).join('');
+  el.onclick = (e) => { const b = e.target.closest('button'); if (b) onPick(b.dataset.v); };
+}
+const mid = (p) => p.steps[Math.min(p.steps.length - 1, Math.floor(p.steps.length / 2))].hex;
+
+function renderControls() {
+  const palItems = DATA.palettes.map((p) => [p.role, p.role === 'base' ? 'paper & ink' : p.label, mid(p)]);
+  chipRow($('bg-pal'), [['all', 'Any'], ...palItems], state.bgRole, (v) => { state.bgRole = v; state.bgStep = 'any'; update(); });
+  const pal = DATA.palettes.find((p) => p.role === state.bgRole);
+  $('bg-step').innerHTML = `<button type="button" class="step any" data-v="any" aria-pressed="${state.bgStep === 'any'}">Any step</button>` +
+    (pal ? pal.steps : []).map((s) => `<button type="button" class="step" data-v="${s.step}" aria-pressed="${state.bgStep === s.step}" style="background:${s.hex};color:${contrast(s.hex, '#ffffff') > AA ? '#fff' : '#000'}" title="${s.hex}">${s.step}</button>`).join('');
+  $('bg-step').onclick = (e) => { const b = e.target.closest('button'); if (b) { state.bgStep = b.dataset.v; update(); } };
+  chipRow($('fg-pal'), [['all', 'Any palette'], ['same', 'Same palette'], ...palItems], state.fgRole, (v) => { state.fgRole = v; update(); });
+  chipRow($('level'), LEVELS.map(([, min, label]) => [min, `${label} · ${min}:1`]), state.min, (v) => { state.min = Number(v); update(); });
+  chipRow($('show'), [['visible', 'Hide the ones I hid'], ['starred', 'Only starred'], ['everything', 'Everything']], state.show, (v) => { state.show = v; update(); });
+}
+
+function candidates() {
+  const bgs = all.filter((c) => (state.bgRole === 'all' || c.role === state.bgRole) && (state.bgStep === 'any' || c.step === state.bgStep));
+  const out = [];
+  for (const bg of bgs) for (const fg of all) {
+    if (fg === bg) continue;
+    if (state.fgRole === 'same' ? fg.role !== bg.role : state.fgRole !== 'all' && fg.role !== state.fgRole) continue;
+    const ratio = contrast(bg.hex, fg.hex);
+    if (ratio < state.min) continue;
+    const id = pairId(bg.key, fg.key);
+    if (state.show === 'visible' && state.hidden[id]) continue;
+    if (state.show === 'starred' && !state.starred[id]) continue;
+    out.push({ bg, fg, ratio, id });
+  }
+  // Pairs closest to the threshold first: those are the subtle, brand-specific mixes.
+  return out.sort((a, b) => a.ratio - b.ratio);
+}
+
+function renderGrid() {
+  const list = candidates();
+  const shown = list.slice(0, LIMIT);
+  $('count').textContent = `${list.length} pair${list.length === 1 ? '' : 's'}`;
+  $('count-meta').textContent = list.length > LIMIT ? `showing the ${LIMIT} closest to ${state.min}:1; narrow the filters to see the rest` : 'lowest contrast first';
+  if (!shown.length) { $('grid').innerHTML = '<div class="empty">No pairs match. Try a lower level or another palette.</div>'; return; }
+  $('grid').innerHTML = shown.map(({ bg, fg, ratio, id }) => {
+    const star = state.starred[id];
+    return `<article class="card${star ? ' starred' : ''}" data-id="${id}">
+      <div class="mock" style="background:${bg.hex};color:${fg.hex}">
+        <span class="eyebrow">Field notes</span>
+        <span class="head">Dusk over the dunes</span>
+        <span class="copy">Trail closes at sundown. Carry two liters per person.</span>
+        <span class="acts"><span class="btn">Plan a trip</span><span class="badge" style="background:${fg.hex};color:${bg.hex}">NEW</span></span>
+      </div>
+      <div class="foot">
+        <span class="name">${esc(star ? star.name : autoName(bg, fg))}<span class="lvl">${levelOf(ratio)} ${ratio.toFixed(2)}</span></span>
+        <span class="spec">${esc(nameOf(fg.key))} on ${esc(nameOf(bg.key))}</span>
+        <span class="tools">
+          <button type="button" class="icon" data-act="star" aria-pressed="${!!star}" aria-label="${star ? 'Unstar' : 'Star'} this pair" title="Star">★</button>
+          <button type="button" class="icon" data-act="hide" aria-pressed="${!!state.hidden[id]}" aria-label="${state.hidden[id] ? 'Unhide' : 'Hide'} this pair" title="Hide">✕</button>
+        </span>
+      </div>
+    </article>`;
+  }).join('');
+}
+
+function toggle(id, act) {
+  const [b, f] = id.split('|');
+  if (act === 'star') {
+    if (state.starred[id]) delete state.starred[id];
+    else { state.starred[id] = { bg: b, fg: f, name: autoName(byKey.get(b), byKey.get(f)) }; delete state.hidden[id]; }
+  } else if (state.hidden[id]) delete state.hidden[id];
+  else { state.hidden[id] = true; delete state.starred[id]; }
+  update();
+}
+$('grid').onclick = (e) => { const b = e.target.closest('button[data-act]'); if (b) toggle(b.closest('.card').dataset.id, b.dataset.act); };
+
+/** Problems that would stop the build: text or accent under AA, a duplicate or empty name. */
+function problemsOf(id, s) {
+  const out = [];
+  const check = (mode, bg, fg, accent) => {
+    const [b, f, a] = [bg, fg, accent].map((k) => k && byKey.get(k)?.hex);
+    if (contrast(b, f) < AA) out.push(`${mode}text is ${contrast(b, f).toFixed(2)}:1, needs ${AA}:1`);
+    if (a && contrast(b, a) < AA) out.push(`${mode}accent is ${contrast(b, a).toFixed(2)}:1 on the background, needs ${AA}:1`);
+  };
+  check('', s.bg, s.fg, s.accent);
+  if (s.dark) check('Dark mode: ', s.dark.bg, s.dark.fg, s.dark.accent ?? s.accent);
+  if (!/^[a-z][a-z0-9-]*$/.test(s.name)) out.push('Names start with a letter and use a-z, 0-9 and dashes');
+  if (Object.entries(state.starred).some(([other, o]) => other !== id && o.name === s.name)) out.push('Another pair has this name');
+  return out;
+}
+
+function pairsObject() {
+  const out = {};
+  for (const s of Object.values(state.starred)) {
+    const spec = { bg: toRef(s.bg), fg: toRef(s.fg) };
+    if (s.accent) spec.accent = toRef(s.accent);
+    if (s.dark) spec.dark = Object.fromEntries(Object.entries(s.dark).filter(([, v]) => v).map(([k, v]) => [k, toRef(v)]));
+    if (s.description) spec.description = s.description;
+    out[s.name] = spec;
+  }
+  return out;
+}
+const oneLine = (v) => (typeof v === 'object' ? `{ ${Object.entries(v).map(([k, x]) => `${JSON.stringify(k)}: ${oneLine(x)}`).join(', ')} }` : JSON.stringify(v));
+const pairsBlock = () => {
+  const entries = Object.entries(pairsObject());
+  return entries.length ? `"pairs": {\n${entries.map(([k, v]) => `  ${JSON.stringify(k)}: ${oneLine(v)}`).join(',\n')}\n}` : '"pairs": {}';
+};
+
+function accentOptions(bgKey, current) {
+  const bg = byKey.get(bgKey).hex;
+  const groups = DATA.palettes.map((p) => {
+    const opts = p.steps
+      .map((st) => ({ key: p.role === 'base' ? st.step : `${p.role}.${st.step}`, hex: st.hex }))
+      .filter((c) => c.key === current || contrast(bg, c.hex) >= AA)
+      .map((c) => `<option value="${c.key}"${c.key === current ? ' selected' : ''}>${esc(nameOf(c.key))} · ${contrast(bg, c.hex).toFixed(1)}:1</option>`);
+    return opts.length ? `<optgroup label="${esc(p.role === 'base' ? 'paper & ink' : p.label)}">${opts.join('')}</optgroup>` : '';
+  });
+  return `<option value="">None (text color)</option>${groups.join('')}`;
+}
+
+function darkOptions(id, s) {
+  const others = Object.entries(state.starred).filter(([other]) => other !== id);
+  const match = s.dark && others.find(([, o]) => o.bg === s.dark.bg && o.fg === s.dark.fg);
+  const custom = s.dark && !match ? `<option value="custom" selected>${esc(nameOf(s.dark.fg))} on ${esc(nameOf(s.dark.bg))} (from the brand file)</option>` : '';
+  return `<option value="">Same as light</option>${custom}${others.map(([other, o]) => `<option value="${other}"${match?.[0] === other ? ' selected' : ''}>${esc(o.name)}: ${esc(nameOf(o.fg))} on ${esc(nameOf(o.bg))}</option>`).join('')}`;
+}
+
+function renderTray() {
+  const entries = Object.entries(state.starred);
+  $('saved-meta').textContent = entries.length ? `${entries.length} starred` : '';
+  $('saved').innerHTML = entries.length ? entries.map(([id, s]) => {
+    const bg = byKey.get(s.bg), fg = byKey.get(s.fg), accent = s.accent && byKey.get(s.accent);
+    const problems = problemsOf(id, s);
+    return `<div class="saved" data-id="${id}"><span class="sw" style="background:${bg.hex};color:${fg.hex}">Aa${accent ? `<span style="color:${accent.hex}">•</span>` : ''}</span>
+      <span style="display:grid;gap:2px;min-width:0"><input data-field="name" value="${esc(s.name)}" aria-label="Name for ${esc(nameOf(s.fg))} on ${esc(nameOf(s.bg))}"><span class="spec">${esc(nameOf(s.fg))} on ${esc(nameOf(s.bg))} · ${contrast(bg.hex, fg.hex).toFixed(2)}:1</span></span>
+      <button type="button" class="icon" data-act="star" aria-pressed="true" aria-label="Remove ${esc(s.name)}">★</button>
+      <span class="opts">
+        <label>Accent <select data-field="accent">${accentOptions(s.bg, s.accent ?? '')}</select></label>
+        <label>Dark mode <select data-field="dark">${darkOptions(id, s)}</select></label>
+      </span>
+      ${problems.map((p) => `<span class="warn">${esc(p)}</span>`).join('')}
+    </div>`;
+  }).join('') : '<div class="empty">Star a pair above and it lands here with a name.</div>';
+  $('json').textContent = pairsBlock();
+  const blocked = entries.some(([id, s]) => problemsOf(id, s).length);
+  $('save').disabled = blocked;
+  $('save').title = blocked ? 'Fix the pairs marked in red first' : '';
+}
+
+$('saved').addEventListener('input', (e) => {
+  const row = e.target.closest('.saved');
+  if (!row || e.target.dataset.field !== 'name') return;
+  const clean = e.target.value.toLowerCase().replace(/[^a-z0-9-]+/g, '-').replace(/^-+/, '');
+  if (clean !== e.target.value) e.target.value = clean;
+  state.starred[row.dataset.id].name = clean;
+  $('json').textContent = pairsBlock();
+});
+$('saved').addEventListener('change', (e) => {
+  const row = e.target.closest('.saved');
+  if (!row) return;
+  const s = state.starred[row.dataset.id];
+  if (e.target.dataset.field === 'accent') s.accent = e.target.value || undefined;
+  if (e.target.dataset.field === 'dark' && e.target.value !== 'custom') {
+    const o = state.starred[e.target.value];
+    s.dark = o ? { bg: o.bg, fg: o.fg, accent: o.accent } : undefined;
+  }
+  update();
+});
+$('saved').onclick = (e) => { const b = e.target.closest('button[data-act]'); if (b) toggle(b.closest('.saved').dataset.id, 'star'); };
+
+$('copy').onclick = async () => {
+  try { await navigator.clipboard.writeText(pairsBlock()); $('status').textContent = 'Copied. Paste it inside "color" in the brand file.'; }
+  catch { const r = document.createRange(); r.selectNodeContents($('json')); const sel = getSelection(); sel.removeAllRanges(); sel.addRange(r); $('status').textContent = 'Selected. Press copy on your keyboard.'; }
+};
+
+$('save').onclick = async () => {
+  $('save').disabled = true;
+  $('status').textContent = 'Saving and rebuilding tokens…';
+  try {
+    const res = await fetch('/pairs', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ pairs: pairsObject() }) });
+    const body = await res.json();
+    $('status').textContent = body.ok ? `Saved ${Object.keys(pairsObject()).length} pairs to ${DATA.brandFile} and rebuilt the tokens.` : `Not saved: ${body.error}`;
+  } catch (err) {
+    $('status').textContent = `Not saved: ${err.message}. Is loomiere lab still running?`;
+  }
+  renderTray();
+};
+
+function update() { save(); renderControls(); renderGrid(); renderTray(); }
+
+async function start() {
+  try {
+    DATA = await (await fetch('/data.json')).json();
+  } catch {
+    document.querySelector('main').innerHTML = '<div class="empty">Start the lab with <code>loomiere lab</code>, then open the address it prints.</div>';
+    return;
+  }
+  STORE = `sl-pair-lab:${DATA.brand}`;
+  all = DATA.palettes.flatMap((p) => p.steps.map((s) => ({ role: p.role, label: p.label, step: s.step, hex: s.hex, key: p.role === 'base' ? s.step : `${p.role}.${s.step}` })));
+  byKey = new Map(all.map((c) => [c.key, c]));
+  try { Object.assign(state, JSON.parse(localStorage.getItem(STORE) || '{}'), { starred: {} }); } catch { /* private mode */ }
+  // The brand file is the source of truth for starred pairs.
+  for (const [name, spec] of Object.entries(DATA.pairs)) {
+    const s = { name, bg: toKey(spec.bg), fg: toKey(spec.fg), accent: spec.accent && toKey(spec.accent), description: spec.description };
+    if (spec.dark) s.dark = { bg: toKey(spec.dark.bg ?? spec.bg), fg: toKey(spec.dark.fg ?? spec.fg), accent: spec.dark.accent && toKey(spec.dark.accent) };
+    if (byKey.has(s.bg) && byKey.has(s.fg)) state.starred[pairId(s.bg, s.fg)] = s;
+  }
+  $('title').textContent = `${DATA.brandName} pair lab`;
+  document.title = `${DATA.brandName} pair lab`;
+  $('brand-file').textContent = DATA.brandFile;
+  update();
+}
+start();