@aglyn/plugins-marketing 1.0.0-beta.143

package/src/lib/components/site-runtime.js

@@ -0,0 +1,1081 @@
+/**
+ * @license
+ * Copyright 2022 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as Aglyn from "@aglyn/aglyn";
+import { sendAnalyticsBeacon } from "@aglyn/aglyn/app-utils/analytics-beacon";
+import { trackAuthoredEvent, trackEvent } from "@aglyn/aglyn/app-utils/analytics-events";
+import { campaignTouchField } from "@aglyn/aglyn/app-utils/campaign-touch";
+import { useEffect, useRef, useState } from "react";
+import * as MarketingModel from "../model/index.js";
+/**
+ * Overlay metrics beacon (AGL-200): fire-and-forget, never blocks UX.
+ * With an `overlayId` (marketing-hub docs, AGL-271) the collector also
+ * increments that overlay's own stats counters.
+ */ function sendOverlayBeacon(hostId, overlay, overlayId) {
+    if (!hostId) return;
+    // Best-effort, and refused outright from a non-production build or a browser
+    // marked ours — the same gate the pageview beacon passes. The GA mirror
+    // below is NOT gated here: `trackEvent` carries the taxonomy's own
+    // environment check and stamps `traffic_type` rather than dropping the hit.
+    sendAnalyticsBeacon(_extends({
+        hostId,
+        overlay
+    }, overlayId ? {
+        overlayId
+    } : {}));
+    // GA mirror (wave v8): sites with Analytics configured see overlay
+    // engagement in their own property; no-op without gtag.
+    //
+    // Through the taxonomy since AGL-1591 rather than raw gtag. `trackEvent`
+    // already swallows everything and never throws, so the try/catch this used
+    // to need is gone rather than kept as decoration.
+    trackEvent('aglyn_overlay', _extends({
+        overlay_action: overlay
+    }, overlayId ? {
+        overlay_id: overlayId
+    } : {}));
+}
+/**
+ * Site-wide announcement bar (AGL-195). Dismissal is per content-hash in
+ * localStorage (no cookies): editing the text re-shows the bar for
+ * everyone who hid the old one.
+ */ /**
+ * Experiments runner (AGL-253): deterministic per-visitor assignment for
+ * the screen's experiments. The first active experiment wins (one per
+ * screen); its variant tree — composed server-side per variant version —
+ * swaps in via canvas.setNodes on hydration. Exposures beacon on
+ * assignment; the conversion listener matches the experiment's goal and
+ * beacons once per pageview.
+ */ function ExperimentsRunner(props) {
+    var _experiments_;
+    const { hostId, experiments, consentHost } = props;
+    useEffect(()=>{
+        var _ref;
+        var _experiment_goal;
+        if (!hostId || !experiments.length) return undefined;
+        const experiment = experiments[0];
+        // Visitor-id persistence honors the consent gate (AGL-1498): without an
+        // analytics yes on a consent-gated site, the id lives in sessionStorage —
+        // variants stay stable within the visit, and the indefinite identifier
+        // is not kept. The id never leaves the browser either way (the beacons
+        // below carry no visitor id), which is why this is a persistence
+        // downgrade rather than a kill switch on experiments.
+        const persistence = Aglyn.resolveVisitorIdPersistence(consentHost, Aglyn.readStoredVisitorConsent(hostId));
+        let visitorId;
+        try {
+            var _ref1, _ref2, _storage_getItem;
+            const storage = persistence === 'local' ? localStorage : sessionStorage;
+            // Read across BOTH stores so the assignment survives a consent move:
+            // a session id promoted to local (consent granted mid-visit) and a
+            // legacy local id migrating down to session both keep their variant.
+            visitorId = (_ref1 = (_ref2 = (_storage_getItem = storage.getItem(Aglyn.VISITOR_ID_STORAGE_KEY)) != null ? _storage_getItem : sessionStorage.getItem(Aglyn.VISITOR_ID_STORAGE_KEY)) != null ? _ref2 : localStorage.getItem(Aglyn.VISITOR_ID_STORAGE_KEY)) != null ? _ref1 : '';
+            if (!visitorId) {
+                visitorId = `v-${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
+            }
+            storage.setItem(Aglyn.VISITOR_ID_STORAGE_KEY, visitorId);
+            // A pre-consent-tool id may still sit in localStorage from before the
+            // gate existed; while un-consented it must not persist.
+            if (persistence === 'session') {
+                localStorage.removeItem(Aglyn.VISITOR_ID_STORAGE_KEY);
+            }
+        } catch (unused) {
+            return undefined // No storage (privacy mode) — serve the default.
+            ;
+        }
+        const variant = MarketingModel.assignExperimentVariant(// Wire-typed props (AGL-418); the plugin narrows its own enum.
+        _extends({
+            status: experiment.status,
+            variants: experiment.variants
+        }, experiment.winnerVariantId ? {
+            winnerVariantId: experiment.winnerVariantId
+        } : {}, experiment.endAtMs ? {
+            endAtMs: experiment.endAtMs
+        } : {}), experiment.id, visitorId);
+        if (!variant) return undefined;
+        const payload = experiment.payloads[variant.id];
+        if (payload) Aglyn.canvas.setNodes(payload);
+        const beacon = (kind)=>{
+            void fetch('/api/experiments/track', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    hostId,
+                    experimentId: experiment.id,
+                    variantId: variant.id,
+                    kind
+                }),
+                keepalive: true
+            }).catch(()=>undefined);
+            // GA mirror (wave v8): exposure/conversion events land in the
+            // site's own Analytics property when configured. Through the taxonomy
+            // since AGL-1591 — which also reserves the name against an authored
+            // `trackGaEvent` step, so nothing hand-written can add itself to the
+            // counts that decide which variant wins.
+            trackEvent('aglyn_experiment', {
+                experiment_id: experiment.id,
+                variant_id: variant.id,
+                experiment_action: kind
+            });
+        };
+        // Finished experiments serve the winner without counting stats.
+        if (experiment.status !== 'running') return undefined;
+        beacon('exposure');
+        // Goal listener — client-observable goals only; server-side goals
+        // (bookings etc.) count through their own pipelines in a follow-up.
+        const cleanups = [];
+        let converted = false;
+        const convert = ()=>{
+            if (converted) return;
+            converted = true;
+            beacon('conversion');
+        };
+        const goal = (_ref = (_experiment_goal = experiment.goal) == null ? void 0 : _experiment_goal.event) != null ? _ref : 'formSubmission';
+        if (goal === 'formSubmission') {
+            const onSubmit = ()=>convert();
+            document.addEventListener('submit', onSubmit, true);
+            cleanups.push(()=>document.removeEventListener('submit', onSubmit, true));
+        } else if (goal === 'elementClick') {
+            var _experiment_goal_filter, _experiment_goal1;
+            const selector = ((_experiment_goal1 = experiment.goal) == null ? void 0 : (_experiment_goal_filter = _experiment_goal1.filter) == null ? void 0 : _experiment_goal_filter.trim()) || 'a, button';
+            const onClick = (event)=>{
+                var _target_closest;
+                const target = event.target;
+                if (target == null ? void 0 : (_target_closest = target.closest) == null ? void 0 : _target_closest.call(target, selector)) convert();
+            };
+            document.addEventListener('click', onClick, true);
+            cleanups.push(()=>document.removeEventListener('click', onClick, true));
+        } else if (goal === 'scrollDepth') {
+            const onScroll = ()=>{
+                const doc = document.documentElement;
+                const max = doc.scrollHeight - window.innerHeight;
+                if (max <= 0 || window.scrollY / max * 100 >= 50) {
+                    convert();
+                    window.removeEventListener('scroll', onScroll);
+                }
+            };
+            window.addEventListener('scroll', onScroll, {
+                passive: true
+            });
+            cleanups.push(()=>window.removeEventListener('scroll', onScroll));
+        } else if (goal === 'timeOnPage') {
+            const timer = setTimeout(convert, 30000);
+            cleanups.push(()=>clearTimeout(timer));
+        }
+        return ()=>{
+            for (const cleanup of cleanups)cleanup();
+        };
+    // Experiments are static per pageview (ISR props).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        hostId,
+        experiments.length && ((_experiments_ = experiments[0]) == null ? void 0 : _experiments_.id)
+    ]);
+    return null;
+}
+/**
+ * Site-event automations engine (AGL-256/257): arms the page's triggers
+ * (scroll depth, element visibility/clicks, exit intent, dwell time),
+ * runs each fired action's CLIENT steps in the browser, and dispatches
+ * actions with server steps to /api/events/dispatch. Every trigger fires
+ * at most once per pageview.
+ */ function AutomationsEngine(props) {
+    const { hostId, automations, screens, onShowOverlay } = props;
+    const showOverlayRef = useRef(onShowOverlay);
+    showOverlayRef.current = onShowOverlay;
+    useEffect(()=>{
+        if (!hostId || !automations.length) return undefined;
+        const fired = new Set();
+        const cleanups = [];
+        const showToast = (message, severity)=>{
+            const toast = document.createElement('div');
+            toast.textContent = message;
+            toast.setAttribute('role', 'status');
+            Object.assign(toast.style, {
+                position: 'fixed',
+                bottom: '16px',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                zIndex: '2147483000',
+                padding: '10px 16px',
+                borderRadius: '8px',
+                fontSize: '14px',
+                fontFamily: 'system-ui, sans-serif',
+                color: '#fff',
+                backgroundColor: severity === 'error' ? '#c62828' : severity === 'warning' ? '#e65100' : severity === 'success' ? '#2e7d32' : 'rgba(0, 0, 0, 0.85)',
+                maxWidth: '90vw'
+            });
+            document.body.appendChild(toast);
+            setTimeout(()=>toast.remove(), 6000);
+        };
+        const runClientSteps = (automation)=>{
+            for (const step of automation.steps){
+                try {
+                    if (step.type === 'addClass' || step.type === 'removeClass' || step.type === 'toggleClass') {
+                        // Expand the raw-id selector to also match the layout-composed
+                        // live id (AGL-573); non-leaf selectors are unchanged.
+                        const targets = document.querySelectorAll(Aglyn.expandLeafSelector(step.selector));
+                        targets.forEach((element)=>{
+                            if (step.type === 'addClass') {
+                                element.classList.add(step.className);
+                            } else if (step.type === 'removeClass') {
+                                element.classList.remove(step.className);
+                            } else {
+                                element.classList.toggle(step.className);
+                            }
+                        });
+                    } else if (step.type === 'setAttribute' || step.type === 'removeAttribute') {
+                        /*
+              The semantics half of a hand-built disclosure (AGL-2546).
+
+              Deliberately in THIS loop rather than behind a guard of its own:
+              it then inherits exactly the gating the visibility steps have,
+              including which surfaces mount the runtime at all. A separate
+              path reaching `document.querySelector` directly is how this
+              would come to run somewhere `showElement` does not.
+
+              The name is re-checked here and not only in the editor. The
+              editor is a convenience; a step can reach this runtime from a
+              document written before the allowlist existed, or by any route
+              that does not pass through the console UI.
+
+              A rejected name is a NO-OP, not a throw — the `catch` around
+              this loop would otherwise let one bad attribute name silently
+              drop every step after it in the same automation.
+            */ if (Aglyn.isInteractionAttributeAllowed(step.name)) {
+                            const name = step.name.trim().toLowerCase();
+                            const targets = document.querySelectorAll(Aglyn.expandLeafSelector(step.selector));
+                            targets.forEach((element)=>{
+                                if (step.type === 'setAttribute') {
+                                    var _step_value;
+                                    element.setAttribute(name, (_step_value = step.value) != null ? _step_value : '');
+                                } else {
+                                    element.removeAttribute(name);
+                                }
+                            });
+                        }
+                    } else if (step.type === 'scrollTo') {
+                        // One target, the first one on screen (AGL-2867). A target that
+                        // is missing, deleted or hidden makes the step a no-op, and the
+                        // steps after it in this automation still run.
+                        Aglyn.runScrollToStep(Aglyn.expandLeafSelector(step.selector), {
+                            behavior: step.behavior,
+                            offsetPx: step.offsetPx
+                        });
+                    } else if (step.type === 'playVideo') {
+                        // The Video element's own poster press, sent to the element: the
+                        // player loads only now, exactly as it would for a click on the
+                        // poster, and under the same consent rules.
+                        Aglyn.runPlayVideoStep(Aglyn.expandLeafSelector(step.selector));
+                    } else if (step.type === 'stickyNav') {
+                        var _step_selector;
+                        const target = document.querySelector(Aglyn.expandLeafSelector(((_step_selector = step.selector) == null ? void 0 : _step_selector.trim()) || 'header, nav'));
+                        if (target instanceof HTMLElement) {
+                            target.style.position = 'sticky';
+                            target.style.top = '0';
+                            target.style.zIndex = '1100';
+                        }
+                    } else if (step.type === 'showHtml') {
+                        const container = document.createElement('div');
+                        // Sanitize (AGL-504): unlike runJs, showHtml is NOT dropped by the
+                        // JS entitlement gate, so raw innerHTML would let any automations-
+                        // tier author execute event-handler attributes (<img onerror>).
+                        //
+                        // ONE policy for the surface (AGL-2486). AGL-1901 moved rich text
+                        // and Custom HTML onto `sanitizeAuthorHtml`; this call was the
+                        // last raw DOMPurify left on a published page, and two sanitizers
+                        // with different rules on one surface is worse than the weaker of
+                        // them — a reviewer reads the strict one and assumes it covers
+                        // both. It did not: DOMPurify filters NO CSS, so every `style`
+                        // attribute arriving here reached the visitor unexamined while
+                        // the Custom HTML block beside it went through `sanitizeAuthorCss`.
+                        //
+                        // Nothing this used to refuse is now allowed. `sanitizeAuthorHtml`
+                        // is a strict SUBSET of the DOMPurify config it replaces, and that
+                        // is measured rather than asserted: `rich-text-hydration.spec.tsx`
+                        // holds this exact former config as `referenceShowHtmlPurify` and
+                        // runs the shared corpus through both. So the change is only in
+                        // what it ADDITIONALLY refuses:
+                        //
+                        //  - `style` now gets the CSS rule — `http:` and unknown-scheme
+                        //    `url()` neutered to `about:invalid`, and `@import`,
+                        //    `expression()`, `behavior:` and `-moz-binding` dropping the
+                        //    declaration whole. Character references are decoded BEFORE
+                        //    the scheme is judged, which the old config did not do: it
+                        //    emitted `url(&#104;ttp://…)` as a literal `http://`.
+                        //  - `<form>` stops being an element. The former FORBID_TAGS here
+                        //    listed `script, iframe, object, embed, base` and omitted
+                        //    `form` — alone among this repo's author-HTML configs, both of
+                        //    which forbade it — so a password field on the owner's live
+                        //    page was one paste away.
+                        //
+                        // What is deliberately NOT refused, on either side of the change:
+                        // a third-party `https:` `url()`, and `position:fixed` / `z-index`.
+                        // The first is AGL-1725's actor analysis (the site owner chooses
+                        // recipients for their own visitors); the second is a capability
+                        // the Styles panel already gives the same author as a first-class
+                        // field, so refusing it only here would move nothing.
+                        container.innerHTML = Aglyn.sanitizeAuthorHtml(step.html);
+                        document.body.appendChild(container);
+                    } else if (step.type === 'runJs') {
+                        // Business-gated server-side (dropped from props otherwise);
+                        // the site owner's own code running on their own page.
+                        // eslint-disable-next-line no-new-func
+                        new Function(step.code)();
+                    } else if (step.type === 'redirect') {
+                        // Screen targets resolve through the routing map (AGL-339) so
+                        // slug renames never break the interaction; url is the manual
+                        // fallback.
+                        const screenSlug = step.screenId != null ? screens == null ? void 0 : screens[step.screenId] : undefined;
+                        const destination = screenSlug != null ? Aglyn.screenRoutePathToUrl(screenSlug) : step.url;
+                        if (destination) window.location.assign(destination);
+                    } else if (step.type === 'showElement' || step.type === 'hideElement' || step.type === 'toggleElement') {
+                        // Element choreography (AGL-562): class-based so "show"
+                        // reveals targets the author started hidden. The tenant page
+                        // ships the hidden-class rule in its SSR HTML; ensure is the
+                        // fallback for other embeddings. Grace delays + Escape/
+                        // outside-click dismissal ride the same step (AGL-589).
+                        Aglyn.ensureElementHiddenStyle();
+                        Aglyn.runElementVisibilityStep(step.type === 'showElement' ? 'show' : step.type === 'hideElement' ? 'hide' : 'toggle', // Expand so a show/hide/toggle authored against the raw
+                        // canvas id still reaches the layout-composed node (AGL-573).
+                        Aglyn.expandLeafSelector(step.selector), {
+                            delayMs: step.delayMs,
+                            dismissOn: step.dismissOn
+                        });
+                    } else if (step.type === 'openDrawer' || step.type === 'closeDrawer' || step.type === 'toggleDrawer') {
+                        // Drawer commands (AGL-562) ride the window event bus; the
+                        // muiDrawer element answers (first drawer for broadcasts).
+                        Aglyn.dispatchDrawerCommand(step.type === 'openDrawer' ? 'open' : step.type === 'closeDrawer' ? 'close' : 'toggle', step.drawerNodeId || undefined);
+                    } else if (step.type === 'openMenu' || step.type === 'closeMenu' || step.type === 'toggleMenu') {
+                        // Menu commands (AGL-568) ride their own event bus like
+                        // drawers; the nav-menu elements answer (first menu for
+                        // broadcasts). A hover-enter trigger stamps the hover flag
+                        // so a menu opened this way closes itself when the pointer
+                        // leaves the trigger + panel surface.
+                        Aglyn.dispatchMenuCommand(step.type === 'openMenu' ? 'open' : step.type === 'closeMenu' ? 'close' : 'toggle', step.menuNodeId || undefined, {
+                            hover: automation.event === 'elementHoverEnter'
+                        });
+                    } else if (step.type === 'trackGaEvent') {
+                        // AGL-1587: the name and the params are AUTHORED, which makes
+                        // this the least trustworthy analytics input in the repo — a
+                        // param could carry a form field's value. It goes through the
+                        // shared sanitizer and the reserved-name refusal like everything
+                        // else, never raw gtag.
+                        trackAuthoredEvent(step.eventName, step.params);
+                    } else if (step.type === 'siteAlert') {
+                        var _step_message, _step_severity;
+                        showToast(String((_step_message = step.message) != null ? _step_message : '').slice(0, 300), (_step_severity = step.severity) != null ? _step_severity : 'info');
+                    } else if (step.type === 'showOverlay') {
+                        if (step.overlayId) showOverlayRef.current(step.overlayId);
+                    }
+                } catch (error) {
+                    console.error('automation step failed', error);
+                }
+            }
+        };
+        const fire = (automation)=>{
+            // Repeatable UI choreography (AGL-562): everyTime automations skip
+            // the once-per-pageview gate (explicit caps below still apply).
+            if (!automation.everyTime) {
+                if (fired.has(automation.id)) return;
+                fired.add(automation.id);
+            }
+            // Once per visitor (AGL-266): a persisted flag outlives the pageview.
+            if (automation.oncePerVisitor) {
+                const key = `aglyn:auto:${automation.id}`;
+                try {
+                    if (localStorage.getItem(key)) return;
+                    localStorage.setItem(key, '1');
+                } catch (unused) {
+                // Storage unavailable — degrade to once per pageview.
+                }
+            } else if (automation.oncePerSession) {
+                // Once per session (AGL-274): survives navigation, not the tab.
+                const key = `aglyn:auto:${automation.id}`;
+                try {
+                    if (sessionStorage.getItem(key)) return;
+                    sessionStorage.setItem(key, '1');
+                } catch (unused) {
+                // Storage unavailable — degrade to once per pageview.
+                }
+            } else if (automation.cooldownMinutes) {
+                // Cooldown (AGL-274): a timestamp gates re-fires for the visitor.
+                const key = `aglyn:auto:${automation.id}:at`;
+                try {
+                    var _localStorage_getItem;
+                    const last = Number((_localStorage_getItem = localStorage.getItem(key)) != null ? _localStorage_getItem : 0);
+                    if (last && Date.now() - last < automation.cooldownMinutes * 60000) {
+                        return;
+                    }
+                    localStorage.setItem(key, String(Date.now()));
+                } catch (unused) {
+                // Storage unavailable — degrade to once per pageview.
+                }
+            }
+            runClientSteps(automation);
+            if (automation.hasServerSteps) {
+                void fetch('/api/events/dispatch', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        hostId,
+                        actionId: automation.id,
+                        event: automation.event,
+                        payload: {
+                            path: window.location.pathname
+                        }
+                    }),
+                    keepalive: true
+                }).catch(()=>undefined);
+            }
+        };
+        /**
+     * Elements that arrive AFTER this effect binds (AGL-2512).
+     *
+     * `elementVisible` and `scrollToElement` are the only two triggers that
+     * resolve their targets by querying the DOM — every other one listens on
+     * `document` and so needs no element to exist yet. A single query at bind
+     * time made them dead on the two pages where the tree lands late: a
+     * deferred lazy panel patched back in on interaction (AGL-1285), and a
+     * gated screen's tree swapped in once the visitor is past the gate
+     * (AGL-2510).
+     *
+     * One MutationObserver for all of them, not one each, and it stops the
+     * moment nothing is left watching — these triggers fire once per pageview
+     * by construction, so a page whose targets have all been seen pays
+     * nothing for the rest of the visit. A page with no such automation never
+     * starts one at all.
+     */ const pendingObservers = [];
+        let domObserver = null;
+        const rescan = ()=>{
+            for (const attach of [
+                ...pendingObservers
+            ])attach();
+            if (!pendingObservers.length) {
+                domObserver == null ? void 0 : domObserver.disconnect();
+                domObserver = null;
+            }
+        };
+        const watchLateElements = (attach)=>{
+            pendingObservers.push(attach);
+            if (domObserver || typeof MutationObserver === 'undefined') return;
+            domObserver = new MutationObserver(rescan);
+            domObserver.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+        };
+        const stopWatching = (attach)=>{
+            const index = pendingObservers.indexOf(attach);
+            if (index >= 0) pendingObservers.splice(index, 1);
+            if (!pendingObservers.length) {
+                domObserver == null ? void 0 : domObserver.disconnect();
+                domObserver = null;
+            }
+        };
+        cleanups.push(()=>{
+            pendingObservers.length = 0;
+            domObserver == null ? void 0 : domObserver.disconnect();
+            domObserver = null;
+        });
+        for (const automation of automations){
+            const { event, threshold } = automation;
+            // Composition namespaces a node's live `data-aglyn` id, but the
+            // interaction builder records the RAW canvas id in the selector.
+            // Expand it so the trigger still matches the live element — layouts
+            // (AGL-573) and reusable-component grafts (AGL-1229), the latter being
+            // why every interaction authored inside the Site nav bound to nothing.
+            // Hand-typed CSS selectors pass through untouched.
+            const selector = automation.selector ? Aglyn.expandLeafSelector(automation.selector) : automation.selector;
+            if (event === 'pageVisit') {
+                fire(automation);
+            } else if (event === 'timeOnPage') {
+                const timer = setTimeout(()=>fire(automation), Math.max(1, threshold != null ? threshold : 5) * 1000);
+                cleanups.push(()=>clearTimeout(timer));
+            } else if (event === 'scrollDepth') {
+                const onScroll = ()=>{
+                    const doc = document.documentElement;
+                    const max = doc.scrollHeight - window.innerHeight;
+                    const percent = max > 0 ? window.scrollY / max * 100 : 100;
+                    if (percent >= Math.min(100, Math.max(1, threshold != null ? threshold : 50))) {
+                        fire(automation);
+                        window.removeEventListener('scroll', onScroll);
+                    }
+                };
+                window.addEventListener('scroll', onScroll, {
+                    passive: true
+                });
+                cleanups.push(()=>window.removeEventListener('scroll', onScroll));
+            } else if (event === 'elementVisible' || event === 'scrollToElement') {
+                if (!selector) continue;
+                let fired = false;
+                const observer = new IntersectionObserver((entries)=>{
+                    if (fired || !entries.some((entry)=>entry.isIntersecting)) return;
+                    fired = true;
+                    fire(automation);
+                    observer.disconnect();
+                    stopWatching(attachTargets);
+                });
+                // Re-entrant: called again on every DOM change until the trigger
+                // fires, and observing an element twice is a no-op, so a rescan costs
+                // one `querySelectorAll` and nothing else.
+                const attachTargets = ()=>{
+                    if (fired) return stopWatching(attachTargets);
+                    document.querySelectorAll(selector).forEach((target)=>observer.observe(target));
+                };
+                attachTargets();
+                watchLateElements(attachTargets);
+                cleanups.push(()=>observer.disconnect());
+            } else if (event === 'elementClick') {
+                if (!selector) continue;
+                const onClick = (mouseEvent)=>{
+                    var _target_closest;
+                    const target = mouseEvent.target;
+                    if (target == null ? void 0 : (_target_closest = target.closest) == null ? void 0 : _target_closest.call(target, selector)) fire(automation);
+                };
+                document.addEventListener('click', onClick, true);
+                cleanups.push(()=>document.removeEventListener('click', onClick, true));
+            } else if (event === 'elementHoverEnter' || event === 'elementHoverLeave') {
+                // Hover choreography (AGL-562): delegated mouseover/mouseout with
+                // enter/leave semantics — moves WITHIN the matched element (its
+                // own children) never re-fire.
+                if (!selector) continue;
+                const onHover = (mouseEvent)=>{
+                    var _target_closest;
+                    const target = mouseEvent.target;
+                    const match = target == null ? void 0 : (_target_closest = target.closest) == null ? void 0 : _target_closest.call(target, selector);
+                    if (!match) return;
+                    const related = mouseEvent.relatedTarget;
+                    if (related && match.contains(related)) return;
+                    fire(automation);
+                };
+                const type = event === 'elementHoverEnter' ? 'mouseover' : 'mouseout';
+                document.addEventListener(type, onHover, true);
+                cleanups.push(()=>document.removeEventListener(type, onHover, true));
+            } else if (event === 'exitIntent') {
+                const onLeave = (mouseEvent)=>{
+                    if (mouseEvent.clientY <= 0) fire(automation);
+                };
+                document.addEventListener('mouseleave', onLeave);
+                cleanups.push(()=>document.removeEventListener('mouseleave', onLeave));
+            }
+        }
+        return ()=>{
+            for (const cleanup of cleanups)cleanup();
+        };
+    // Automations are static per pageview (ISR props).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        hostId,
+        screens,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        JSON.stringify(automations.map((automation)=>automation.id))
+    ]);
+    return null;
+}
+function AnnouncementBar(props) {
+    const { bar, hostId } = props;
+    const storageKey = `aglyn-abar-${bar.contentHash}`;
+    const [hidden, setHidden] = useState(true);
+    useEffect(()=>{
+        try {
+            setHidden(Boolean(window.localStorage.getItem(storageKey)));
+        } catch (unused) {
+            setHidden(false);
+        }
+    }, [
+        storageKey
+    ]);
+    // Impression (AGL-271): once per pageview, only when actually shown.
+    useEffect(()=>{
+        if (!hidden) sendOverlayBeacon(hostId, 'barImpression', bar.overlayId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        hidden
+    ]);
+    if (hidden) return null;
+    const style = {
+        position: 'relative',
+        zIndex: 1300,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        padding: '8px 40px 8px 16px',
+        fontSize: 14,
+        fontFamily: 'system-ui, sans-serif',
+        textAlign: 'center',
+        color: bar.textColor || '#fff',
+        backgroundColor: bar.backgroundColor || '#111827'
+    };
+    const text = bar.href ? /*#__PURE__*/ _jsx("a", {
+        href: bar.href,
+        onClick: ()=>sendOverlayBeacon(hostId, 'barClick', bar.overlayId),
+        style: {
+            color: 'inherit',
+            textDecoration: 'underline'
+        },
+        children: bar.text
+    }) : /*#__PURE__*/ _jsx("span", {
+        children: bar.text
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        role: "region",
+        "aria-label": "Announcement",
+        style: style,
+        children: [
+            text,
+            bar.dismissible ? /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                "aria-label": "Dismiss announcement",
+                onClick: ()=>{
+                    try {
+                        window.localStorage.setItem(storageKey, '1');
+                    } catch (unused) {
+                    // Storage may be unavailable (private mode); hide anyway.
+                    }
+                    sendOverlayBeacon(hostId, 'barDismiss', bar.overlayId);
+                    setHidden(true);
+                },
+                style: {
+                    position: 'absolute',
+                    right: 8,
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    border: 'none',
+                    background: 'transparent',
+                    color: 'inherit',
+                    fontSize: 16,
+                    lineHeight: 1,
+                    cursor: 'pointer',
+                    padding: 6
+                },
+                children: '✕'
+            }) : null
+        ]
+    });
+}
+/**
+ * Promotional popup (AGL-196). Client owns: schedule-window re-check (the
+ * page is ISR-cached), trigger timing (delay/scroll/exit), and frequency
+ * capping via a per-content-hash localStorage stamp (no cookies). ESC and
+ * backdrop close; reduced-motion preferences skip the entrance ease.
+ */ function PopupOverlay(props) {
+    var _popup_imageAlt;
+    const { popup, hostId } = props;
+    const storageKey = `aglyn-popup-${popup.contentHash}`;
+    const [open, setOpen] = useState(false);
+    // Email capture (AGL-200): submits into the forms pipeline (inbox +
+    // contacts); success suppresses the popup for ~10 years.
+    const [email, setEmail] = useState('');
+    // The honeypot's value, held in state so whatever a bot typed into the
+    // hidden input below is what gets POSTed (AGL-1665). This used to be a
+    // hardcoded `website: ''` in the request body: the route drops a
+    // submission only when the field is NON-empty, so a constant empty string
+    // never failed the check — it removed it. There was no field on the page
+    // to fill and no value a script could set, which made the popup the one
+    // form surface on the site with no honeypot at all.
+    const [website, setWebsite] = useState('');
+    const [submitted, setSubmitted] = useState(false);
+    useEffect(()=>{
+        if (open) sendOverlayBeacon(hostId, 'popupImpression', popup.overlayId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        open,
+        hostId
+    ]);
+    useEffect(()=>{
+        const now = Date.now();
+        if (popup.startAtMs && now < popup.startAtMs) return;
+        if (popup.endAtMs && now > popup.endAtMs) return;
+        try {
+            var _window_localStorage_getItem;
+            // The decision itself is a pure function in the model (AGL-2174) —
+            // which store to read is the whole feature, and it has to agree with
+            // what `close` writes.
+            const suppressed = MarketingModel.popupSuppressed(popup, MarketingModel.popupCapStore(popup) === 'session' ? {
+                sessionFlag: window.sessionStorage.getItem(storageKey)
+            } : {
+                lastShownMs: Number((_window_localStorage_getItem = window.localStorage.getItem(storageKey)) != null ? _window_localStorage_getItem : 0)
+            }, now);
+            if (suppressed) return;
+        } catch (unused) {
+        // Storage unavailable: show at most per-pageview.
+        }
+        let cleanup;
+        if (popup.trigger === 'scroll') {
+            const threshold = Math.min(100, Math.max(0, popup.triggerValue)) / 100;
+            const onScroll = ()=>{
+                const height = document.documentElement.scrollHeight - window.innerHeight;
+                if (height <= 0 || window.scrollY / height >= threshold) {
+                    setOpen(true);
+                }
+            };
+            window.addEventListener('scroll', onScroll, {
+                passive: true
+            });
+            cleanup = ()=>window.removeEventListener('scroll', onScroll);
+        } else if (popup.trigger === 'exit') {
+            const onLeave = (event)=>{
+                if (event.clientY <= 0) setOpen(true);
+            };
+            document.addEventListener('mouseout', onLeave);
+            cleanup = ()=>document.removeEventListener('mouseout', onLeave);
+        } else {
+            const timer = window.setTimeout(()=>setOpen(true), Math.max(0, popup.triggerValue) * 1000);
+            cleanup = ()=>window.clearTimeout(timer);
+        }
+        return cleanup;
+    }, [
+        popup,
+        storageKey
+    ]);
+    const close = (kind = 'popupDismiss')=>{
+        try {
+            // Written to whichever store the cap READS (AGL-2174). Stamping
+            // `localStorage` for a session-capped popup would leave a timestamp
+            // nothing reads, outliving the cap it was meant to record.
+            if (MarketingModel.popupCapStore(popup) === 'session') {
+                window.sessionStorage.setItem(storageKey, '1');
+            } else {
+                window.localStorage.setItem(storageKey, String(Date.now()));
+            }
+        } catch (unused) {
+        // Private mode etc. — closing still works for this pageview.
+        }
+        sendOverlayBeacon(hostId, kind, popup.overlayId);
+        setOpen(false);
+    };
+    const handleEmailSubmit = async ()=>{
+        const value = email.trim();
+        if (!value || submitted) return;
+        try {
+            const response = await fetch('/api/forms/submit', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(_extends({
+                    hostId,
+                    // The door this capture comes through (AGL-3029): the popup is a
+                    // Marketing element, so a site that switched Forms off still
+                    // collects the address it shows the popup for.
+                    door: 'popup',
+                    formName: 'Popup',
+                    fields: {
+                        email: value
+                    },
+                    path: window.location.pathname,
+                    // Submitted AS-IS (AGL-1665) — the point of a honeypot is that the
+                    // client never judges it. `libs/plugins/mui/.../form.tsx` reads its
+                    // own hidden `website` input off the FormData and forwards it the
+                    // same way; `/api/forms/submit` is the single place that decides.
+                    website
+                }, campaignTouchField()))
+            });
+            // The popup's email capture is a lead, and it reported none: an
+            // announcement popup is often a site's highest-converting capture, and
+            // the merchant saw the impression and the dismiss (`aglyn_overlay`) with
+            // nothing in between. The generic form block has sent `generate_lead`
+            // since AGL-1561; this door was simply never wired to it.
+            //
+            // Gated on `response.ok`, unlike the visitor-facing thank-you below.
+            // The two disagree deliberately: a spam-refused or rate-limited capture
+            // is still shown the thank-you — telling a real visitor to try again
+            // after a honeypot verdict would leak the honeypot — but it is NOT a
+            // lead, and counting it would inflate the only number the merchant uses
+            // to judge whether the popup is worth interrupting people with.
+            //
+            // `form_name` is the block's own name, matching the `formName` on the
+            // wire; the address the visitor just typed never leaves this function.
+            if (response.ok) {
+                trackEvent('generate_lead', {
+                    form_name: 'Popup',
+                    form_location: window.location.pathname
+                });
+            }
+        } catch (unused) {
+        // Best-effort — still thank the visitor.
+        }
+        setSubmitted(true);
+        try {
+            // Far-future stamp: a successful capture never re-prompts.
+            window.localStorage.setItem(storageKey, String(Date.now() + 315360000000));
+        } catch (unused) {
+        // Ignore.
+        }
+    };
+    useEffect(()=>{
+        if (!open) return;
+        const onKey = (event)=>{
+            if (event.key === 'Escape') close();
+        };
+        document.addEventListener('keydown', onKey);
+        return ()=>document.removeEventListener('keydown', onKey);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        open
+    ]);
+    if (!open) return null;
+    return /*#__PURE__*/ _jsx("div", {
+        onClick: ()=>close(),
+        style: {
+            position: 'fixed',
+            inset: 0,
+            zIndex: 2147483200,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            padding: 16
+        },
+        children: /*#__PURE__*/ _jsxs("div", {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": popup.headline || 'Announcement',
+            onClick: (event)=>event.stopPropagation(),
+            style: {
+                maxWidth: 420,
+                width: '100%',
+                background: '#fff',
+                color: '#111827',
+                borderRadius: 12,
+                overflow: 'hidden',
+                boxShadow: '0 24px 64px rgba(0, 0, 0, 0.35)',
+                fontFamily: 'system-ui, sans-serif',
+                position: 'relative'
+            },
+            children: [
+                /*#__PURE__*/ _jsx("button", {
+                    type: "button",
+                    "aria-label": "Close",
+                    onClick: ()=>close(),
+                    style: {
+                        position: 'absolute',
+                        top: 8,
+                        right: 8,
+                        border: 'none',
+                        background: 'rgba(255, 255, 255, 0.85)',
+                        borderRadius: '50%',
+                        width: 28,
+                        height: 28,
+                        cursor: 'pointer',
+                        fontSize: 14,
+                        lineHeight: 1
+                    },
+                    children: '✕'
+                }),
+                popup.imageUrl && !Aglyn.isRefusedAuthorImageSrc(popup.imageUrl) ? // eslint-disable-next-line @next/next/no-img-element
+                /*#__PURE__*/ _jsx("img", {
+                    src: popup.imageUrl,
+                    // AGL-1896. This was a hardcoded `alt=""` with no field behind
+                    // it. Still empty when the author left it empty — a decorative
+                    // banner beside its own headline is the case `alt=""` exists for
+                    // — but it is now their choice rather than ours, and picking the
+                    // image from the library fills it in from the asset.
+                    alt: (_popup_imageAlt = popup.imageAlt) != null ? _popup_imageAlt : '',
+                    style: {
+                        width: '100%',
+                        maxHeight: 200,
+                        objectFit: 'cover',
+                        display: 'block'
+                    }
+                }) : null,
+                /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        padding: 24,
+                        textAlign: 'center'
+                    },
+                    children: [
+                        popup.headline ? /*#__PURE__*/ _jsx("h2", {
+                            style: {
+                                margin: '0 0 8px',
+                                fontSize: 20
+                            },
+                            children: popup.headline
+                        }) : null,
+                        /*#__PURE__*/ _jsx("p", {
+                            style: {
+                                margin: 0,
+                                fontSize: 14,
+                                whiteSpace: 'pre-wrap'
+                            },
+                            children: popup.body
+                        }),
+                        popup.collectEmail ? /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                marginTop: 16
+                            },
+                            children: submitted ? /*#__PURE__*/ _jsx("p", {
+                                style: {
+                                    margin: 0,
+                                    fontSize: 14,
+                                    fontWeight: 600
+                                },
+                                children: 'Thanks — you are on the list!'
+                            }) : /*#__PURE__*/ _jsxs("form", {
+                                onSubmit: (event)=>{
+                                    event.preventDefault();
+                                    void handleEmailSubmit();
+                                },
+                                style: {
+                                    display: 'flex',
+                                    gap: 8,
+                                    justifyContent: 'center'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "email",
+                                        required: true,
+                                        placeholder: "you@example.com",
+                                        // Same nameless-input defect as the newsletter block
+                                        // (AGL-2392). A popup is modal-ish and arrives unbidden,
+                                        // so a screen-reader user meets this field with no
+                                        // surrounding context at all.
+                                        "aria-label": "Email address",
+                                        value: email,
+                                        onChange: (event)=>setEmail(event.target.value),
+                                        style: {
+                                            flex: 1,
+                                            maxWidth: 240,
+                                            padding: '8px 12px',
+                                            borderRadius: 8,
+                                            border: '1px solid #d1d5db',
+                                            fontSize: 14
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx("input", {
+                                        type: "text",
+                                        name: "website",
+                                        tabIndex: -1,
+                                        autoComplete: "off",
+                                        "aria-hidden": "true",
+                                        value: website,
+                                        onChange: (event)=>setWebsite(event.target.value),
+                                        style: {
+                                            position: 'absolute',
+                                            left: '-5000px',
+                                            height: 0,
+                                            width: 0
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx("button", {
+                                        type: "submit",
+                                        style: {
+                                            padding: '8px 16px',
+                                            borderRadius: 8,
+                                            border: 'none',
+                                            background: '#111827',
+                                            color: '#fff',
+                                            fontSize: 14,
+                                            cursor: 'pointer'
+                                        },
+                                        children: 'Sign up'
+                                    })
+                                ]
+                            })
+                        }) : null,
+                        popup.ctaHref && popup.ctaLabel ? /*#__PURE__*/ _jsx("a", {
+                            href: popup.ctaHref,
+                            onClick: ()=>close('popupClick'),
+                            style: {
+                                display: 'inline-block',
+                                marginTop: 16,
+                                padding: '10px 24px',
+                                borderRadius: 8,
+                                background: '#111827',
+                                color: '#fff',
+                                textDecoration: 'none',
+                                fontSize: 14
+                            },
+                            children: popup.ctaLabel
+                        }) : null
+                    ]
+                })
+            ]
+        })
+    });
+}
+/**
+ * The marketing plugin's site runtime (AGL-419), relocated verbatim from
+ * the tenant catch-all: announcement bar + popup rendering (AGL-195/200),
+ * the experiments runner (AGL-253), the site-event automations engine
+ * (AGL-256/257), and automation-triggered overlays. Reads back exactly the
+ * page-props slices its server enricher wrote (site-contract shapes).
+ */ export function MarketingSiteRuntime({ hostId, screens, page }) {
+    var _page_experiments, _page_clientAutomations, _automationOverlay_popup_frequencyDays;
+    var _page_data, _automationOverlay_bar, _automationOverlay_popup;
+    const [automationOverlay, setAutomationOverlay] = useState(null);
+    const announcementBar = page['announcementBar'];
+    const popup = page['popup'];
+    const experiments = (_page_experiments = page['experiments']) != null ? _page_experiments : [];
+    const clientAutomations = (_page_clientAutomations = page['clientAutomations']) != null ? _page_clientAutomations : [];
+    const automationOverlays = page['automationOverlays'];
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            announcementBar ? /*#__PURE__*/ _jsx(AnnouncementBar, {
+                bar: announcementBar,
+                hostId: hostId
+            }) : null,
+            popup ? /*#__PURE__*/ _jsx(PopupOverlay, {
+                popup: popup,
+                hostId: hostId
+            }) : null,
+            experiments.length ? /*#__PURE__*/ _jsx(ExperimentsRunner, {
+                hostId: hostId,
+                experiments: experiments,
+                consentHost: (_page_data = page['data']) == null ? void 0 : _page_data.host
+            }) : null,
+            clientAutomations.length ? /*#__PURE__*/ _jsx(AutomationsEngine, {
+                hostId: hostId,
+                automations: clientAutomations,
+                screens: screens,
+                onShowOverlay: (overlayId)=>{
+                    const overlay = automationOverlays == null ? void 0 : automationOverlays[overlayId];
+                    if (overlay) setAutomationOverlay(_extends({
+                        id: overlayId
+                    }, overlay));
+                }
+            }) : null,
+            (automationOverlay == null ? void 0 : automationOverlay.kind) === 'bar' && ((_automationOverlay_bar = automationOverlay.bar) == null ? void 0 : _automationOverlay_bar.text) ? /*#__PURE__*/ _jsx(AnnouncementBar, {
+                bar: _extends({}, automationOverlay.bar, {
+                    text: String(automationOverlay.bar.text),
+                    dismissible: automationOverlay.bar.dismissible !== false,
+                    contentHash: `automation-${automationOverlay.id}`
+                }),
+                hostId: hostId
+            }) : null,
+            (automationOverlay == null ? void 0 : automationOverlay.kind) === 'popup' && ((_automationOverlay_popup = automationOverlay.popup) == null ? void 0 : _automationOverlay_popup.body) ? /*#__PURE__*/ _jsx(PopupOverlay, {
+                popup: _extends({}, automationOverlay.popup, {
+                    body: String(automationOverlay.popup.body),
+                    trigger: 'delay',
+                    triggerValue: 0,
+                    frequencyDays: Math.max(1, Number((_automationOverlay_popup_frequencyDays = automationOverlay.popup.frequencyDays) != null ? _automationOverlay_popup_frequencyDays : 1)),
+                    contentHash: `automation-${automationOverlay.id}`
+                }),
+                hostId: hostId
+            }) : null
+        ]
+    });
+}
+
+//# sourceMappingURL=site-runtime.js.map