@coframe/sdk 1.1.3 → 1.1.5

package/dist/pkg/cf.cjs.js

@@ -1105,8 +1105,11 @@ function createSession(data) {
         console.warn('[Coframe] cannot send event beacon, feature unavailable');
     }
 }
-async function fetchProjectFromEdge(projectId, currentUrl, signal, userContext, headers) {
+async function fetchProjectFromEdge(projectId, currentUrl, signal, userContext, previewVariantId, headers) {
     const payload = { projectId, currentUrl };
+    if (previewVariantId) {
+        payload.previewVariantId = previewVariantId;
+    }
     const safe = sanitizeUserContext(userContext);
     if (safe) {
         payload.userContext = safe;
@@ -2296,7 +2299,7 @@ function checkAllAudiences(metadata, project, personalizationHeaders, currentPag
     }
     return result;
 }
-async function getVariantsAndElements(personalizationHeaders, project, previewVariantId, userToken, currentPageUrl, languages, browserPlatform, logger, nonce, laneClaims = {}) {
+async function getVariantsAndElements(personalizationHeaders, project, previewVariantId, userToken, currentPageUrl, languages, browserPlatform, logger, nonce, laneClaims = {}, silentFallback = false) {
     var _a, _b;
     const experimentsInfo = [];
     const variantsAndElements = [];
@@ -2325,10 +2328,13 @@ async function getVariantsAndElements(personalizationHeaders, project, previewVa
                 hasActivatedFrames: true,
             });
         }
-        if (!skipAlert) {
+        if (!skipAlert && !silentFallback) {
             window.alert(`[Coframe] Variant preview unavailable: ${previewVariantId}.`);
         }
-        return buildResponse({});
+        if (silentFallback) ;
+        else {
+            return buildResponse({});
+        }
     }
     const userVisitCount = Number.parseInt(getCookie(VISIT_COUNT_COOKIE_KEY) || '0', 10);
     const validatedClaims = validateClaims(laneClaims, project.lanes);
@@ -2573,6 +2579,220 @@ function rebindMetrics(coframe, logger, metrics, nonce) {
     }
 }
 
+function getActivePreviewModes(sessionPreview) {
+    if (!sessionPreview.isSessionPreviewActive ||
+        !sessionPreview.previewVariantId) {
+        return [];
+    }
+    return [
+        {
+            id: 'session-preview',
+            label: 'Preview on',
+            title: `Session preview is active for ${sessionPreview.previewVariantId}`,
+            variantIds: sessionPreview.previewVariantId
+                .split(',')
+                .map((id) => id.trim())
+                .filter(Boolean),
+        },
+    ];
+}
+
+const PREVIEW_UI_PROTOCOL_VERSION = 1;
+
+const SESSION_VARIANT_KEY = 'coframe.preview_variant';
+const PREVIEW_VARIANT_QUERY_PARAM = 'coframe_variant_id';
+const KEEP_PREVIEW_FOR_SESSION_QUERY_PARAM = 'keep_preview_for_session';
+let previewDismissed = false;
+function dismissSessionPreview() {
+    previewDismissed = true;
+    clearPreviewVariantId();
+    const url = new URL(window.location.href);
+    url.searchParams.delete(PREVIEW_VARIANT_QUERY_PARAM);
+    url.searchParams.delete(KEEP_PREVIEW_FOR_SESSION_QUERY_PARAM);
+    window.history.replaceState(window.history.state, '', url);
+    window.location.reload();
+}
+function normalizeVariantIds(raw) {
+    if (!raw)
+        return null;
+    const ids = raw
+        .split(',')
+        .map((id) => id.trim())
+        .filter(Boolean);
+    return ids.length > 0 ? ids.join(',') : null;
+}
+function readPreviewVariantId() {
+    try {
+        return sessionStorage.getItem(SESSION_VARIANT_KEY);
+    }
+    catch (_a) {
+        return null;
+    }
+}
+function persistPreviewVariantId(variantId) {
+    const normalized = normalizeVariantIds(variantId);
+    if (!normalized)
+        return;
+    try {
+        sessionStorage.setItem(SESSION_VARIANT_KEY, normalized);
+    }
+    catch (_a) {
+    }
+}
+function clearPreviewVariantId() {
+    try {
+        sessionStorage.removeItem(SESSION_VARIANT_KEY);
+    }
+    catch (_a) {
+    }
+}
+function resolvePreviewSource(urlParams = getCurrentUrlSearchParams()) {
+    return {
+        urlVariantId: urlParams.get(PREVIEW_VARIANT_QUERY_PARAM),
+        storedVariantId: readPreviewVariantId(),
+        keepForSession: urlParams.get(KEEP_PREVIEW_FOR_SESSION_QUERY_PARAM) === 'true',
+    };
+}
+function resolveSessionPreviewState() {
+    if (previewDismissed) {
+        return { isSessionPreviewActive: false, previewVariantId: null };
+    }
+    const previewSource = resolvePreviewSource();
+    const urlVariantId = normalizeVariantIds(previewSource.urlVariantId);
+    if (urlVariantId && previewSource.keepForSession) {
+        return {
+            isSessionPreviewActive: true,
+            previewVariantId: urlVariantId,
+        };
+    }
+    if (urlVariantId) {
+        return { isSessionPreviewActive: false, previewVariantId: null };
+    }
+    const storedVariantId = normalizeVariantIds(previewSource.storedVariantId);
+    return {
+        isSessionPreviewActive: !!storedVariantId,
+        previewVariantId: storedVariantId,
+    };
+}
+
+const PREVIEW_UI_SCRIPT_ID = 'coframe-preview-ui-script';
+const PREVIEW_UI_URL = "https://edge.cofra.me/preview-ui/latest.js";
+let loadPromise = null;
+let latestState = { modes: [] };
+let nonce;
+let logger;
+let mounted = false;
+function reportError(message, error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    if (logger) {
+        logger.warn(message, 'preview_ui_unavailable', { error: errorMessage });
+        return;
+    }
+    console.warn(`[Coframe] ${message}`, error);
+}
+function getPreviewUI() {
+    const api = window.CoframePreviewUI;
+    return (api === null || api === void 0 ? void 0 : api.protocolVersion) === PREVIEW_UI_PROTOCOL_VERSION ? api : undefined;
+}
+function loadPreviewUI() {
+    const existing = getPreviewUI();
+    if (existing)
+        return Promise.resolve(existing);
+    if (loadPromise)
+        return loadPromise;
+    loadPromise = new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.id = PREVIEW_UI_SCRIPT_ID;
+        script.async = true;
+        script.src = PREVIEW_UI_URL;
+        if (nonce)
+            script.nonce = nonce;
+        script.onload = () => {
+            const api = getPreviewUI();
+            if (!api) {
+                reject(new Error('Preview UI protocol is missing or incompatible'));
+                return;
+            }
+            resolve(api);
+        };
+        script.onerror = () => {
+            reject(new Error('Preview UI script failed to load'));
+        };
+        document.head.appendChild(script);
+    });
+    return loadPromise;
+}
+function renderPreviewUI(api) {
+    try {
+        if (latestState.modes.length === 0) {
+            api.unmount();
+            mounted = false;
+        }
+        else if (mounted) {
+            api.update(latestState);
+        }
+        else {
+            api.mount({ state: latestState, nonce, onDismiss: dismissPreviewPanel });
+            mounted = true;
+        }
+    }
+    catch (error) {
+        reportError('Preview UI could not be rendered', error);
+    }
+}
+function dismissPreviewPanel() {
+    dismissSessionPreview();
+    latestState = { modes: [] };
+    const api = getPreviewUI();
+    if (api)
+        renderPreviewUI(api);
+}
+function modesWithVariants(sessionPreview, variantsAndElements, applied = true) {
+    const activeModes = getActivePreviewModes(sessionPreview);
+    if (activeModes.length === 0)
+        return [];
+    const currentPageVariantIds = new Set((variantsAndElements === null || variantsAndElements === void 0 ? void 0 : variantsAndElements.map(({ variant }) => variant.id)) || []);
+    const slugById = new Map((variantsAndElements === null || variantsAndElements === void 0 ? void 0 : variantsAndElements.map(({ variant }) => [variant.id, variant.slug])) || []);
+    return activeModes.map((mode) => ({
+        id: mode.id,
+        label: mode.label,
+        title: mode.title,
+        variants: mode.variantIds.map((id) => ({
+            id,
+            slug: slugById.get(id) || null,
+            status: variantsAndElements
+                ? applied && currentPageVariantIds.has(id)
+                    ? 'active'
+                    : 'inactive'
+                : 'pending',
+        })),
+    }));
+}
+function resolveSessionPreviewPanel(sessionPreview, previewNonce, previewLogger) {
+    const modes = modesWithVariants(sessionPreview);
+    if (modes.length === 0)
+        return;
+    nonce = previewNonce;
+    logger = previewLogger;
+    latestState = { modes };
+    const existing = getPreviewUI();
+    if (existing) {
+        renderPreviewUI(existing);
+        return;
+    }
+    void loadPreviewUI()
+        .then(renderPreviewUI)
+        .catch((error) => reportError('Preview UI could not be loaded', error));
+}
+function updatePreviewPanel(variantsAndElements, sessionPreview, applied = true) {
+    latestState = {
+        modes: modesWithVariants(sessionPreview, variantsAndElements, applied),
+    };
+    const api = getPreviewUI();
+    if (api)
+        renderPreviewUI(api);
+}
+
 let lastUrl = null;
 function observeUrlChanges(baseUrlMatch, onUrlChange) {
     const tryTrack = () => {
@@ -2910,6 +3130,23 @@ function setupTracking(Coframe, projectResult, previewVariantId, executionStartT
     return analytics;
 }
 
+function resolvePreview(pageUrl, previewVariantId, isSessionVariant) {
+    let urlPreviewVariantId = null;
+    try {
+        urlPreviewVariantId = new URL(pageUrl).searchParams.get('coframe_variant_id');
+    }
+    catch (_a) {
+        urlPreviewVariantId = getCurrentUrlSearchParams().get('coframe_variant_id');
+    }
+    if (urlPreviewVariantId) {
+        return { previewVariantId: urlPreviewVariantId, isSessionVariant: false };
+    }
+    if (previewVariantId) {
+        return { previewVariantId, isSessionVariant };
+    }
+    const stored = readPreviewVariantId();
+    return { previewVariantId: stored, isSessionVariant: !!stored };
+}
 async function awaitHydration(config, Coframe, project) {
     var _a, _b;
     if (!config.waitForHydration)
@@ -2942,7 +3179,7 @@ function setupFlushInterval(projectId) {
     }
     flushInterval = setInterval(() => flushQueuedEvents(projectId), FLUSH_EVENTS_TIME);
 }
-function setupSPANavigation(Coframe, project, config, applyVariants) {
+function setupSPANavigation(Coframe, project, config, previewVariantId, isSessionVariant, applyVariants) {
     var _a;
     if (!((_a = project === null || project === void 0 ? void 0 : project.settings) === null || _a === void 0 ? void 0 : _a.mutation_observer_active))
         return;
@@ -2981,7 +3218,8 @@ function setupSPANavigation(Coframe, project, config, applyVariants) {
         }
         else {
             try {
-                const result = await fetchProjectFromEdge(Coframe.projectId, newPageUrl, signal, config.userContext);
+                const preview = resolvePreview(newPageUrl, previewVariantId, isSessionVariant);
+                const result = await fetchProjectFromEdge(Coframe.projectId, newPageUrl, signal, config.userContext, preview.previewVariantId || undefined);
                 if (signal.aborted)
                     return;
                 if (result) {
@@ -3025,22 +3263,22 @@ function persistLaneClaims(claims, logger) {
         setCookie(LANE_COOKIE_KEY, encodeURIComponent(serialized), logger);
     }
 }
-function createApplyVariants(Coframe, config, previewVariantId, executionStartTime, analytics, personalizationHeaders, laneStore) {
+function createApplyVariants(Coframe, config, previewVariantId, isSessionVariant, executionStartTime, analytics, personalizationHeaders, laneStore) {
     let isFirstApply = true;
     return async (pageUrl, pageProject) => {
         const sessionId = isFirstApply ? Coframe.sessionId : generateUUID();
         isFirstApply = false;
         Coframe.sessionId = sessionId;
-        const urlPreviewVariantId = getCurrentUrlSearchParams().get('coframe_variant_id') || null;
-        const updatedPreviewVariantId = urlPreviewVariantId !== previewVariantId
-            ? urlPreviewVariantId
-            : previewVariantId;
-        const { variantsAndElements, experimentsInfo, hasActivatedFrames, laneClaims, } = await getVariantsAndElements(personalizationHeaders, pageProject, updatedPreviewVariantId, Coframe.userToken, pageUrl, getBrowserLanguages(), getBrowserPlatform(), Coframe.logger, config.nonce, laneStore.claims);
+        const preview = resolvePreview(pageUrl, previewVariantId, isSessionVariant);
+        setIsPreviewVariant(!!preview.previewVariantId);
+        const { variantsAndElements, experimentsInfo, hasActivatedFrames, laneClaims, } = await getVariantsAndElements(personalizationHeaders, pageProject, preview.previewVariantId, Coframe.userToken, pageUrl, getBrowserLanguages(), getBrowserPlatform(), Coframe.logger, config.nonce, laneStore.claims, preview.isSessionVariant);
         laneStore.claims = laneClaims;
         persistLaneClaims(laneClaims, Coframe.logger);
         Coframe.experimentInfo = experimentsInfo;
         Coframe.variantsAndElements = variantsAndElements;
         setFrameActivated(hasActivatedFrames);
+        const sessionPreview = resolveSessionPreviewState();
+        updatePreviewPanel(variantsAndElements, sessionPreview, !config.trackingOnly);
         if (Coframe.debug) {
             Coframe.debug.project = pageProject;
             Coframe.debug.frames = pageProject.frames;
@@ -3058,8 +3296,13 @@ function createApplyVariants(Coframe, config, previewVariantId, executionStartTi
     };
 }
 async function modifyPage(Coframe, configResult, projectResult, analytics) {
-    const { config, timeoutMs, previewVariantId, integrationStartTime, executionStartTime, } = configResult;
+    const { config, timeoutMs, previewVariantId, isSessionVariant, integrationStartTime, executionStartTime, } = configResult;
     const { project: cdnProject, personalizationHeaders } = projectResult;
+    if (resolveSessionPreviewState().isSessionPreviewActive) {
+        waitForBody(timeoutMs)
+            .then(() => resolveSessionPreviewPanel(resolveSessionPreviewState(), config.nonce, Coframe.logger))
+            .catch(() => { });
+    }
     if (!(await awaitHydration(config, Coframe, cdnProject)))
         return;
     if (cdnProject.tags) {
@@ -3069,7 +3312,7 @@ async function modifyPage(Coframe, configResult, projectResult, analytics) {
     if (!(await ensureBody(Coframe, cdnProject, timeoutMs, config.nonce)))
         return;
     const laneStore = { claims: readLaneClaims() };
-    const applyVariants = createApplyVariants(Coframe, config, previewVariantId, executionStartTime, analytics, personalizationHeaders, laneStore);
+    const applyVariants = createApplyVariants(Coframe, config, previewVariantId, isSessionVariant, executionStartTime, analytics, personalizationHeaders, laneStore);
     await applyVariants(getCurrentPageUrl(), cdnProject);
     if (!Coframe.variantsAndElements ||
         Coframe.variantsAndElements.length === 0) {
@@ -3077,7 +3320,7 @@ async function modifyPage(Coframe, configResult, projectResult, analytics) {
         variantRendered();
     }
     reportInitTiming(Coframe, cdnProject, integrationStartTime, executionStartTime);
-    setupSPANavigation(Coframe, cdnProject, config, applyVariants);
+    setupSPANavigation(Coframe, cdnProject, config, previewVariantId, isSessionVariant, applyVariants);
     setupFlushInterval(Coframe.projectId);
 }
 
@@ -3152,8 +3395,20 @@ async function resolveConfig(Coframe, revealPage) {
     }
     Coframe.projectId = projectId;
     const urlParams = getCurrentUrlSearchParams();
-    const previewVariantId = urlParams.get('coframe_variant_id');
+    const previewSource = resolvePreviewSource(urlParams);
     const shouldSendEventsParam = urlParams.get('coframe_should_send_events');
+    let previewVariantId = null;
+    let isSessionVariant = false;
+    if (previewSource.urlVariantId) {
+        previewVariantId = previewSource.urlVariantId;
+        if (previewSource.keepForSession) {
+            persistPreviewVariantId(previewSource.urlVariantId);
+        }
+    }
+    else if (previewSource.storedVariantId) {
+        previewVariantId = previewSource.storedVariantId;
+        isSessionVariant = true;
+    }
     setForceSendEvents(shouldSendEventsParam === 'true');
     setIsPreviewVariant(!!previewVariantId);
     setWaitingForCookies(!!config.waitForCookiesEnabled);
@@ -3162,6 +3417,7 @@ async function resolveConfig(Coframe, revealPage) {
         timeoutMs,
         projectId,
         previewVariantId,
+        isSessionVariant,
         integrationStartTime,
         executionStartTime,
     };
@@ -3223,14 +3479,14 @@ async function resolveIdentity(config, Coframe, timeoutMs, gracefulExit) {
     return { userToken, applyCookieConsent, onConsentChange };
 }
 
-async function resolveProject(Coframe, previewVariantId, config) {
+async function resolveProject(Coframe, previewVariantId, isSessionVariant, config) {
     var _a;
     const logger = Coframe.logger;
     const projectData = (_a = findLastCmd((c) => !!c.projectData)) === null || _a === void 0 ? void 0 : _a.projectData;
     let personalizationHeaders = (projectData === null || projectData === void 0 ? void 0 : projectData.personalizationHeaders) || null;
-    let project = projectData === null || projectData === void 0 ? void 0 : projectData.project;
+    let project = isSessionVariant ? undefined : projectData === null || projectData === void 0 ? void 0 : projectData.project;
     if (!project) {
-        const edgeResult = await fetchProjectFromEdge(Coframe.projectId, config.currentUrl || getCurrentPageUrl(), undefined, config.userContext);
+        const edgeResult = await fetchProjectFromEdge(Coframe.projectId, config.currentUrl || getCurrentPageUrl(), undefined, config.userContext, previewVariantId || undefined);
         personalizationHeaders = (edgeResult === null || edgeResult === void 0 ? void 0 : edgeResult.personalizationHeaders) || null;
         project = (edgeResult === null || edgeResult === void 0 ? void 0 : edgeResult.project) || undefined;
     }
@@ -3322,7 +3578,7 @@ async function init(options) {
     const configResult = await resolveConfig(Coframe, revealPage);
     if (!configResult)
         return;
-    const projectResult = await resolveProject(Coframe, configResult.previewVariantId, configResult.config);
+    const projectResult = await resolveProject(Coframe, configResult.previewVariantId, configResult.isSessionVariant, configResult.config);
     if (!projectResult)
         return;
     Coframe.orgId = projectResult.project.org_id || '';

package/dist/pkg/cf.esm.mjs

@@ -1103,8 +1103,11 @@ function createSession(data) {
         console.warn('[Coframe] cannot send event beacon, feature unavailable');
     }
 }
-async function fetchProjectFromEdge(projectId, currentUrl, signal, userContext, headers) {
+async function fetchProjectFromEdge(projectId, currentUrl, signal, userContext, previewVariantId, headers) {
     const payload = { projectId, currentUrl };
+    if (previewVariantId) {
+        payload.previewVariantId = previewVariantId;
+    }
     const safe = sanitizeUserContext(userContext);
     if (safe) {
         payload.userContext = safe;
@@ -2294,7 +2297,7 @@ function checkAllAudiences(metadata, project, personalizationHeaders, currentPag
     }
     return result;
 }
-async function getVariantsAndElements(personalizationHeaders, project, previewVariantId, userToken, currentPageUrl, languages, browserPlatform, logger, nonce, laneClaims = {}) {
+async function getVariantsAndElements(personalizationHeaders, project, previewVariantId, userToken, currentPageUrl, languages, browserPlatform, logger, nonce, laneClaims = {}, silentFallback = false) {
     var _a, _b;
     const experimentsInfo = [];
     const variantsAndElements = [];
@@ -2323,10 +2326,13 @@ async function getVariantsAndElements(personalizationHeaders, project, previewVa
                 hasActivatedFrames: true,
             });
         }
-        if (!skipAlert) {
+        if (!skipAlert && !silentFallback) {
             window.alert(`[Coframe] Variant preview unavailable: ${previewVariantId}.`);
         }
-        return buildResponse({});
+        if (silentFallback) ;
+        else {
+            return buildResponse({});
+        }
     }
     const userVisitCount = Number.parseInt(getCookie(VISIT_COUNT_COOKIE_KEY) || '0', 10);
     const validatedClaims = validateClaims(laneClaims, project.lanes);
@@ -2571,6 +2577,220 @@ function rebindMetrics(coframe, logger, metrics, nonce) {
     }
 }
 
+function getActivePreviewModes(sessionPreview) {
+    if (!sessionPreview.isSessionPreviewActive ||
+        !sessionPreview.previewVariantId) {
+        return [];
+    }
+    return [
+        {
+            id: 'session-preview',
+            label: 'Preview on',
+            title: `Session preview is active for ${sessionPreview.previewVariantId}`,
+            variantIds: sessionPreview.previewVariantId
+                .split(',')
+                .map((id) => id.trim())
+                .filter(Boolean),
+        },
+    ];
+}
+
+const PREVIEW_UI_PROTOCOL_VERSION = 1;
+
+const SESSION_VARIANT_KEY = 'coframe.preview_variant';
+const PREVIEW_VARIANT_QUERY_PARAM = 'coframe_variant_id';
+const KEEP_PREVIEW_FOR_SESSION_QUERY_PARAM = 'keep_preview_for_session';
+let previewDismissed = false;
+function dismissSessionPreview() {
+    previewDismissed = true;
+    clearPreviewVariantId();
+    const url = new URL(window.location.href);
+    url.searchParams.delete(PREVIEW_VARIANT_QUERY_PARAM);
+    url.searchParams.delete(KEEP_PREVIEW_FOR_SESSION_QUERY_PARAM);
+    window.history.replaceState(window.history.state, '', url);
+    window.location.reload();
+}
+function normalizeVariantIds(raw) {
+    if (!raw)
+        return null;
+    const ids = raw
+        .split(',')
+        .map((id) => id.trim())
+        .filter(Boolean);
+    return ids.length > 0 ? ids.join(',') : null;
+}
+function readPreviewVariantId() {
+    try {
+        return sessionStorage.getItem(SESSION_VARIANT_KEY);
+    }
+    catch (_a) {
+        return null;
+    }
+}
+function persistPreviewVariantId(variantId) {
+    const normalized = normalizeVariantIds(variantId);
+    if (!normalized)
+        return;
+    try {
+        sessionStorage.setItem(SESSION_VARIANT_KEY, normalized);
+    }
+    catch (_a) {
+    }
+}
+function clearPreviewVariantId() {
+    try {
+        sessionStorage.removeItem(SESSION_VARIANT_KEY);
+    }
+    catch (_a) {
+    }
+}
+function resolvePreviewSource(urlParams = getCurrentUrlSearchParams()) {
+    return {
+        urlVariantId: urlParams.get(PREVIEW_VARIANT_QUERY_PARAM),
+        storedVariantId: readPreviewVariantId(),
+        keepForSession: urlParams.get(KEEP_PREVIEW_FOR_SESSION_QUERY_PARAM) === 'true',
+    };
+}
+function resolveSessionPreviewState() {
+    if (previewDismissed) {
+        return { isSessionPreviewActive: false, previewVariantId: null };
+    }
+    const previewSource = resolvePreviewSource();
+    const urlVariantId = normalizeVariantIds(previewSource.urlVariantId);
+    if (urlVariantId && previewSource.keepForSession) {
+        return {
+            isSessionPreviewActive: true,
+            previewVariantId: urlVariantId,
+        };
+    }
+    if (urlVariantId) {
+        return { isSessionPreviewActive: false, previewVariantId: null };
+    }
+    const storedVariantId = normalizeVariantIds(previewSource.storedVariantId);
+    return {
+        isSessionPreviewActive: !!storedVariantId,
+        previewVariantId: storedVariantId,
+    };
+}
+
+const PREVIEW_UI_SCRIPT_ID = 'coframe-preview-ui-script';
+const PREVIEW_UI_URL = "https://edge.cofra.me/preview-ui/latest.js";
+let loadPromise = null;
+let latestState = { modes: [] };
+let nonce;
+let logger;
+let mounted = false;
+function reportError(message, error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    if (logger) {
+        logger.warn(message, 'preview_ui_unavailable', { error: errorMessage });
+        return;
+    }
+    console.warn(`[Coframe] ${message}`, error);
+}
+function getPreviewUI() {
+    const api = window.CoframePreviewUI;
+    return (api === null || api === void 0 ? void 0 : api.protocolVersion) === PREVIEW_UI_PROTOCOL_VERSION ? api : undefined;
+}
+function loadPreviewUI() {
+    const existing = getPreviewUI();
+    if (existing)
+        return Promise.resolve(existing);
+    if (loadPromise)
+        return loadPromise;
+    loadPromise = new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.id = PREVIEW_UI_SCRIPT_ID;
+        script.async = true;
+        script.src = PREVIEW_UI_URL;
+        if (nonce)
+            script.nonce = nonce;
+        script.onload = () => {
+            const api = getPreviewUI();
+            if (!api) {
+                reject(new Error('Preview UI protocol is missing or incompatible'));
+                return;
+            }
+            resolve(api);
+        };
+        script.onerror = () => {
+            reject(new Error('Preview UI script failed to load'));
+        };
+        document.head.appendChild(script);
+    });
+    return loadPromise;
+}
+function renderPreviewUI(api) {
+    try {
+        if (latestState.modes.length === 0) {
+            api.unmount();
+            mounted = false;
+        }
+        else if (mounted) {
+            api.update(latestState);
+        }
+        else {
+            api.mount({ state: latestState, nonce, onDismiss: dismissPreviewPanel });
+            mounted = true;
+        }
+    }
+    catch (error) {
+        reportError('Preview UI could not be rendered', error);
+    }
+}
+function dismissPreviewPanel() {
+    dismissSessionPreview();
+    latestState = { modes: [] };
+    const api = getPreviewUI();
+    if (api)
+        renderPreviewUI(api);
+}
+function modesWithVariants(sessionPreview, variantsAndElements, applied = true) {
+    const activeModes = getActivePreviewModes(sessionPreview);
+    if (activeModes.length === 0)
+        return [];
+    const currentPageVariantIds = new Set((variantsAndElements === null || variantsAndElements === void 0 ? void 0 : variantsAndElements.map(({ variant }) => variant.id)) || []);
+    const slugById = new Map((variantsAndElements === null || variantsAndElements === void 0 ? void 0 : variantsAndElements.map(({ variant }) => [variant.id, variant.slug])) || []);
+    return activeModes.map((mode) => ({
+        id: mode.id,
+        label: mode.label,
+        title: mode.title,
+        variants: mode.variantIds.map((id) => ({
+            id,
+            slug: slugById.get(id) || null,
+            status: variantsAndElements
+                ? applied && currentPageVariantIds.has(id)
+                    ? 'active'
+                    : 'inactive'
+                : 'pending',
+        })),
+    }));
+}
+function resolveSessionPreviewPanel(sessionPreview, previewNonce, previewLogger) {
+    const modes = modesWithVariants(sessionPreview);
+    if (modes.length === 0)
+        return;
+    nonce = previewNonce;
+    logger = previewLogger;
+    latestState = { modes };
+    const existing = getPreviewUI();
+    if (existing) {
+        renderPreviewUI(existing);
+        return;
+    }
+    void loadPreviewUI()
+        .then(renderPreviewUI)
+        .catch((error) => reportError('Preview UI could not be loaded', error));
+}
+function updatePreviewPanel(variantsAndElements, sessionPreview, applied = true) {
+    latestState = {
+        modes: modesWithVariants(sessionPreview, variantsAndElements, applied),
+    };
+    const api = getPreviewUI();
+    if (api)
+        renderPreviewUI(api);
+}
+
 let lastUrl = null;
 function observeUrlChanges(baseUrlMatch, onUrlChange) {
     const tryTrack = () => {
@@ -2908,6 +3128,23 @@ function setupTracking(Coframe, projectResult, previewVariantId, executionStartT
     return analytics;
 }
 
+function resolvePreview(pageUrl, previewVariantId, isSessionVariant) {
+    let urlPreviewVariantId = null;
+    try {
+        urlPreviewVariantId = new URL(pageUrl).searchParams.get('coframe_variant_id');
+    }
+    catch (_a) {
+        urlPreviewVariantId = getCurrentUrlSearchParams().get('coframe_variant_id');
+    }
+    if (urlPreviewVariantId) {
+        return { previewVariantId: urlPreviewVariantId, isSessionVariant: false };
+    }
+    if (previewVariantId) {
+        return { previewVariantId, isSessionVariant };
+    }
+    const stored = readPreviewVariantId();
+    return { previewVariantId: stored, isSessionVariant: !!stored };
+}
 async function awaitHydration(config, Coframe, project) {
     var _a, _b;
     if (!config.waitForHydration)
@@ -2940,7 +3177,7 @@ function setupFlushInterval(projectId) {
     }
     flushInterval = setInterval(() => flushQueuedEvents(projectId), FLUSH_EVENTS_TIME);
 }
-function setupSPANavigation(Coframe, project, config, applyVariants) {
+function setupSPANavigation(Coframe, project, config, previewVariantId, isSessionVariant, applyVariants) {
     var _a;
     if (!((_a = project === null || project === void 0 ? void 0 : project.settings) === null || _a === void 0 ? void 0 : _a.mutation_observer_active))
         return;
@@ -2979,7 +3216,8 @@ function setupSPANavigation(Coframe, project, config, applyVariants) {
         }
         else {
             try {
-                const result = await fetchProjectFromEdge(Coframe.projectId, newPageUrl, signal, config.userContext);
+                const preview = resolvePreview(newPageUrl, previewVariantId, isSessionVariant);
+                const result = await fetchProjectFromEdge(Coframe.projectId, newPageUrl, signal, config.userContext, preview.previewVariantId || undefined);
                 if (signal.aborted)
                     return;
                 if (result) {
@@ -3023,22 +3261,22 @@ function persistLaneClaims(claims, logger) {
         setCookie(LANE_COOKIE_KEY, encodeURIComponent(serialized), logger);
     }
 }
-function createApplyVariants(Coframe, config, previewVariantId, executionStartTime, analytics, personalizationHeaders, laneStore) {
+function createApplyVariants(Coframe, config, previewVariantId, isSessionVariant, executionStartTime, analytics, personalizationHeaders, laneStore) {
     let isFirstApply = true;
     return async (pageUrl, pageProject) => {
         const sessionId = isFirstApply ? Coframe.sessionId : generateUUID();
         isFirstApply = false;
         Coframe.sessionId = sessionId;
-        const urlPreviewVariantId = getCurrentUrlSearchParams().get('coframe_variant_id') || null;
-        const updatedPreviewVariantId = urlPreviewVariantId !== previewVariantId
-            ? urlPreviewVariantId
-            : previewVariantId;
-        const { variantsAndElements, experimentsInfo, hasActivatedFrames, laneClaims, } = await getVariantsAndElements(personalizationHeaders, pageProject, updatedPreviewVariantId, Coframe.userToken, pageUrl, getBrowserLanguages(), getBrowserPlatform(), Coframe.logger, config.nonce, laneStore.claims);
+        const preview = resolvePreview(pageUrl, previewVariantId, isSessionVariant);
+        setIsPreviewVariant(!!preview.previewVariantId);
+        const { variantsAndElements, experimentsInfo, hasActivatedFrames, laneClaims, } = await getVariantsAndElements(personalizationHeaders, pageProject, preview.previewVariantId, Coframe.userToken, pageUrl, getBrowserLanguages(), getBrowserPlatform(), Coframe.logger, config.nonce, laneStore.claims, preview.isSessionVariant);
         laneStore.claims = laneClaims;
         persistLaneClaims(laneClaims, Coframe.logger);
         Coframe.experimentInfo = experimentsInfo;
         Coframe.variantsAndElements = variantsAndElements;
         setFrameActivated(hasActivatedFrames);
+        const sessionPreview = resolveSessionPreviewState();
+        updatePreviewPanel(variantsAndElements, sessionPreview, !config.trackingOnly);
         if (Coframe.debug) {
             Coframe.debug.project = pageProject;
             Coframe.debug.frames = pageProject.frames;
@@ -3056,8 +3294,13 @@ function createApplyVariants(Coframe, config, previewVariantId, executionStartTi
     };
 }
 async function modifyPage(Coframe, configResult, projectResult, analytics) {
-    const { config, timeoutMs, previewVariantId, integrationStartTime, executionStartTime, } = configResult;
+    const { config, timeoutMs, previewVariantId, isSessionVariant, integrationStartTime, executionStartTime, } = configResult;
     const { project: cdnProject, personalizationHeaders } = projectResult;
+    if (resolveSessionPreviewState().isSessionPreviewActive) {
+        waitForBody(timeoutMs)
+            .then(() => resolveSessionPreviewPanel(resolveSessionPreviewState(), config.nonce, Coframe.logger))
+            .catch(() => { });
+    }
     if (!(await awaitHydration(config, Coframe, cdnProject)))
         return;
     if (cdnProject.tags) {
@@ -3067,7 +3310,7 @@ async function modifyPage(Coframe, configResult, projectResult, analytics) {
     if (!(await ensureBody(Coframe, cdnProject, timeoutMs, config.nonce)))
         return;
     const laneStore = { claims: readLaneClaims() };
-    const applyVariants = createApplyVariants(Coframe, config, previewVariantId, executionStartTime, analytics, personalizationHeaders, laneStore);
+    const applyVariants = createApplyVariants(Coframe, config, previewVariantId, isSessionVariant, executionStartTime, analytics, personalizationHeaders, laneStore);
     await applyVariants(getCurrentPageUrl(), cdnProject);
     if (!Coframe.variantsAndElements ||
         Coframe.variantsAndElements.length === 0) {
@@ -3075,7 +3318,7 @@ async function modifyPage(Coframe, configResult, projectResult, analytics) {
         variantRendered();
     }
     reportInitTiming(Coframe, cdnProject, integrationStartTime, executionStartTime);
-    setupSPANavigation(Coframe, cdnProject, config, applyVariants);
+    setupSPANavigation(Coframe, cdnProject, config, previewVariantId, isSessionVariant, applyVariants);
     setupFlushInterval(Coframe.projectId);
 }
 
@@ -3150,8 +3393,20 @@ async function resolveConfig(Coframe, revealPage) {
     }
     Coframe.projectId = projectId;
     const urlParams = getCurrentUrlSearchParams();
-    const previewVariantId = urlParams.get('coframe_variant_id');
+    const previewSource = resolvePreviewSource(urlParams);
     const shouldSendEventsParam = urlParams.get('coframe_should_send_events');
+    let previewVariantId = null;
+    let isSessionVariant = false;
+    if (previewSource.urlVariantId) {
+        previewVariantId = previewSource.urlVariantId;
+        if (previewSource.keepForSession) {
+            persistPreviewVariantId(previewSource.urlVariantId);
+        }
+    }
+    else if (previewSource.storedVariantId) {
+        previewVariantId = previewSource.storedVariantId;
+        isSessionVariant = true;
+    }
     setForceSendEvents(shouldSendEventsParam === 'true');
     setIsPreviewVariant(!!previewVariantId);
     setWaitingForCookies(!!config.waitForCookiesEnabled);
@@ -3160,6 +3415,7 @@ async function resolveConfig(Coframe, revealPage) {
         timeoutMs,
         projectId,
         previewVariantId,
+        isSessionVariant,
         integrationStartTime,
         executionStartTime,
     };
@@ -3221,14 +3477,14 @@ async function resolveIdentity(config, Coframe, timeoutMs, gracefulExit) {
     return { userToken, applyCookieConsent, onConsentChange };
 }
 
-async function resolveProject(Coframe, previewVariantId, config) {
+async function resolveProject(Coframe, previewVariantId, isSessionVariant, config) {
     var _a;
     const logger = Coframe.logger;
     const projectData = (_a = findLastCmd((c) => !!c.projectData)) === null || _a === void 0 ? void 0 : _a.projectData;
     let personalizationHeaders = (projectData === null || projectData === void 0 ? void 0 : projectData.personalizationHeaders) || null;
-    let project = projectData === null || projectData === void 0 ? void 0 : projectData.project;
+    let project = isSessionVariant ? undefined : projectData === null || projectData === void 0 ? void 0 : projectData.project;
     if (!project) {
-        const edgeResult = await fetchProjectFromEdge(Coframe.projectId, config.currentUrl || getCurrentPageUrl(), undefined, config.userContext);
+        const edgeResult = await fetchProjectFromEdge(Coframe.projectId, config.currentUrl || getCurrentPageUrl(), undefined, config.userContext, previewVariantId || undefined);
         personalizationHeaders = (edgeResult === null || edgeResult === void 0 ? void 0 : edgeResult.personalizationHeaders) || null;
         project = (edgeResult === null || edgeResult === void 0 ? void 0 : edgeResult.project) || undefined;
     }
@@ -3320,7 +3576,7 @@ async function init(options) {
     const configResult = await resolveConfig(Coframe, revealPage);
     if (!configResult)
         return;
-    const projectResult = await resolveProject(Coframe, configResult.previewVariantId, configResult.config);
+    const projectResult = await resolveProject(Coframe, configResult.previewVariantId, configResult.isSessionVariant, configResult.config);
     if (!projectResult)
         return;
     Coframe.orgId = projectResult.project.org_id || '';

package/dist/pkg/server.cjs.js

@@ -22,7 +22,7 @@ function sanitizeUserContext(userContext) {
     return userContext;
 }
 
-async function fetchProjectFromEdge(projectId, currentUrl, signal, userContext, headers) {
+async function fetchProjectFromEdge(projectId, currentUrl, signal, userContext, previewVariantId, headers) {
     const payload = { projectId, currentUrl };
     const safe = sanitizeUserContext(userContext);
     if (safe) {
@@ -73,7 +73,7 @@ async function getProjectData(options) {
     const includeCSS = options.includeCSS !== false;
     const [projectResult, antiflickerCSS] = await Promise.all([
         includeProject
-            ? fetchProjectFromEdge(options.projectId, options.currentUrl, undefined, options.userContext, options.headers)
+            ? fetchProjectFromEdge(options.projectId, options.currentUrl, undefined, options.userContext, undefined, options.headers)
             : Promise.resolve(null),
         includeCSS
             ? fetchAntiflickerFromEdge(options.projectId, options.currentUrl, options.userContext, options.enableElementAntiFlicker, options.headers)

package/dist/pkg/server.esm.mjs

@@ -20,7 +20,7 @@ function sanitizeUserContext(userContext) {
     return userContext;
 }
 
-async function fetchProjectFromEdge(projectId, currentUrl, signal, userContext, headers) {
+async function fetchProjectFromEdge(projectId, currentUrl, signal, userContext, previewVariantId, headers) {
     const payload = { projectId, currentUrl };
     const safe = sanitizeUserContext(userContext);
     if (safe) {
@@ -71,7 +71,7 @@ async function getProjectData(options) {
     const includeCSS = options.includeCSS !== false;
     const [projectResult, antiflickerCSS] = await Promise.all([
         includeProject
-            ? fetchProjectFromEdge(options.projectId, options.currentUrl, undefined, options.userContext, options.headers)
+            ? fetchProjectFromEdge(options.projectId, options.currentUrl, undefined, options.userContext, undefined, options.headers)
             : Promise.resolve(null),
         includeCSS
             ? fetchAntiflickerFromEdge(options.projectId, options.currentUrl, options.userContext, options.enableElementAntiFlicker, options.headers)

package/dist/pkg/types/index.d.ts

@@ -232,6 +232,7 @@ type ActivationCondition = {
 };
 type CoframeConfig = {
     projectId: string;
+    previewVariantId?: string;
     trackingOnly?: boolean;
     enableAntiFlickering?: boolean;
     enableElementAntiFlicker?: boolean;

package/dist/pkg/types/react.d.ts

@@ -235,6 +235,7 @@ type ActivationCondition = {
 };
 type CoframeConfig = {
     projectId: string;
+    previewVariantId?: string;
     trackingOnly?: boolean;
     enableAntiFlickering?: boolean;
     enableElementAntiFlicker?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coframe/sdk",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "Coframe optimizes your website using generative AI to deliver maximum impact to your audience and allow your site to improve itself as you sleep. Learn more at coframe.com.",
   "main": "dist/pkg/cf.cjs.js",
   "module": "dist/pkg/cf.esm.mjs",