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

package/src/onsite/rich-text.js

@@ -0,0 +1,73 @@
+/**
+ * A creative's RichText as DOM, through DOM APIs only: text nodes, `<b>`, `<i>` and `<a>` with an
+ * https href. Anything else in the tree is dropped, so no creative can carry markup or script.
+ *
+ *   RichText = string | Array<string | { b: RichText } | { i: RichText } | { a: RichText, href }>
+ */
+
+const MAX_DEPTH = 6;
+
+/** The href as an https URL, or null. */
+export function httpsHref(href) {
+	if (typeof href !== 'string') return null;
+	try {
+		const url = new URL(href);
+		return url.protocol === 'https:' ? url.href : null;
+	} catch {
+		return null;
+	}
+}
+
+/** An image or video asset's URL: https, or http on localhost for a local test page; else null. */
+export function assetHref(href) {
+	if (typeof href !== 'string') return null;
+	try {
+		const url = new URL(href);
+		return url.protocol === 'https:' ||
+			(url.protocol === 'http:' && url.hostname === 'localhost')
+			? url.href
+			: null;
+	} catch {
+		return null;
+	}
+}
+
+/** The characters of a rich text, without its marks. */
+export function plainText(text, depth = 0) {
+	if (typeof text === 'string') return text;
+	if (depth > MAX_DEPTH || !text || typeof text !== 'object') return '';
+	if (Array.isArray(text))
+		return text.map((t) => plainText(t, depth + 1)).join('');
+	return plainText(text.b ?? text.i ?? text.a, depth + 1);
+}
+
+function append(parent, node, doc, depth) {
+	if (typeof node === 'string') {
+		parent.append(doc.createTextNode(node));
+		return;
+	}
+	if (depth > MAX_DEPTH || node === null) return;
+	if (Array.isArray(node)) {
+		for (const child of node) append(parent, child, doc, depth + 1);
+		return;
+	}
+	if (typeof node !== 'object') return;
+	const tag = 'b' in node ? 'b' : 'i' in node ? 'i' : 'a' in node ? 'a' : null;
+	if (!tag) return;
+	const href = tag === 'a' ? httpsHref(node.href) : null;
+	// A link without an https target is its text alone.
+	const el = tag === 'a' && !href ? parent : doc.createElement(tag);
+	if (href) {
+		el.setAttribute('href', href);
+		el.setAttribute('rel', 'noopener');
+	}
+	append(el, node[tag], doc, depth + 1);
+	if (el !== parent) parent.append(el);
+}
+
+/** `text` as a fragment of text nodes, `<b>`, `<i>` and https `<a>`. */
+export function richText(text, doc = document) {
+	const fragment = doc.createDocumentFragment();
+	append(fragment, text, doc, 0);
+	return fragment;
+}

package/src/onsite/rules.js

@@ -0,0 +1,237 @@
+/**
+ * Which forms may show on this page view, and why not: pure functions of the form, the page and the
+ * counters, so the eligibility trace (`hp.onsite.debug()`) says exactly what decided.
+ */
+
+export const FORMATS = [
+	'popup',
+	'sheet',
+	'bar',
+	'teaser',
+	'inline',
+	'fullscreen',
+];
+export const TRIGGERS = [
+	'entry',
+	'exit',
+	'scroll',
+	'time',
+	'idle',
+	'inline',
+	'manual',
+];
+/** The formats that cover the page: one of them per page view, the highest priority first. */
+export const OVERLAY = (format) => format !== 'inline';
+/**
+ * The formats that interrupt the shopper, which the property's gap spaces out: not a bar or a
+ * teaser, which leave the page usable (Klaviyo's "multiple forms" setting counts the same).
+ */
+export const INTERRUPTS = (format) =>
+	format === 'popup' || format === 'sheet' || format === 'fullscreen';
+
+const isObject = (v) =>
+	v !== null && typeof v === 'object' && !Array.isArray(v);
+const strings = (v) =>
+	Array.isArray(v) ? v.filter((s) => typeof s === 'string') : [];
+const count = (v) => (Number.isInteger(v) && v >= 0 ? v : null);
+
+/** A form from the settings as the runtime uses it, or null when it cannot be used. */
+export function readForm(raw) {
+	if (!isObject(raw) || typeof raw.slot !== 'string' || raw.slot === '')
+		return null;
+	const trigger = isObject(raw.trigger) ? raw.trigger : {};
+	if (!FORMATS.includes(raw.format) || !TRIGGERS.includes(trigger.type))
+		return null;
+	const caps = isObject(raw.caps) ? raw.caps : {};
+	return {
+		...raw,
+		trigger,
+		priority: Number.isFinite(raw.priority) ? raw.priority : 0,
+		pages: isObject(raw.pages) ? raw.pages : {},
+		devices: strings(raw.devices),
+		audiences: strings(raw.audiences),
+		caps: {
+			per_session: count(caps.per_session),
+			lifetime: count(caps.lifetime),
+			after_close_days: Number.isFinite(caps.after_close_days)
+				? caps.after_close_days
+				: null,
+		},
+		window: isObject(raw.window) ? raw.window : {},
+		questions: Array.isArray(raw.questions)
+			? raw.questions.filter(isObject)
+			: [],
+		prizes: Array.isArray(raw.prizes) ? raw.prizes.filter(isObject) : [],
+	};
+}
+
+const STEP_ID = /^[a-z][a-z0-9_-]{0,31}$/;
+
+/**
+ * The decision's payload as a creative this runtime can render, or null. Here rather than in the
+ * renderer, so a form with no creative never loads ./render.js.
+ */
+export function readCreative(payload) {
+	if (!isObject(payload) || payload.v !== 1 || !Array.isArray(payload.steps))
+		return null;
+	const steps = payload.steps.filter(
+		(s) => isObject(s) && STEP_ID.test(s.id) && Array.isArray(s.blocks),
+	);
+	if (steps.length === 0) return null;
+	return {
+		format: FORMATS.includes(payload.format) ? payload.format : null,
+		theme: isObject(payload.theme) ? payload.theme : {},
+		steps,
+	};
+}
+
+/** `*` matches any run of characters, `/` included; everything else is literal, in any case. */
+export function globMatch(glob, path) {
+	const body = String(glob)
+		.split('*')
+		.map((part) => part.replace(/[.+?^${}()|[\]\\]/g, '\\$&'))
+		.join('.*');
+	return new RegExp(`^${body}$`, 'i').test(path);
+}
+
+/** Included (all pages when the form names none) and not excluded: exclusion wins. */
+export function pageAllowed(pages, path) {
+	const include = strings(pages?.include);
+	return (
+		(!include.length || include.some((g) => globMatch(g, path))) &&
+		!strings(pages?.exclude).some((g) => globMatch(g, path))
+	);
+}
+
+/**
+ * `mobile` for a touch-only device (no hover, coarse pointer: a touch laptop with a trackpad is a
+ * desktop) or a viewport narrower than 768px, otherwise `desktop`.
+ */
+export function deviceOf(win) {
+	const touchOnly =
+		win.matchMedia?.('(hover: none) and (pointer: coarse)')?.matches === true;
+	return touchOnly || win.innerWidth < 768 ? 'mobile' : 'desktop';
+}
+
+const at = (iso) => (typeof iso === 'string' ? Date.parse(iso) : Number.NaN);
+
+/**
+ * Every reason `form` may not show now, empty when it may. `env` is the page:
+ * `{ path, device, now, seen, subscribed, personalisation, preview, audiences }`, where `seen` is
+ * the slot's counters and `audiences` the session audiences the host gave, or null.
+ */
+export function blockers(form, env) {
+	const reasons = [];
+	if (!pageAllowed(form.pages, env.path)) reasons.push('page not included');
+	if (form.devices.length && !form.devices.includes(env.device))
+		reasons.push(`not on ${env.device}`);
+	const starts = at(form.window.starts_at);
+	const ends = at(form.window.ends_at);
+	if (env.now < starts || env.now >= ends) reasons.push('outside its dates');
+	if (form.audiences.length) {
+		if (!env.personalisation)
+			reasons.push('audiences need personalisation consent');
+		else if (
+			env.audiences &&
+			!form.audiences.some((a) => env.audiences.includes(a))
+		)
+			reasons.push('not in its audiences');
+	}
+	// A trader previewing a form sees it whatever the counters say.
+	if (env.preview) return reasons;
+	const { seen } = env;
+	const { caps } = form;
+	if (seen.submitted) reasons.push('already submitted');
+	if (form.exclude_subscribed === true && env.subscribed)
+		reasons.push('already subscribed');
+	if (caps.per_session !== null && seen.session >= caps.per_session)
+		reasons.push('per_session cap');
+	if (caps.lifetime !== null && seen.lifetime >= caps.lifetime)
+		reasons.push('lifetime cap');
+	if (
+		caps.after_close_days !== null &&
+		seen.closedAt &&
+		env.now - seen.closedAt < caps.after_close_days * 86_400_000
+	)
+		reasons.push('closed recently');
+	return reasons;
+}
+
+/**
+ * Forms whose triggers fired together, in the order to try them: highest priority first. A stable
+ * sort keeps the first to fire ahead on a tie.
+ */
+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.
+ */
+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;
+	}
+	return typeof step?.next?.default === 'string' ? step.next.default : null;
+}
+
+/** Calling codes for the markets a phone block names, so a national number can be sent in E.164. */
+export const CALLING_CODES = {
+	AT: '43',
+	AU: '61',
+	BE: '32',
+	CA: '1',
+	CH: '41',
+	DE: '49',
+	DK: '45',
+	ES: '34',
+	FI: '358',
+	FR: '33',
+	GB: '44',
+	IE: '353',
+	IT: '39',
+	NL: '31',
+	NO: '47',
+	NZ: '64',
+	PL: '48',
+	PT: '351',
+	SE: '46',
+	US: '1',
+};
+
+/** A phone number as E.164 (`+353…`), reading a national one in `country`; null when it is not one. */
+export function e164(raw, country) {
+	let n = String(raw ?? '').replace(/[\s.()-]/g, '');
+	if (n.startsWith('00')) n = `+${n.slice(2)}`;
+	const code = CALLING_CODES[String(country ?? '').toUpperCase()];
+	if (!n.startsWith('+') && code) n = `+${code}${n.replace(/^0/, '')}`;
+	return /^\+[1-9]\d{7,14}$/.test(n) ? n : null;
+}
+
+export const isEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+
+/**
+ * A `<select>` made with `make(tag, className, text)`: a blank first option reading `blank`, then
+ * each `[value, text]`, `chosen` selected. The phone field's country code, a choice's dropdown and a
+ * birthday's day and month.
+ */
+export function select(make, label, blank, pairs, chosen) {
+	const s = make('select', 'i');
+	s.setAttribute('aria-label', label);
+	for (const [value, text] of [['', blank], ...pairs]) {
+		const o = make('option', '', text);
+		o.value = value;
+		o.selected = value === chosen;
+		s.append(o);
+	}
+	return s;
+}
+
+/** 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;
+	return turns * 360 + (360 - (index + 0.5) * size);
+}

package/src/onsite/styles.js

@@ -0,0 +1,208 @@
+/**
+ * The forms' only stylesheet, scoped to their shadow root. The creative's theme arrives as custom
+ * properties on the host (`--hp-accent`, `--hp-bg`, `--hp-text`, `--hp-radius`, `--hp-font`,
+ * `--hp-on-accent`, `--hp-ov`) and classes on the shell: the format, `p-<position>`, `b-<shape>`,
+ * `bo` (outline buttons), `uc` (capitals), `mob` (a small screen) and `pv` (a console preview).
+ * A button's label is large text (WCAG: 14pt bold), so `--hp-on-accent` needs only 3:1; chips and
+ * a teaser's tab use `--hp-on-accent-text`. Fields have a surface of their own (`--hp-field`). The card (`.w`)
+ * carries the step's template (`t-*`) and size (`z-*`); type sizes are `x-*`.
+ */
+
+/**
+ * Theme fonts: system stacks that download nothing, after Modern Font Stacks (CC0), cut to the
+ * families that cover macOS/iOS, Windows, Android and Linux.
+ */
+export const FONTS = {
+	system: 'system-ui,sans-serif',
+	'neo-grotesque': 'Inter,Roboto,"Helvetica Neue",Arial,sans-serif',
+	humanist: 'Seravek,"Gill Sans Nova",Ubuntu,Calibri,sans-serif',
+	'geometric-humanist': 'Avenir,Montserrat,Corbel,sans-serif',
+	'rounded-sans':
+		'ui-rounded,Quicksand,Comfortaa,"Arial Rounded MT Bold",sans-serif',
+	industrial: 'Bahnschrift,"DIN Alternate","Franklin Gothic Medium",sans-serif',
+	transitional: 'Charter,"Sitka Text",Cambria,serif',
+	'old-style': '"Iowan Old Style","Palatino Linotype",P052,serif',
+	didone: 'Didot,"Bodoni MT","Noto Serif Display",serif',
+	'slab-serif': 'Rockwell,"Roboto Slab","DejaVu Serif",serif',
+};
+
+const EASE = 'cubic-bezier(.16,1,.3,1)';
+
+export const CSS = `
+:host{all:initial}
+:host([preview]){display:block;position:relative;width:100%;height:100%;overflow:hidden;contain:layout paint}
+.s{--a:var(--hp-accent,#111);--b:var(--hp-bg,#fff);--t:var(--hp-text,#111);--r:var(--hp-radius,16px);--oa:var(--hp-on-accent,#fff);--ot:var(--hp-on-accent-text,var(--oa));--fl:var(--hp-field,color-mix(in srgb,var(--t) 5%,var(--b)));--ft:var(--hp-field-text,var(--t));--mu:color-mix(in srgb,var(--t) 74%,var(--b));--ln:color-mix(in srgb,var(--t) 18%,var(--b));--br:min(12px,var(--r));--ir:min(var(--r),8px);font:16px/1.5 var(--hp-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);color:var(--t);-webkit-font-smoothing:antialiased;box-sizing:border-box;margin:0;padding:0;border:0;background:none;max-width:none;max-height:none;overflow:visible}
+.s *,.s ::before,.s ::after{box-sizing:border-box}
+dialog.s:not([open]){display:none}
+dialog::backdrop{background:none}
+[hidden]{display:none!important}
+.b-pill{--br:999px}
+.b-square{--br:0px;--ir:0px}
+.popup,.fullscreen{position:fixed;inset:0;width:100%;height:100%;display:grid;place-items:center;padding:24px;z-index:2147483646}
+.fullscreen{padding:0}
+.mob.popup{padding:12px}
+.ov{display:none;position:absolute;inset:0;background:var(--hp-ov,rgb(10 10 14/.6));animation:hp-fade .3s ease both}
+.popup>.ov,.fullscreen>.ov{display:block}
+.w{position:relative;display:flex;flex-direction:column;width:min(100%,480px);max-height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;background:var(--b);color:var(--t);border-radius:var(--r);box-shadow:0 24px 48px -24px rgb(0 0 0/.35),0 0 0 1px rgb(0 0 0/.05);animation:hp-pop .44s ${EASE} both}
+.z-sm{width:min(100%,380px)}
+.z-lg{width:min(100%,880px)}
+.z-full,.fullscreen .w{width:100%;height:100%;max-height:none;border-radius:0;box-shadow:none}
+.m{position:relative;flex:none;overflow:hidden;background:color-mix(in srgb,var(--t) 7%,var(--b))}
+.m img,.m video{display:block;width:100%;height:100%;object-fit:cover}
+.t-stack .m{aspect-ratio:var(--ar,16/9);max-height:280px}
+.t-split{flex-direction:row;min-height:min(500px,100%)}
+.t-split.right{flex-direction:row-reverse}
+.t-split .m{flex:0 0 46%}
+.t-split .m>*{position:absolute;inset:0}
+.mob .t-split,.sheet .t-split{flex-direction:column;min-height:0}
+.mob .t-split .m,.sheet .t-split .m{flex:none;height:190px}
+.t-overlay{justify-content:center;min-height:min(520px,100%)}
+.mob .t-overlay{min-height:min(460px,100%)}
+.t-overlay .m{position:absolute;inset:0}
+.t-overlay .m::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--b),color-mix(in srgb,var(--b) 50%,transparent));opacity:var(--sc,.45)}
+.t-overlay .f{position:relative;z-index:1;flex:none;width:min(100%,560px);margin-inline:auto}
+.t-image-only .m{background:none}
+.t-image-only .m img{height:auto;aspect-ratio:var(--ar,auto)}
+.io{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;color:inherit}
+.f{display:flex;flex-direction:column;gap:14px;padding:44px 40px 36px;flex:1 0 auto;min-width:0}
+.t-split .f{flex:1 1 0;justify-content:center}
+.lk>.f{justify-content:center}
+.z-full .f,.fullscreen .f{justify-content:center;width:min(100%,560px);margin:auto}
+.pd-none{padding:0}
+.pd-sm{padding:24px}
+.pd-lg{padding:60px 56px 52px}
+.mob .pd-md{padding:34px 24px 24px}
+.ta-center .f{text-align:center}
+.a-left{text-align:left}.a-center{text-align:center}.a-right{text-align:right}
+h2{margin:0;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
+h2:focus{outline:none}
+.nm .f>h2:first-child,.t-split:not(.right) .f>h2:first-child{padding-inline-end:36px}
+.nm.ta-center .f>h2:first-child,.nm .f>h2.a-center:first-child{padding-inline:36px}
+p{margin:0;text-wrap:pretty}
+.f>p{color:var(--mu)}
+h2+p{margin-top:-4px}
+.x-xs{font-size:12px;line-height:1.45}
+.x-sm{font-size:14px;line-height:1.5}
+.x-md{font-size:16px;line-height:1.55}
+.x-lg{font-size:20px;line-height:1.35}
+.x-xl{font-size:32px;line-height:1.1}
+.x-display{font-size:54px;line-height:1;letter-spacing:-.035em;font-weight:800}
+.mob .x-xl{font-size:27px}
+.mob .x-display{font-size:40px}
+a{color:inherit;text-underline-offset:3px}
+.l{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;letter-spacing:.01em;text-align:left}
+.i{font:inherit;font-size:16px;font-weight:400;letter-spacing:0;width:100%;height:52px;padding:0 18px;border:1.5px solid var(--ln);border-radius:var(--ir);background:var(--fl);color:var(--ft);caret-color:var(--a);outline:none}
+.ph{display:flex;gap:8px}.ph .cc{flex:0 0 auto;width:auto;padding:0 10px}
+.i::placeholder{color:color-mix(in srgb,var(--ft) 72%,var(--fl))}
+::selection{background:color-mix(in srgb,var(--a) 30%,var(--b))}
+.i:focus{border-color:var(--a);box-shadow:0 0 0 4px color-mix(in srgb,var(--a) 22%,transparent)}
+.i[aria-invalid=true]{border-color:#d93025;box-shadow:0 0 0 4px rgb(217 48 37/.16)}
+.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:18.67px;font-weight:700;letter-spacing:.01em;line-height:1.2;min-height:52px;padding:14px 24px;border:1.5px solid var(--a);border-radius:var(--br);background:var(--a);color:var(--oa);cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .15s,filter .2s}
+.btn:hover{filter:brightness(1.08)}
+.btn:active{transform:scale(.98)}
+.bo .btn{background:transparent;color:var(--a)}
+.btn[disabled]{opacity:.55;cursor:progress;filter:none;transform:none}
+.btn.no{align-self:center;min-height:44px;padding:6px 10px;border:0;background:none;color:var(--mu);font-size:14px;font-weight:500;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--t) 30%,transparent);text-underline-offset:4px;filter:none}
+.btn.no:hover{color:var(--t)}
+:focus-visible,.ch input:focus-visible+span{outline:2px solid var(--a);outline-offset:3px}
+.x{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--b);box-shadow:0 0 0 1px var(--ln);color:var(--t);cursor:pointer}
+.x::before,.x::after{content:"";grid-area:1/1;width:16px;height:2px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
+.x::after{transform:rotate(-45deg)}
+.c{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--mu);text-align:left;cursor:pointer}
+.c input{appearance:none;flex:none;display:grid;place-content:center;width:20px;height:20px;margin:0;border:1.5px solid color-mix(in srgb,var(--t) 50%,var(--b));border-radius:min(var(--r),5px);background:var(--b);cursor:pointer}
+.c input:checked{background:var(--a);border-color:var(--a)}
+.c input:checked::after{content:"";width:10px;height:5px;border:solid var(--ot);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
+.sm{font-size:12px;line-height:1.5;color:var(--mu)}
+fieldset{display:flex;flex-wrap:wrap;gap:8px;min-width:0;margin:0;padding:0;border:0}
+legend{padding:0;margin-bottom:8px;font-size:13px;font-weight:600}
+.ta-center fieldset{justify-content:center}
+.ch{position:relative;display:inline-flex}
+.ch input{position:absolute;inset:0;margin:0;opacity:0}
+.ch span{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border:1.5px solid var(--ln);border-radius:999px;font-size:15px}
+.ch input:checked+span{background:var(--a);border-color:var(--a);color:var(--ot)}
+.ls{flex-direction:column}.ls .c{font-size:15px;color:var(--t)}.ls [type=radio]{border-radius:50%}
+.ph .u{align-self:center;color:var(--mu)}
+.bd{flex-wrap:wrap}.bd .i{min-width:0;padding:0 12px}.bd [name=hp_d]{flex:0 0 5.5em}.bd [name=hp_m]{flex:1 1 8.5em}.bd [name=hp_y]{flex:1 1 8em}
+.e.won{color:var(--t);font-size:18px;font-weight:700;text-align:center}
+.e{color:#d93025;font-size:13px;font-weight:500}
+.e:empty{display:none}
+.k{display:flex;flex-direction:column;align-items:stretch;gap:10px}
+.k:empty{display:none}
+.k output{display:block;padding:16px;border:1.5px dashed var(--a);border-radius:min(var(--r),16px);background:color-mix(in srgb,var(--a) 8%,var(--b));font:700 22px/1.2 Menlo,monospace;letter-spacing:.12em;text-align:center}
+.btn.cp,.btn.b2{background:transparent;border-color:var(--ln);color:var(--t)}
+.pg{display:flex;flex-direction:column;gap:8px}
+.pg p{font-weight:600}
+.tr{height:6px;border-radius:99px;background:color-mix(in srgb,var(--t) 18%,var(--b));overflow:hidden}
+.tr i{display:block;height:100%;border-radius:inherit;background:var(--a);transform:scaleX(0);transform-origin:left;transition:transform .6s ${EASE}}
+.tm{font-size:40px;line-height:1;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums;text-align:center}
+.bi{display:block;width:100%;height:auto}
+.bl{display:block;border-radius:var(--br)}
+hr{width:100%;margin:4px 0;border:0;border-top:1px solid var(--ln)}
+.wh{width:min(100%,320px);align-self:center}
+.wh svg{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 24px rgb(0 0 0/.2))}
+.hd{display:none}
+.uc h2{text-transform:uppercase;font-weight:800;letter-spacing:-.01em;line-height:1.02}
+.uc .btn:not(.no),.uc .tb{text-transform:uppercase;letter-spacing:.06em}
+.sheet,.bar,.teaser{position:fixed;inset:auto;z-index:2147483646;display:flex;flex-direction:column}
+.sheet{right:24px;bottom:24px;width:min(400px,calc(100% - 32px));max-height:calc(100% - 48px)}
+.sheet.p-bottom-left{right:auto;left:24px}
+.sheet.p-bottom{right:auto;left:50%;translate:-50% 0}
+.sheet .w,.bar .w{width:100%}
+.mob.sheet{left:0;right:0;bottom:0;translate:none;width:100%;max-height:92%}
+.mob.sheet .w{border-radius:var(--r) var(--r) 0 0;box-shadow:0 -16px 48px -16px rgb(0 0 0/.35);animation-name:hp-up}
+.mob.sheet .hd{display:block;position:absolute;top:0;left:50%;translate:-50% 0;z-index:3;width:96px;height:28px;cursor:grab;touch-action:none}
+.mob.sheet .hd::before{content:"";display:block;width:40px;height:5px;margin:10px auto 0;border-radius:3px;background:color-mix(in srgb,var(--t) 25%,var(--b))}
+.bar{left:0;right:0;bottom:0;width:100%}
+.bar.p-top{bottom:auto;top:0}
+.bar .w{flex-direction:row;border-radius:0;box-shadow:0 -10px 30px -14px rgb(0 0 0/.3);animation-name:hp-up}
+.bar.p-top .w{animation-name:hp-down}
+.bar .m{display:none}
+.bar .f{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;width:min(100%,1200px);margin:auto;padding:14px 68px 14px 24px}
+.bar h2{font-size:18px;padding:0!important}
+.bar .f>p{font-size:15px}
+.bar .l{flex:0 1 300px}
+.bar .lt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
+.bar .i,.bar .btn{height:46px;min-height:46px}
+.bar .btn{padding:10px 22px}
+.bar .c,.bar .sm,.bar .e{flex-basis:100%;justify-content:center;text-align:center}
+.bar .pg{flex:0 1 520px;text-align:center}
+.bar .k{flex-direction:row;align-items:center}
+.bar .k output{padding:9px 16px;font-size:16px;border-radius:999px}
+.bar .k .btn{height:44px;min-height:44px;padding:6px 16px;font-size:14px}
+.bar .x{top:50%;right:12px;translate:0 -50%}
+.mob.bar .f{justify-content:flex-start;padding:14px 60px 16px 16px}
+.mob.bar h2,.mob.bar .f>p{flex-basis:100%}
+.mob.bar .l{flex:1 1 160px;min-width:160px}
+.mob.bar .f>.btn:not(.no){flex:1 0 auto}
+.mob.bar .x{top:6px;translate:none}
+.teaser{left:20px;bottom:20px}
+.teaser.p-bottom-right{left:auto;right:20px}
+.teaser.p-left,.teaser.p-right{bottom:auto;top:50%;translate:0 -50%}
+.teaser.p-left{left:0}
+.teaser.p-right{left:auto;right:0}
+.teaser .w{width:auto;overflow:visible;background:none;box-shadow:none;border-radius:0;animation-name:hp-fade}
+.teaser .f{padding:0}
+.teaser .m{overflow:visible}
+.teaser .io img{width:auto;max-width:220px;max-height:220px;border-radius:var(--r);box-shadow:0 16px 40px -12px rgb(0 0 0/.45)}
+.tb{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border:0;border-radius:var(--br);background:var(--a);color:var(--ot);font:inherit;font-size:15px;font-weight:650;letter-spacing:.01em;cursor:pointer;box-shadow:0 14px 34px -10px rgb(0 0 0/.45)}
+.b-rounded .tb{border-radius:999px}
+.p-left .tb,.p-right .tb{writing-mode:vertical-rl;padding:22px 13px;border-radius:var(--br) 0 0 var(--br)}
+.p-left .tb{transform:rotate(180deg)}
+.b-pill.teaser .tb{border-radius:999px}
+.teaser .x{top:-20px;right:-20px;border:8px solid transparent;background:var(--t) padding-box;color:var(--b)}
+.teaser.p-right .x{right:auto;left:-20px}
+.inline{position:static;display:block;height:100%}
+.inline .w{width:100%;height:100%;box-shadow:none;border:1px solid var(--ln);animation:none}
+.inline .t-stack .m{max-height:none}
+.out .w{animation:hp-out .2s ease-in both}
+.out .ov{animation:hp-fade .2s ease-in reverse both}
+.f>*{animation:hp-rise .5s ${EASE}}
+.pv .w,.pv .ov,.pv .f>*,.inline .f>*{animation:none}
+@keyframes hp-pop{from{opacity:0;transform:translateY(24px) scale(.96)}}
+@keyframes hp-fade{from{opacity:0}}
+@keyframes hp-rise{from{opacity:0;transform:translateY(10px)}}
+@keyframes hp-up{from{transform:translateY(100%)}}
+@keyframes hp-down{from{transform:translateY(-100%)}}
+@keyframes hp-out{to{opacity:0;transform:translateY(12px) scale(.98)}}
+@media (prefers-reduced-motion:reduce){.s .w,.s .ov,.f>*{animation:hp-fade .15s ease both!important}.btn{transition:none}}
+`;

package/src/onsite/triggers.js

@@ -0,0 +1,165 @@
+/**
+ * When a form's trigger fires. Exit intent follows ouibounce and use-exit-intent (both MIT; the
+ * thresholds are ours, docs/design/onsite-capture-research.md §7):
+ *
+ * - desktop: armed `delay_ms` (5 s) after the start and once the pointer has been below the top
+ *   tenth of the viewport; fires when it leaves the document through the top edge, moving up, with
+ *   no field focused.
+ * - mobile: after 30% of the page has been scrolled, an upward flick of 120px or more at 0.5 px/ms
+ *   or faster within 300 ms (reaching for the address bar or back), or a return to the tab after
+ *   10 s or more away. Never on hide.
+ *
+ * Every watcher returns what stops it.
+ */
+
+const EXIT_ARM_MS = 5000;
+const FLICK_PX = 120;
+const FLICK_PX_PER_MS = 0.5;
+const FLICK_WINDOW_MS = 300;
+const EXIT_DEPTH = 0.3;
+const AWAY_MS = 10_000;
+const INPUTS = [
+	'mousemove',
+	'pointerdown',
+	'keydown',
+	'scroll',
+	'touchstart',
+	'wheel',
+];
+
+function listeners() {
+	const off = [];
+	const on = (target, type, handler, options = { passive: true }) => {
+		target.addEventListener(type, handler, options);
+		off.push(() => target.removeEventListener(type, handler, options));
+	};
+	const later = (fn, ms) => {
+		const id = setTimeout(fn, ms);
+		off.push(() => clearTimeout(id));
+	};
+	return {
+		on,
+		later,
+		stop: () => {
+			for (const f of off.splice(0)) f();
+		},
+	};
+}
+
+const depthOf = (win, doc) => {
+	const height = doc.documentElement.scrollHeight || 0;
+	return height > 0 ? (win.scrollY + win.innerHeight) / height : 0;
+};
+
+const typing = (doc) => {
+	const el = doc.activeElement;
+	return Boolean(
+		el &&
+			(/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) || el.isContentEditable),
+	);
+};
+
+function desktopExit({ on, later }, fire, trigger, win, doc) {
+	let armed = false;
+	let below = false;
+	let lastY = null;
+	let dy = 0;
+	later(() => {
+		armed = true;
+	}, trigger.delay_ms ?? EXIT_ARM_MS);
+	on(doc, 'mousemove', (e) => {
+		if (e.clientY > win.innerHeight * 0.1) below = true;
+		if (lastY !== null) dy = e.clientY - lastY;
+		lastY = e.clientY;
+	});
+	on(doc, 'mouseout', (e) => {
+		if (
+			armed &&
+			below &&
+			!e.relatedTarget &&
+			e.clientY <= 0 &&
+			dy < 0 &&
+			!typing(doc)
+		)
+			fire('exit');
+	});
+}
+
+function mobileExit({ on, later }, fire, trigger, win, doc) {
+	let armed = false;
+	let reached = 0;
+	let lastY = win.scrollY;
+	let lastT = Date.now();
+	let run = null;
+	let hiddenAt = null;
+	later(() => {
+		armed = true;
+	}, trigger.delay_ms ?? EXIT_ARM_MS);
+	on(win, 'scroll', () => {
+		const y = win.scrollY;
+		const t = Date.now();
+		reached = Math.max(reached, depthOf(win, doc));
+		if (y < lastY) {
+			if (!run || t - run.t > FLICK_WINDOW_MS) run = { y: lastY, t: lastT };
+			const dist = run.y - y;
+			if (
+				armed &&
+				reached >= EXIT_DEPTH &&
+				dist >= FLICK_PX &&
+				dist / Math.max(1, t - run.t) >= FLICK_PX_PER_MS
+			)
+				fire('exit_scroll');
+		} else run = null;
+		lastY = y;
+		lastT = t;
+	});
+	on(doc, 'visibilitychange', () => {
+		if (doc.visibilityState === 'hidden') hiddenAt = Date.now();
+		else if (hiddenAt !== null && Date.now() - hiddenAt >= AWAY_MS)
+			fire('return');
+		if (doc.visibilityState !== 'hidden') hiddenAt = null;
+	});
+}
+
+/**
+ * Watch `trigger` and call `fire(reason)` when it fires. Inline and manual forms are opened by the
+ * runtime itself, so they watch nothing.
+ *
+ * @param {{ type: string, delay_ms?: number, depth?: number, seconds?: number }} trigger
+ * @param {(reason: string) => void} fire
+ * @param {{ device: 'desktop'|'mobile', win?: Window, doc?: Document }} env
+ */
+export function watch(trigger, fire, { device, win = window, doc = document }) {
+	const l = listeners();
+	const seconds = (trigger.seconds ?? 30) * 1000;
+	if (trigger.type === 'entry')
+		l.later(() => fire('entry'), trigger.delay_ms ?? 0);
+	if (trigger.type === 'time') l.later(() => fire('time'), seconds);
+	if (trigger.type === 'exit')
+		(device === 'mobile' ? mobileExit : desktopExit)(
+			l,
+			fire,
+			trigger,
+			win,
+			doc,
+		);
+	if (trigger.type === 'scroll') {
+		const depth = trigger.depth ?? 0.5;
+		l.on(win, 'scroll', () => depthOf(win, doc) >= depth && fire('scroll'));
+	}
+	if (trigger.type === 'idle') {
+		let id = null;
+		const reset = () => {
+			clearTimeout(id);
+			id = setTimeout(() => fire('idle'), seconds);
+		};
+		reset();
+		for (const type of INPUTS) l.on(type === 'scroll' ? win : doc, type, reset);
+		l.on(doc, 'visibilitychange', reset);
+		return () => {
+			clearTimeout(id);
+			l.stop();
+		};
+	}
+	return l.stop;
+}