@nommos/core 0.0.39 → 0.0.42

package/src/lib/popup-viewer.js

@@ -0,0 +1,920 @@
+import { POPUP_ANCHOR_SELECTOR, POPUP_LAUNCHER_HIDDEN_KEY, POPUP_MOBILE_BREAKPOINT_PX, POPUP_SCHEMA_VERSION, POPUP_SOUND_KEY, } from './constants';
+import { escapeHtml, sanitizeUrl } from './dom-safe';
+import { resolveLanguage } from './i18n';
+const HOST_ID = 'nommos-popup-host';
+const LAUNCHER_HOST_ID = 'nommos-popup-launcher';
+/** Comfortably past the 260ms slide, so the fallback only fires when `animationend` did not. */
+const GHOST_TTL_MS = 500;
+/** Module-level so the "you have more than one anchor" advice is given once per page, not per render. */
+let warnedMultipleAnchors = false;
+/**
+ * Inlined rather than drawn from an icon font: the launcher renders on the *tenant's* origin, where
+ * no font of ours is loaded and any external URL is one more thing that can 404 or trip CORS. The
+ * shape is Bootstrap Icons' `bell-fill`, matching the icon set used elsewhere in the platform.
+ */
+const BELL_ICON = `
+  <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false">
+    <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2m.995-14.901a1 1 0 1 0-1.99 0A5 5 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901"/>
+  </svg>`;
+/**
+ * Chrome copy, following the same shape as `CMP_COPY` in the consent manager.
+ *
+ * <p>Only the frame the SDK draws is translated. The popup body is authored per campaign by the
+ * tenant, so translating it here would overwrite their words — a tenant who wants a French popup
+ * authors a French popup.
+ *
+ * <p>There is deliberately no "cancel" label. Closing already has three affordances — the × chip,
+ * the backdrop and Escape — and a fourth labelled button sat beside the template's own CTAs as a
+ * peer action rather than an escape hatch. `dismiss` is the only chrome action, and it is terminal.
+ */
+const POPUP_COPY = {
+    en: {
+        close: 'Close',
+        dismiss: "Don't show again",
+        prev: 'Previous message',
+        next: 'Next message',
+        dialog: 'Message',
+        hideLauncher: 'Hide messages button',
+        launcher: 'Open messages',
+        launcherUnread: 'Open messages ({count} unread)',
+    },
+    fr: {
+        close: 'Fermer',
+        dismiss: 'Ne plus afficher',
+        prev: 'Message précédent',
+        next: 'Message suivant',
+        dialog: 'Message',
+        hideLauncher: 'Masquer le bouton des messages',
+        launcher: 'Ouvrir les messages',
+        launcherUnread: 'Ouvrir les messages ({count} non lus)',
+    },
+    es: {
+        close: 'Cerrar',
+        dismiss: 'No volver a mostrar',
+        prev: 'Mensaje anterior',
+        next: 'Mensaje siguiente',
+        dialog: 'Mensaje',
+        hideLauncher: 'Ocultar el botón de mensajes',
+        launcher: 'Abrir mensajes',
+        launcherUnread: 'Abrir mensajes ({count} sin leer)',
+    },
+};
+export class PopupViewer {
+    constructor(callbacks) {
+        this.callbacks = callbacks;
+        this.host = null;
+        this.root = null;
+        this.state = 'hidden';
+        this.launcherHost = null;
+        this.launcherRoot = null;
+        /** The element the launcher is currently mounted into. `null` means the floating fallback. */
+        this.anchor = null;
+        this.domObserver = null;
+        this.remountQueued = false;
+        /** Resolved once per viewer: the visitor's language does not change mid-page. */
+        this.copy = POPUP_COPY[resolveLanguage()];
+        this.items = [];
+        /** What is on screen. Only moves once the next popup's content is in hand. */
+        this.index = 0;
+        /**
+         * Where the visitor has navigated to, which runs ahead of {@link index} while a load is in
+         * flight. Without it, two quick taps on `›` both step from the same rendered index and the
+         * second is swallowed.
+         */
+        this.pendingIndex = 0;
+        /** Guards against a slow content load landing after a later move and rewinding the carousel. */
+        this.swapToken = 0;
+        this.lastFocused = null;
+        this.touchStartX = null;
+        this.audio = null;
+        this.onKeyDown = (event) => this.handleKeyDown(event);
+        this.onViewportChange = () => this.renderBodyIfVisible();
+        // `pagehide` rather than `beforeunload`: it fires on mobile backgrounding and is bfcache-safe,
+        // where `beforeunload` is skipped on both.
+        this.onPageHide = () => this.handlePageHide();
+    }
+    // ── Lifecycle ──────────────────────────────────────────────────────────────
+    setItems(items) {
+        this.items = items;
+        this.index = items.length === 0 ? 0 : Math.min(this.index, items.length - 1);
+        // A reordered or shortened inbox invalidates any navigation still in flight.
+        this.pendingIndex = this.index;
+        if (items.length === 0) {
+            // Floating, an empty inbox means there is nothing to be, so remove every trace. Anchored is
+            // different: the tenant reserved a slot in their own header, and vacating it collapses their
+            // layout around the gap. Keep the launcher mounted and let it render its empty state.
+            if (this.resolveAnchor() === null) {
+                this.teardown();
+                return;
+            }
+            this.state = 'hidden';
+            this.root?.getElementById('overlay')?.setAttribute('hidden', '');
+        }
+        this.ensureHost();
+        this.renderLauncher();
+        if (this.state === 'visible') {
+            void this.renderCurrent();
+        }
+    }
+    /** Removes every trace of the viewer. Called on consent revocation and on an empty inbox. */
+    teardown() {
+        if (typeof document !== 'undefined') {
+            document.removeEventListener('keydown', this.onKeyDown);
+        }
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.onViewportChange);
+            window.removeEventListener('orientationchange', this.onViewportChange);
+            window.removeEventListener('pagehide', this.onPageHide);
+        }
+        this.domObserver?.disconnect();
+        this.domObserver = null;
+        this.host?.remove();
+        this.launcherHost?.remove();
+        this.host = null;
+        this.root = null;
+        this.launcherHost = null;
+        this.launcherRoot = null;
+        this.anchor = null;
+        this.state = 'hidden';
+        this.index = 0;
+        this.pendingIndex = 0;
+        this.items = [];
+    }
+    isVisible() {
+        return this.state === 'visible' || this.state === 'opening';
+    }
+    async open(id, trigger) {
+        if (this.items.length === 0 || this.state === 'opening' || this.state === 'closing')
+            return;
+        const target = id === undefined ? 0 : this.items.findIndex((item) => item.id === id);
+        if (target < 0)
+            return;
+        this.index = target;
+        this.pendingIndex = target;
+        this.ensureHost();
+        this.state = 'opening';
+        this.lastFocused = typeof document !== 'undefined' ? document.activeElement : null;
+        // A failed render must not report an open. `close()` cannot undo it either — it early-returns
+        // while the state is still 'opening' — so the abort is handled here, where the state is owned.
+        if (!(await this.renderCurrent())) {
+            this.root?.getElementById('overlay')?.setAttribute('hidden', '');
+            this.state = 'hidden';
+            this.renderLauncher();
+            return;
+        }
+        this.state = 'visible';
+        this.focusDialog();
+        this.callbacks.onOpened(this.items[this.index], trigger);
+    }
+    close() {
+        if (this.state !== 'visible')
+            return;
+        const item = this.items[this.index];
+        this.state = 'closing';
+        const overlay = this.root?.getElementById('overlay');
+        if (overlay)
+            overlay.setAttribute('hidden', '');
+        this.state = 'hidden';
+        this.renderLauncher();
+        if (this.lastFocused instanceof HTMLElement) {
+            this.lastFocused.focus();
+        }
+        // Closing is still not dismissing — the entry stays in the inbox and is never reported as
+        // dismissed — but the launcher only survives while something else is unread. See
+        // renderLauncher.
+        if (item)
+            this.callbacks.onClosed(item);
+    }
+    // ── Rendering ──────────────────────────────────────────────────────────────
+    ensureHost() {
+        if (this.host || typeof document === 'undefined')
+            return;
+        this.host = document.createElement('div');
+        this.host.id = HOST_ID;
+        // `all: initial` blocks inherited properties from the host page; without it a tenant's
+        // `body { font-size: 62.5% }` silently halves every size inside the popup.
+        this.host.setAttribute('style', 'all: initial;');
+        document.body.appendChild(this.host);
+        this.root = this.host.attachShadow({ mode: 'open' });
+        this.root.innerHTML = `<style>${CHROME_CSS}</style><div id="overlay" hidden></div>`;
+        this.root.addEventListener('click', (event) => this.handleClick(event));
+        this.root.addEventListener('touchstart', (event) => this.handleTouchStart(event), { passive: true });
+        this.root.addEventListener('touchend', (event) => this.handleTouchEnd(event), { passive: true });
+        document.addEventListener('keydown', this.onKeyDown);
+        window.addEventListener('resize', this.onViewportChange);
+        window.addEventListener('orientationchange', this.onViewportChange);
+        window.addEventListener('pagehide', this.onPageHide);
+    }
+    handlePageHide() {
+        if (this.state !== 'visible')
+            return;
+        const item = this.items[this.index];
+        if (item)
+            this.callbacks.onAbandoned(item);
+    }
+    /**
+     * The launcher gets a host of its own rather than sharing the modal's.
+     *
+     * <p>It has to, because the two have opposite placement needs. The modal is `position: fixed` and
+     * must resolve against the viewport, but `fixed` resolves against the nearest ancestor carrying a
+     * `transform`, `filter` or `contain` — which sticky headers routinely do. Mounting one shared host
+     * inside a tenant's header would therefore drag the modal in with it and clip it to the header.
+     */
+    ensureLauncherHost() {
+        if (this.launcherHost || typeof document === 'undefined')
+            return;
+        this.launcherHost = document.createElement('div');
+        this.launcherHost.id = LAUNCHER_HOST_ID;
+        this.launcherRoot = this.launcherHost.attachShadow({ mode: 'open' });
+        this.launcherRoot.innerHTML = `<style>${LAUNCHER_CSS}</style><div id="launcher-slot"></div>`;
+        // `handleClick` dispatches on ids and `data-action` and does not care which root the event
+        // came from, so the second root reuses it verbatim.
+        this.launcherRoot.addEventListener('click', (event) => this.handleClick(event));
+        this.observeDom();
+    }
+    /**
+     * @returns the integrator's chosen mount point, or null for the floating fallback.
+     */
+    resolveAnchor() {
+        if (typeof document === 'undefined')
+            return null;
+        const matches = document.querySelectorAll(POPUP_ANCHOR_SELECTOR);
+        if (matches.length > 1 && !warnedMultipleAnchors) {
+            warnedMultipleAnchors = true;
+            // The one place this file deliberately writes to the tenant's console: unlike the autoplay
+            // and storage failures silenced elsewhere, this is an integration mistake only they can fix.
+            console.warn(`[nommos] Multiple ${POPUP_ANCHOR_SELECTOR} elements found. Using the first match.`);
+        }
+        return matches[0] ?? null;
+    }
+    /** Places the launcher host under the current anchor, or under `body` when there is none. */
+    mountLauncher() {
+        if (!this.launcherHost || typeof document === 'undefined')
+            return;
+        const anchor = this.resolveAnchor();
+        const parent = anchor ?? document.body;
+        if (this.anchor === anchor && this.launcherHost.parentNode === parent)
+            return;
+        this.anchor = anchor;
+        if (anchor)
+            this.launcherHost.setAttribute('data-anchored', '');
+        else
+            this.launcherHost.removeAttribute('data-anchored');
+        parent.appendChild(this.launcherHost); // appendChild moves it; no explicit remove needed.
+    }
+    /**
+     * Follows the anchor for the life of the page. A one-shot query at init would almost always miss
+     * it: the SDK boots from a script tag, while an Angular or React tenant renders its header
+     * afterwards. This also covers the anchor being removed or swapped on an SPA route change.
+     *
+     * <p>The callback fires on every DOM change the tenant's app makes, so it must stay cheap — it
+     * only re-resolves and compares, and a burst of mutations collapses into one remount per frame.
+     */
+    observeDom() {
+        if (this.domObserver || typeof MutationObserver === 'undefined')
+            return;
+        this.domObserver = new MutationObserver(() => {
+            if (this.remountQueued)
+                return;
+            this.remountQueued = true;
+            const run = () => {
+                this.remountQueued = false;
+                if (!this.launcherHost)
+                    return;
+                if (this.resolveAnchor() !== this.anchor || !this.launcherHost.isConnected) {
+                    // Re-render rather than just re-parent: the markup differs between the two modes, so a
+                    // move alone would leave an anchored launcher wearing the floating hide chip.
+                    this.renderLauncher();
+                }
+            };
+            if (typeof requestAnimationFrame === 'function')
+                requestAnimationFrame(run);
+            else
+                setTimeout(run, 0);
+        });
+        this.domObserver.observe(document.body, { childList: true, subtree: true });
+    }
+    /**
+     * Whether the launcher shows at all depends on where it lives — the two placements have opposite
+     * defaults, and that is deliberate.
+     *
+     * <p><b>Floating</b> shows only while something is unread. A permanent button parked over
+     * someone else's page with nothing behind it is clutter, so once the visitor has seen everything
+     * it disappears. The cost is real: a read-but-undismissed popup then has no way back for the rest
+     * of the session, short of the host app calling {@link PopupInbox.openViewer}.
+     *
+     * <p><b>Anchored</b> always shows. The tenant deliberately reserved a slot in their own header,
+     * so vacating it leaves a hole their layout collapses around — a flex or grid {@code gap} still
+     * applies to a zero-width item — and a header bell that vanishes reads as broken chrome rather
+     * than as tidiness. Persisting also restores the way back, so a popup closed by accident can be
+     * reopened.
+     */
+    renderLauncher() {
+        this.ensureLauncherHost();
+        this.mountLauncher();
+        const slot = this.launcherRoot?.getElementById('launcher-slot');
+        if (!slot)
+            return;
+        const unread = this.items.filter((item) => item.status !== 'VIEWED').length;
+        const anchored = this.anchor !== null;
+        if (!anchored && (unread === 0 || this.launcherHidden())) {
+            slot.innerHTML = '';
+            return;
+        }
+        // No hide chip when anchored: taking the icon out of the middle of the tenant's own header
+        // leaves a hole in their layout, and the corner-clutter it exists to solve isn't there.
+        const hide = anchored
+            ? ''
+            : `<button id="launcher-hide" data-action="hide-launcher" aria-label="${escapeHtml(this.copy.hideLauncher)}">×</button>`;
+        // With nothing unread there is nothing to draw the eye to, so the badge and the wiggle both
+        // drop away and the bell sits quietly among the tenant's own header icons.
+        const badge = unread > 0 ? `<span id="badge">${escapeHtml(String(unread))}</span>` : '';
+        const attention = unread > 0 ? ' class="np-attention"' : '';
+        const label = unread > 0
+            ? this.copy.launcherUnread.replace('{count}', String(unread))
+            : this.copy.launcher;
+        slot.innerHTML = `
+      <div id="launcher-wrap" part="launcher-wrap">
+        <button id="launcher" part="launcher"${attention} aria-label="${escapeHtml(label)}">
+          ${BELL_ICON}
+          ${badge}
+        </button>
+        ${hide}
+      </div>`;
+    }
+    /**
+     * Hiding is per page session and deliberately weaker than dismissing: it silences the launcher
+     * for a visitor who does not want it in the corner right now, but a genuinely new popup clears
+     * it again (see {@link notifyArrival}) because that is a new reason to be shown.
+     */
+    launcherHidden() {
+        try {
+            return sessionStorage.getItem(POPUP_LAUNCHER_HIDDEN_KEY) === '1';
+        }
+        catch {
+            return false;
+        }
+    }
+    setLauncherHidden(hidden) {
+        try {
+            if (hidden)
+                sessionStorage.setItem(POPUP_LAUNCHER_HIDDEN_KEY, '1');
+            else
+                sessionStorage.removeItem(POPUP_LAUNCHER_HIDDEN_KEY);
+        }
+        catch {
+            /* storage blocked — the launcher simply stays visible */
+        }
+    }
+    /**
+     * A popup arrived while the visitor was already on the page. Without this the only signal is a
+     * small badge appearing in a corner nobody is looking at, so shake the launcher and play a short
+     * chime. Callers suppress it for first load, cache restore and the auto-open path — see
+     * `PopupInbox.refresh`.
+     */
+    notifyArrival() {
+        this.setLauncherHidden(false);
+        this.renderLauncher();
+        const launcher = this.launcherRoot?.getElementById('launcher');
+        if (launcher) {
+            launcher.classList.add('np-shake');
+            launcher.addEventListener('animationend', () => launcher.classList.remove('np-shake'), {
+                once: true,
+            });
+        }
+        this.launcherRoot?.getElementById('badge')?.classList.add('np-pulse');
+        this.chime();
+    }
+    /**
+     * Synthesised rather than loaded from a file: a popup renders on the *tenant's* origin, so any
+     * asset URL is one more thing that can 404 or trip CORS on someone else's domain.
+     *
+     * <p>Autoplay policy blocks audio until the page has had a user gesture. If the context is
+     * suspended we skip silently instead of calling `resume()` — the shake already carries the
+     * signal, and a warning in the tenant's console would be noise they cannot act on.
+     */
+    chime() {
+        if (!PopupViewer.soundEnabled())
+            return;
+        try {
+            const Ctor = window
+                .AudioContext ??
+                window.webkitAudioContext;
+            if (!Ctor)
+                return;
+            this.audio ?? (this.audio = new Ctor());
+            const ctx = this.audio;
+            if (ctx.state === 'suspended')
+                return;
+            const gain = ctx.createGain();
+            gain.connect(ctx.destination);
+            gain.gain.setValueAtTime(0.0001, ctx.currentTime);
+            gain.gain.exponentialRampToValueAtTime(0.18, ctx.currentTime + 0.02);
+            gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.28);
+            [880, 1320].forEach((frequency, i) => {
+                const osc = ctx.createOscillator();
+                osc.type = 'sine';
+                osc.frequency.value = frequency;
+                osc.connect(gain);
+                osc.start(ctx.currentTime + i * 0.09);
+                osc.stop(ctx.currentTime + 0.3);
+            });
+        }
+        catch {
+            /* no WebAudio (jsdom, locked-down browser) — the shake is the fallback */
+        }
+    }
+    static soundEnabled() {
+        try {
+            return localStorage.getItem(POPUP_SOUND_KEY) !== '0';
+        }
+        catch {
+            return true;
+        }
+    }
+    static setSoundEnabled(enabled) {
+        try {
+            localStorage.setItem(POPUP_SOUND_KEY, enabled ? '1' : '0');
+        }
+        catch {
+            /* storage blocked — the preference just does not persist */
+        }
+    }
+    /** @returns false when there is nothing renderable, so the caller can abort the open. */
+    async renderCurrent() {
+        const item = this.items[this.index];
+        const overlay = this.root?.getElementById('overlay');
+        if (!item || !overlay)
+            return false;
+        overlay.removeAttribute('hidden');
+        overlay.innerHTML = this.shell(item, '<div class="np-surface np-loading">…</div>');
+        const content = await this.callbacks.loadContent(item.id);
+        if (!content) {
+            // Expired or dismissed elsewhere between the inbox read and the open.
+            this.callbacks.onRenderFailed(item, 'content_unavailable');
+            return false;
+        }
+        overlay.innerHTML = this.shell(item, this.bodyFor(item, content), content);
+        this.applyVariantCss(content);
+        return true;
+    }
+    renderBodyIfVisible() {
+        if (this.state === 'visible')
+            void this.renderCurrent();
+    }
+    /**
+     * Picks the variant by viewport width, falling back to whichever one exists — a template with
+     * only a desktop variant should still show on a phone rather than showing nothing.
+     */
+    bodyFor(item, content) {
+        const version = content.schemaVersion ?? POPUP_SCHEMA_VERSION;
+        if (version !== POPUP_SCHEMA_VERSION) {
+            // Degrade rather than misrender: the title and CTAs are shape we still understand.
+            this.callbacks.onRenderFailed(item, `unsupported_schema_${version}`);
+            return `<div class="np-surface np-fallback">${escapeHtml(content.title ?? item.title ?? '')}</div>`;
+        }
+        const mobile = this.isMobileViewport();
+        const chosen = mobile
+            ? content.mobileHtml || content.desktopHtml
+            : content.desktopHtml || content.mobileHtml;
+        return `<div class="np-body">${chosen ?? ''}</div>`;
+    }
+    applyVariantCss(content) {
+        const styleEl = this.root?.getElementById('variant-css');
+        if (!styleEl)
+            return;
+        const mobile = this.isMobileViewport();
+        styleEl.textContent = (mobile
+            ? content.mobileCss || content.desktopCss
+            : content.desktopCss || content.mobileCss) ?? '';
+    }
+    shell(item, body, content) {
+        const title = escapeHtml(content?.title ?? item.title ?? '');
+        const buttons = content?.buttons ?? item.buttons ?? [];
+        const many = this.items.length > 1;
+        const c = this.copy;
+        return `
+      <style id="variant-css"></style>
+      <div class="np-backdrop" data-action="close"></div>
+      <div class="np-modal" role="dialog" aria-modal="true" aria-label="${title || escapeHtml(c.dialog)}" tabindex="-1">
+        <button class="np-chip np-close" data-action="close" aria-label="${escapeHtml(c.close)}">×</button>
+        ${many ? `<button class="np-chip np-nav np-prev" data-action="prev" aria-label="${escapeHtml(c.prev)}">‹</button>` : ''}
+        <div class="np-stage">${body}</div>
+        ${many ? `<button class="np-chip np-nav np-next" data-action="next" aria-label="${escapeHtml(c.next)}">›</button>` : ''}
+        <div class="np-underbar">
+          ${many ? `<div class="np-dots">${this.dotsMarkup()}</div>` : ''}
+          ${this.ctaMarkup(buttons)}
+          <button class="np-dismiss" data-action="dismiss">${escapeHtml(c.dismiss)}</button>
+        </div>
+      </div>`;
+    }
+    ctaMarkup(buttons) {
+        return buttons
+            .map((button, i) => {
+            const url = sanitizeUrl(button.url);
+            if (!url)
+                return '';
+            return `<a class="np-cta" data-action="cta" data-index="${i}" href="${escapeHtml(url)}"
+                   target="_blank" rel="noopener noreferrer">${escapeHtml(button.label)}</a>`;
+        })
+            .join('');
+    }
+    dotsMarkup() {
+        return this.items
+            .map((_, i) => `<span class="np-dot${i === this.index ? ' np-dot-on' : ''}"></span>`)
+            .join('');
+    }
+    isMobileViewport() {
+        return typeof window !== 'undefined' && window.innerWidth < POPUP_MOBILE_BREAKPOINT_PX;
+    }
+    // ── Interaction ────────────────────────────────────────────────────────────
+    /**
+     * One delegated listener covers the chrome and the authored body alike, which is what lets an
+     * ordinary `<a href>` inside a template be attributed without any script in the popup.
+     */
+    handleClick(event) {
+        const path = event.composedPath();
+        const item = this.items[this.index];
+        for (const node of path) {
+            if (!(node instanceof HTMLElement))
+                continue;
+            if (node.id === 'launcher') {
+                void this.open(undefined, 'manual');
+                return;
+            }
+            const action = node.dataset['action'];
+            if (action === 'hide-launcher') {
+                this.setLauncherHidden(true);
+                this.renderLauncher();
+                return;
+            }
+            if (action === 'close') {
+                this.close();
+                return;
+            }
+            if (action === 'dismiss') {
+                if (item)
+                    this.callbacks.onDismissed(item);
+                return;
+            }
+            if (action === 'next' || action === 'prev') {
+                this.move(action);
+                return;
+            }
+            if (action === 'cta' && item) {
+                const index = Number(node.dataset['index'] ?? 0);
+                this.callbacks.onCtaClick(item, index, node.getAttribute('href') ?? '');
+                this.closeAfterFollowing();
+                return; // Navigation proceeds; the event is not cancelled.
+            }
+            if (node.tagName === 'A' && item) {
+                this.callbacks.onLinkClick(item, node.getAttribute('href') ?? '');
+                this.closeAfterFollowing();
+                return;
+            }
+        }
+    }
+    /**
+     * Closes the viewer after a link has been followed, without dismissing.
+     *
+     * <p>Closing rather than dismissing is deliberate and matches the backend, where
+     * {@code recordCtaClick} only marks the popup viewed: a visitor who clicks through has engaged,
+     * not refused, and can reopen the message from the launcher.
+     *
+     * <p>{@link close} hides the overlay rather than detaching it, which is what makes this safe to
+     * call from inside the click. Removing the anchor from the document mid-dispatch can cancel the
+     * navigation it was about to perform; hiding an ancestor cannot.
+     */
+    closeAfterFollowing() {
+        this.close();
+    }
+    /**
+     * Moves the carousel by one, keeping the current popup on screen until the next one is ready.
+     *
+     * <p>This used to re-render the whole modal through {@link renderCurrent}, which tore the shell
+     * down to a loading placeholder before awaiting the content. Content is cached after its first
+     * fetch, so the await almost always resolved on the next microtask — but "almost always" still
+     * paints one frame of collapsed spinner, which is what read as a flicker. Loading first and
+     * swapping second means the visitor never sees an intermediate state.
+     */
+    move(direction) {
+        if (this.items.length < 2 || this.state !== 'visible')
+            return;
+        const from = this.items[this.index];
+        const delta = direction === 'next' ? 1 : -1;
+        // Stepped from the pending position, not the rendered one, so a burst of taps accumulates.
+        const nextIndex = (this.pendingIndex + delta + this.items.length) % this.items.length;
+        const next = this.items[nextIndex];
+        if (!next)
+            return;
+        this.pendingIndex = nextIndex;
+        this.callbacks.onCarouselMove(from, direction);
+        // Spamming the arrows must not let a slow load land after a later one and rewind the carousel.
+        const token = ++this.swapToken;
+        void this.callbacks.loadContent(next.id).then((content) => {
+            if (token !== this.swapToken || this.state !== 'visible')
+                return;
+            if (!content) {
+                // The index deliberately has not moved: a popup that cannot render must not become the
+                // carousel's position, or the dots would point at something the visitor cannot see.
+                // Intent rewinds to match, so the next tap steps from what is actually on screen.
+                this.pendingIndex = this.index;
+                this.callbacks.onRenderFailed(next, 'content_unavailable');
+                return;
+            }
+            this.index = nextIndex;
+            this.swapBody(next, content, direction);
+            this.callbacks.onOpened(next, 'manual');
+        });
+    }
+    /**
+     * Cross-slides the authored body, leaving the chrome untouched.
+     *
+     * <p>Only `.np-stage`'s children change, so the underbar, the chips and the dialog itself never
+     * re-render — the frame stays put while the content moves through it.
+     */
+    swapBody(item, content, direction) {
+        const stage = this.root?.querySelector('.np-stage');
+        if (!stage)
+            return;
+        const template = document.createElement('div');
+        template.innerHTML = this.bodyFor(item, content);
+        const incoming = template.firstElementChild;
+        if (!incoming)
+            return;
+        // Drop any ghost still animating from a previous move, so rapid clicks cannot stack them.
+        stage.querySelectorAll('.np-ghost').forEach((ghost) => ghost.remove());
+        const outgoing = stage.querySelector('.np-body');
+        if (outgoing) {
+            if (this.prefersReducedMotion()) {
+                outgoing.remove();
+            }
+            else {
+                // Sheds `np-body` as it leaves: while it kept the class there were momentarily two bodies,
+                // and everything that reaches for "the body" got the one on its way out.
+                outgoing.classList.remove('np-body');
+                outgoing.classList.add('np-ghost', direction === 'next' ? 'np-leave-left' : 'np-leave-right');
+                const drop = () => outgoing.remove();
+                outgoing.addEventListener('animationend', drop, { once: true });
+                // `animationend` does not fire if the animation never starts or is cancelled — a hidden
+                // tab, a cancelled paint. Without this the ghost would sit over the popup for good.
+                window.setTimeout(drop, GHOST_TTL_MS);
+            }
+        }
+        if (!this.prefersReducedMotion()) {
+            incoming.classList.add(direction === 'next' ? 'np-enter-right' : 'np-enter-left');
+        }
+        stage.appendChild(incoming);
+        // Both bodies share one `<style>`, so during the overlap the outgoing one is briefly styled by
+        // its successor's CSS. Visible only where two templates differ sharply, and the alternative —
+        // a second style element scoped per body — costs more than the artefact it removes.
+        this.applyVariantCss(content);
+        this.syncDots();
+    }
+    /** Repoints the dots without rebuilding them, so the underbar never repaints mid-swipe. */
+    syncDots() {
+        const dots = this.root?.querySelectorAll('.np-dot');
+        dots?.forEach((dot, i) => dot.classList.toggle('np-dot-on', i === this.index));
+    }
+    prefersReducedMotion() {
+        return (typeof window !== 'undefined' &&
+            typeof window.matchMedia === 'function' &&
+            window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+    }
+    handleKeyDown(event) {
+        if (this.state !== 'visible')
+            return;
+        if (event.key === 'Escape') {
+            this.close();
+            return;
+        }
+        if (event.key === 'ArrowRight')
+            this.move('next');
+        if (event.key === 'ArrowLeft')
+            this.move('prev');
+        if (event.key === 'Tab')
+            this.trapFocus(event);
+    }
+    /** Keeps keyboard focus inside the dialog while it is open. */
+    trapFocus(event) {
+        const focusable = this.root?.querySelectorAll('a[href], button:not([disabled]), input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        if (!focusable || focusable.length === 0)
+            return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = this.root?.activeElement;
+        if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    focusDialog() {
+        this.root?.querySelector('.np-modal')?.focus();
+    }
+    handleTouchStart(event) {
+        this.touchStartX = event.touches[0]?.clientX ?? null;
+    }
+    handleTouchEnd(event) {
+        if (this.touchStartX === null || this.items.length < 2)
+            return;
+        const delta = (event.changedTouches[0]?.clientX ?? this.touchStartX) - this.touchStartX;
+        this.touchStartX = null;
+        if (Math.abs(delta) < 50)
+            return;
+        this.move(delta < 0 ? 'next' : 'prev');
+    }
+}
+/**
+ * Chrome only. The authored body brings its own CSS, injected separately into `#variant-css`.
+ *
+ * <h3>Why the modal has no surface of its own</h3>
+ * A popup authored in the CRM editor is already a complete card — its own width, background and
+ * radius. Wrapping it in a fixed-width opaque box painted a white gutter either side of every
+ * popup narrower than 900px. The modal is therefore sized by its content and left transparent, so
+ * what the visitor sees is exactly what the author designed. Only the states the SDK draws itself
+ * — loading, render failure, unsupported schema — carry a surface, because they have no authored
+ * card to sit on.
+ *
+ * <h3>Why the chrome carries its own contrast</h3>
+ * The close chip, the arrows and the underbar all sit against authored content — a white card, a
+ * dark one, a full-bleed photograph. None of them inherit colour or assume a light surface; each
+ * paints a translucent dark fill with a light ring so it stays legible whatever the template does.
+ *
+ * <p>`contain` is `layout style`, not `layout paint style`: paint containment clips to the border
+ * box, and the modal is sized by its content, so anything the chrome overhangs would be swallowed.
+ */
+const CHROME_CSS = `
+  :host { all: initial; }
+  .np-backdrop {
+    position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 2147483646;
+  }
+  .np-modal {
+    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
+    width: auto; min-width: min(320px, 92vw); max-width: min(900px, 92vw);
+    max-height: min(760px, 90dvh);
+    display: flex; flex-direction: column; overflow: visible;
+    background: transparent; z-index: 2147483647;
+    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+    contain: layout style;
+  }
+  @media (max-width: 767px) {
+    .np-modal { width: 96vw; max-width: 96vw; max-height: 90dvh; }
+  }
+  /* Positioned so the outgoing body can be lifted out of flow and slide across without the stage
+     stretching to hold both at once. */
+  .np-stage { position: relative; display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
+  .np-body { overflow: auto; flex: 1 1 auto; }
+  /* Out of flow, so the stage sizes to the incoming body alone. */
+  .np-ghost {
+    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
+  }
+  .np-enter-right { animation: np-in-right 260ms cubic-bezier(.22,.61,.36,1) both; }
+  .np-enter-left  { animation: np-in-left  260ms cubic-bezier(.22,.61,.36,1) both; }
+  .np-leave-left  { animation: np-out-left  260ms cubic-bezier(.55,.06,.68,.19) both; }
+  .np-leave-right { animation: np-out-right 260ms cubic-bezier(.55,.06,.68,.19) both; }
+  @keyframes np-in-right {
+    from { transform: translateX(28%); opacity: 0; }
+    to   { transform: translateX(0);   opacity: 1; }
+  }
+  @keyframes np-in-left {
+    from { transform: translateX(-28%); opacity: 0; }
+    to   { transform: translateX(0);    opacity: 1; }
+  }
+  @keyframes np-out-left {
+    from { transform: translateX(0);    opacity: 1; }
+    to   { transform: translateX(-28%); opacity: 0; }
+  }
+  @keyframes np-out-right {
+    from { transform: translateX(0);   opacity: 1; }
+    to   { transform: translateX(28%); opacity: 0; }
+  }
+  .np-surface { background: #fff; border-radius: 12px; padding: 24px; }
+  .np-fallback { font-size: 18px; text-align: center; }
+  .np-loading { text-align: center; color: #888; }
+  /* The chips sit over authored content we do not control, so they carry their own contrast: a
+     dark translucent fill with a light ring reads on a white card, a dark one and a photograph
+     alike. Inheriting or assuming a light surface breaks on half the templates a tenant can
+     author. */
+  .np-chip {
+    position: absolute; z-index: 1; padding: 0; cursor: pointer;
+    background: rgba(15,23,42,.62); color: #fff;
+    border: 1px solid rgba(255,255,255,.38); border-radius: 50%;
+    box-shadow: 0 2px 10px rgba(0,0,0,.3);
+    display: flex; align-items: center; justify-content: center;
+    font-family: inherit; line-height: 1;
+  }
+  /* Inside the card's own corner rather than hanging off it: outside, the chip lands on the
+     tenant's page and reads as page furniture instead of part of the popup. */
+  .np-close { top: 10px; right: 10px; width: 30px; height: 30px; font-size: 18px; }
+  .np-nav { top: 50%; transform: translateY(-50%); width: 34px; height: 34px; font-size: 20px; }
+  .np-prev { left: 10px; }
+  .np-next { right: 10px; }
+  /* Attached to the card rather than floating below it: with no surface of its own the chrome
+     reads as stray page content, especially over a busy host page. */
+  .np-underbar {
+    display: flex; gap: 12px; align-items: center; justify-content: space-between;
+    flex-wrap: wrap; flex: 0 0 auto;
+    padding: 12px 18px;
+    background: rgba(15,23,42,.72); border-radius: 0 0 14px 14px;
+  }
+  /* Nothing to separate when the row holds a single control, so it centres instead. */
+  .np-underbar:has(> :only-child) { justify-content: center; }
+  .np-cta {
+    padding: 10px 18px; border-radius: 8px; background: #fff; color: #111;
+    text-decoration: none; font-size: 14px;
+  }
+  .np-dismiss {
+    background: transparent; border: 0; color: rgba(255,255,255,.78);
+    font-size: 13px; cursor: pointer; text-decoration: underline; font-family: inherit;
+    padding: 0;
+  }
+  .np-dots { display: flex; gap: 6px; align-items: center; }
+  .np-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); }
+  .np-dot-on { background: #fff; }
+  @media (prefers-reduced-motion: reduce) {
+    .np-modal, .np-backdrop { transition: none !important; animation: none !important; }
+    /* Belt and braces: swapBody already skips the classes, but a body inserted before the media
+       query is re-evaluated must not animate either. */
+    .np-body { animation: none !important; }
+  }
+`;
+/**
+ * Launcher chrome, in its own shadow root on its own host — see {@link PopupViewer.mountLauncher}
+ * for why the launcher cannot share the modal's host.
+ *
+ * <p>The `@keyframes` below have to live here rather than in {@link CHROME_CSS}: keyframe names
+ * resolve per shadow root, so a rule in one root cannot reference an animation declared in another.
+ */
+const LAUNCHER_CSS = `
+  :host { all: initial; }
+  /* \`all: initial\` computes \`display: inline\`, which would collapse the button's box when the
+     host sits in the tenant's own flow. Only the anchored case needs the correction — floating
+     positions the wrap absolutely, so the host's own display never matters there.
+
+     \`color\` is deliberately let back in past that same reset, and only here: an anchored launcher
+     has no surface of its own, so the glyph has to take the tenant's own text colour or it would
+     be invisible on a dark header. Higher specificity than the \`:host\` reset above, so it wins. */
+  :host([data-anchored]) { display: inline-block; vertical-align: middle; color: inherit; }
+  /* The wrap carries the position so the hide chip has something to anchor to; the button keeps
+     its own \`part\` so a tenant can restyle either half from their page. Bottom-LEFT by default —
+     bottom-right is where our own chatbot embed and most third-party widgets live. */
+  #launcher-wrap { position: fixed; left: 20px; bottom: 20px; z-index: 2147483645; }
+  /* Anchored: hand positioning back to the tenant's layout. The badge still lands on the button's
+     corner because the button itself stays \`position: relative\`. */
+  :host([data-anchored]) #launcher-wrap { position: static; }
+  /* \`box-sizing\` and \`padding\` are explicit because the UA button stylesheet otherwise adds its
+     own padding outside a content-box width, inflating the circle past the size set here. */
+  #launcher {
+    position: relative; box-sizing: border-box; padding: 0;
+    display: flex; align-items: center; justify-content: center;
+    width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
+    background: #111; color: #fff; font-size: 22px;
+  }
+  /* Sized in \`em\` so the bell follows the button down to its smaller anchored size. */
+  #launcher svg { width: 1.1em; height: 1.1em; display: block; }
+  /* Anchored, the launcher is one icon among the tenant's own header actions, not a widget sitting
+     on top of their page: it drops the dark disc entirely and takes their text colour, so it
+     inherits their theme instead of imposing ours. The glyph runs larger than the floating
+     \`1.1em\` would give at this size, because without a surface behind it there is nothing to
+     anchor the eye. The badge keeps its red, which is the one thing that must not blend in. */
+  :host([data-anchored]) #launcher {
+    width: 36px; height: 36px; font-size: 20px;
+    background: transparent; color: inherit;
+  }
+  #badge {
+    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
+    border-radius: 10px; background: #e5484d; color: #fff; font-size: 12px; line-height: 20px;
+  }
+  #launcher-hide {
+    position: absolute; top: -6px; left: -6px; width: 18px; height: 18px;
+    border-radius: 50%; border: 0; cursor: pointer; padding: 0;
+    background: #555; color: #fff; font-size: 12px; line-height: 18px;
+  }
+  /* Rings continuously for as long as anything is unread — the launcher only exists in that
+     state, so there is no case where this animates over nothing. */
+  #launcher.np-attention { animation: np-wiggle .55s ease-in-out infinite; }
+  #launcher.np-shake { animation: np-shake .6s ease-in-out 1; }
+  #badge.np-pulse { animation: np-pulse .6s ease-out 1; }
+  @keyframes np-wiggle {
+    0%, 100% { transform: rotate(-9deg); }
+    50% { transform: rotate(9deg); }
+  }
+  @keyframes np-shake {
+    0%, 100% { transform: rotate(0deg) scale(1); }
+    15%, 45%, 75% { transform: rotate(-12deg) scale(1.08); }
+    30%, 60%, 90% { transform: rotate(12deg) scale(1.08); }
+  }
+  @keyframes np-pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.5); }
+    100% { transform: scale(1); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    #launcher, #badge { transition: none !important; animation: none !important; }
+  }
+`;
+//# sourceMappingURL=popup-viewer.js.map