@thg-agentic/hyper-personalisation-web 3.28.1 → 3.30.0

package/src/onsite/products.js

@@ -11,7 +11,10 @@
 
 import { watchViewability } from '../auto/viewability.js';
 import { httpsHref } from './rich-text.js';
+import { isObject } from './rules.js';
 
+// `.btn.bs` is a small button, for a card's: here, as no other block has one, and not `.sm`, which
+// is the stylesheet's small print.
 const CSS = `.pr ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
 .pr-c ul{grid-auto-flow:column;grid-auto-columns:minmax(132px,42%);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;overscroll-behavior-x:contain}
 .pr-c li{scroll-snap-align:start}
@@ -26,12 +29,16 @@ const CSS = `.pr ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
 .pn{font-size:14px;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .pp{font-size:14px;font-weight:700}
 .pp s{font-weight:400;color:var(--mu)}
-.pb{margin-top:auto;padding:8px 12px;font-size:14px}
+.btn.bs{min-height:40px;padding:8px 12px;font-size:14px}
+.pb{margin-top:auto;white-space:nowrap}
+.pr-c{position:relative}
+.ar{position:absolute;z-index:1;top:calc(var(--ph,132px)/2 - 20px);left:-6px;width:40px;height:40px;padding:0 0 3px;border:1px solid var(--ln);border-radius:50%;background:var(--b);color:var(--t);box-shadow:0 2px 8px rgb(0 0 0/.15);font:24px/1 sans-serif;cursor:pointer}
+.ar+.ar{left:auto;right:-6px}
+.ar[aria-disabled=true]{opacity:.35;cursor:default}
+.mob .ar,.pr-f .ar{display:none}
 @media (prefers-reduced-motion:reduce){.pr-c ul{scroll-behavior:auto}}`;
 
 const ALIGNS = ['left', 'center', 'right'];
-const isObject = (v) =>
-	v !== null && typeof v === 'object' && !Array.isArray(v);
 
 /** Money in the form's language; the bare amount for a currency the browser does not know. */
 function moneyIn(lang, currency) {
@@ -54,7 +61,8 @@ function moneyIn(lang, currency) {
  * @param {{ el: Function, lang?: string, root: ShadowRoot, placement: string, preview: boolean,
  *   client: object|null, engaged: Function, seen: Set<string> }} o `client` is null when nothing
  *   is reported; `seen` holds the form's rails already reported seen, so a step shown again is not.
- * @returns {(() => void)|undefined} Stops watching the cards, for when the step changes.
+ * @returns {(() => void)|undefined} Stops watching the cards and the row's size, for when the step
+ *   changes.
  */
 export function mountProducts(box, block, o) {
 	const { el } = o;
@@ -149,7 +157,7 @@ export function mountProducts(box, block, o) {
 		if (show.name === false && !image)
 			a.setAttribute('aria-label', name || p.product_id);
 		if (typeof block.button === 'string' && block.button)
-			a.append(el('span', 'btn pb', block.button));
+			a.append(el('span', 'btn bs pb', block.button));
 		a.href = httpsHref(p.url);
 		a.rel = 'noopener';
 		a.addEventListener('click', (e) => {
@@ -170,21 +178,70 @@ export function mountProducts(box, block, o) {
 		list.append(item);
 	}
 	box.append(style, list);
-	if (!client || seen.has(id)) return;
-	return watchViewability({
-		selector: '[data-hp-product]',
-		root: o.root,
-		onViewable(node) {
-			const position = Number(node.dataset.hpPosition);
-			if (!viewable.has(position))
-				viewable.set(position, {
-					position,
-					product_id: node.dataset.hpProduct,
-					viewable_at: new Date().toISOString(),
-				});
-			// Deferred a turn, so cards that became viewable together land on one event.
-			pending ??= setTimeout(impression, 0);
-			return true;
-		},
+	const ro = grid ? null : arrows(box, list, el);
+	const stop =
+		client &&
+		!seen.has(id) &&
+		watchViewability({
+			selector: '[data-hp-product]',
+			root: o.root,
+			onViewable(node) {
+				const position = Number(node.dataset.hpPosition);
+				if (!viewable.has(position))
+					viewable.set(position, {
+						position,
+						product_id: node.dataset.hpProduct,
+						viewable_at: new Date().toISOString(),
+					});
+				// Deferred a turn, so cards that became viewable together land on one event.
+				pending ??= setTimeout(impression, 0);
+				return true;
+			},
+		});
+	return () => {
+		ro?.disconnect();
+		if (stop) stop();
+	};
+}
+
+/**
+ * A carousel's previous and next buttons, for a mouse on a large screen (a phone swipes; Tab walks
+ * the cards): each scrolls a page of cards, as smoothly as the shopper allows, and says it can go
+ * no further at its end. Hidden when every card fits. They sit level with the middle of the
+ * pictures, whose height (`--ph`, a square as wide as a card) is measured with the row. They come
+ * before the row, so Tab reaches them before the cards they page. Returns what watches the row's
+ * size.
+ */
+function arrows(box, list, el) {
+	const buttons = ['Previous', 'Next'].map((label, i) => {
+		const b = el('button', 'ar', i ? '›' : '‹');
+		b.type = 'button';
+		b.setAttribute('aria-label', `${label} products`);
+		b.addEventListener('click', () =>
+			list.scrollBy({ left: (i ? 1 : -1) * list.clientWidth }),
+		);
+		list.before(b);
+		return b;
 	});
+	// Every read before any write, and a write only when something changed, so scrolling never
+	// makes the browser lay the row out again.
+	let painted = '';
+	const paint = () => {
+		const end = list.scrollWidth - list.clientWidth;
+		const at = list.scrollLeft;
+		const picture = list.firstElementChild?.offsetWidth ?? 0;
+		const now = [end < 2, at < 2, at > end - 2, picture];
+		if (`${now}` === painted) return;
+		painted = `${now}`;
+		box.classList.toggle('pr-f', now[0]);
+		box.style.setProperty('--ph', `${picture}px`);
+		buttons[0].setAttribute('aria-disabled', String(now[1]));
+		buttons[1].setAttribute('aria-disabled', String(now[2]));
+	};
+	list.addEventListener('scroll', paint, { passive: true });
+	paint();
+	// Told the row's size again once it is laid out, and as it changes.
+	const ro = globalThis.ResizeObserver && new ResizeObserver(paint);
+	ro?.observe(list);
+	return ro;
 }

package/src/onsite/render.js

@@ -11,7 +11,15 @@
 
 import { solve } from './pow.js';
 import { assetHref, httpsHref, richText } from './rich-text.js';
-import { CALLING_CODES, e164, isEmail, nextStep, select } from './rules.js';
+import {
+	CALLING_CODES,
+	cardColumns,
+	e164,
+	isEmail,
+	isObject,
+	nextStep,
+	select,
+} from './rules.js';
 import { CSS, FONTS } from './styles.js';
 
 const HEX = /^#(?:[0-9a-f]{3}){1,2}$/i;
@@ -62,8 +70,6 @@ const COPY = {
 	won: 'You won',
 };
 
-const isObject = (v) =>
-	v !== null && typeof v === 'object' && !Array.isArray(v);
 const oneOf = (list, v, fallback) => (list.includes(v) ? v : fallback);
 const num = (v, lo, hi) =>
 	Number.isFinite(v) ? Math.min(Math.max(v, lo), hi) : null;
@@ -104,20 +110,27 @@ const sizeOf = (t, l) =>
 	(l.template === 'split' || l.template === 'overlay' ? 'lg' : 'md');
 
 /**
- * How wide an image shows, for the browser to pick from its srcset: the whole screen on a small
- * one or a full-size form, else `part` of the card, a sheet or a teaser's tab.
+ * How wide an image shows, for the browser to pick from its srcset: `small` (the whole screen) on
+ * a small one or a full-size form, else `part` of the card, a sheet or a teaser's tab.
  */
-const across = (mode, size, part = 1) => {
-	if (mode === 'fullscreen' || size === 'full') return '100vw';
+const across = (mode, size, part = 1, small = '100vw') => {
+	if (mode === 'fullscreen' || size === 'full') return small;
 	const px =
 		mode === 'teaser'
 			? 220
 			: mode === 'sheet'
 				? 400
 				: (CARD_PX[size] ?? CARD_PX.md);
-	return `(max-width: 639px) 100vw, ${Math.round(px * part)}px`;
+	return `(max-width: 639px) ${small}, ${Math.round(px * part)}px`;
 };
 
+/**
+ * A picture card of question `q`'s share of the form: half a narrow form, two a row, and of a large
+ * one one of its columns (`cardColumns`, as answers.js lays them out). On a phone, half the screen
+ * (`across`'s `small`, '50vw').
+ */
+const cardPart = (size, q) => (size === 'lg' ? 1 / cardColumns(q) : 0.5);
+
 /**
  * The smaller copies the upload made of a WebP image (`widths`, any of them, each at `-<w>w.webp`)
  * and the image itself at its width, as a srcset; null when there are none to offer.
@@ -187,21 +200,32 @@ export function warm(form, creative, id, seen = new Set()) {
 	const size = sizeOf(creative.theme, l);
 	// A teaser's tab shows only its button, or its picture when that is all it is: the rest of the
 	// form opens as a popup, warmed with the popup's sizes once the tab is up (warmNext).
+	// Each entry: a picture, and its part of the card and of a phone, as the renderer sizes it;
+	// picture cards, one picture an answer, as many as the question has.
 	const wanted = tab
 		? []
-		: step.blocks
-				.filter((b) => isObject(b) && (b.t === 'image' || b.t === 'video'))
-				.map((b) => [b, 1]);
+		: step.blocks.flatMap((b) => {
+				if (b?.t === 'image' || b?.t === 'video') return [[b]];
+				// Picture cards are a single choice's: any other question shows as it would without them.
+				const q =
+					b?.display === 'cards' &&
+					form.questions.find((x) => x.key === b.question && x.type === 'one');
+				return q
+					? Object.values(b.pictures ?? {})
+							.filter(isObject)
+							.map((p) => [p, cardPart(size, q), '50vw'])
+					: [];
+			});
 	if (l.media && !(tab && l.template !== 'image-only'))
 		wanted.push([l.media, l.template === 'split' ? 0.46 : 1]);
 	return Promise.all(
-		wanted.map(([m, part]) => {
+		wanted.map(([m, part, small]) => {
 			const src = assetHref(isVideo(m) ? m.poster : m.asset);
 			if (!src) return null;
 			const img = document.createElement('img');
 			const set = !isVideo(m) && srcset(m, src, num(m.width, 1, 8192));
 			if (set) {
-				img.sizes = across(mode, size, part);
+				img.sizes = across(mode, size, part, small);
 				img.srcset = set;
 			}
 			const key = `${img.sizes} ${set || src}`;
@@ -320,8 +344,9 @@ function styles(root) {
  * @param {() => Promise<{ mountWheel: Function }>} o.loadWheel
  * @param {() => Promise<{ mountProducts: Function }>} [o.loadProducts] A products block's cards
  *   (./products.js), loaded when a step shows one.
- * @param {() => Promise<{ answerFields: Function, answerOf: Function }>} o.loadAnswers The fields of
- *   a date or number question (./answers.js), loaded once as the form mounts when it asks one.
+ * @param {() => Promise<{ answerFields: Function, answerOf: Function, answerCards: Function, countdown: Function }>} o.loadAnswers
+ *   A date or number question's fields, picture cards and a countdown's ticking (./answers.js),
+ *   loaded once as the form mounts when it shows any of them.
  * @param {Element|null} [o.container] The page's element, for an inline form.
  * @param {(reason: string) => void} [o.onClose]
  * @param {(name: 'submitted'|'apply', detail: object) => void} [o.emit] To `hp.onsite.on` listeners.
@@ -397,7 +422,11 @@ export function mountForm(o) {
 		modal: false,
 		mobile: preview?.device === 'mobile',
 		answers: {},
+		// The step each answer was given on, by question.
+		answeredOn: {},
 		sent: new Set(),
+		// Whether this view's click is counted: a view counts one, whatever was clicked.
+		clicked: false,
 		// The products blocks' rails reported seen, by id: a step shown again does not report it twice.
 		seen: new Set(),
 		receipt: null,
@@ -427,10 +456,15 @@ export function mountForm(o) {
 
 	// The form's language, else the page's: a phone field's country, a birthday's months, money.
 	const lang = form.locale || document.documentElement.lang;
-	// ./answers.js, asked for once, as the form mounts, when it asks a date or a number; null when it
-	// could not load. Each of their fieldsets reads its answer with it.
+	// ./answers.js, fetched once as the form mounts when it asks a date or a number, or any step
+	// shows picture cards or a countdown, so none waits for it once its step shows; null when it
+	// could not load. Each date or number reads its answer with it.
 	const fields =
-		form.questions.some(typed) && o.loadAnswers().catch(() => null);
+		(form.questions.some(typed) ||
+			creative.steps.some((s) =>
+				s.blocks.some((b) => b?.t === 'countdown' || b?.display === 'cards'),
+			)) &&
+		o.loadAnswers().catch(() => null);
 	const readers = new WeakMap();
 
 	const classes = () => {
@@ -451,8 +485,17 @@ export function mountForm(o) {
 		small.addEventListener?.('change', resize);
 	}
 
+	/** A form that collects nothing: a message, products, or a quiz. */
+	const asksNothing = !form.channels?.length;
+
 	const engaged = (engagement, step, item = {}) => {
 		if (preview || !decision.decision_id || !access.analytics()) return;
+		// A view counts one click; a products card's always says which product was clicked.
+		if (engagement === 'click') {
+			const counted = state.clicked;
+			state.clicked = true;
+			if (counted && !item.products) return;
+		}
 		client.slotEngaged({
 			decision_id: decision.decision_id,
 			slot: decision.slot,
@@ -511,9 +554,10 @@ export function mountForm(o) {
 	/**
 	 * An image or video for an asset, its box reserved by its size and cropped to its focal point.
 	 * `first`: on the form's first step, fetched at once and ahead of the page's other images; a
-	 * later step's waits until it shows (and was warmed while the step before it showed).
+	 * later step's waits until it shows (and was warmed while the step before it showed). It
+	 * shows across `part` of the card, and `small` of a phone (`across`).
 	 */
-	function visual(m, className, first, part) {
+	function visual(m, className, first, part, small) {
 		const src = assetHref(m.asset);
 		if (!src) return null;
 		const alt = typeof m.alt === 'string' ? m.alt : '';
@@ -551,7 +595,7 @@ export function mountForm(o) {
 			const set = srcset(m, src, num(m.width, 1, 8192));
 			// sizes before srcset before src, so the browser fetches one file, the right one.
 			if (set) {
-				node.sizes = across(state.mode, state.size, part);
+				node.sizes = across(state.mode, state.size, part, small);
 				node.srcset = set;
 			}
 			node.src = src;
@@ -610,8 +654,8 @@ export function mountForm(o) {
 
 	/**
 	 * A question as its type says: a choice as buttons, a list of radio buttons or checkboxes, or a
-	 * dropdown (the block's `display`; a multiple choice is never a dropdown); a date or a number as
-	 * its fields (./answers.js).
+	 * dropdown (the block's `display`; a multiple choice is never a dropdown), or a single choice as
+	 * picture cards (./answers.js); a date or a number as its fields (./answers.js).
 	 */
 	function question(block) {
 		const q = form.questions.find((x) => x.key === block.question);
@@ -620,11 +664,23 @@ export function mountForm(o) {
 		set.dataset.question = q.key;
 		set.append(el('legend', '', q.label ?? ''));
 		const chosen = state.answers[q.key] ?? [];
-		if (typed(q)) {
+		// Picture cards are a single choice's: any other question shows as it would without them.
+		const cards = block.display === 'cards' && q.type === 'one';
+		if (typed(q) || cards) {
 			// Without its chunk the question says so, and the form goes on without its answer: every
 			// question is optional.
 			fields.then((m) => {
 				if (!m) return set.append(el('p', 'sm', COPY.unavailable));
+				if (cards)
+					return m.answerCards(
+						set,
+						q,
+						block,
+						el,
+						chosen,
+						(p) => visual(p, 'qi', false, cardPart(state.size, q), '50vw'),
+						root,
+					);
 				m.answerFields(set, q, el, chosen[0], lang);
 				readers.set(set, () => m.answerOf(set, q, undefined, lang));
 			});
@@ -649,12 +705,14 @@ export function mountForm(o) {
 		}
 		if (display !== 'buttons') set.className = 'ls';
 		for (const x of options) {
+			const chip = el('label', display === 'buttons' ? 'ch' : 'c');
+			// The same input as rules.js choiceInput builds, written out: importing it costs the
+			// renderer bytes it does not have.
 			const input = el('input');
-			input.value = x.value;
-			input.checked = chosen.includes(x.value);
 			input.type = many ? 'checkbox' : 'radio';
 			input.name = `q_${q.key}`;
-			const chip = el('label', display === 'buttons' ? 'ch' : 'c');
+			input.value = x.value;
+			input.checked = chosen.includes(x.value);
 			chip.append(input, el('span', '', x.label ?? x.value));
 			set.append(chip);
 		}
@@ -699,21 +757,23 @@ export function mountForm(o) {
 		}
 	}
 
+	/**
+	 * A countdown's place: the answers chunk draws its label and timer into it and ticks it
+	 * (./countdown.js), showing it, and hides it again once a deadline passes. Hidden until then, so
+	 * a chunk that never comes leaves nothing behind, not an empty timer.
+	 */
 	function countdown(block) {
 		// A claim with no code has nothing to hurry for.
 		if (state.claim && !state.claim.code) return null;
-		const node = el('p', 'tm');
-		node.setAttribute('role', 'timer');
-		const ends = Date.now() + Math.max(0, Number(block.minutes) || 0) * 60_000;
-		const tick = () => {
-			const left = Math.max(0, Math.round((ends - Date.now()) / 1000));
-			node.textContent = `${String(Math.floor(left / 60)).padStart(2, '0')}:${String(left % 60).padStart(2, '0')}`;
-			if (left === 0) clearInterval(id);
-		};
-		const id = setInterval(tick, 1000);
-		state.timers.push(id);
-		tick();
-		return node;
+		const box = el('div', 'cd');
+		box.hidden = true;
+		fields.then(
+			(m) =>
+				m &&
+				box.isConnected &&
+				state.timers.push(m.countdown(box, block, preview, el)),
+		);
+		return box;
 	}
 
 	/** A link that opens `href`; a preview's goes nowhere. */
@@ -721,8 +781,9 @@ export function mountForm(o) {
 		node.href = href;
 		node.rel = 'noopener';
 		node.addEventListener('click', (e) => {
-			if (preview) e.preventDefault();
-			else engaged('click');
+			if (preview) return e.preventDefault();
+			engaged('click');
+			leaving();
 		});
 		return node;
 	}
@@ -1137,54 +1198,76 @@ export function mountForm(o) {
 					(i) => i.value,
 				),
 			].filter(Boolean);
-			if (values.length) state.answers[key] = values;
-			else delete state.answers[key];
+			if (values.length) {
+				state.answers[key] = values;
+				state.answeredOn[key] = state.step.id;
+			} else delete state.answers[key];
 		}
 	}
 
-	/** After the sign-up, an answer the gateway did not carry is the page's to report. */
+	/**
+	 * An answer the gateway did not carry is the page's to report: after the sign-up, or, on a form
+	 * that collects nothing (a quiz), as each step's answers are given.
+	 */
 	function stated() {
-		const answers = [];
-		for (const [question, values] of Object.entries(state.answers)) {
-			const marker = `${question}=${values.join(',')}`;
-			if (state.sent.has(marker)) continue;
-			state.sent.add(marker);
-			answers.push({ question, values });
-		}
-		const step = state.step.id;
+		const fresh = Object.entries(state.answers)
+			.map(([question, values]) => ({ question, values }))
+			.filter((a) => !state.sent.has(marker(a)));
+		// Each answer goes with the step it was given on (collect records it), maybe an earlier one.
+		const stepOf = ({ question }) => state.answeredOn[question];
 		// After the email step, the gateway relays them to that address's profile and records them.
-		if (state.signedUp && answers.length)
-			return void api.answers({
-				anonymousId: access.anonymousId(),
-				sessionId: access.sessionId() ?? undefined,
-				slot: decision.slot,
-				arm: decision.arm ?? undefined,
-				decision_id: decision.decision_id ?? undefined,
-				step,
-				...state.signedUp,
-				answers,
-				context: pageContext(),
-			});
-		if (access.analytics())
-			for (const answer of answers)
-				client.preferencesStated({
-					...answer,
-					source: 'onsite',
+		if (state.signedUp) {
+			for (const step of new Set(fresh.map(stepOf))) {
+				const answers = fresh.filter((a) => stepOf(a) === step);
+				for (const answer of answers) state.sent.add(marker(answer));
+				api.answers({
+					anonymousId: access.anonymousId(),
+					sessionId: access.sessionId() ?? undefined,
 					slot: decision.slot,
-					arm: decision.arm ?? null,
-					decision_id: decision.decision_id ?? null,
+					arm: decision.arm ?? undefined,
+					decision_id: decision.decision_id ?? undefined,
 					step,
+					...state.signedUp,
+					answers,
+					context: pageContext(),
 				});
+			}
+			return;
+		}
+		// Kept back without analytics consent, so a later grant still reports it.
+		if (!access.analytics()) return;
+		for (const answer of fresh) {
+			state.sent.add(marker(answer));
+			client.preferencesStated({
+				...answer,
+				source: 'onsite',
+				slot: decision.slot,
+				arm: decision.arm ?? null,
+				decision_id: decision.decision_id ?? null,
+				step: stepOf(answer),
+			});
+		}
 	}
 
+	const marker = ({ question, values }) => `${question}=${values.join(',')}`;
+
+	/** A quiz left by a link or closed keeps the answers given so far, as on moving on. */
+	const leaving = () => {
+		if (!asksNothing) return;
+		collect();
+		stated();
+	};
+
 	const pageContext = () => ({
 		page: { url: access.pageUrl() },
 		locale: access.locale() ?? undefined,
 		consent: access.consent(),
 	});
 
+	// Answers are reported as the form moves on: after a receipt, or on a form that collects nothing.
+	// A sign-up form's answers before the sign-up travel with it.
 	const advance = (explicit) => {
-		if (state.receipt && !preview) stated();
+		if (!preview && (state.receipt || asksNothing)) stated();
 		show(nextStep(state.step, state.answers, explicit));
 	};
 
@@ -1428,14 +1511,19 @@ export function mountForm(o) {
 		// A preview only moves between steps: nothing is checked, sent or claimed.
 		if (preview) return advance(block.next);
 		if (wrong) return say(wrong.error, wrong.input);
+		// A quiz learns from clicks: moving on with an answer is a click.
+		if (
+			asksNothing &&
+			state.step.blocks.some((b) => state.answers[b?.question])
+		)
+			engaged('click');
 		if (block.action === 'apply') {
 			o.emit?.('apply', {
 				coupon: state.claim?.code ? { code: state.claim.code } : null,
 			});
 			engaged('click');
-			return nextStep(state.step, state.answers, block.next)
-				? advance(block.next)
-				: close('done');
+			// With no step after it, the form closes, done.
+			return advance(block.next);
 		}
 		if (block.action === 'submit') return submit(block);
 		if (block.action === 'spin') return spin(block);
@@ -1451,7 +1539,8 @@ export function mountForm(o) {
 		act(first ?? { action: 'next' });
 	}
 
-	function teardown() {
+	/** Off the screen, with its listeners; `now` without the exit animation. */
+	function teardown(now = false) {
 		state.closed = true;
 		for (const t of state.timers.splice(0)) stopTimer(t);
 		document.removeEventListener('visibilitychange', visibility);
@@ -1464,7 +1553,7 @@ export function mountForm(o) {
 			}
 			host.remove();
 		};
-		if (!dialog || reducedMotion()) return remove();
+		if (now || !dialog || reducedMotion()) return remove();
 		shell.classList.add('out');
 		setTimeout(remove, EXIT_MS);
 	}
@@ -1472,6 +1561,7 @@ export function mountForm(o) {
 	function close(reason) {
 		// A preview stays on screen: closing is the shopper's, not the trader's.
 		if (state.closed || preview) return;
+		leaving();
 		if (!state.submitted && reason !== 'done') engaged('dismiss');
 		counters.closed(form.slot);
 		counters.tab?.(form.slot, false);
@@ -1553,13 +1643,19 @@ export function mountForm(o) {
 		document.addEventListener('pointerup', up);
 	});
 
-	show(
-		preview?.step && creative.steps.some((s) => s.id === preview.step)
-			? preview.step
-			: creative.steps[0].id,
-	);
-	(o.container ?? document.body).append(host);
-	present();
+	// A form that fails to open leaves nothing behind: no host, no listener on the document.
+	try {
+		show(
+			preview?.step && creative.steps.some((s) => s.id === preview.step)
+				? preview.step
+				: creative.steps[0].id,
+		);
+		(o.container ?? document.body).append(host);
+		present();
+	} catch (err) {
+		teardown(true);
+		throw err;
+	}
 	return {
 		close,
 		root,

package/src/onsite/rules.js

@@ -35,7 +35,7 @@ export const OVERLAY = (format) => format !== 'inline';
 export const INTERRUPTS = (format) =>
 	format === 'popup' || format === 'sheet' || format === 'fullscreen';
 
-const isObject = (v) =>
+export const isObject = (v) =>
 	v !== null && typeof v === 'object' && !Array.isArray(v);
 const strings = (v) =>
 	Array.isArray(v) ? v.filter((s) => typeof s === 'string') : [];
@@ -192,17 +192,20 @@ export function blockers(form, env) {
 export const byPriority = (a, b) => b.priority - a.priority;
 
 /**
- * The step after `step`: the button's own `next`, else the first `answers` rule the answers meet
- * (`"question=value"`), else the step's default. Null when there is none: the form is done.
+ * The step after `step`: the button's own `next`, else the first `answers` rule (`"question=value"`)
+ * an answer meets, else the step's default. Null when there is none: the form is done. Rules are
+ * tried in the order of the step's questions, then of each question's options (the order its
+ * answers are read in), never by the rules' own order: stored JSON does not keep an object's keys
+ * in order.
  */
 export function nextStep(step, answers, explicit) {
 	if (typeof explicit === 'string' && explicit) return explicit;
 	const rules = isObject(step?.next?.answers) ? step.next.answers : {};
-	for (const [rule, target] of Object.entries(rules)) {
-		const split = rule.indexOf('=');
-		const values = answers[rule.slice(0, split)];
-		if (split > 0 && values?.includes(rule.slice(split + 1))) return target;
-	}
+	for (const b of step?.blocks ?? [])
+		for (const value of answers[b?.question] ?? []) {
+			const to = rules[`${b.question}=${value}`];
+			if (typeof to === 'string') return to;
+		}
 	return typeof step?.next?.default === 'string' ? step.next.default : null;
 }
 
@@ -258,6 +261,30 @@ export function select(make, label, blank, pairs, chosen) {
 	return s;
 }
 
+/** A choice's options the renderer can show: each with a string value. */
+export const optionsOf = (q) =>
+	(q.options ?? []).filter((x) => isObject(x) && typeof x.value === 'string');
+
+/** One option of choice `q` as its input, named `q_<key>` and checked when it was chosen. */
+export function choiceInput(make, q, x, chosen, type) {
+	const input = make('input');
+	input.type = type;
+	input.name = `q_${q.key}`;
+	input.value = x.value;
+	input.checked = chosen.includes(x.value);
+	return input;
+}
+
+/**
+ * How many of choice `q`'s picture cards a row holds where the form is wide (answers.js `.qc`), by
+ * its options: all of them up to four, else three or four so the last row is fullest. The renderer
+ * sizes their pictures by it too.
+ */
+export const cardColumns = (q) => {
+	const n = q.options.length;
+	return n <= 4 ? n : n % 4 ? 3 : 4;
+};
+
 /** Where a wheel must come to rest, in degrees clockwise, for prize `index` to sit under the top pointer. */
 export function restAngle(index, segments, turns = 5) {
 	const size = 360 / segments;