@thg-agentic/hyper-personalisation-web 3.22.0 → 3.23.0

package/src/onsite/render.js

@@ -0,0 +1,1234 @@
+/**
+ * One form on screen: a shadow root on a host element, the creative's steps as DOM (never
+ * innerHTML), and the capture, claim and engagement calls its buttons make.
+ *
+ * Popup and fullscreen are a native `<dialog>` opened with showModal(), so the platform traps focus,
+ * makes the page inert, closes on Esc and restores focus; the dialog is a full-viewport layer
+ * holding its own scrim and the card. Sheet, bar and a teaser's tab are non-modal dialogs that never
+ * trap focus; a teaser's later steps open as a popup. Inline renders into the page's own element.
+ * A preview (./preview.js) renders the same DOM inside the console's box, inert but for its steps.
+ */
+
+import { solve } from './pow.js';
+import { assetHref, httpsHref, richText } from './rich-text.js';
+import { CALLING_CODES, e164, isEmail, nextStep, select } from './rules.js';
+import { CSS, FONTS } from './styles.js';
+
+const HEX = /^#(?:[0-9a-f]{3}){1,2}$/i;
+const MODAL = ['popup', 'fullscreen'];
+const OK = ['ok', 'verify', 'already'];
+const TEMPLATES = ['stack', 'split', 'overlay', 'image-only'];
+const POSITIONS = {
+	bar: ['bottom', 'top'],
+	sheet: ['bottom-right', 'bottom-left', 'bottom'],
+	teaser: ['bottom-left', 'bottom-right', 'left', 'right'],
+};
+const TYPE_SIZES = ['xs', 'sm', 'md', 'lg', 'xl', 'display'];
+const SPACERS = { xs: 4, sm: 8, md: 16, lg: 28, xl: 44 };
+/** The card's widest, by its size (styles.js `.w`, `.z-*`), for an image's `sizes`. */
+const CARD_PX = { sm: 380, md: 480, lg: 880 };
+const ALIGNS = ['left', 'center', 'right'];
+const VARIANTS = { secondary: ' b2', link: ' no' };
+const EXIT_MS = 220;
+/** Waits before a claim's retries, for an API that answers 503 while it warms up. */
+const CLAIM_RETRY_MS = [500, 1500];
+/** How long a wheel's prize is shown where it stopped before the next step: long enough to read. */
+const WON_MS = 1800;
+const COPY = {
+	email: 'Enter a valid email address.',
+	phone: 'Enter a valid mobile number.',
+	intl: 'Enter a valid mobile number, starting with + and its country code.',
+	consent: 'Tick the box to sign up.',
+	failed: 'Something went wrong. Please try again.',
+	busy: 'Too many tries. Please wait a moment and try again.',
+	spin: 'Sign up first to spin.',
+	held: 'Your code',
+	code: 'We’ll email your code to you.',
+	claimed: 'This email address has already claimed its code.',
+	copied: 'Copied',
+	thanks: 'Thanks, you’re signed up',
+	unavailable: 'Not available right now.',
+	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;
+/** A date or a number: its fields are ./answers.js's. */
+const typed = (q) => q.type === 'date' || q.type === 'number';
+const reducedMotion = () =>
+	globalThis.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches === true;
+
+/** A step's layout, normalised: the earlier `layout.image` reads as a split or stack's media. */
+export function layoutOf(step) {
+	const l = isObject(step.layout) ? step.layout : {};
+	let media = isObject(l.media) ? l.media : null;
+	let template = oneOf(TEMPLATES, l.template, 'stack');
+	let side = media?.side === 'right' ? 'right' : 'left';
+	if (!media && isObject(l.image) && l.image.side !== 'none') {
+		media = l.image;
+		if (l.image.side !== 'top') {
+			template = 'split';
+			side = l.image.side === 'right' ? 'right' : 'left';
+		}
+	}
+	if (!media || !assetHref(media.asset)) {
+		media = null;
+		template = 'stack';
+	}
+	return {
+		template,
+		media,
+		side,
+		scrim: num(l.scrim, 0, 0.9) ?? 0.45,
+		padding: oneOf(['none', 'sm', 'md', 'lg'], l.padding, 'md'),
+	};
+}
+
+let ids = 0;
+const uid = (kind) => `hp-${kind}-${++ids}`;
+
+function el(tag, className, text) {
+	const node = document.createElement(tag);
+	if (className) node.className = className;
+	if (text !== undefined) node.append(richText(text));
+	return node;
+}
+
+const rgb = (hex) => {
+	const h =
+		hex.length === 4
+			? [...hex.slice(1)].map((c) => c + c).join('')
+			: hex.slice(1);
+	return [0, 2, 4].map((i) => Number.parseInt(h.slice(i, i + 2), 16));
+};
+
+/** WCAG 2.x relative luminance of a hex colour. */
+const luminance = (hex) => {
+	const [r, g, b] = rgb(hex).map((c) => {
+		const s = c / 255;
+		return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+	});
+	return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+
+/**
+ * The text colour on `hex`: white when it reaches `min` (WCAG: 4.5 for text, 3 for large text,
+ * which a button's label is), as brands almost always set it; otherwise `#111` or `#fff`,
+ * whichever contrasts more.
+ */
+export const onColour = (hex, min = 4.5) => {
+	const l = luminance(hex) + 0.05;
+	const white = 1.05 / l;
+	if (white >= min) return '#fff';
+	return l / (luminance('#111') + 0.05) > white ? '#111' : '#fff';
+};
+
+function theme(host, t) {
+	const set = (name, value) => value && host.style.setProperty(name, value);
+	const hex = (v) => (HEX.test(v ?? '') ? v : null);
+	set('--hp-accent', hex(t.accent));
+	set('--hp-bg', hex(t.background));
+	set('--hp-text', hex(t.text));
+	const radius = num(t.radius, 0, 48);
+	if (radius !== null) set('--hp-radius', `${radius}px`);
+	// The site's own font (its @font-face rules reach the shadow root), a named system stack, or
+	// for anything else, a console font asset included, the default stack.
+	set(
+		'--hp-font',
+		t.font === 'site'
+			? host.ownerDocument.defaultView.getComputedStyle(
+					host.parentElement ?? host.ownerDocument.body,
+				).fontFamily
+			: Object.hasOwn(FONTS, t.font)
+				? FONTS[t.font]
+				: null,
+	);
+	if (hex(t.accent)) {
+		set('--hp-on-accent', onColour(t.accent, 3));
+		set('--hp-on-accent-text', onColour(t.accent));
+	}
+	// On a dark form a field stays light, so it never reads as a second button.
+	if (hex(t.background) && luminance(t.background) < 0.18) {
+		set('--hp-field', '#fff');
+		set('--hp-field-text', '#111');
+	}
+	// The page behind is dimmed in the brand's own ink, the darker of its text and background,
+	// unless the creative names a colour.
+	const overlay = isObject(t.overlay) ? t.overlay : {};
+	const ink = [hex(t.text), hex(t.background)]
+		.filter(Boolean)
+		.sort((a, b) => luminance(a) - luminance(b))[0];
+	const [r, g, b] = rgb(hex(overlay.colour) ?? ink ?? '#0b0b0f');
+	set('--hp-ov', `rgb(${r} ${g} ${b} / ${num(overlay.opacity, 0, 1) ?? 0.6})`);
+}
+
+function styles(root) {
+	try {
+		const sheet = new CSSStyleSheet();
+		sheet.replaceSync(CSS);
+		root.adoptedStyleSheets = [sheet];
+	} catch {
+		const style = document.createElement('style');
+		style.textContent = CSS;
+		root.append(style);
+	}
+}
+
+/**
+ * Render `creative` for `form` and run it until it closes.
+ *
+ * @param {object} o
+ * @param {object} o.form The form from the settings (rules.readForm).
+ * @param {object} o.creative readCreative(decision.payload).
+ * @param {{ slot: string, arm?: string|null, decision_id?: string|null }} o.decision
+ * @param {object} o.access The client's onsite accessor.
+ * @param {object} o.client The SDK client, for its events.
+ * @param {ReturnType<import('./api.js').createApi>} o.api
+ * @param {ReturnType<import('./counters.js').createCounters>} o.counters
+ * @param {() => Promise<{ mountWheel: Function }>} o.loadWheel
+ * @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 {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.
+ * @param {string|null} [o.coupon] A code the form starts with: an unused one to remind of.
+ * @param {() => number|null} [o.basket] The basket's value, for a progress block.
+ * @param {{ device: 'desktop'|'mobile', step?: string }} [o.preview] Render inside `container`,
+ *   inert but for moving between steps: no network, no events, no counters.
+ */
+export function mountForm(o) {
+	const { form, creative, decision, access, client, api, counters } = o;
+	const preview = o.preview ?? null;
+	// A step's first field is what it submits; texts are agreed to in words that name texts. A step
+	// with no field shows the email words, or the SMS ones on a form that collects only texts.
+	const consentFor = (step) => {
+		const field = step.blocks.find((b) => b?.t === 'email' || b?.t === 'phone');
+		return field?.t === 'phone' || (!field && !form.consent_text)
+			? form.sms_consent_text
+			: form.consent_text;
+	};
+	const format =
+		form.format === 'inline'
+			? 'inline'
+			: creative.format && creative.format !== 'inline'
+				? creative.format
+				: form.format;
+	const t = creative.theme;
+	const position = oneOf(
+		POSITIONS[format] ?? [],
+		t.position,
+		POSITIONS[format]?.[0],
+	);
+	const host = document.createElement('hp-onsite');
+	if (preview) host.setAttribute('preview', '');
+	theme(host, t);
+	const root = host.attachShadow({ mode: 'open' });
+	styles(root);
+
+	const dialog = format !== 'inline' && !preview;
+	const shell = el(dialog ? 'dialog' : format === 'inline' ? 'section' : 'div');
+	const scrim = el('div', 'ov');
+	const wrap = el('div', 'w');
+	const media = el('div', 'm');
+	if (preview) media.dataset.hpMedia = '';
+	/** The step's blocks: a new form for each step, so the browser reads it as new content, not moved. */
+	const blank = () => {
+		const f = el('form', 'f');
+		f.noValidate = true;
+		f.addEventListener('submit', submitted);
+		// A message about a field goes once the shopper changes it.
+		f.addEventListener('input', () => {
+			if (error.textContent && body.getAttribute('aria-busy') !== 'true')
+				say(null);
+		});
+		return f;
+	};
+	let body = blank();
+	const error = el('p', 'e');
+	error.id = uid('err');
+	error.setAttribute('aria-live', 'assertive');
+	const handle = el('div', 'hd');
+	handle.setAttribute('aria-hidden', 'true');
+	wrap.append(handle, media, body);
+	shell.append(scrim, wrap);
+	if (format !== 'inline') {
+		const x = el('button', 'x');
+		x.type = 'button';
+		x.setAttribute('aria-label', 'Close');
+		x.addEventListener('click', () => close('close'));
+		// After the form in the DOM, so the platform's first focus lands on the form itself.
+		wrap.append(x);
+		scrim.addEventListener('click', () => close('close'));
+	}
+	root.append(shell);
+
+	const state = {
+		step: null,
+		mode: format,
+		size: 'md',
+		modal: false,
+		mobile: preview?.device === 'mobile',
+		answers: {},
+		sent: new Set(),
+		receipt: null,
+		claim: o.coupon
+			? { code: o.coupon }
+			: preview
+				? { code: 'WELCOME15' }
+				: null,
+		claiming: null,
+		owed: false,
+		submitted: false,
+		pow: null,
+		wheel: null,
+		timers: [],
+		codes: [],
+		videos: [],
+		closed: false,
+	};
+
+	// 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.
+	const fields =
+		form.questions.some(typed) && o.loadAnswers().catch(() => null);
+	const readers = new WeakMap();
+
+	const classes = () => {
+		const button = isObject(t.button) ? t.button : {};
+		shell.className = `s ${state.mode}${position ? ` p-${position}` : ''} b-${oneOf(['pill', 'rounded', 'square'], button.shape, 'rounded')}${state.mobile ? ' mob' : ''}${preview ? ' pv' : ''}${button.style === 'outline' ? ' bo' : ''}${t.caps === true ? ' uc' : ''}`;
+	};
+
+	// Small screens by the viewport, a preview by its device.
+	const small = preview ? null : globalThis.matchMedia?.('(max-width: 639px)');
+	const resize = () => {
+		state.mobile = small?.matches === true;
+		// A size kept from an earlier step is the old screen's.
+		wrap.classList.remove('lk');
+		wrap.style.removeProperty('min-width');
+		wrap.style.removeProperty('min-height');
+		classes();
+	};
+	if (small) {
+		state.mobile = small.matches === true;
+		small.addEventListener?.('change', resize);
+	}
+
+	const engaged = (engagement, step) => {
+		if (preview || !decision.decision_id || !access.analytics()) return;
+		client.slotEngaged({
+			decision_id: decision.decision_id,
+			slot: decision.slot,
+			arm: decision.arm ?? null,
+			engagement,
+			step: step ?? state.step?.id ?? null,
+		});
+	};
+
+	/** A message under the field it is about (else after the step's blocks); none clears it. */
+	const say = (message, input) => {
+		error.className = 'e';
+		error.textContent = message ?? '';
+		for (const node of body.querySelectorAll('[aria-invalid]'))
+			node.removeAttribute('aria-invalid');
+		const at = input?.closest('label,fieldset');
+		if (at && body.contains(at)) at.after(error);
+		else body.append(error);
+		if (input) {
+			input.setAttribute('aria-invalid', 'true');
+			input.setAttribute('aria-describedby', error.id);
+			input.focus();
+			input.scrollIntoView?.({ block: 'nearest' });
+		}
+	};
+
+	const busy = (on) => {
+		body.setAttribute('aria-busy', String(on));
+		for (const b of body.querySelectorAll('button')) b.disabled = on;
+	};
+
+	/** The proof of work, started on the first focus of a contact field so it overlaps typing. */
+	const proof = () => {
+		if (preview) return Promise.resolve(null);
+		state.pow ??= api
+			.challenge()
+			.then((res) => (res.status === 200 ? solve(res.body) : null))
+			.catch(() => null);
+		return state.pow;
+	};
+
+	/** Videos play only without reduced motion, and pause while the page is hidden. */
+	const visibility = () => {
+		for (const v of state.videos) {
+			try {
+				if (document.hidden || reducedMotion()) v.pause();
+				else v.play()?.catch?.(() => {});
+			} catch {
+				/* a media element without playback */
+			}
+		}
+	};
+	document.addEventListener('visibilitychange', visibility);
+
+	/**
+	 * 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.
+	 */
+	const across = (part = 1) => {
+		if (state.mode === 'fullscreen' || state.size === 'full') return '100vw';
+		const px =
+			state.mode === 'teaser'
+				? 220
+				: state.mode === 'sheet'
+					? 400
+					: (CARD_PX[state.size] ?? CARD_PX.md);
+		return `(max-width: 639px) 100vw, ${Math.round(px * part)}px`;
+	};
+
+	/**
+	 * The smaller copies the upload made of a WebP image (`widths`, each at `-<w>w.webp`) and the
+	 * image itself at its width, as a srcset; null when there are none to offer.
+	 */
+	const srcset = (m, src, w) => {
+		if (!w || !Array.isArray(m.widths) || !src.endsWith('.webp')) return null;
+		const smaller = m.widths.filter(
+			(x) => Number.isInteger(x) && x > 0 && x < w,
+		);
+		if (smaller.length === 0) return null;
+		return [
+			...smaller.map((x) => `${src.slice(0, -5)}-${x}w.webp ${x}w`),
+			`${src} ${w}w`,
+		].join(',');
+	};
+
+	/** An image or video for an asset, its box reserved by its size and cropped to its focal point. */
+	function visual(m, className, eager, part) {
+		const src = assetHref(m.asset);
+		if (!src) return null;
+		const alt = typeof m.alt === 'string' ? m.alt : '';
+		let node;
+		if (m.kind === 'video' || m.t === 'video') {
+			node = el('video', className);
+			// The properties reflect to the attributes iOS needs before it plays inline.
+			node.muted = node.defaultMuted = node.loop = node.playsInline = true;
+			const poster = assetHref(m.poster);
+			if (poster) node.poster = poster;
+			if (alt) node.setAttribute('aria-label', alt);
+			else node.setAttribute('aria-hidden', 'true');
+			node.autoplay = !reducedMotion() && !preview;
+			node.src = src;
+			state.videos.push(node);
+		} else {
+			node = el('img', className);
+			node.alt = alt;
+			node.decoding = 'async';
+			node.loading = eager ? 'eager' : 'lazy';
+			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(part);
+				node.srcset = set;
+			}
+			node.src = src;
+		}
+		const w = num(m.width, 1, 8192);
+		const h = num(m.height, 1, 8192);
+		if (w && h) {
+			node.width = w;
+			node.height = h;
+		}
+		if (isObject(m.focal))
+			node.style.objectPosition = `${num(m.focal.x, 0, 100) ?? 50}% ${num(m.focal.y, 0, 100) ?? 50}%`;
+		return node;
+	}
+
+	function field(block, type) {
+		const label = el('label', 'l');
+		label.append(
+			el(
+				'span',
+				'lt',
+				block.label ?? (type === 'email' ? 'Email' : 'Mobile number'),
+			),
+		);
+		const input = el('input', 'i');
+		input.type = type;
+		input.name = type === 'email' ? 'email' : 'phone';
+		input.autocomplete = input.inputMode = type;
+		input.required = true;
+		if (typeof block.placeholder === 'string')
+			input.placeholder = block.placeholder;
+		input.setAttribute('aria-describedby', error.id);
+		input.addEventListener('focus', proof, { once: true });
+		if (type !== 'tel') {
+			label.append(input);
+			return label;
+		}
+		// A country code picker, as Klaviyo's forms have: the block's country, else the region of
+		// the form's language, else none (a number then starts with +). A typed + or 00 wins over it.
+		input.id = `${error.id}-p`;
+		label.htmlFor = input.id;
+		const pick = select(
+			el,
+			'Country code',
+			'+',
+			Object.entries(CALLING_CODES).map(([c, code]) => [c, `${c} +${code}`]),
+			(block.country || /-(\w\w)$/.exec(lang)?.[1] || '').toUpperCase(),
+		);
+		pick.classList.add('cc');
+		pick.name = 'hp_cc';
+		const row = el('span', 'ph');
+		row.append(pick, input);
+		label.append(row);
+		return label;
+	}
+
+	/**
+	 * 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).
+	 */
+	function question(block) {
+		const q = form.questions.find((x) => x.key === block.question);
+		if (!q || (!typed(q) && !Array.isArray(q.options))) return null;
+		const set = el('fieldset');
+		set.dataset.question = q.key;
+		set.append(el('legend', '', q.label ?? ''));
+		const chosen = state.answers[q.key] ?? [];
+		if (typed(q)) {
+			// 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));
+				m.answerFields(set, q, el, chosen[0], lang);
+				readers.set(set, () => m.answerOf(set, q, undefined, lang));
+			});
+			return set;
+		}
+		const many = q.type === 'many';
+		const display = oneOf(['list', 'dropdown'], block.display, 'buttons');
+		const options = q.options.filter(
+			(x) => isObject(x) && typeof x.value === 'string',
+		);
+		if (display === 'dropdown' && !many) {
+			set.append(
+				select(
+					el,
+					q.label ?? q.key,
+					'—',
+					options.map((x) => [x.value, x.label ?? x.value]),
+					chosen[0],
+				),
+			);
+			return set;
+		}
+		if (display !== 'buttons') set.className = 'ls';
+		for (const x of options) {
+			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');
+			chip.append(input, el('span', '', x.label ?? x.value));
+			set.append(chip);
+		}
+		return set;
+	}
+
+	function fillCodes() {
+		for (const box of state.codes) {
+			box.replaceChildren();
+			if (!state.claim) continue;
+			if (!state.claim.code) {
+				box.append(el('p', '', state.claim.held ? COPY.claimed : COPY.code));
+				continue;
+			}
+			const code = el('output');
+			code.textContent = state.claim.code;
+			const copy = el('button', 'btn cp');
+			copy.type = 'button';
+			copy.textContent = 'Copy code';
+			copy.addEventListener('click', () => {
+				navigator.clipboard
+					?.writeText(state.claim.code)
+					.then(() => {
+						copy.textContent = COPY.copied;
+					})
+					.catch(() => {});
+			});
+			box.append(code, copy);
+		}
+	}
+
+	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;
+	}
+
+	/** A link that opens `href`; a preview's goes nowhere. */
+	function link(node, href) {
+		node.href = href;
+		node.rel = 'noopener';
+		node.addEventListener('click', (e) => {
+			if (preview) e.preventDefault();
+			else engaged('click');
+		});
+		return node;
+	}
+
+	function button(block) {
+		const label = block.label ?? 'Continue';
+		if (block.action === 'link') {
+			const href = httpsHref(block.href);
+			return href
+				? link(el('a', `btn${VARIANTS[block.variant] ?? ''}`, label), href)
+				: null;
+		}
+		const b = el('button', `btn${VARIANTS[block.variant] ?? ''}`, label);
+		b.type = block.action === 'submit' ? 'submit' : 'button';
+		if (b.type === 'button') b.addEventListener('click', () => act(block));
+		else b.dataset.submit = '';
+		return b;
+	}
+
+	/** Type size and alignment classes for a heading or text. */
+	const typeset = (node, block, size) => {
+		node.classList.add(`x-${oneOf(TYPE_SIZES, block.size, size)}`);
+		if (ALIGNS.includes(block.align)) node.classList.add(`a-${block.align}`);
+		return node;
+	};
+
+	/** An image or video block: its box, fit, radius and tallest height. */
+	function picture(block) {
+		const node = visual(block, 'bi', false);
+		if (!node) return null;
+		node.style.objectFit = block.fit === 'contain' ? 'contain' : 'cover';
+		const radius = num(block.radius, 0, 48);
+		if (radius !== null) node.style.borderRadius = `${radius}px`;
+		const tallest = num(block.max_height, 40, 800);
+		if (tallest !== null) node.style.maxHeight = `${tallest}px`;
+		if (!node.width && block.fit !== 'contain')
+			node.style.aspectRatio = '16 / 9';
+		if (block.t === 'video' || !httpsHref(block.href)) return node;
+		const a = link(el('a', 'bl'), httpsHref(block.href));
+		a.append(node);
+		return a;
+	}
+
+	/** Progress to a basket threshold, from the basket value the SDK keeps; re-read while shown. */
+	function progress(block) {
+		const threshold = num(block.threshold, 0.01, 1e7);
+		if (!threshold) return null;
+		const box = el('div', 'pg');
+		const label = el('p');
+		const track = el('div', 'tr');
+		const fill = el('i');
+		track.append(fill);
+		track.setAttribute('role', 'progressbar');
+		track.setAttribute('aria-valuemin', '0');
+		track.setAttribute('aria-valuemax', String(threshold));
+		box.append(label, track);
+		let money = (n) => n.toFixed(2);
+		try {
+			const format = new Intl.NumberFormat(lang || undefined, {
+				style: 'currency',
+				currency: block.currency,
+			});
+			money = (n) => format.format(n);
+		} catch {
+			/* an unknown currency: the bare amount */
+		}
+		const paint = () => {
+			const value = Math.max(0, Number(o.basket?.()) || 0);
+			const left = threshold - value;
+			label.textContent =
+				left > 0
+					? String(block.text ?? '').replace('{amount}', money(left))
+					: (block.done ?? '');
+			fill.style.transform = `scaleX(${Math.min(1, value / threshold)})`;
+			track.setAttribute('aria-valuenow', String(Math.min(value, threshold)));
+			label.id ||= uid('pg');
+			track.setAttribute('aria-labelledby', label.id);
+		};
+		paint();
+		state.timers.push(setInterval(paint, 2000));
+		return box;
+	}
+
+	const BLOCKS = {
+		heading(block) {
+			const h = typeset(el('h2', '', block.text), block, 'xl');
+			h.id = uid('h');
+			h.tabIndex = -1;
+			if (!shell.hasAttribute('aria-labelledby')) {
+				shell.setAttribute('aria-labelledby', h.id);
+				// The heading takes a modal's first focus: read aloud, and no keyboard pops up. A form
+				// that does not trap focus never takes it from the page, nor scrolls it.
+				if (
+					state.step === creative.steps[0] &&
+					MODAL.includes(state.mode) &&
+					!preview
+				)
+					h.autofocus = true;
+			}
+			return h;
+		},
+		text: (block) => typeset(el('p', '', block.text), block, 'md'),
+		email: (block) => field(block, 'email'),
+		phone: (block) => field(block, 'tel'),
+		consent(block) {
+			const text = consentFor(state.step)?.text;
+			if (typeof text !== 'string') return null;
+			if (block.required !== true) return el('p', 'sm', text);
+			const label = el('label', 'c');
+			const box = el('input');
+			box.type = 'checkbox';
+			box.name = 'hp_consent';
+			box.required = true;
+			box.setAttribute('aria-describedby', error.id);
+			label.append(box, el('span', '', text));
+			return label;
+		},
+		question,
+		wheel() {
+			const box = el('div', 'wh');
+			o.loadWheel()
+				.then((m) => {
+					if (!state.closed) state.wheel = m.mountWheel(box, form.prizes);
+				})
+				.catch(() => {});
+			return box;
+		},
+		code() {
+			const box = el('div', 'k');
+			box.setAttribute('aria-live', 'polite');
+			state.codes.push(box);
+			return box;
+		},
+		button,
+		decline(block) {
+			const b = el('button', 'btn no', block.label ?? 'No thanks');
+			b.type = 'button';
+			b.addEventListener('click', () => close('decline'));
+			return b;
+		},
+		countdown,
+		progress,
+		image: picture,
+		video: picture,
+		spacer(block) {
+			const node = el('div', 'sp');
+			node.style.height = `${SPACERS[block.size] ?? SPACERS.md}px`;
+			node.setAttribute('aria-hidden', 'true');
+			return node;
+		},
+		divider: () => el('hr'),
+	};
+
+	/** The step's media: beside, above or behind the blocks, or the whole step as one button. */
+	function layout(l, tab) {
+		media.replaceChildren();
+		const m = l.media;
+		const sized = oneOf(['sm', 'md', 'lg', 'full'], t.size, null);
+		const fallback =
+			l.template === 'split' || l.template === 'overlay' ? 'lg' : 'md';
+		const bare = !m || (tab && l.template !== 'image-only');
+		state.size = sized ?? fallback;
+		wrap.className = `w t-${l.template} z-${sized ?? fallback}${l.side === 'right' ? ' right' : ''}${t.text_align === 'center' ? ' ta-center' : ''}${bare ? ' nm' : ''}`;
+		wrap.style.setProperty('--sc', String(l.scrim));
+		body.className = `f pd-${l.padding}`;
+		media.hidden = bare;
+		if (media.hidden) return;
+		const node = visual(m, '', true, l.template === 'split' ? 0.46 : 1);
+		if (!node) return;
+		if (node.width)
+			wrap.style.setProperty('--ar', `${node.width} / ${node.height}`);
+		else wrap.style.removeProperty('--ar');
+		if (l.template !== 'image-only') {
+			if (node.tagName === 'IMG' && l.template === 'overlay') node.alt = '';
+			media.append(node);
+			return;
+		}
+		// One button (or link) the image names: a pure-creative gate or teaser.
+		const href = httpsHref(m.href);
+		const target = href ? link(el('a', 'io'), href) : el('button', 'io');
+		if (!href) {
+			target.type = 'button';
+			target.addEventListener('click', () => act({ action: 'next' }));
+		}
+		target.append(node);
+		media.append(target);
+	}
+
+	/** A teaser's first step: a tab that opens the rest of the form. */
+	function tab(step) {
+		const heading = step.blocks.find((b) => b?.t === 'heading');
+		const open = step.blocks.find(
+			(b) => b?.t === 'button' && b.action === 'next',
+		);
+		// The heading's words without its marks: a button holds no link.
+		const b = el('button', 'tb');
+		b.textContent = heading
+			? el('b', '', heading.text).textContent
+			: (open?.label ?? 'Open');
+		b.type = 'button';
+		b.addEventListener('click', () => act(open ?? { action: 'next' }));
+		return b;
+	}
+
+	function show(id, skipped = new Set()) {
+		const step = creative.steps.find((s) => s.id === id);
+		if (!step) return close('done');
+		// Without analytics consent an answer is never kept, so the question is not asked.
+		if (
+			step.kind === 'question' &&
+			!preview &&
+			!access.analytics() &&
+			!skipped.has(step.id)
+		)
+			return show(nextStep(step, state.answers), skipped.add(step.id));
+		const moving = state.step !== null;
+		// Focus in the form, or dropped from it to the page (a button disabled while it sent, or
+		// taken away with its step), goes to the new step's heading below.
+		const refocus =
+			moving &&
+			(root.activeElement || document.activeElement === document.body);
+		// The card the shopper sees now, measured before the step changes; its layout box, so the
+		// entrance motion's transform is not in it.
+		const was =
+			moving && !preview
+				? { mode: state.mode, w: wrap.offsetWidth, h: wrap.offsetHeight }
+				: null;
+		state.step = step;
+		for (const t of state.timers.splice(0)) clearInterval(t);
+		state.codes = [];
+		state.videos = [];
+		state.wheel = null;
+		const asTab = format === 'teaser' && step === creative.steps[0];
+		state.mode = format === 'teaser' && !asTab ? 'popup' : format;
+		if (format === 'teaser') counters.tab?.(form.slot, asTab);
+		classes();
+		shell.removeAttribute('aria-labelledby');
+		if (was) {
+			const next = blank();
+			body.replaceWith(next);
+			body = next;
+		}
+		const l = layoutOf(step);
+		layout(l, asTab);
+		// A step after another keeps at least the card's size, so a shorter one (the thanks after a
+		// sign-up) never pulls the centred card, or the page under an inline form, out from under the
+		// shopper: no layout shift, and no motion to reduce. A taller step still grows.
+		if (was?.mode === state.mode && was.h > 0) {
+			wrap.classList.add('lk');
+			wrap.style.minWidth = `${was.w}px`;
+			wrap.style.minHeight = `${was.h}px`;
+		} else {
+			wrap.style.removeProperty('min-width');
+			wrap.style.removeProperty('min-height');
+		}
+		body.replaceChildren();
+		if (asTab && l.template !== 'image-only') body.append(tab(step));
+		else
+			for (const [index, block] of step.blocks.entries()) {
+				const node =
+					isObject(block) && Object.hasOwn(BLOCKS, block.t)
+						? BLOCKS[block.t](block)
+						: null;
+				if (!node) continue;
+				// An editor's selection layer finds each block by its place in the step.
+				if (preview) node.dataset.hpBlock = String(index);
+				body.append(node);
+			}
+		// A tick box sits directly above the step's submit button wherever the step lists it, so a
+		// shopper sees it before pressing, not only after being refused.
+		const go = body.querySelector('[data-submit]');
+		const tick = body.querySelector('[name=hp_consent]')?.parentNode;
+		if (go && tick) go.before(tick);
+		body.hidden = body.childElementCount === 0;
+		say(null);
+		fillCodes();
+		if (shell.hasAttribute('aria-labelledby'))
+			shell.removeAttribute('aria-label');
+		else shell.setAttribute('aria-label', l.media?.alt?.trim?.() || 'Sign up');
+		if (moving) present();
+		visibility();
+		// A screen reader hears the new step: focus moves to its heading when focus was in the form.
+		if (refocus) body.querySelector('h2')?.focus();
+	}
+
+	/** Open the dialog as the step's mode needs: modal for a popup, non-modal for the rest. */
+	function present() {
+		if (!dialog) return;
+		const modal = MODAL.includes(state.mode);
+		if (shell.open && state.modal === modal) return;
+		try {
+			if (shell.open) shell.close();
+		} catch {
+			/* already closed */
+		}
+		state.modal = modal;
+		shell.setAttribute('aria-modal', String(modal));
+		if (modal && typeof shell.showModal === 'function') shell.showModal();
+		else if (typeof shell.show === 'function') {
+			// A non-modal form never takes the shopper's focus from the page.
+			const was = document.activeElement;
+			shell.show();
+			if (was && was !== document.body) was.focus?.({ preventScroll: true });
+			else host.blur();
+		} else shell.setAttribute('open', '');
+		if (!modal || typeof shell.showModal !== 'function')
+			shell.setAttribute('role', 'dialog');
+		else shell.removeAttribute('role');
+	}
+
+	/**
+	 * The answers given on this step, into the form's answers; a date or number that is not one
+	 * the question takes is the shopper's to correct: `{ error, input }`.
+	 */
+	function collect() {
+		for (const set of body.querySelectorAll('fieldset[data-question]')) {
+			const key = set.dataset.question;
+			const typedAnswer = readers.get(set)?.() ?? {};
+			if (typedAnswer.error) return typedAnswer;
+			const values = [
+				typedAnswer.value,
+				...[...set.querySelectorAll('input:checked,select:not([name])')].map(
+					(i) => i.value,
+				),
+			].filter(Boolean);
+			if (values.length) state.answers[key] = values;
+			else delete state.answers[key];
+		}
+	}
+
+	/** After the sign-up, an answer the gateway did not carry is the page's to report. */
+	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;
+		// 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',
+					slot: decision.slot,
+					arm: decision.arm ?? null,
+					decision_id: decision.decision_id ?? null,
+					step,
+				});
+	}
+
+	const pageContext = () => ({
+		page: { url: access.pageUrl() },
+		locale: access.locale() ?? undefined,
+		consent: access.consent(),
+	});
+
+	const advance = (explicit) => {
+		if (state.receipt && !preview) stated();
+		show(nextStep(state.step, state.answers, explicit));
+	};
+
+	async function submit(block) {
+		const step = state.step;
+		const input = body.querySelector('input[name=email],input[name=phone]');
+		if (!input) return advance(block.next);
+		const channel = input.name === 'email' ? 'email' : 'sms';
+		const country = body.querySelector('select[name=hp_cc]')?.value;
+		const value =
+			channel === 'email'
+				? isEmail(input.value.trim())
+					? input.value.trim()
+					: null
+				: e164(input.value, country);
+		if (!value)
+			return say(
+				channel === 'email' ? COPY.email : country ? COPY.phone : COPY.intl,
+				input,
+			);
+		const box = body.querySelector('input[name=hp_consent]');
+		if (box && !box.checked) return say(COPY.consent, box);
+		say(null);
+		busy(true);
+		const altcha = await proof();
+		state.pow = null;
+		const answers = Object.entries(state.answers).map(([question, values]) => ({
+			question,
+			values,
+		}));
+		const consentText =
+			channel === 'sms' ? form.sms_consent_text : form.consent_text;
+		const res = await api.capture({
+			anonymousId: access.anonymousId(),
+			sessionId: access.sessionId() ?? undefined,
+			slot: decision.slot,
+			arm: decision.arm ?? undefined,
+			decision_id: decision.decision_id ?? undefined,
+			step: step.id,
+			channel,
+			[channel === 'email' ? 'email' : 'phone']: value,
+			...(channel === 'sms' && state.signedUp),
+			consent_text: consentText
+				? { id: consentText.id, version: consentText.version }
+				: undefined,
+			...(answers.length ? { answers } : {}),
+			...(altcha ? { altcha } : {}),
+			context: pageContext(),
+		});
+		const status = res.body?.status;
+		const taken =
+			(res.status === 202 || res.status === 200) && OK.includes(status);
+		// Closed while it was sent: a sign-up taken still counts, but nothing more is shown.
+		if (state.closed && !taken) return;
+		busy(false);
+		// A contact the gateway refused is the shopper's to correct, in the SDK's own words for it.
+		const field = res.status === 400 ? res.body?.field : null;
+		if (field === 'email' || field === 'phone') return say(COPY[field], input);
+		if (!taken) return say(res.status === 429 ? COPY.busy : COPY.failed, input);
+		// The field is emptied. The receipt remains, for a claim; an email step's address only until
+		// the form closes, for its SMS step.
+		input.value = '';
+		for (const [question, values] of Object.entries(state.answers))
+			state.sent.add(`${question}=${values.join(',')}`);
+		state.receipt =
+			typeof res.body.receipt === 'string' ? res.body.receipt : null;
+		// The address and its receipt let a later SMS step name the shopper, so each destination
+		// updates one profile; they live in this form's state, gone with the form.
+		if (channel === 'email')
+			state.signedUp = { email: value, email_receipt: state.receipt };
+		state.submitted = true;
+		counters.submitted(form.slot);
+		engaged('submit', step.id);
+		// A form with prizes claims its code now, whether or not the shopper goes on to spin, so the
+		// email the sign-up starts can carry it; it tells the page once the claim settles, with the
+		// code or without.
+		state.owed = channel === 'email' && form.prizes.length > 0;
+		if (state.owed) claim();
+		else o.emit?.('submitted', { coupon: null });
+		// A step named for the outcome (`verify`, `already`) is shown for it; otherwise the next one.
+		const special =
+			status !== 'ok' && creative.steps.some((s) => s.id === status);
+		if (!state.closed)
+			show(special ? status : nextStep(step, state.answers, block.next));
+	}
+
+	/** Tells the page, once, that the sign-up was taken: with the claim's code, or with none. */
+	function settled(won) {
+		if (!state.owed) return;
+		state.owed = false;
+		o.emit?.('submitted', {
+			coupon: won ? { code: won.code ?? null, prize: won.prize?.key } : null,
+		});
+	}
+
+	/** The form's claim, made once: a failed one is made again by the next spin. */
+	function claim() {
+		const receipt = state.receipt;
+		state.claiming ??= (async () => {
+			let res;
+			for (const ms of [0, ...CLAIM_RETRY_MS]) {
+				if (ms) await new Promise((r) => setTimeout(r, ms));
+				res = await api.claim({
+					slot: decision.slot,
+					decision_id: decision.decision_id ?? undefined,
+					receipt,
+				});
+				if (res.status !== 503) break;
+			}
+			const won = res.body;
+			const fallback = won?.fallback === true && !won.code;
+			if (res.status !== 200 || !(isObject(won?.prize) || fallback)) {
+				state.claiming = null;
+				settled(null);
+				return null;
+			}
+			state.claim = won;
+			if (typeof won.code === 'string') counters.code?.(won.code);
+			settled(won);
+			if (!state.closed) fillCodes();
+			return won;
+		})();
+		return state.claiming;
+	}
+
+	async function spin(block) {
+		if (!state.receipt) return say(COPY.spin);
+		busy(true);
+		const won = await claim();
+		if (state.closed) return;
+		if (!won) {
+			busy(false);
+			return say(COPY.failed);
+		}
+		const fallback = won.fallback === true && !won.code;
+		// A code the address claimed on another form is that form's prize: the wheel lands only on
+		// its own slice for it, else it stays still. A code another sign-up claimed is never shown
+		// (`held`) and is no win, even of this wheel's prize: the wheel stays still and the code
+		// block says it is already claimed.
+		const index = won.held
+			? -1
+			: form.prizes.findIndex(
+					(p) => p.key === won.prize?.key && p.label === won.prize?.label,
+				);
+		if (state.wheel && index >= 0 && !fallback) {
+			await state.wheel.spinTo(index);
+			// The prize, said aloud and held a moment where the wheel stopped, before the next step.
+			if (state.closed) return;
+			error.className = 'e won';
+			error.textContent = `${COPY.won} ${won.prize.label}`;
+			await new Promise((r) => setTimeout(r, WON_MS));
+		}
+		if (state.closed) return;
+		busy(false);
+		// No code left: the creative's `fallback` step, else a plain thanks, never a prize "won". A
+		// prize held: its `held` step, else a plain one with the code block.
+		const special = fallback ? 'fallback' : index < 0 ? 'held' : null;
+		if (special && !creative.steps.some((s) => s.id === special))
+			creative.steps.push({
+				id: special,
+				blocks: [
+					{ t: 'heading', text: fallback ? COPY.thanks : COPY.held },
+					{ t: 'code' },
+				],
+			});
+		const to = special ?? nextStep(state.step, state.answers, block.next);
+		if (to) show(to);
+		else fillCodes();
+	}
+
+	function act(block) {
+		if (block.action === 'close') return close('close');
+		const wrong = collect();
+		// 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);
+		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');
+		}
+		if (block.action === 'submit') return submit(block);
+		if (block.action === 'spin') return spin(block);
+		return advance(block.next);
+	}
+
+	function submitted(e) {
+		e.preventDefault();
+		if (body.getAttribute('aria-busy') === 'true') return;
+		const first = state.step.blocks.find(
+			(b) => b?.t === 'button' && b.action === 'submit',
+		);
+		act(first ?? { action: 'next' });
+	}
+
+	function teardown() {
+		state.closed = true;
+		for (const t of state.timers.splice(0)) clearInterval(t);
+		document.removeEventListener('visibilitychange', visibility);
+		small?.removeEventListener?.('change', resize);
+		const remove = () => {
+			try {
+				if (shell.open) shell.close();
+			} catch {
+				/* already closed */
+			}
+			host.remove();
+		};
+		if (!dialog || reducedMotion()) return remove();
+		shell.classList.add('out');
+		setTimeout(remove, EXIT_MS);
+	}
+
+	function close(reason) {
+		// A preview stays on screen: closing is the shopper's, not the trader's.
+		if (state.closed || preview) return;
+		if (!state.submitted && reason !== 'done') engaged('dismiss');
+		counters.closed(form.slot);
+		counters.tab?.(form.slot, false);
+		teardown();
+		o.onClose?.(reason);
+	}
+
+	shell.addEventListener('cancel', (e) => {
+		e.preventDefault();
+		close('esc');
+	});
+	shell.addEventListener('keydown', (e) => {
+		if (e.key === 'Escape' && !state.modal && format !== 'inline') close('esc');
+	});
+
+	// Drag a bottom sheet down by its handle to close it.
+	handle.addEventListener('pointerdown', (e) => {
+		if (!state.mobile || state.mode !== 'sheet') return;
+		const from = e.clientY;
+		let dy = 0;
+		const move = (m) => {
+			dy = Math.max(0, m.clientY - from);
+			wrap.style.transform = `translateY(${dy}px)`;
+		};
+		const up = () => {
+			document.removeEventListener('pointermove', move);
+			document.removeEventListener('pointerup', up);
+			wrap.style.transform = '';
+			if (dy > 80) close('close');
+		};
+		document.addEventListener('pointermove', move);
+		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();
+	return {
+		close,
+		root,
+		host,
+		show,
+		step: () => state.step?.id ?? null,
+		destroy: () => !state.closed && teardown(),
+	};
+}