@coframe/sdk 1.1.44 → 1.1.45

package/dist/pkg/cf.cjs.js

@@ -37,6 +37,22 @@ if (!Array.prototype.includes) {
         enumerable: false,
     });
 }
+if (!String.prototype.includes) {
+    Object.defineProperty(String.prototype, 'includes', {
+        value: function (search, position) {
+            if (this == null) {
+                throw new TypeError('String.prototype.includes called on null or undefined');
+            }
+            if (search instanceof RegExp) {
+                throw new TypeError('First argument to String.prototype.includes must not be a regular expression');
+            }
+            return String(this).indexOf(search, position) !== -1;
+        },
+        writable: true,
+        configurable: true,
+        enumerable: false,
+    });
+}
 if (!Array.prototype.flatMap) {
     Object.defineProperty(Array.prototype, 'flatMap', {
         value: function (callback, thisArg) {
@@ -1128,7 +1144,7 @@ function warnEventsNotSent() {
     }
 }
 
-const SDK_VERSION = '2.9.0';
+const SDK_VERSION = '2.10.0';
 const queuedEvents = [];
 const queuedMonitoringEvents = [];
 const queuedSessions = [];
@@ -1476,6 +1492,7 @@ const applyUpdateModification = (element, args, logger, logMetadata = {}) => {
     return true;
 };
 const executeJs = (jsCode, args = {}, opts = {}) => {
+    var _a, _b, _c;
     const key = `__cf_${Math.random().toString(36).slice(2, 12)}`;
     const w = window;
     w.Coframe = w.Coframe || {};
@@ -1484,11 +1501,15 @@ const executeJs = (jsCode, args = {}, opts = {}) => {
     if (opts.elementRef) {
         w.Coframe.vars[elKey] = opts.elementRef;
     }
+    const refKeys = Object.keys((_a = opts.refs) !== null && _a !== void 0 ? _a : {});
+    for (const refName of refKeys) {
+        w.Coframe.vars[`${key}_${refName}`] = (_b = opts.refs) === null || _b === void 0 ? void 0 : _b[refName];
+    }
     const invocation = opts.isExpression
         ? `(\n${jsCode}\n)(__args)`
         : opts.elementRef
-            ? `(function(el){\n${jsCode}\n})(__args.el)`
-            : `(function(){\n${jsCode}\n})()`;
+            ? `(function(variantSession){return (function(el){\n${jsCode}\n})(__args.el)})(__args.variantSession)`
+            : `(function(variantSession){return (function(){\n${jsCode}\n})()})(__args.variantSession)`;
     const ranKey = `${key}_ran`;
     const script = document.createElement('script');
     script.id = `coframe-script-${key}`;
@@ -1499,31 +1520,46 @@ const executeJs = (jsCode, args = {}, opts = {}) => {
       try {
         var __args = ${JSON.stringify(args)};
         ${opts.elementRef ? `__args.el = window.Coframe.vars[${JSON.stringify(elKey)}];` : ''}
+        ${refKeys
+        .map((refName) => `__args[${JSON.stringify(refName)}] = window.Coframe.vars[${JSON.stringify(`${key}_${refName}`)}];`)
+        .join('\n        ')}
         window.Coframe.vars[${JSON.stringify(key)}] = ${invocation};
       } catch (e) {
-        window.Coframe.vars[${JSON.stringify(`${key}_err`)}] = (e && (e.stack || e.message)) ? String(e.stack || e.message) : (String(e) || 'Unknown error');
+        var __err = 'Unknown error';
+        try { __err = (e && (e.stack || e.message)) ? String(e.stack || e.message) : (String(e) || __err); } catch (_) {}
+        window.Coframe.vars[${JSON.stringify(`${key}_err`)}] = __err;
       }
       window.Coframe.vars[${JSON.stringify(ranKey)}] = true;
     })();
   `;
-    document.head.appendChild(script);
-    document.head.removeChild(script);
-    const value = w.Coframe.vars[key];
-    const err = w.Coframe.vars[`${key}_err`];
-    const ran = w.Coframe.vars[ranKey];
-    delete w.Coframe.vars[key];
-    delete w.Coframe.vars[`${key}_err`];
-    delete w.Coframe.vars[ranKey];
-    if (opts.elementRef)
-        delete w.Coframe.vars[elKey];
+    let value;
+    let err;
+    let ran;
+    try {
+        document.head.appendChild(script);
+        value = w.Coframe.vars[key];
+        err = w.Coframe.vars[`${key}_err`];
+        ran = w.Coframe.vars[ranKey];
+    }
+    finally {
+        (_c = script.parentNode) === null || _c === void 0 ? void 0 : _c.removeChild(script);
+        delete w.Coframe.vars[key];
+        delete w.Coframe.vars[`${key}_err`];
+        delete w.Coframe.vars[ranKey];
+        if (opts.elementRef)
+            delete w.Coframe.vars[elKey];
+        for (const refName of refKeys) {
+            delete w.Coframe.vars[`${key}_${refName}`];
+        }
+    }
     if (err !== undefined)
-        throw new Error(err);
+        throw new Error(String(err));
     if (!ran) {
         throw new SyntaxError('Failed to parse JavaScript (likely a syntax error in variant code)');
     }
     return value;
 };
-const applyJavascriptModification = (element, args, logger, nonce, logMetadata = {}) => {
+const applyJavascriptModification = (element, args, logger, nonce, logMetadata = {}, refs) => {
     var _a, _b;
     const javascript = args.js;
     try {
@@ -1539,6 +1575,7 @@ const applyJavascriptModification = (element, args, logger, nonce, logMetadata =
         executeJs(javascript, {}, {
             nonce,
             elementRef: isPageElement(element) ? undefined : element,
+            refs,
         });
         return true;
     }
@@ -1546,9 +1583,7 @@ const applyJavascriptModification = (element, args, logger, nonce, logMetadata =
         if (logger === null || logger === void 0 ? void 0 : logger.error) {
             logger.error('Error executing JavaScript:', 'error_execute_js', {
                 ...logMetadata,
-                error: error instanceof Error
-                    ? error.stack || error.message
-                    : String(error),
+                error: error instanceof Error ? error.stack || error.message : String(error),
                 javascript,
                 element: (_b = (_a = element.outerHTML) === null || _a === void 0 ? void 0 : _a.slice(0, 200)) !== null && _b !== void 0 ? _b : element.tagName,
             });
@@ -1838,7 +1873,7 @@ function findLastCmd(predicate, queueName = QueueName.CFQ) {
     }
     return undefined;
 }
-function waitForCmd(predicate, coframe, timeoutMs = 3600000, queueName = QueueName.CFQ) {
+function waitForCmd(predicate, coframe, timeoutMs = 3600000, queueName = QueueName.CFQ, reportTimeout = true) {
     return new Promise((resolve) => {
         const existing = findLastCmd(predicate, queueName);
         if (existing) {
@@ -1853,7 +1888,7 @@ function waitForCmd(predicate, coframe, timeoutMs = 3600000, queueName = QueueNa
         const timer = setTimeout(() => {
             stop();
             const error = new Error(`Timeout waiting for command after ${timeoutMs}ms for:\n${predicate.toString()}`);
-            if ((coframe === null || coframe === void 0 ? void 0 : coframe.projectId) && (coframe === null || coframe === void 0 ? void 0 : coframe.sessionId)) {
+            if ((coframe === null || coframe === void 0 ? void 0 : coframe.projectId) && (coframe === null || coframe === void 0 ? void 0 : coframe.sessionId) && reportTimeout) {
                 reportException({
                     err: error,
                     orgId: coframe.orgId || '',
@@ -1878,6 +1913,42 @@ function subscribeToCmd(predicate, callback, queueName = QueueName.CFQ) {
     return __addListener(predicate, callback, queueName);
 }
 
+function describeError(error) {
+    if (error && (typeof error === 'object' || typeof error === 'function')) {
+        const stack = readString(() => error.stack);
+        const message = readString(() => error.message);
+        const header = readString(() => String(error));
+        const detail = withHeaderLine(stack, header, message);
+        if (detail)
+            return detail;
+    }
+    try {
+        return String(error);
+    }
+    catch (_a) {
+        return 'Unprintable error';
+    }
+}
+function readString(read) {
+    try {
+        const value = read();
+        return typeof value === 'string' ? value : '';
+    }
+    catch (_a) {
+        return '';
+    }
+}
+function withHeaderLine(stack, header, message) {
+    if (!stack)
+        return header || message;
+    if (!header) {
+        return message && stack.indexOf(message) === -1
+            ? `${message}\n${stack}`
+            : stack;
+    }
+    return stack.indexOf(header) === 0 ? stack : `${header}\n${stack}`;
+}
+
 function querySelector(config) {
     const result = findElementsRecursive(config);
     if (result !== null && result.length === 0) {
@@ -1982,7 +2053,11 @@ function variantRendered() {
         emit: 'variantRendered',
     });
 }
-const applyVariantChanges = (variantElements, currentUrl, logger, nonce) => {
+function hasJavascriptModification(variantElements) {
+    const modifications = variantElements.variant.modifications || {};
+    return Object.keys(modifications).some((elementId) => (modifications[elementId] || []).some((modification) => modification.type === 'execute_js'));
+}
+const applyVariantChanges = (variantElements, currentUrl, logger, nonce, lifecycleContext) => {
     var _a;
     const { variant, elements } = variantElements;
     const variantMetadata = {
@@ -1990,12 +2065,18 @@ const applyVariantChanges = (variantElements, currentUrl, logger, nonce) => {
         experiment_id: variant.experiment_id,
     };
     setApplyVariantChangesStarted(true);
+    const session = lifecycleContext && hasJavascriptModification(variantElements)
+        ? lifecycleContext.runtime.createVariantSession({
+            batchId: lifecycleContext.batchId,
+            variantId: variant.id,
+        })
+        : null;
     if (!variant.modifications ||
         Object.keys(variant.modifications).length === 0) {
         variantRendered();
         return true;
     }
-    for (const [elementId, _] of Object.entries(variant.modifications)) {
+    for (const elementId of Object.keys(variant.modifications)) {
         const elementSelectors = elements[elementId];
         let selectedElement = null;
         for (const selector of elementSelectors || []) {
@@ -2010,23 +2091,36 @@ const applyVariantChanges = (variantElements, currentUrl, logger, nonce) => {
                 variant_id: variant.id,
                 experiment_id: variant.experiment_id,
             });
+            if (session &&
+                (variant.modifications[elementId] || []).some((modification) => modification.type === 'execute_js')) {
+                session.facade.error(new Error(`Element not found for JavaScript modification: ${elementId}`));
+            }
             continue;
         }
-        const edited = editElement(selectedElement, variant.modifications, elementId, logger, nonce, variantMetadata);
-        if (edited && selectedElement instanceof HTMLElement) {
-            selectedElement.setAttribute('coframe-exp-id', variant.id);
-        }
-        else {
+        const edited = editElement(selectedElement, variant.modifications, elementId, logger, nonce, variantMetadata, session === null || session === void 0 ? void 0 : session.facade);
+        if (!edited) {
             logger.error('element not edited', 'element_not_edited', {
                 ...variantMetadata,
-                selectedElement,
+                selectedElement: describeElement(selectedElement),
                 elementSelectors,
             });
         }
+        else if (selectedElement instanceof HTMLElement) {
+            selectedElement.setAttribute('coframe-exp-id', variant.id);
+        }
     }
     return true;
 };
-const editElement = (element, modifications, elementId, logger, nonce, logMetadata = {}) => {
+function describeElement(element) {
+    if (!element || typeof element.getAttribute !== 'function') {
+        return String(element);
+    }
+    const target = element;
+    const id = target.getAttribute('id');
+    const className = target.getAttribute('class');
+    return `<${String(target.tagName).toLowerCase()}${id ? ` id=${JSON.stringify(id)}` : ''}${className ? ` class=${JSON.stringify(className)}` : ''}>`.slice(0, 200);
+}
+const editElement = (element, modifications, elementId, logger, nonce, logMetadata = {}, variantSession) => {
     if (!modifications[elementId]) {
         logger.warn('no modifications for element', 'no_modifications_for_element', {
             ...logMetadata,
@@ -2038,7 +2132,11 @@ const editElement = (element, modifications, elementId, logger, nonce, logMetada
     for (const content of modifications[elementId]) {
         switch (content.type) {
             case 'execute_js':
-                applyJavascriptModification(element, content, logger, nonce, logMetadata);
+                if (!applyJavascriptModification(element, content, logger, nonce, logMetadata, variantSession ? { variantSession } : undefined) &&
+                    variantSession) {
+                    variantSession.error(new Error('JavaScript variant modification did not run'));
+                    return false;
+                }
                 break;
             case 'update':
                 applyUpdateModification(element, content, logger, logMetadata);
@@ -2095,13 +2193,16 @@ function revealPage() {
     document.documentElement.style.setProperty('--cf-show', '1');
     document.documentElement.style.setProperty('--cf-visibility', 'visible');
 }
-async function replaceVariants(variants, orgId, logger, nonce) {
+async function replaceVariants(variants, orgId, logger, nonce, runtime) {
     const failedReplacements = [];
     let currentVariant;
+    const batch = runtime === null || runtime === void 0 ? void 0 : runtime.beginBatch({
+        expectedSessionCount: variants.filter(hasJavascriptModification).length,
+    });
     try {
         for (const v of variants) {
             currentVariant = v.variant;
-            if (!applyVariantChanges(v, getCurrentPageUrl(), logger, nonce)) {
+            if (!applyVariantChanges(v, getCurrentPageUrl(), logger, nonce, batch && runtime ? { runtime, batchId: batch.batchId } : undefined)) {
                 failedReplacements.push({
                     message: 'Original element not found',
                     metadata: {
@@ -2115,10 +2216,11 @@ async function replaceVariants(variants, orgId, logger, nonce) {
         }
     }
     catch (error) {
-        const errorMessage = error instanceof Error ? error.stack || error.message : String(error);
+        const errorMessage = describeError(error);
+        const description = errorMessage.split('\n')[0];
         failedReplacements.push({
             metadata: {
-                description: error instanceof Error ? error.toString() : String(error),
+                description,
                 org_id: orgId,
                 variant_id: currentVariant === null || currentVariant === void 0 ? void 0 : currentVariant.id,
                 experiment_id: currentVariant === null || currentVariant === void 0 ? void 0 : currentVariant.experiment_id,
@@ -2126,6 +2228,10 @@ async function replaceVariants(variants, orgId, logger, nonce) {
             message: errorMessage,
         });
     }
+    finally {
+        if (batch && runtime)
+            runtime.closeBatch(batch.batchId);
+    }
     for (const event of failedReplacements) {
         logger.error(event.message, 'failed_replacement', event.metadata);
     }
@@ -2501,7 +2607,8 @@ function urlConditionMatches(conditionUrl, currentUrl, baseUrlMatch, logger) {
     }
 }
 function urlsMatch(conditionUrl, currentUrl, baseUrlMatch) {
-    if (currentUrl.includes('localhost') || currentUrl.includes('0.0.0.0')) {
+    if (currentUrl.indexOf('localhost') !== -1 ||
+        currentUrl.indexOf('0.0.0.0') !== -1) {
         const conditionUrlObj = new URL(conditionUrl);
         const currentUrlObj = new URL(currentUrl);
         const normalizePath = (path) => path.endsWith('/') ? path.slice(0, -1) : path;
@@ -3320,8 +3427,10 @@ function rebindMetrics(coframe, logger, metrics, nonce) {
 }
 
 let lastUrl = null;
-function observeUrlChanges(baseUrlMatch, onUrlChange) {
+function observeUrlChanges(baseUrlMatch, onUrlChange, isActive = () => true) {
     const tryTrack = () => {
+        if (!isActive())
+            return;
         const currentUrl = getCurrentPageUrl();
         const previousUrl = lastUrl;
         if (previousUrl && !urlsMatch(currentUrl, previousUrl, baseUrlMatch)) {
@@ -3345,6 +3454,200 @@ function observeUrlChanges(baseUrlMatch, onUrlChange) {
     patchHistoryMethod('replaceState');
 }
 
+function isVariantRuntimeLifecycleEnabled(config) {
+    return config.deferHydrationWaitToVariant === true;
+}
+function shouldSdkWaitForHydration(config) {
+    return (Boolean(config.waitForHydration) &&
+        !isVariantRuntimeLifecycleEnabled(config));
+}
+
+function createRevealCoordinator(revealPage, reportError = () => { }) {
+    const notify = (listener, reason) => {
+        try {
+            listener(reason);
+        }
+        catch (error) {
+            try {
+                reportError(error);
+            }
+            catch (_a) {
+            }
+        }
+    };
+    let pageRevealed = false;
+    let activeBlockerId = null;
+    let revealedReason = null;
+    const pendingReasons = [];
+    const revealedListeners = new Set();
+    const reveal = (reason) => {
+        if (pageRevealed)
+            return;
+        pageRevealed = true;
+        activeBlockerId = null;
+        pendingReasons.length = 0;
+        revealedReason = reason;
+        let revealError = null;
+        let revealFailed = false;
+        try {
+            revealPage();
+        }
+        catch (error) {
+            revealFailed = true;
+            revealError = error;
+        }
+        for (const listener of Array.from(revealedListeners)) {
+            notify(listener, reason);
+        }
+        if (revealFailed)
+            throw revealError;
+    };
+    return {
+        requestReveal(reason) {
+            if (pageRevealed)
+                return;
+            if (activeBlockerId) {
+                if (!pendingReasons.includes(reason))
+                    pendingReasons.push(reason);
+                return;
+            }
+            reveal(reason);
+        },
+        forceReveal(reason) {
+            reveal(reason);
+        },
+        block(batchId) {
+            if (pageRevealed)
+                return false;
+            activeBlockerId = batchId;
+            return true;
+        },
+        release(batchId, reason) {
+            if (pageRevealed || activeBlockerId !== batchId)
+                return;
+            activeBlockerId = null;
+            reveal(reason);
+        },
+        unblock(batchId) {
+            if (activeBlockerId === batchId)
+                activeBlockerId = null;
+        },
+        flushPending() {
+            if (pageRevealed || activeBlockerId || pendingReasons.length === 0)
+                return;
+            reveal(pendingReasons[0]);
+        },
+        onRevealed(handler) {
+            revealedListeners.add(handler);
+            return () => revealedListeners.delete(handler);
+        },
+        getSnapshot() {
+            return {
+                pageRevealed,
+                activeBlockerId,
+                pendingReasons: [...pendingReasons],
+                revealedReason,
+            };
+        },
+    };
+}
+const logRevealListenerError = (logger) => (error) => logger().error('Page revealed listener failed', 'page_reveal_error', {
+    error: describeError(error),
+});
+
+const createNavigationController = () => {
+    if (typeof AbortController !== 'undefined') {
+        try {
+            const controller = new AbortController();
+            return {
+                signal: controller.signal,
+                abort: () => controller.abort(),
+                native: true,
+            };
+        }
+        catch (_a) {
+        }
+    }
+    const listeners = [];
+    const signal = {
+        aborted: false,
+        reason: undefined,
+        onabort: null,
+        addEventListener: (type, listener) => {
+            if (type === 'abort')
+                listeners.push(listener);
+        },
+        removeEventListener: (type, listener) => {
+            if (type !== 'abort')
+                return;
+            const index = listeners.indexOf(listener);
+            if (index !== -1)
+                listeners.splice(index, 1);
+        },
+    };
+    return {
+        signal: signal,
+        abort: () => {
+            if (signal.aborted)
+                return;
+            signal.aborted = true;
+            signal.reason = new Error('The navigation was aborted');
+            const event = { type: 'abort', target: signal };
+            const call = (listener) => {
+                try {
+                    listener.call(signal, event);
+                }
+                catch (error) {
+                    setTimeout(() => {
+                        throw error;
+                    }, 0);
+                }
+            };
+            if (typeof signal.onabort === 'function')
+                call(signal.onabort);
+            for (const listener of listeners.slice())
+                call(listener);
+        },
+        native: false,
+    };
+};
+const waitForFrame = (capMs, hiddenCapMs) => new Promise((resolve) => {
+    let timer;
+    let done = false;
+    const finish = () => {
+        if (done)
+            return;
+        done = true;
+        if (timer !== undefined)
+            clearTimeout(timer);
+        cancelAnimationFrame(frame);
+        document.removeEventListener('visibilitychange', onVisibilityChange);
+        resolve();
+    };
+    const startTimer = (ms) => {
+        if (timer === undefined)
+            timer = setTimeout(finish, ms);
+    };
+    const onVisibilityChange = () => {
+        if (document.hidden)
+            startTimer(hiddenCapMs);
+        else if (timer !== undefined) {
+            clearTimeout(timer);
+            timer = undefined;
+        }
+    };
+    const frame = requestAnimationFrame(finish);
+    if (capMs !== undefined)
+        startTimer(capMs);
+    else {
+        document.addEventListener('visibilitychange', onVisibilityChange);
+        onVisibilityChange();
+    }
+});
+const HANDOVER_FRAME_CAP_MS = 50;
+const NAVIGATION_FRAME_CAP_MS = 100;
+const shouldSettleRoute = (aborted, threw, result) => !aborted && (threw || result !== 'skipped');
+
 function mergeClientHeaders(client, server) {
     if (server)
         return { ...client, ...server };
@@ -3356,7 +3659,7 @@ function getQueuedPersonalizationHeaders() {
     const nested = (_c = (_b = findLastCmd((c) => !!c.projectData)) === null || _b === void 0 ? void 0 : _b.projectData) === null || _c === void 0 ? void 0 : _c.personalizationHeaders;
     return mergeClientHeaders(topLevel, nested);
 }
-async function resolveProject(Coframe, previewVariantId, isSessionVariant, config) {
+async function resolveProject(Coframe, previewVariantId, isSessionVariant, config, isCurrent = () => true) {
     var _a, _b;
     const logger = Coframe.logger;
     const projectData = (_a = findLastCmd((c) => !!c.projectData)) === null || _a === void 0 ? void 0 : _a.projectData;
@@ -3372,7 +3675,8 @@ async function resolveProject(Coframe, previewVariantId, isSessionVariant, confi
         logger.error('No Coframe Project Config', 'no_project_config', {
             previewVariantId,
         });
-        variantRendered();
+        if (isCurrent())
+            variantRendered();
         return null;
     }
     return {
@@ -3980,26 +4284,32 @@ function resolvePreview(pageUrl, previewVariantId, isSessionVariant) {
     }
     return { previewVariantId: null, isSessionVariant: false };
 }
+const isPageHydratedCmd = (cmd) => cmd.pageHydrated === true || cmd.emit === 'pageHydrated';
 async function awaitHydration(config, Coframe, project) {
     var _a, _b;
-    if (!config.waitForHydration)
+    if (!shouldSdkWaitForHydration(config))
         return true;
     if (!((_a = project.frames) === null || _a === void 0 ? void 0 : _a.length) && !((_b = project.tags) === null || _b === void 0 ? void 0 : _b.length))
         return true;
-    const cmd = await waitForCmd((cmd) => cmd.pageHydrated === true || cmd.emit === 'pageHydrated', Coframe);
+    const cmd = await waitForCmd(isPageHydratedCmd, Coframe);
     if (!cmd) {
         Coframe.logger.warn('Failed to wait for page hydrated command', 'wait_for_cmd_timeout');
         return false;
     }
     return true;
 }
-async function ensureBody(Coframe, cdnProject, timeoutMs, nonce) {
+async function ensureBody(Coframe, cdnProject, timeoutMs, nonce, revealCoordinator, isCurrent) {
     const bodyPresent = await waitForBody(timeoutMs).catch(() => false);
     if (!bodyPresent) {
         Coframe.logger.error('Timeout waiting for document.body, exiting gracefully', 'body_timeout');
-        variantRendered();
+        if (isCurrent()) {
+            variantRendered();
+            revealCoordinator.forceReveal('graceful-exit');
+        }
         return false;
     }
+    if (!isCurrent())
+        return false;
     rebindMetrics(Coframe, Coframe.logger, cdnProject === null || cdnProject === void 0 ? void 0 : cdnProject.metrics, nonce);
     return true;
 }
@@ -4012,7 +4322,13 @@ function setupFlushInterval(Coframe) {
     }
     flushInterval = setInterval(() => flushQueuedEvents(Coframe.projectId), FLUSH_EVENTS_TIME);
 }
-function setupSPANavigation(Coframe, project, config, previewVariantId, isSessionVariant, applyVariants) {
+const hasNoVariants = (Coframe) => !Coframe.variantsAndElements || Coframe.variantsAndElements.length === 0;
+const logNavigationError = (Coframe, message, error) => {
+    Coframe.logger.error(message, 'spa_navigation_error', {
+        error: describeError(error),
+    });
+};
+function setupSPANavigation(Coframe, project, config, previewVariantId, isSessionVariant, runtime, applier, firstViewDeadline, onFirstViewDone) {
     var _a;
     if (!((_a = project === null || project === void 0 ? void 0 : project.settings) === null || _a === void 0 ? void 0 : _a.mutation_observer_active))
         return;
@@ -4037,16 +4353,20 @@ function setupSPANavigation(Coframe, project, config, previewVariantId, isSessio
     const observer = new MutationObserver(mutationCallback);
     observer.observe(document.body, { childList: true, subtree: true });
     let navigationAbortController = null;
-    observeUrlChanges(false, async (newPageUrl, _oldPageUrl) => {
+    const onUrlChange = async (newPageUrl, _oldPageUrl, options = {}) => {
         var _a;
-        sendPageLeave(Coframe);
+        const firstView = !applier.hasCommitted();
+        if (!firstView)
+            sendPageLeave(Coframe);
         if (navigationAbortController)
             navigationAbortController.abort();
-        navigationAbortController = new AbortController();
-        const { signal } = navigationAbortController;
-        await new Promise((resolve) => requestAnimationFrame(resolve));
-        if (signal.aborted)
-            return;
+        runtime === null || runtime === void 0 ? void 0 : runtime.changeRoute(newPageUrl);
+        const controller = createNavigationController();
+        navigationAbortController = controller;
+        const { signal } = controller;
+        await waitForFrame(options.routeAlreadyRendered ? HANDOVER_FRAME_CAP_MS : undefined, NAVIGATION_FRAME_CAP_MS);
+        if (signal.aborted || (runtime === null || runtime === void 0 ? void 0 : runtime.isDestroyed()))
+            return 'skipped';
         infiniteLoopProtection = 0;
         let pageProject = project;
         let pagePersonalizationHeaders = Coframe.personalizationHeaders;
@@ -4062,9 +4382,9 @@ function setupSPANavigation(Coframe, project, config, previewVariantId, isSessio
         else {
             try {
                 const preview = resolvePreview(newPageUrl, previewVariantId, isSessionVariant);
-                const result = await fetchProject(config.projectUrl, Coframe.projectId, newPageUrl, signal, config.userContext, preview.previewVariantId || undefined, undefined, (_a = config.referrer) !== null && _a !== void 0 ? _a : getBrowserReferrer());
-                if (signal.aborted)
-                    return;
+                const result = await fetchProject(config.projectUrl, Coframe.projectId, newPageUrl, controller.native ? signal : undefined, config.userContext, preview.previewVariantId || undefined, undefined, (_a = config.referrer) !== null && _a !== void 0 ? _a : getBrowserReferrer());
+                if (signal.aborted || (runtime === null || runtime === void 0 ? void 0 : runtime.isDestroyed()))
+                    return 'skipped';
                 if (result) {
                     pageProject = result.project;
                     pagePersonalizationHeaders = {
@@ -4077,10 +4397,37 @@ function setupSPANavigation(Coframe, project, config, previewVariantId, isSessio
             catch (_b) {
             }
         }
-        if (signal.aborted)
-            return;
-        await applyVariants(newPageUrl, pageProject, pagePersonalizationHeaders, signal);
-    });
+        if (signal.aborted || (runtime === null || runtime === void 0 ? void 0 : runtime.isDestroyed()))
+            return 'skipped';
+        let result = 'skipped';
+        let threw = false;
+        try {
+            result = await applier.apply(newPageUrl, pageProject, pagePersonalizationHeaders, signal, firstView ? firstViewDeadline : undefined);
+        }
+        catch (error) {
+            threw = true;
+            if (firstView && !signal.aborted && !(runtime === null || runtime === void 0 ? void 0 : runtime.isDestroyed())) {
+                onFirstViewDone === null || onFirstViewDone === void 0 ? void 0 : onFirstViewDone(pageProject);
+            }
+            throw error;
+        }
+        finally {
+            if (shouldSettleRoute(signal.aborted, threw, result)) {
+                runtime === null || runtime === void 0 ? void 0 : runtime.settleRoute();
+            }
+        }
+        if (firstView && result === 'applied' && !(runtime === null || runtime === void 0 ? void 0 : runtime.isDestroyed())) {
+            if (hasNoVariants(Coframe))
+                variantRendered();
+            onFirstViewDone === null || onFirstViewDone === void 0 ? void 0 : onFirstViewDone(pageProject);
+        }
+        return result;
+    };
+    observeUrlChanges(false, (newPageUrl, oldPageUrl) => onUrlChange(newPageUrl).catch((error) => {
+        logNavigationError(Coframe, 'SPA navigation failed', error);
+        return 'skipped';
+    }), () => !(runtime === null || runtime === void 0 ? void 0 : runtime.isDestroyed()));
+    return onUrlChange;
 }
 function readLaneClaims() {
     const cookie = getCookie(LANE_COOKIE_KEY);
@@ -4110,17 +4457,14 @@ function persistLaneClaims(claims, logger) {
         setCookie(LANE_COOKIE_KEY, encodeURIComponent(serialized), logger);
     }
 }
-function createApplyVariants(Coframe, config, previewVariantId, isSessionVariant, executionStartTime, analytics, laneStore) {
+function createApplyVariants(Coframe, config, previewVariantId, isSessionVariant, executionStartTime, analytics, laneStore, runtime) {
     let isFirstApply = true;
     let applicationId = 0;
-    return async (pageUrl, pageProject, personalizationHeaders, signal, deadline) => {
-        var _a;
+    const apply = async (pageUrl, pageProject, personalizationHeaders, signal, deadline) => {
+        var _a, _b;
         const currentApplication = ++applicationId;
         if (signal === null || signal === void 0 ? void 0 : signal.aborted)
-            return;
-        const sessionId = isFirstApply ? Coframe.sessionId : generateUUID();
-        const sessionContext = buildSessionContext(isFirstApply);
-        isFirstApply = false;
+            return 'skipped';
         const preview = resolvePreview(pageUrl, previewVariantId, isSessionVariant);
         const chooseCmabVariants = createCmabVariantBatchChooser({
             projectId: Coframe.projectId,
@@ -4134,8 +4478,22 @@ function createApplyVariants(Coframe, config, previewVariantId, isSessionVariant
         const { variantsAndElements, experimentsInfo, hasActivatedFrames, laneClaims, } = await getVariantsAndElements(personalizationHeaders, pageProject, preview.previewVariantId, Coframe.userToken, pageUrl, getBrowserLanguages(), getBrowserPlatform(), Coframe.logger, config.nonce, laneStore.claims, preview.isSessionVariant, chooseCmabVariants);
         if ((signal === null || signal === void 0 ? void 0 : signal.aborted) ||
             currentApplication !== applicationId ||
+            (runtime === null || runtime === void 0 ? void 0 : runtime.isDestroyed()) ||
             (signal && !urlsMatch(pageUrl, getCurrentPageUrl())))
-            return;
+            return 'skipped';
+        if (!signal &&
+            runtime &&
+            ((_b = pageProject === null || pageProject === void 0 ? void 0 : pageProject.settings) === null || _b === void 0 ? void 0 : _b.mutation_observer_active) &&
+            !urlsMatch(pageUrl, getCurrentPageUrl(), true))
+            return 'stale-route';
+        if (!signal && runtime) {
+            const urlAtCommit = getCurrentPageUrl();
+            if (urlsMatch(pageUrl, urlAtCommit, true))
+                runtime.updateUrl(urlAtCommit);
+        }
+        const sessionId = isFirstApply ? Coframe.sessionId : generateUUID();
+        const sessionContext = buildSessionContext(isFirstApply);
+        isFirstApply = false;
         Coframe.sessionId = sessionId;
         Coframe.personalizationHeaders = personalizationHeaders;
         setIsPreviewVariant(!!preview.previewVariantId);
@@ -4153,7 +4511,9 @@ function createApplyVariants(Coframe, config, previewVariantId, isSessionVariant
             variantRendered();
         }
         else {
-            replaceVariants(variantsAndElements, Coframe.orgId, Coframe.logger, config.nonce);
+            await replaceVariants(variantsAndElements, Coframe.orgId, Coframe.logger, config.nonce, runtime);
+            if (runtime === null || runtime === void 0 ? void 0 : runtime.isDestroyed())
+                return 'skipped';
         }
         const cmabDecisions = chooseCmabVariants.getDecisions(experimentsInfo);
         startSession(Coframe, isCookiesEnabled, executionStartTime, personalizationHeaders, {
@@ -4162,29 +4522,77 @@ function createApplyVariants(Coframe, config, previewVariantId, isSessionVariant
         }, pageUrl);
         analytics.resetBroadcasted();
         analytics.sendAnalytics();
+        return 'applied';
     };
+    return { apply, hasCommitted: () => !isFirstApply };
 }
-async function modifyPage(Coframe, configResult, projectResult, analytics) {
+async function modifyPage(Coframe, configResult, projectResult, analytics, lifecycle) {
+    var _a;
     const { config, timeoutMs, previewVariantId, isSessionVariant, integrationStartTime, executionStartTime, } = configResult;
     const { project: cdnProject, personalizationHeaders } = projectResult;
+    const revealCoordinator = (_a = lifecycle === null || lifecycle === void 0 ? void 0 : lifecycle.revealCoordinator) !== null && _a !== void 0 ? _a : createRevealCoordinator(revealPage, logRevealListenerError(() => Coframe.logger));
+    const runtime = lifecycle === null || lifecycle === void 0 ? void 0 : lifecycle.runtime;
+    if (runtime && config.waitForHydration) {
+        if (findLastCmd(isPageHydratedCmd)) {
+            runtime.publishHydrated();
+        }
+        else {
+            let stopHydration = () => { };
+            stopHydration = subscribeToCmd(isPageHydratedCmd, () => {
+                stopHydration();
+                runtime.publishHydrated();
+            });
+        }
+    }
     if (!(await awaitHydration(config, Coframe, cdnProject)))
         return;
+    if (runtime === null || runtime === void 0 ? void 0 : runtime.isDestroyed())
+        return;
     if (cdnProject.tags) {
         executeTags(cdnProject.tags, Coframe.logger, config.nonce);
         Coframe.status.tags = cdnProject.tags;
     }
-    if (!(await ensureBody(Coframe, cdnProject, timeoutMs, config.nonce)))
+    if (!(await ensureBody(Coframe, cdnProject, timeoutMs, config.nonce, revealCoordinator, () => !(runtime === null || runtime === void 0 ? void 0 : runtime.isDestroyed()))))
         return;
     const laneStore = { claims: readLaneClaims() };
-    const applyVariants = createApplyVariants(Coframe, config, previewVariantId, isSessionVariant, executionStartTime, analytics, laneStore);
-    await applyVariants(getCurrentPageUrl(), cdnProject, personalizationHeaders, undefined, (integrationStartTime || executionStartTime).getTime() + timeoutMs);
-    if (!Coframe.variantsAndElements ||
-        Coframe.variantsAndElements.length === 0) {
-        revealPage();
+    const applier = createApplyVariants(Coframe, config, previewVariantId, isSessionVariant, executionStartTime, analytics, laneStore, runtime);
+    const initialUrl = getCurrentPageUrl();
+    if (runtime) {
+        const runtimeUrl = runtime.getState().currentUrl;
+        if (!urlsMatch(runtimeUrl, initialUrl, true))
+            runtime.changeRoute(initialUrl);
+    }
+    const firstDeadline = (integrationStartTime || executionStartTime).getTime() + timeoutMs;
+    const firstResult = await applier.apply(initialUrl, cdnProject, personalizationHeaders, undefined, firstDeadline);
+    if (runtime === null || runtime === void 0 ? void 0 : runtime.isDestroyed())
+        return;
+    const routeChangedDuringInit = firstResult === 'stale-route';
+    if (!routeChangedDuringInit && hasNoVariants(Coframe)) {
+        revealCoordinator.requestReveal('no-variants');
         variantRendered();
     }
-    reportInitTiming(Coframe, cdnProject, integrationStartTime, executionStartTime);
-    setupSPANavigation(Coframe, cdnProject, config, previewVariantId, isSessionVariant, applyVariants);
+    if (!routeChangedDuringInit)
+        revealCoordinator.flushPending();
+    let timingReported = false;
+    const reportTiming = (appliedProject = cdnProject) => {
+        if (timingReported)
+            return;
+        timingReported = true;
+        reportInitTiming(Coframe, appliedProject, integrationStartTime, executionStartTime);
+    };
+    if (!routeChangedDuringInit)
+        reportTiming();
+    const onUrlChange = setupSPANavigation(Coframe, cdnProject, config, previewVariantId, isSessionVariant, runtime, applier, firstDeadline, routeChangedDuringInit ? reportTiming : undefined);
+    const urlNow = getCurrentPageUrl();
+    if (runtime &&
+        onUrlChange &&
+        (routeChangedDuringInit || !urlsMatch(initialUrl, urlNow, true))) {
+        onUrlChange(urlNow, initialUrl, {
+            routeAlreadyRendered: routeChangedDuringInit,
+        }).catch((error) => {
+            logNavigationError(Coframe, 'Applying the route reached during init failed', error);
+        });
+    }
     setupFlushInterval(Coframe);
 }
 
@@ -4512,11 +4920,12 @@ async function resolveFeatureFlag(Coframe, timeoutMs) {
         return undefined;
     return getFeatureFlagValue(cmd);
 }
-async function resolveConfig(Coframe, revealPage) {
+async function resolveConfig(Coframe, revealActions) {
     const logger = Coframe.logger;
     const configCmd = await waitForCmd((cmd) => !!cmd.config, Coframe);
     if (!configCmd) {
         logger.error('Failed to wait for config cmd', 'wait_for_cmd_timeout');
+        revealActions.forceReveal('config-timeout');
         return null;
     }
     const config = configCmd.config;
@@ -4532,7 +4941,7 @@ async function resolveConfig(Coframe, revealPage) {
     configureReplayScriptUrl(config.replayScriptUrl);
     const gracefulExit = (msg) => {
         console.warn(`[Coframe] ${msg}`);
-        revealPage();
+        revealActions.forceReveal('graceful-exit');
         return null;
     };
     if (config.waitForFeatureFlag) {
@@ -4545,8 +4954,9 @@ async function resolveConfig(Coframe, revealPage) {
         }
     }
     const projectId = config === null || config === void 0 ? void 0 : config.projectId;
+    const lifecycleMode = isVariantRuntimeLifecycleEnabled(config);
     const warnMissingVariant = () => {
-        if (applyVariantChangesStarted) {
+        if (applyVariantChangesStarted && !lifecycleMode) {
             logger.warn('Failed to wait for variant rendered command', 'missing_variant_rendered');
         }
     };
@@ -4559,14 +4969,15 @@ async function resolveConfig(Coframe, revealPage) {
         }
         logger.warn('Variant not rendered', 'variant_not_rendered', metadata);
     };
-    waitForCmd((cmd) => cmd.variantRendered === true || cmd.emit === 'variantRendered', Coframe, timeoutMs)
-        .then((cmd) => {
-        if (!cmd) {
-            warnMissingVariant();
-        }
-    })
-        .finally(() => {
-        revealPage();
+    waitForCmd((cmd) => cmd.variantRendered === true || cmd.emit === 'variantRendered', Coframe, timeoutMs, QueueName.CFQ, !lifecycleMode).then((cmd) => {
+        if (cmd) {
+            revealActions.requestReveal('legacy-variant-rendered');
+            return;
+        }
+        warnMissingVariant();
+        if (revealActions.getSnapshot().pageRevealed)
+            return;
+        revealActions.forceReveal('config-timeout');
     });
     const loggedReasons = [];
     listenForCmd((cmd) => cmd.emit === 'variantNotRendered', (cmd) => {
@@ -4580,6 +4991,7 @@ async function resolveConfig(Coframe, revealPage) {
             description: 'No Coframe Page ID',
         });
         variantRendered();
+        revealActions.forceReveal('graceful-exit');
         return null;
     }
     Coframe.projectId = projectId;
@@ -4751,6 +5163,824 @@ function injectOptions(options) {
     }
 }
 
+const TERMINAL_STATUSES = new Set([
+    'completed',
+    'error',
+    'cleaned',
+]);
+const DEFAULT_FADE_DURATION_MS = 150;
+const MAX_INGEST_PER_SESSION = 10;
+const TRANSITION_LONGHANDS = [
+    'transition-property',
+    'transition-duration',
+    'transition-timing-function',
+    'transition-delay',
+];
+const fadeTargets = new Map();
+const FADE_SAFETY_MS = 5000;
+function cancelFadeAnimation(fadeTarget) {
+    if (fadeTarget.animationFrame !== null) {
+        cancelAnimationFrame(fadeTarget.animationFrame);
+    }
+    if (fadeTarget.timer)
+        clearTimeout(fadeTarget.timer);
+    fadeTarget.animationFrame = null;
+    fadeTarget.timer = null;
+}
+function finishFade(fadeTarget) {
+    if (fadeTargets.get(fadeTarget.target) !== fadeTarget)
+        return;
+    fadeTargets.delete(fadeTarget.target);
+    cancelFadeAnimation(fadeTarget);
+    fadeTarget.target.removeEventListener('transitionend', onFadeTransitionEnd);
+    for (const record of Array.from(fadeTarget.records))
+        record.stop();
+    fadeTarget.records.clear();
+    const { target } = fadeTarget;
+    const style = target.style;
+    style.setProperty('transition', 'none', 'important');
+    style.setProperty('opacity', ...fadeTarget.opacity);
+    void getComputedStyle(target).opacity;
+    style.removeProperty('transition');
+    if (fadeTarget.transition[0]) {
+        style.setProperty('transition', ...fadeTarget.transition);
+    }
+    for (const [name, value, priority] of fadeTarget.longhands) {
+        if (value)
+            style.setProperty(name, value, priority);
+    }
+}
+function onFadeTransitionEnd(event) {
+    const fadeTarget = fadeTargets.get(event.target);
+    if ((fadeTarget === null || fadeTarget === void 0 ? void 0 : fadeTarget.timer) && event.propertyName === 'opacity') {
+        finishFade(fadeTarget);
+    }
+}
+function maybeStartFade(fadeTarget) {
+    if (fadeTarget.animationFrame !== null || fadeTarget.timer)
+        return;
+    let duration = 0;
+    for (const record of Array.from(fadeTarget.records)) {
+        if (!record.ready)
+            return;
+        duration = Math.max(duration, record.duration);
+    }
+    const { target } = fadeTarget;
+    void getComputedStyle(target).opacity;
+    fadeTarget.animationFrame = requestAnimationFrame(() => {
+        fadeTarget.animationFrame = null;
+        if (fadeTargets.get(target) !== fadeTarget)
+            return;
+        target.style.setProperty('transition', `opacity ${duration}ms ease`, 'important');
+        target.style.setProperty('opacity', '1', 'important');
+        fadeTarget.timer = setTimeout(() => finishFade(fadeTarget), duration + 100);
+    });
+}
+function removeFadeRecord(record) {
+    const { fadeTarget } = record;
+    if (!fadeTarget.records.delete(record))
+        return;
+    record.stop();
+    if (fadeTarget.records.size === 0)
+        finishFade(fadeTarget);
+    else
+        maybeStartFade(fadeTarget);
+}
+function createVariantSession(options) {
+    const listenerStops = new Set();
+    let ingestCount = 0;
+    let ingestLimitReported = false;
+    let metadataDropReported = false;
+    const fades = new Map();
+    const fadeReleases = new Set();
+    const state = {
+        sessionId: options.sessionId,
+        variantId: options.variantId,
+        batchId: options.batchId,
+        routeVersion: options.routeVersion,
+        active: true,
+        status: 'created',
+        ownsPageAntiflicker: false,
+        pageAntiflickerRemoved: false,
+    };
+    const isMutable = () => state.active && !TERMINAL_STATUSES.has(state.status);
+    const notify = () => options.onStateChange(internal);
+    const releaseVisuals = () => {
+        var _a;
+        for (const record of Array.from(fades.values()))
+            removeFadeRecord(record);
+        (_a = options.releaseVisuals) === null || _a === void 0 ? void 0 : _a.call(options, internal);
+    };
+    const fadeIn = (target, durationMs = DEFAULT_FADE_DURATION_MS) => {
+        if (fades.has(target))
+            return;
+        const duration = typeof durationMs === 'number' && durationMs - durationMs === 0
+            ? Math.max(0, durationMs)
+            : DEFAULT_FADE_DURATION_MS;
+        let fadeTarget = fadeTargets.get(target);
+        if (!fadeTarget) {
+            const style = target.style;
+            fadeTarget = {
+                target,
+                opacity: [
+                    style.getPropertyValue('opacity'),
+                    style.getPropertyPriority('opacity'),
+                ],
+                transition: [
+                    style.getPropertyValue('transition'),
+                    style.getPropertyPriority('transition'),
+                ],
+                longhands: TRANSITION_LONGHANDS.map((name) => [
+                    name,
+                    style.getPropertyValue(name),
+                    style.getPropertyPriority(name),
+                ]),
+                records: new Set(),
+                animationFrame: null,
+                timer: null,
+            };
+            fadeTargets.set(target, fadeTarget);
+            target.addEventListener('transitionend', onFadeTransitionEnd);
+        }
+        cancelFadeAnimation(fadeTarget);
+        target.style.setProperty('transition', 'none', 'important');
+        target.style.setProperty('opacity', '0', 'important');
+        let pageRevealed = false;
+        let released = false;
+        let stopPageListener = () => { };
+        let safetyTimer = null;
+        const update = () => {
+            record.ready = pageRevealed && released;
+            if (record.ready)
+                maybeStartFade(record.fadeTarget);
+        };
+        const release = () => {
+            released = true;
+            if (safetyTimer)
+                clearTimeout(safetyTimer);
+            safetyTimer = null;
+            update();
+        };
+        const record = {
+            fadeTarget,
+            duration,
+            ready: false,
+            stop: () => {
+                stopPageListener();
+                if (safetyTimer)
+                    clearTimeout(safetyTimer);
+                safetyTimer = null;
+                fadeReleases.delete(release);
+                if (fades.get(target) === record)
+                    fades.delete(target);
+            },
+        };
+        fadeTarget.records.add(record);
+        fades.set(target, record);
+        fadeReleases.add(release);
+        safetyTimer = setTimeout(release, FADE_SAFETY_MS);
+        stopPageListener = subscribe('pageRevealed', () => {
+            pageRevealed = true;
+            update();
+        }, true);
+        if (options.getPageState().pageRevealed) {
+            pageRevealed = true;
+            update();
+        }
+    };
+    const subscribe = (event, handler, once) => {
+        if (!state.active)
+            return () => { };
+        const stopSubscription = options.subscribePage(event, handler, once);
+        if (!state.active) {
+            stopSubscription();
+            return () => { };
+        }
+        const stop = () => {
+            listenerStops.delete(stop);
+            stopSubscription();
+        };
+        listenerStops.add(stop);
+        return stop;
+    };
+    const facade = {
+        getPageState: () => ({ ...options.getPageState() }),
+        getState: () => ({ ...state }),
+        getVariantId: () => state.variantId,
+        onPage: (event, handler) => subscribe(event, handler, false),
+        oncePage: (event, handler) => subscribe(event, handler, true),
+        ready() {
+            if (!isMutable() || state.status !== 'created')
+                return;
+            state.status = 'ready';
+            notify();
+        },
+        takePageAntiflickerOwnership() {
+            if (!isMutable() || state.ownsPageAntiflicker)
+                return;
+            state.ownsPageAntiflicker = true;
+            state.status = 'rendering';
+            notify();
+        },
+        fadeIn(target, durationMs) {
+            if (!isMutable() || !target)
+                return;
+            if (options.fadeIn)
+                options.fadeIn(internal, target, durationMs);
+            else
+                fadeIn(target, durationMs);
+        },
+        ingestApplied(payload) {
+            var _a, _b, _c;
+            if (!isMutable())
+                return;
+            if (ingestCount >= MAX_INGEST_PER_SESSION) {
+                if (!ingestLimitReported) {
+                    ingestLimitReported = true;
+                    (_a = options.onIngestLimit) === null || _a === void 0 ? void 0 : _a.call(options, internal);
+                }
+                return;
+            }
+            ingestCount += 1;
+            const metadataDropped = (_b = options.ingestApplied) === null || _b === void 0 ? void 0 : _b.call(options, internal, payload);
+            if (metadataDropped && !metadataDropReported) {
+                metadataDropReported = true;
+                (_c = options.onMetadataDropped) === null || _c === void 0 ? void 0 : _c.call(options, internal);
+            }
+        },
+        complete() {
+            if (!isMutable())
+                return;
+            state.status = 'completed';
+            for (const release of Array.from(fadeReleases))
+                release();
+            fadeReleases.clear();
+            options.emitLegacyVariantRendered();
+            notify();
+        },
+        error(error) {
+            var _a;
+            if (!isMutable())
+                return;
+            state.status = 'error';
+            releaseVisuals();
+            (_a = options.onError) === null || _a === void 0 ? void 0 : _a.call(options, internal, error);
+            options.emitLegacyVariantRendered();
+            notify();
+        },
+        cleanup() {
+            if (state.status === 'cleaned')
+                return;
+            state.active = false;
+            state.status = 'cleaned';
+            for (const stop of Array.from(listenerStops))
+                stop();
+            releaseVisuals();
+            notify();
+        },
+    };
+    const internal = {
+        facade: Object.freeze(facade),
+        getState: () => ({ ...state }),
+        isSettledForReveal: () => state.status === 'ready' ||
+            state.status === 'rendering' ||
+            TERMINAL_STATUSES.has(state.status),
+        markPageRevealed() {
+            if (state.pageAntiflickerRemoved)
+                return;
+            state.pageAntiflickerRemoved = true;
+        },
+        invalidate() {
+            facade.cleanup();
+        },
+    };
+    return internal;
+}
+
+const DEFAULT_BATCH_TIMEOUT_MS = 1000;
+function createPageRuntime(options) {
+    var _a, _b, _c;
+    const createId = (_a = options.createId) !== null && _a !== void 0 ? _a : generateUUID;
+    const batchTimeoutMs = (_b = options.batchTimeoutMs) !== null && _b !== void 0 ? _b : DEFAULT_BATCH_TIMEOUT_MS;
+    const revealDeadline = Date.now() + batchTimeoutMs;
+    const timeUntilDeadline = () => Math.max(0, revealDeadline - Date.now());
+    const listeners = new Map();
+    const state = {
+        sdkReady: false,
+        hydrated: (_c = options.initialHydrated) !== null && _c !== void 0 ? _c : false,
+        routeVersion: 0,
+        currentUrl: options.currentUrl,
+        pageRevealed: options.revealCoordinator.getSnapshot().pageRevealed,
+    };
+    let activeBatch = null;
+    let handoffBlockerId = null;
+    let handoffTimeout = null;
+    let destroyed = false;
+    const clearHandoff = () => {
+        handoffBlockerId = null;
+        if (handoffTimeout)
+            clearTimeout(handoffTimeout);
+        handoffTimeout = null;
+    };
+    const callListener = (event, handler, payload) => {
+        var _a;
+        try {
+            handler(payload);
+        }
+        catch (error) {
+            (_a = options.error) === null || _a === void 0 ? void 0 : _a.call(options, 'Variant runtime listener failed', {
+                event,
+                error: describeError(error),
+            });
+        }
+    };
+    const emit = (event, payload) => {
+        const handlers = listeners.get(event);
+        if (!handlers)
+            return;
+        for (const handler of Array.from(handlers)) {
+            if (handlers.has(handler))
+                callListener(event, handler, payload);
+        }
+    };
+    const on = (event, handler) => {
+        var _a;
+        const handlers = (_a = listeners.get(event)) !== null && _a !== void 0 ? _a : new Set();
+        const entry = (payload) => handler(payload);
+        handlers.add(entry);
+        listeners.set(event, handlers);
+        return () => {
+            handlers.delete(entry);
+            if (handlers.size === 0 && listeners.get(event) === handlers) {
+                listeners.delete(event);
+            }
+        };
+    };
+    const stickySatisfied = (event) => {
+        if (event === 'sdkReady')
+            return state.sdkReady;
+        if (event === 'hydrated')
+            return state.hydrated;
+        if (event === 'pageRevealed')
+            return state.pageRevealed;
+        return false;
+    };
+    const stickyPayload = (event) => event === 'pageRevealed'
+        ? {
+            ...state,
+            reason: options.revealCoordinator.getSnapshot().revealedReason,
+        }
+        : { ...state };
+    const once = (event, handler) => {
+        if (stickySatisfied(event)) {
+            callListener(event, handler, stickyPayload(event));
+            return () => { };
+        }
+        let stop = () => { };
+        stop = on(event, (payload) => {
+            stop();
+            handler(payload);
+        });
+        return stop;
+    };
+    const clearBatchTimeout = (batch) => {
+        if (!batch.timeout)
+            return;
+        clearTimeout(batch.timeout);
+        batch.timeout = null;
+    };
+    const revealFromRuntime = (batchId, reveal) => {
+        var _a;
+        try {
+            reveal();
+        }
+        catch (error) {
+            (_a = options.error) === null || _a === void 0 ? void 0 : _a.call(options, 'Variant runtime page reveal failed', {
+                error: describeError(error),
+                ...(batchId ? { batchId } : {}),
+                routeVersion: state.routeVersion,
+            });
+        }
+    };
+    const forceRevealOnTimeout = (batchId) => revealFromRuntime(batchId, () => options.revealCoordinator.forceReveal('batch-timeout'));
+    const releaseBatch = (batch) => {
+        if (batch.released)
+            return;
+        batch.released = true;
+        clearBatchTimeout(batch);
+        revealFromRuntime(batch.batchId, () => options.revealCoordinator.release(batch.batchId, 'batch-settled'));
+    };
+    const warnForSession = (session, message) => {
+        var _a;
+        const sessionState = session.getState();
+        (_a = options.warn) === null || _a === void 0 ? void 0 : _a.call(options, message, {
+            variantId: sessionState.variantId,
+            batchId: sessionState.batchId,
+        });
+    };
+    const maybeReleaseBatch = (batch) => {
+        if (activeBatch !== batch ||
+            batch.released ||
+            !batch.closed ||
+            batch.sessions.size < batch.expectedSessionCount)
+            return;
+        if (Array.from(batch.sessions.values()).every((session) => session.isSettledForReveal())) {
+            releaseBatch(batch);
+        }
+    };
+    const warnUnsettled = (batch, reason) => {
+        var _a;
+        (_a = options.warn) === null || _a === void 0 ? void 0 : _a.call(options, 'Variant runtime batch timed out', {
+            batchId: batch.batchId,
+            routeVersion: batch.routeVersion,
+            reason,
+            expectedSessionCount: batch.expectedSessionCount,
+            createdSessionCount: batch.sessions.size,
+            unsettledVariantIds: Array.from(batch.sessions.values())
+                .filter((session) => !session.isSettledForReveal())
+                .map((session) => session.getState().variantId),
+        });
+    };
+    const invalidateBatch = (batchId) => {
+        if (!activeBatch || activeBatch.batchId !== batchId)
+            return;
+        const batch = activeBatch;
+        activeBatch = null;
+        clearBatchTimeout(batch);
+        for (const session of batch.sessions.values())
+            session.invalidate();
+    };
+    const coordinatorStop = options.revealCoordinator.onRevealed((reason) => {
+        if (state.pageRevealed)
+            return;
+        if (activeBatch && !activeBatch.released && reason !== 'batch-settled') {
+            warnUnsettled(activeBatch, reason);
+        }
+        state.pageRevealed = true;
+        clearHandoff();
+        if (activeBatch) {
+            activeBatch.released = true;
+            clearBatchTimeout(activeBatch);
+            for (const session of activeBatch.sessions.values()) {
+                session.markPageRevealed();
+            }
+        }
+        emit('pageRevealed', { ...state, reason });
+    });
+    const runtime = {
+        getState: () => ({ ...state }),
+        on,
+        once,
+        publishSdkReady() {
+            if (state.sdkReady)
+                return;
+            state.sdkReady = true;
+            emit('sdkReady', { ...state });
+        },
+        publishHydrated() {
+            if (state.hydrated)
+                return;
+            state.hydrated = true;
+            emit('hydrated', { ...state });
+        },
+        settleRoute() {
+            if (destroyed)
+                return;
+            if (handoffBlockerId) {
+                const batchId = handoffBlockerId;
+                clearHandoff();
+                revealFromRuntime(batchId, () => options.revealCoordinator.release(batchId, 'no-variants'));
+                return;
+            }
+            if (!state.pageRevealed && !activeBatch) {
+                revealFromRuntime(null, () => options.revealCoordinator.requestReveal('no-variants'));
+            }
+        },
+        updateUrl(currentUrl) {
+            if (!destroyed)
+                state.currentUrl = currentUrl;
+        },
+        changeRoute(currentUrl) {
+            if (destroyed)
+                return;
+            if (activeBatch) {
+                const { batchId } = activeBatch;
+                invalidateBatch(batchId);
+                if (!state.pageRevealed) {
+                    handoffBlockerId = batchId;
+                    const abandonedRouteVersion = state.routeVersion;
+                    if (!handoffTimeout) {
+                        handoffTimeout = setTimeout(() => {
+                            var _a;
+                            if (!handoffBlockerId)
+                                return;
+                            const handedOverBatchId = handoffBlockerId;
+                            (_a = options.warn) === null || _a === void 0 ? void 0 : _a.call(options, 'Variant runtime route handoff timed out', {
+                                routeVersion: abandonedRouteVersion,
+                            });
+                            clearHandoff();
+                            forceRevealOnTimeout(handedOverBatchId);
+                        }, timeUntilDeadline());
+                    }
+                }
+            }
+            state.routeVersion += 1;
+            state.currentUrl = currentUrl;
+        },
+        beginBatch(input) {
+            if (destroyed || input.expectedSessionCount === 0)
+                return null;
+            if (activeBatch)
+                invalidateBatch(activeBatch.batchId);
+            clearHandoff();
+            const batch = {
+                batchId: createId(),
+                routeVersion: state.routeVersion,
+                expectedSessionCount: input.expectedSessionCount,
+                closed: false,
+                released: state.pageRevealed,
+                sessions: new Map(),
+                timeout: null,
+            };
+            activeBatch = batch;
+            if (!state.pageRevealed &&
+                options.revealCoordinator.block(batch.batchId)) {
+                batch.timeout = setTimeout(() => {
+                    if (activeBatch !== batch || batch.released)
+                        return;
+                    warnUnsettled(batch, 'batch-timeout');
+                    batch.released = true;
+                    forceRevealOnTimeout(batch.batchId);
+                }, timeUntilDeadline());
+            }
+            return { batchId: batch.batchId, routeVersion: batch.routeVersion };
+        },
+        createVariantSession(input) {
+            var _a;
+            const batch = activeBatch;
+            if (!batch ||
+                batch.batchId !== input.batchId ||
+                batch.routeVersion !== state.routeVersion ||
+                (batch.released && !state.pageRevealed))
+                return null;
+            const session = createVariantSession({
+                sessionId: createId(),
+                variantId: input.variantId,
+                batchId: batch.batchId,
+                routeVersion: batch.routeVersion,
+                getPageState: () => ({ ...state }),
+                subscribePage: (event, handler, onlyOnce) => {
+                    if (onlyOnce)
+                        return once(event, handler);
+                    if (stickySatisfied(event)) {
+                        callListener(event, handler, stickyPayload(event));
+                    }
+                    return on(event, handler);
+                },
+                onStateChange: () => maybeReleaseBatch(batch),
+                emitLegacyVariantRendered: (_a = options.emitLegacyVariantRendered) !== null && _a !== void 0 ? _a : (() => { }),
+                ingestApplied: (currentSession, payload) => {
+                    var _a, _b;
+                    return (_b = (_a = options.onVariantApplied) === null || _a === void 0 ? void 0 : _a.call(options, { ...state }, currentSession.getState(), payload)) !== null && _b !== void 0 ? _b : false;
+                },
+                onIngestLimit: (currentSession) => warnForSession(currentSession, 'Variant ingestApplied limit reached'),
+                onMetadataDropped: (currentSession) => warnForSession(currentSession, 'Variant ingestApplied metadata dropped'),
+                onError: (currentSession, error) => {
+                    var _a;
+                    const sessionState = currentSession.getState();
+                    (_a = options.error) === null || _a === void 0 ? void 0 : _a.call(options, 'Variant runtime session failed', {
+                        error: describeError(error),
+                        variantId: sessionState.variantId,
+                        sessionId: sessionState.sessionId,
+                        batchId: sessionState.batchId,
+                        routeVersion: sessionState.routeVersion,
+                        currentUrl: state.currentUrl,
+                    });
+                },
+            });
+            if (state.pageRevealed)
+                session.markPageRevealed();
+            batch.sessions.set(session.getState().sessionId, session);
+            maybeReleaseBatch(batch);
+            return session;
+        },
+        closeBatch(batchId) {
+            if (!activeBatch || activeBatch.batchId !== batchId)
+                return;
+            activeBatch.closed = true;
+            maybeReleaseBatch(activeBatch);
+        },
+        invalidateBatch,
+        invalidateAllSessions() {
+            if (activeBatch)
+                invalidateBatch(activeBatch.batchId);
+        },
+        getDebugSnapshot() {
+            return {
+                page: { ...state },
+                activeBatch: activeBatch
+                    ? {
+                        batchId: activeBatch.batchId,
+                        routeVersion: activeBatch.routeVersion,
+                        expectedSessionCount: activeBatch.expectedSessionCount,
+                        closed: activeBatch.closed,
+                        released: activeBatch.released,
+                        sessionStates: Array.from(activeBatch.sessions.values()).map((session) => session.getState()),
+                    }
+                    : null,
+            };
+        },
+        isDestroyed: () => destroyed,
+        destroy() {
+            destroyed = true;
+            const blockerIds = [handoffBlockerId, activeBatch === null || activeBatch === void 0 ? void 0 : activeBatch.batchId];
+            if (activeBatch)
+                invalidateBatch(activeBatch.batchId);
+            clearHandoff();
+            for (const blockerId of blockerIds) {
+                if (blockerId)
+                    options.revealCoordinator.unblock(blockerId);
+            }
+            coordinatorStop();
+            listeners.clear();
+        },
+    };
+    return runtime;
+}
+
+const MAX_TARGET_SELECTORS = 20;
+const MAX_SELECTOR_LENGTH = 500;
+const MAX_METADATA_JSON_BYTES = 4096;
+const MAX_METADATA_VISITS = 20000;
+const MAX_SELECTOR_ENTRIES_SCANNED = 200;
+function utf8ByteLength(value) {
+    let bytes = 0;
+    for (let i = 0; i < value.length; i++) {
+        const code = value.charCodeAt(i);
+        if (code < 0x80)
+            bytes += 1;
+        else if (code < 0x800)
+            bytes += 2;
+        else if (code >= 0xd800 && code <= 0xdbff) {
+            const next = value.charCodeAt(i + 1);
+            if (next >= 0xdc00 && next <= 0xdfff) {
+                bytes += 4;
+                i++;
+            }
+            else {
+                bytes += 3;
+            }
+        }
+        else
+            bytes += 3;
+    }
+    return bytes;
+}
+function isBoxedString(value) {
+    if (!value || typeof value !== 'object')
+        return false;
+    try {
+        String.prototype.valueOf.call(value);
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+function sanitizeMetadata(payload) {
+    try {
+        const rawMetadata = payload.metadata;
+        if (rawMetadata === undefined || rawMetadata === null)
+            return {};
+        if (typeof rawMetadata !== 'object' || Array.isArray(rawMetadata)) {
+            return null;
+        }
+        let minimumLength = 0;
+        let visits = 0;
+        const json = JSON.stringify(rawMetadata, function (key, value) {
+            visits += 1;
+            if (visits > MAX_METADATA_VISITS) {
+                throw new Error('metadata too large');
+            }
+            const isObjectProperty = visits > 1 && !Array.isArray(this);
+            if (isObjectProperty &&
+                (value === undefined ||
+                    typeof value === 'function' ||
+                    typeof value === 'symbol')) {
+                return value;
+            }
+            if (isObjectProperty)
+                minimumLength += key.length + 3;
+            const written = isBoxedString(value) ? String(value) : value;
+            minimumLength += typeof written === 'string' ? written.length + 2 : 1;
+            if (minimumLength > MAX_METADATA_JSON_BYTES) {
+                throw new Error('metadata too large');
+            }
+            return written;
+        });
+        if (!json ||
+            json.length > MAX_METADATA_JSON_BYTES ||
+            utf8ByteLength(json) > MAX_METADATA_JSON_BYTES) {
+            return null;
+        }
+        const copy = JSON.parse(json);
+        return copy && typeof copy === 'object' && !Array.isArray(copy)
+            ? copy
+            : null;
+    }
+    catch (_a) {
+        return null;
+    }
+}
+function sanitizeSelectors(payload) {
+    try {
+        const selectors = payload.targetSelectors;
+        if (!Array.isArray(selectors))
+            return [];
+        const kept = [];
+        const scanned = Math.min(selectors.length, MAX_SELECTOR_ENTRIES_SCANNED);
+        for (let i = 0; i < scanned; i++) {
+            let selector;
+            try {
+                selector = selectors[i];
+            }
+            catch (_a) {
+                continue;
+            }
+            if (typeof selector === 'string' &&
+                selector.length > 0 &&
+                selector.length <= MAX_SELECTOR_LENGTH) {
+                kept.push(selector);
+                if (kept.length === MAX_TARGET_SELECTORS)
+                    break;
+            }
+        }
+        return kept;
+    }
+    catch (_b) {
+        return [];
+    }
+}
+function sanitizePayload(payloadInput) {
+    if (!payloadInput ||
+        typeof payloadInput !== 'object' ||
+        Array.isArray(payloadInput)) {
+        const given = payloadInput !== undefined && payloadInput !== null;
+        return { metadata: {}, metadataDropped: given, targetSelectors: [] };
+    }
+    const payload = payloadInput;
+    const metadata = sanitizeMetadata(payload);
+    return {
+        metadata: metadata || {},
+        metadataDropped: metadata === null,
+        targetSelectors: sanitizeSelectors(payload),
+    };
+}
+function ingestVariantApplied(coframe, pageState, sessionState, payloadInput) {
+    const { metadata, metadataDropped, targetSelectors } = sanitizePayload(payloadInput);
+    const personalizationHeaders = coframe.personalizationHeaders;
+    const event = {
+        type: 'variant_applied',
+        project_id: coframe.projectId || '',
+        session_id: coframe.sessionId || '',
+        time: new Date(),
+        url: getCurrentPageUrl(),
+        user_token: coframe.userToken || '',
+        org_id: coframe.orgId || '',
+        variant_id: sessionState.variantId,
+        content: {
+            metadata: {
+                batch_id: sessionState.batchId,
+                route_version: pageState.routeVersion,
+                current_url: pageState.currentUrl,
+                ...(personalizationHeaders
+                    ? { personalization_headers: { ...personalizationHeaders } }
+                    : {}),
+                ...(targetSelectors.length
+                    ? { target_selectors: targetSelectors }
+                    : {}),
+                ...(Object.keys(metadata).length ? { custom_data: metadata } : {}),
+            },
+        },
+    };
+    try {
+        document.dispatchEvent(new CustomEvent('coframe:variant-applied', {
+            detail: {
+                ...event,
+                time: new Date(event.time.getTime()),
+                content: {
+                    metadata: JSON.parse(JSON.stringify(event.content.metadata)),
+                },
+            },
+        }));
+    }
+    catch (_a) {
+    }
+    if (coframe.projectId)
+        queueEventForBatchedSending(coframe, event);
+    return metadataDropped;
+}
+
 function push(cmd) {
     if (typeof window === 'undefined')
         return;
@@ -4798,34 +6028,81 @@ const Coframe = {
     },
 };
 Coframe.logger = createLogger(() => Coframe);
-async function init(options) {
+const revealCoordinator = createRevealCoordinator(revealPage, logRevealListenerError(() => Coframe.logger));
+let activeRuntime = null;
+function clearActiveRuntime() {
+    activeRuntime === null || activeRuntime === void 0 ? void 0 : activeRuntime.destroy();
+    activeRuntime = null;
+    delete Coframe.runtime;
+}
+function installRuntime(config) {
+    const batchTimeoutMs = config.timeoutMs
+        ? Math.min(config.timeoutMs, TIMEOUT_MAX_MS)
+        : undefined;
+    clearActiveRuntime();
+    if (!isVariantRuntimeLifecycleEnabled(config))
+        return undefined;
+    const runtime = createPageRuntime({
+        revealCoordinator,
+        currentUrl: getCurrentPageUrl(),
+        initialHydrated: !config.waitForHydration,
+        batchTimeoutMs,
+        warn: (message, metadata) => Coframe.logger.warn(message, 'variant_runtime_warning', metadata),
+        error: (message, metadata) => Coframe.logger.error(message, 'variant_runtime_error', metadata),
+        emitLegacyVariantRendered: variantRendered,
+        onVariantApplied: (pageState, sessionState, payload) => ingestVariantApplied(Coframe, pageState, sessionState, payload),
+    });
+    activeRuntime = runtime;
+    Coframe.runtime = Object.freeze({
+        getSnapshot: () => runtime.getDebugSnapshot(),
+    });
+    runtime.publishSdkReady();
+    return runtime;
+}
+async function initialize(options, context = {}) {
     if (typeof window !== 'undefined' &&
         /cf_disable/.test(window.location.search)) {
         console.warn('[Coframe] Disabled via URL parameter');
-        revealPage();
+        revealCoordinator.forceReveal('graceful-exit');
         return;
     }
     if (options)
         injectOptions(options);
     const gracefulExit = (msg) => {
         console.warn(`[Coframe] ${msg}`);
-        revealPage();
+        revealCoordinator.forceReveal('graceful-exit');
         return;
     };
-    const configResult = await resolveConfig(Coframe, revealPage);
+    const configResult = await resolveConfig(Coframe, revealCoordinator);
     if (!configResult)
         return;
+    const runtime = installRuntime(configResult.config);
+    context.runtime = runtime;
     loadLauncherIfEnabled(configResult.config.enableDebug, configResult.config.nonce);
-    const projectResult = await resolveProject(Coframe, configResult.previewVariantId, configResult.isSessionVariant, configResult.config);
-    if (!projectResult)
+    const projectResult = await resolveProject(Coframe, configResult.previewVariantId, configResult.isSessionVariant, configResult.config, () => !(runtime === null || runtime === void 0 ? void 0 : runtime.isDestroyed()));
+    if (runtime === null || runtime === void 0 ? void 0 : runtime.isDestroyed())
         return;
+    if (!projectResult) {
+        revealCoordinator.forceReveal('graceful-exit');
+        return;
+    }
     Coframe.orgId = projectResult.project.org_id || '';
     Coframe.personalizationHeaders = projectResult.personalizationHeaders;
-    const identity = await resolveIdentity(configResult.config, Coframe, configResult.timeoutMs, gracefulExit, configResult.previewVariantId);
+    const identity = await resolveIdentity(configResult.config, Coframe, configResult.timeoutMs, (msg) => {
+        if (!(runtime === null || runtime === void 0 ? void 0 : runtime.isDestroyed()))
+            gracefulExit(msg);
+    }, configResult.previewVariantId);
     if (!identity)
         return;
+    if (runtime === null || runtime === void 0 ? void 0 : runtime.isDestroyed())
+        return;
     const analytics = setupTracking(Coframe, projectResult, configResult.previewVariantId, configResult.executionStartTime, configResult.config.nonce, configResult.config.waitForCookiesEnabled, identity.onConsentChange);
-    await modifyPage(Coframe, configResult, projectResult, analytics);
+    await modifyPage(Coframe, configResult, projectResult, analytics, {
+        revealCoordinator,
+        runtime,
+    });
+    if (runtime === null || runtime === void 0 ? void 0 : runtime.isDestroyed())
+        return;
     try {
         startReplayIfEnabled(Coframe, projectResult.project, configResult.config.nonce);
     }
@@ -4833,6 +6110,19 @@ async function init(options) {
         console.warn('[Coframe] Failed to start session replay', error);
     }
 }
+async function init(options) {
+    var _a;
+    const context = {};
+    try {
+        await initialize(options, context);
+    }
+    catch (error) {
+        if (!((_a = context.runtime) === null || _a === void 0 ? void 0 : _a.isDestroyed())) {
+            revealCoordinator.forceReveal('init-error');
+        }
+        throw error;
+    }
+}
 Coframe.debug = {
     getSelector,
     getElement,