Spaces:

cardef
/

grid-lab

Running

grid-lab / controls_v2.js

A grid lab in your browser: the static app (whatif_static as of 2026-10-22, the 52 files of SPACE_FILES.txt)

5b7eb93 verified 5 days ago

12.2 kB

// UI primitives for v2: segmented controls, thin sliders, switches, a searchable multi-picker, numbers that count to
// their new value, and "i" popovers. Plain DOM, no framework.

export const REDUCED = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
export const $ = (s, el = document) => el.querySelector(s);
export const el = (tag, attrs = {}, html = "") => { const e = document.createElement(tag); Object.assign(e, attrs); if (html) e.innerHTML = html; return e; };

// segmented control: one of several options, with a sliding thumb
export function segmented(parent, options, value, onChange, { label = "", id = "", small = false } = {}) {
  const wrap = el("div", { className: `seg${small ? " small" : ""}`, id });
  wrap.setAttribute("role", "radiogroup");
  if (label) wrap.setAttribute("aria-label", label);
  const thumb = el("span", { className: "seg-thumb" });
  wrap.append(thumb);
  const btns = options.map((o) => {
    const [text, val] = Array.isArray(o) ? o : [o, o];
    const b = el("button", { type: "button", className: "seg-btn", textContent: text });
    b.dataset.value = val;
    b.setAttribute("role", "radio");
    b.addEventListener("click", () => { if (b.disabled) return; set(val); onChange(val); });
    wrap.append(b);
    return b;
  });
  parent.append(wrap);
  const place = () => {
    const on = btns.find((b) => b.getAttribute("aria-checked") === "true");
    if (!on || !on.offsetWidth) { thumb.style.opacity = "0"; return; }
    thumb.style.opacity = "1";
    thumb.style.width = `${on.offsetWidth}px`;
    thumb.style.transform = `translateX(${on.offsetLeft - 3}px)`;
  };
  function set(val) {
    btns.forEach((b) => b.setAttribute("aria-checked", String(b.dataset.value === String(val))));
    requestAnimationFrame(place);
  }
  set(value);
  new ResizeObserver(place).observe(wrap);
  return { set, el: wrap, btns, disable: (vals) => btns.forEach((b) => { b.disabled = vals.includes(b.dataset.value); }) };
}

// slider: label (with an optional "i" popover, `info`: plain text), value read-out (editable), a thin track with a round knob
export function slider(parent, { label, info: tip, min, max, step, value, unit = "", id, onInput, onChange, fmt }) {
  const wrap = el("div", { className: "sl" });
  const head = el("div", { className: "sl-head" });
  const lab = el("label", { htmlFor: id, textContent: label });
  const name = el("span", { className: "sl-lab" });
  name.append(lab);
  if (tip) { const b = info(tip); b.setAttribute("aria-label", `About ${label}`); name.append(b); }
  const num = el("input", { type: "number", min, max, step, value, className: "sl-num" });
  num.setAttribute("aria-label", label);
  const rng = el("input", { type: "range", min, max, step, value, id });
  head.append(name, el("span", { className: "sl-val" }));
  head.lastChild.append(num, unit ? el("span", { className: "sl-unit", textContent: unit }) : "");
  wrap.append(head, rng);
  parent.append(wrap);
  const f = fmt || ((v) => String(+(+v).toFixed(4)));
  const fill = () => rng.style.setProperty("--p", `${((rng.value - min) / (max - min)) * 100}%`);
  fill();
  // the value is kept exactly: a range input snaps what it is given to its step (a real day's load 0.9461 would read 0.95)
  let cur = +value;
  rng.addEventListener("input", () => { cur = +rng.value; num.value = f(cur); fill(); onInput && onInput(cur); });
  rng.addEventListener("change", () => onChange && onChange(cur));
  num.addEventListener("change", () => { const v = Math.min(max, Math.max(min, +num.value || 0)); cur = v; rng.value = v; num.value = f(v); fill(); onInput && onInput(v); onChange && onChange(v); });
  return { get: () => cur, set: (v) => { cur = +v; rng.value = v; num.value = f(v); fill(); }, el: wrap, range: rng, num };
}

// switch: an on/off toggle with a label
export function toggle(parent, { label, checked = false, id, onChange }) {
  const lab = el("label", { className: "sw" });
  const inp = el("input", { type: "checkbox", checked, id });
  inp.setAttribute("role", "switch");
  lab.append(inp, el("span", { className: "sw-track" }), el("span", { className: "sw-label", textContent: label }));
  inp.addEventListener("change", () => onChange && onChange(inp.checked));
  parent.append(lab);
  return { get: () => inp.checked, set: (v) => { inp.checked = v; }, input: inp };
}

// searchable multi-select: type to filter, pick a match, x on a chip to remove it
export function picker(parent, { label, info, options, onChange, id }) {
  const wrap = el("div", { className: "pk" });
  wrap.append(el("label", { className: "pk-label", htmlFor: id, textContent: label }));
  if (info) wrap.append(el("div", { className: "pk-info", textContent: info }));
  const inp = el("input", { type: "search", id, placeholder: "Search by number, bus or fuel", autocomplete: "off" });
  const list = el("div", { className: "pk-list", hidden: true });
  list.setAttribute("role", "listbox");
  const chips = el("div", { className: "chips" });
  wrap.append(inp, list, chips);
  parent.append(wrap);
  let sel = [];
  const render = () => {
    chips.innerHTML = "";
    for (const v of sel) {
      const c = el("span", { className: "chip" }, options.find((o) => o[1] === v)[0].split(":")[0]);
      const x = el("button", { type: "button", textContent: "×" });
      x.setAttribute("aria-label", "remove");
      x.addEventListener("click", () => { sel = sel.filter((s) => s !== v); render(); onChange(sel); });
      c.append(x); chips.append(c);
    }
  };
  inp.addEventListener("input", () => {
    const q = inp.value.trim().toLowerCase();
    list.innerHTML = "";
    if (!q) { list.hidden = true; return; }
    const hits = options.filter((o) => o[0].toLowerCase().includes(q) && !sel.includes(o[1])).slice(0, 30);
    for (const [t, v] of hits) {
      const o = el("button", { type: "button", className: "pk-opt", textContent: t });
      o.dataset.value = v;
      o.setAttribute("role", "option");
      o.addEventListener("click", () => { sel = [...sel, v].sort((a, b) => a - b); render(); onChange(sel); inp.value = ""; list.hidden = true; });
      list.append(o);
    }
    list.hidden = !hits.length;
  });
  return { get: () => sel, set: (v) => { sel = [...v]; render(); } };
}

// ---------------------------------------------------------------- rolling numbers (Apple's numericText)
// A number changes by sliding each changed digit straight from its old value to its new one, up if the value rose and
// down if it fell; unchanged digits stay still, and no value in between is ever shown (a count-up shows numbers that were
// never computed). Only the text runs of fmt's HTML move; its elements (<small>/h</small>) stay static, and so do
// separators that only swap places. Old and new runs align from the right; a digit that appears or disappears slides
// and fades in or out while its column grows or shrinks. A new value mid-roll starts from the last one. The first value fades in; with reduced motion the
// final text is set at once. Every glyph sits in a column one line tall, so the width does not move while digits roll;
// the outgoing glyph is aria-hidden. data-v keeps the value and data-text the final text (what tests read).
const ROLL_MS = 350;
const isDigit = (c) => c != null && c >= "0" && c <= "9";
const esc = (c) => ({ "<": "&lt;", ">": "&gt;", "&": "&amp;" }[c] || c);
function valueParts(html) {
  const t = document.createElement("template");
  t.innerHTML = html;
  return [...t.content.childNodes].map((n) => (n.nodeType === Node.TEXT_NODE ? { text: n.textContent } : { text: null, el: n.outerHTML || "", plain: n.textContent }));
}
// one text run as glyph columns; old (that run's previous text) aligned from the right, or null for no roll
function glyphRun(nw, old, how, fade) {
  if (old == null) return [...nw].map((c) => `<span class="g${fade ? " fade" : ""}">${esc(c)}</span>`).join("");
  const pre = nw.match(/^\D*/)[0];                       // a shared prefix ("$") stays put; the digits align after it
  if (pre && pre !== nw && old.match(/^\D*/)[0] === pre) return glyphRun(pre, pre, how) + glyphRun(nw.slice(pre.length), old.slice(pre.length), how);
  const n = Math.max(nw.length, old.length);
  let s = "";
  for (let i = 0; i < n; i++) {
    const a = i >= n - old.length ? old[i - (n - old.length)] : null, b = i >= n - nw.length ? nw[i - (n - nw.length)] : null;
    if (a === b || (a != null && b != null && !isDigit(a) && !isDigit(b))) s += `<span class="g">${esc(b)}</span>`;
    else if (a != null && b != null) s += `<span class="g roll ${how}"><i class="o" aria-hidden="true">${esc(a)}</i><i class="n">${esc(b)}</i></span>`;
    else if (b != null) s += `<span class="g roll ${how} in"><i class="n">${esc(b)}</i></span>`;
    else s += `<span class="g roll ${how} gone" aria-hidden="true"><i class="o">${esc(a)}</i></span>`;
  }
  return s;
}
function paintValue(node, P, old, how, fade) {
  let k = 0;
  node.innerHTML = `<span class="rl">${P.map((p) => (p.text != null ? glyphRun(p.text, old ? old[k++] : null, how, fade) : p.el)).join("")}</span>`;
  // a column that appears or goes animates to its glyph's own width, so it opens and closes in step with the roll
  for (const g of node.querySelectorAll(".g.in, .g.gone")) g.style.setProperty("--w", `${g.firstElementChild.getBoundingClientRect().width}px`);
}
export function countTo(node, to, fmt) {
  if (!node) return;
  const P = valueParts(fmt(to)), texts = P.filter((p) => p.text != null).map((p) => p.text);
  const final = P.map((p) => (p.text != null ? p.text : p.plain)).join("");
  const prev = node._roll && node.firstElementChild && node.firstElementChild.classList.contains("rl") ? node._roll : null;
  node.dataset.v = to;
  node.dataset.text = final;
  clearTimeout(node._rollT);
  if (prev && prev.final === final) {                    // the same text: settle a roll in flight, else nothing to do
    if (prev.rolling) { paintValue(node, P, null, "", false); prev.rolling = false; }
    prev.v = to;
    return;
  }
  const roll = !REDUCED && !!prev && prev.texts.length === texts.length && Number.isFinite(prev.v) && Number.isFinite(to);
  node._roll = { v: to, texts, final, rolling: roll };
  if (!roll) { paintValue(node, P, null, "", !REDUCED); return; }
  paintValue(node, P, prev.texts, to > prev.v ? "up" : to < prev.v ? "down" : "swap", false);
  node._rollT = setTimeout(() => { paintValue(node, P, null, "", false); node._roll.rolling = false; }, ROLL_MS + 30);
}

// an "i" button that shows a short explanation in a popover
export function info(text) {
  const b = el("button", { type: "button", className: "i-btn", textContent: "i" });
  b.setAttribute("aria-label", "more information");
  b.dataset.tip = text;
  return b;
}
// the popover of an "i" button: on tap or click, and on hover where there is a mouse
let POP = null, POP_BY = null;
function hidePop() { if (POP) { POP.remove(); POP = null; POP_BY = null; } }
function showPop(b) {
  hidePop();
  POP = el("div", { className: "pop", textContent: b.dataset.tip });
  POP_BY = b;
  document.body.append(POP);
  const r = b.getBoundingClientRect(), w = Math.min(300, window.innerWidth - 24);
  POP.style.width = `${w}px`;
  POP.style.left = `${Math.max(12, Math.min(window.innerWidth - w - 12, r.left + r.width / 2 - w / 2))}px`;
  POP.style.top = `${r.bottom + window.scrollY + 8}px`;
}
document.addEventListener("click", (e) => {
  const b = e.target.closest && e.target.closest(".i-btn");
  if (!b) { hidePop(); return; }
  e.stopPropagation();
  if (POP_BY === b && e.detail > 0 && b.dataset.hovered === "1") { b.dataset.hovered = ""; return; }   // already open from hover
  if (POP_BY === b) hidePop(); else showPop(b);
});
const HOVER = window.matchMedia && window.matchMedia("(hover: hover)").matches;
if (HOVER) {
  document.addEventListener("mouseover", (e) => { const b = e.target.closest && e.target.closest(".i-btn"); if (b && POP_BY !== b) { showPop(b); b.dataset.hovered = "1"; } });
  document.addEventListener("mouseout", (e) => { const b = e.target.closest && e.target.closest(".i-btn"); if (b && POP_BY === b && !b.contains(e.relatedTarget)) { b.dataset.hovered = ""; hidePop(); } });
}

	// UI primitives for v2: segmented controls, thin sliders, switches, a searchable multi-picker, numbers that count to
	// their new value, and "i" popovers. Plain DOM, no framework.

	export const REDUCED = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
	export const $ = (s, el = document) => el.querySelector(s);
	export const el = (tag, attrs = {}, html = "") => { const e = document.createElement(tag); Object.assign(e, attrs); if (html) e.innerHTML = html; return e; };

	// segmented control: one of several options, with a sliding thumb
	export function segmented(parent, options, value, onChange, { label = "", id = "", small = false } = {}) {
	const wrap = el("div", { className: `seg${small ? " small" : ""}`, id });
	wrap.setAttribute("role", "radiogroup");
	if (label) wrap.setAttribute("aria-label", label);
	const thumb = el("span", { className: "seg-thumb" });
	wrap.append(thumb);
	const btns = options.map((o) => {
	const [text, val] = Array.isArray(o) ? o : [o, o];
	const b = el("button", { type: "button", className: "seg-btn", textContent: text });
	b.dataset.value = val;
	b.setAttribute("role", "radio");
	b.addEventListener("click", () => { if (b.disabled) return; set(val); onChange(val); });
	wrap.append(b);
	return b;
	});
	parent.append(wrap);
	const place = () => {
	const on = btns.find((b) => b.getAttribute("aria-checked") === "true");
	if (!on \|\| !on.offsetWidth) { thumb.style.opacity = "0"; return; }
	thumb.style.opacity = "1";
	thumb.style.width = `${on.offsetWidth}px`;
	thumb.style.transform = `translateX(${on.offsetLeft - 3}px)`;
	};
	function set(val) {
	btns.forEach((b) => b.setAttribute("aria-checked", String(b.dataset.value === String(val))));
	requestAnimationFrame(place);
	}
	set(value);
	new ResizeObserver(place).observe(wrap);
	return { set, el: wrap, btns, disable: (vals) => btns.forEach((b) => { b.disabled = vals.includes(b.dataset.value); }) };
	}

	// slider: label (with an optional "i" popover, `info`: plain text), value read-out (editable), a thin track with a round knob
	export function slider(parent, { label, info: tip, min, max, step, value, unit = "", id, onInput, onChange, fmt }) {
	const wrap = el("div", { className: "sl" });
	const head = el("div", { className: "sl-head" });
	const lab = el("label", { htmlFor: id, textContent: label });
	const name = el("span", { className: "sl-lab" });
	name.append(lab);
	if (tip) { const b = info(tip); b.setAttribute("aria-label", `About ${label}`); name.append(b); }
	const num = el("input", { type: "number", min, max, step, value, className: "sl-num" });
	num.setAttribute("aria-label", label);
	const rng = el("input", { type: "range", min, max, step, value, id });
	head.append(name, el("span", { className: "sl-val" }));
	head.lastChild.append(num, unit ? el("span", { className: "sl-unit", textContent: unit }) : "");
	wrap.append(head, rng);
	parent.append(wrap);
	const f = fmt \|\| ((v) => String(+(+v).toFixed(4)));
	const fill = () => rng.style.setProperty("--p", `${((rng.value - min) / (max - min)) * 100}%`);
	fill();
	// the value is kept exactly: a range input snaps what it is given to its step (a real day's load 0.9461 would read 0.95)
	let cur = +value;
	rng.addEventListener("input", () => { cur = +rng.value; num.value = f(cur); fill(); onInput && onInput(cur); });
	rng.addEventListener("change", () => onChange && onChange(cur));
	num.addEventListener("change", () => { const v = Math.min(max, Math.max(min, +num.value \|\| 0)); cur = v; rng.value = v; num.value = f(v); fill(); onInput && onInput(v); onChange && onChange(v); });
	return { get: () => cur, set: (v) => { cur = +v; rng.value = v; num.value = f(v); fill(); }, el: wrap, range: rng, num };
	}

	// switch: an on/off toggle with a label
	export function toggle(parent, { label, checked = false, id, onChange }) {
	const lab = el("label", { className: "sw" });
	const inp = el("input", { type: "checkbox", checked, id });
	inp.setAttribute("role", "switch");
	lab.append(inp, el("span", { className: "sw-track" }), el("span", { className: "sw-label", textContent: label }));
	inp.addEventListener("change", () => onChange && onChange(inp.checked));
	parent.append(lab);
	return { get: () => inp.checked, set: (v) => { inp.checked = v; }, input: inp };
	}

	// searchable multi-select: type to filter, pick a match, x on a chip to remove it
	export function picker(parent, { label, info, options, onChange, id }) {
	const wrap = el("div", { className: "pk" });
	wrap.append(el("label", { className: "pk-label", htmlFor: id, textContent: label }));
	if (info) wrap.append(el("div", { className: "pk-info", textContent: info }));
	const inp = el("input", { type: "search", id, placeholder: "Search by number, bus or fuel", autocomplete: "off" });
	const list = el("div", { className: "pk-list", hidden: true });
	list.setAttribute("role", "listbox");
	const chips = el("div", { className: "chips" });
	wrap.append(inp, list, chips);
	parent.append(wrap);
	let sel = [];
	const render = () => {
	chips.innerHTML = "";
	for (const v of sel) {
	const c = el("span", { className: "chip" }, options.find((o) => o[1] === v)[0].split(":")[0]);
	const x = el("button", { type: "button", textContent: "×" });
	x.setAttribute("aria-label", "remove");
	x.addEventListener("click", () => { sel = sel.filter((s) => s !== v); render(); onChange(sel); });
	c.append(x); chips.append(c);
	}
	};
	inp.addEventListener("input", () => {
	const q = inp.value.trim().toLowerCase();
	list.innerHTML = "";
	if (!q) { list.hidden = true; return; }
	const hits = options.filter((o) => o[0].toLowerCase().includes(q) && !sel.includes(o[1])).slice(0, 30);
	for (const [t, v] of hits) {
	const o = el("button", { type: "button", className: "pk-opt", textContent: t });
	o.dataset.value = v;
	o.setAttribute("role", "option");
	o.addEventListener("click", () => { sel = [...sel, v].sort((a, b) => a - b); render(); onChange(sel); inp.value = ""; list.hidden = true; });
	list.append(o);
	}
	list.hidden = !hits.length;
	});
	return { get: () => sel, set: (v) => { sel = [...v]; render(); } };
	}

	// ---------------------------------------------------------------- rolling numbers (Apple's numericText)
	// A number changes by sliding each changed digit straight from its old value to its new one, up if the value rose and
	// down if it fell; unchanged digits stay still, and no value in between is ever shown (a count-up shows numbers that were
	// never computed). Only the text runs of fmt's HTML move; its elements (<small>/h</small>) stay static, and so do
	// separators that only swap places. Old and new runs align from the right; a digit that appears or disappears slides
	// and fades in or out while its column grows or shrinks. A new value mid-roll starts from the last one. The first value fades in; with reduced motion the
	// final text is set at once. Every glyph sits in a column one line tall, so the width does not move while digits roll;
	// the outgoing glyph is aria-hidden. data-v keeps the value and data-text the final text (what tests read).
	const ROLL_MS = 350;
	const isDigit = (c) => c != null && c >= "0" && c <= "9";
	const esc = (c) => ({ "<": "<", ">": ">", "&": "&" }[c] \|\| c);
	function valueParts(html) {
	const t = document.createElement("template");
	t.innerHTML = html;
	return [...t.content.childNodes].map((n) => (n.nodeType === Node.TEXT_NODE ? { text: n.textContent } : { text: null, el: n.outerHTML \|\| "", plain: n.textContent }));
	}
	// one text run as glyph columns; old (that run's previous text) aligned from the right, or null for no roll
	function glyphRun(nw, old, how, fade) {
	if (old == null) return [...nw].map((c) => `<span class="g${fade ? " fade" : ""}">${esc(c)}</span>`).join("");
	const pre = nw.match(/^\D*/)[0]; // a shared prefix ("$") stays put; the digits align after it
	if (pre && pre !== nw && old.match(/^\D*/)[0] === pre) return glyphRun(pre, pre, how) + glyphRun(nw.slice(pre.length), old.slice(pre.length), how);
	const n = Math.max(nw.length, old.length);
	let s = "";
	for (let i = 0; i < n; i++) {
	const a = i >= n - old.length ? old[i - (n - old.length)] : null, b = i >= n - nw.length ? nw[i - (n - nw.length)] : null;
	if (a === b \|\| (a != null && b != null && !isDigit(a) && !isDigit(b))) s += `<span class="g">${esc(b)}</span>`;
	else if (a != null && b != null) s += `<span class="g roll ${how}"><i class="o" aria-hidden="true">${esc(a)}</i><i class="n">${esc(b)}</i></span>`;
	else if (b != null) s += `<span class="g roll ${how} in"><i class="n">${esc(b)}</i></span>`;
	else s += `<span class="g roll ${how} gone" aria-hidden="true"><i class="o">${esc(a)}</i></span>`;
	}
	return s;
	}
	function paintValue(node, P, old, how, fade) {
	let k = 0;
	node.innerHTML = `<span class="rl">${P.map((p) => (p.text != null ? glyphRun(p.text, old ? old[k++] : null, how, fade) : p.el)).join("")}</span>`;
	// a column that appears or goes animates to its glyph's own width, so it opens and closes in step with the roll
	for (const g of node.querySelectorAll(".g.in, .g.gone")) g.style.setProperty("--w", `${g.firstElementChild.getBoundingClientRect().width}px`);
	}
	export function countTo(node, to, fmt) {
	if (!node) return;
	const P = valueParts(fmt(to)), texts = P.filter((p) => p.text != null).map((p) => p.text);
	const final = P.map((p) => (p.text != null ? p.text : p.plain)).join("");
	const prev = node._roll && node.firstElementChild && node.firstElementChild.classList.contains("rl") ? node._roll : null;
	node.dataset.v = to;
	node.dataset.text = final;
	clearTimeout(node._rollT);
	if (prev && prev.final === final) { // the same text: settle a roll in flight, else nothing to do
	if (prev.rolling) { paintValue(node, P, null, "", false); prev.rolling = false; }
	prev.v = to;
	return;
	}
	const roll = !REDUCED && !!prev && prev.texts.length === texts.length && Number.isFinite(prev.v) && Number.isFinite(to);
	node._roll = { v: to, texts, final, rolling: roll };
	if (!roll) { paintValue(node, P, null, "", !REDUCED); return; }
	paintValue(node, P, prev.texts, to > prev.v ? "up" : to < prev.v ? "down" : "swap", false);
	node._rollT = setTimeout(() => { paintValue(node, P, null, "", false); node._roll.rolling = false; }, ROLL_MS + 30);
	}

	// an "i" button that shows a short explanation in a popover
	export function info(text) {
	const b = el("button", { type: "button", className: "i-btn", textContent: "i" });
	b.setAttribute("aria-label", "more information");
	b.dataset.tip = text;
	return b;
	}
	// the popover of an "i" button: on tap or click, and on hover where there is a mouse
	let POP = null, POP_BY = null;
	function hidePop() { if (POP) { POP.remove(); POP = null; POP_BY = null; } }
	function showPop(b) {
	hidePop();
	POP = el("div", { className: "pop", textContent: b.dataset.tip });
	POP_BY = b;
	document.body.append(POP);
	const r = b.getBoundingClientRect(), w = Math.min(300, window.innerWidth - 24);
	POP.style.width = `${w}px`;
	POP.style.left = `${Math.max(12, Math.min(window.innerWidth - w - 12, r.left + r.width / 2 - w / 2))}px`;
	POP.style.top = `${r.bottom + window.scrollY + 8}px`;
	}
	document.addEventListener("click", (e) => {
	const b = e.target.closest && e.target.closest(".i-btn");
	if (!b) { hidePop(); return; }
	e.stopPropagation();
	if (POP_BY === b && e.detail > 0 && b.dataset.hovered === "1") { b.dataset.hovered = ""; return; } // already open from hover
	if (POP_BY === b) hidePop(); else showPop(b);
	});
	const HOVER = window.matchMedia && window.matchMedia("(hover: hover)").matches;
	if (HOVER) {
	document.addEventListener("mouseover", (e) => { const b = e.target.closest && e.target.closest(".i-btn"); if (b && POP_BY !== b) { showPop(b); b.dataset.hovered = "1"; } });
	document.addEventListener("mouseout", (e) => { const b = e.target.closest && e.target.closest(".i-btn"); if (b && POP_BY === b && !b.contains(e.relatedTarget)) { b.dataset.hovered = ""; hidePop(); } });
	}