@coframe/sdk 1.1.4 → 1.1.5

package/dist/pkg/cf.cjs.js

@@ -2579,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 = () => {
@@ -2605,125 +2819,6 @@ function observeUrlChanges(baseUrlMatch, onUrlChange) {
     patchHistoryMethod('replaceState');
 }
 
-const TIMEOUT_MAX_MS = 5000;
-function getFeatureFlagValue(cmd) {
-    if (cmd.featureFlagSet !== undefined)
-        return cmd.featureFlagSet;
-    if (typeof cmd.emit === 'object' &&
-        cmd.emit !== null &&
-        'featureFlagSet' in cmd.emit) {
-        return cmd.emit.featureFlagSet;
-    }
-    return undefined;
-}
-async function resolveFeatureFlag(Coframe, timeoutMs) {
-    const cmd = await waitForCmd((cmd) => typeof getFeatureFlagValue(cmd) === 'boolean', Coframe, timeoutMs);
-    if (!cmd)
-        return undefined;
-    return getFeatureFlagValue(cmd);
-}
-async function resolveConfig(Coframe, revealPage) {
-    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');
-        return null;
-    }
-    const config = configCmd.config;
-    const timeoutMs = (config === null || config === void 0 ? void 0 : config.timeoutMs)
-        ? Math.min(config.timeoutMs, TIMEOUT_MAX_MS)
-        : TIMEOUT_MAX_MS;
-    const integrationStartTime = (config === null || config === void 0 ? void 0 : config.startTime)
-        ? new Date(config.startTime)
-        : null;
-    const executionStartTime = new Date();
-    Coframe.batchSize = config.batchSize || 32;
-    const gracefulExit = (msg) => {
-        console.warn(`[Coframe] ${msg}`);
-        revealPage();
-        return null;
-    };
-    if (config.waitForFeatureFlag) {
-        const flag = await resolveFeatureFlag(Coframe, timeoutMs);
-        if (flag === undefined) {
-            return gracefulExit('Feature flag was not set after timeout, graceful exit');
-        }
-        if (flag === false) {
-            return gracefulExit('Feature flag is set to false, graceful exit');
-        }
-    }
-    const projectId = config === null || config === void 0 ? void 0 : config.projectId;
-    const warnMissingVariant = () => {
-        if (applyVariantChangesStarted) {
-            logger.warn('Failed to wait for variant rendered command', 'missing_variant_rendered');
-        }
-    };
-    waitForCmd((cmd) => cmd.variantRendered === true || cmd.emit === 'variantRendered', Coframe, timeoutMs)
-        .then((cmd) => {
-        if (!cmd) {
-            warnMissingVariant();
-        }
-    })
-        .finally(() => {
-        revealPage();
-    });
-    if (!projectId) {
-        logger.error('No project ID', 'no_project_id', {
-            description: 'No Coframe Page ID',
-        });
-        variantRendered();
-        return null;
-    }
-    Coframe.projectId = projectId;
-    const urlParams = getCurrentUrlSearchParams();
-    const urlVariantId = urlParams.get('coframe_variant_id');
-    const shouldSendEventsParam = urlParams.get('coframe_should_send_events');
-    const keepForSession = urlParams.get('keep_preview_for_session') === 'true';
-    let previewVariantId = null;
-    let isSessionVariant = false;
-    if (urlVariantId) {
-        previewVariantId = urlVariantId;
-        if (keepForSession) {
-            persistPreviewVariantId(urlVariantId);
-        }
-    }
-    else {
-        const stored = readPreviewVariantId();
-        if (stored) {
-            previewVariantId = stored;
-            isSessionVariant = true;
-        }
-    }
-    setForceSendEvents(shouldSendEventsParam === 'true');
-    setIsPreviewVariant(!!previewVariantId);
-    setWaitingForCookies(!!config.waitForCookiesEnabled);
-    return {
-        config,
-        timeoutMs,
-        projectId,
-        previewVariantId,
-        isSessionVariant,
-        integrationStartTime,
-        executionStartTime,
-    };
-}
-const SESSION_VARIANT_KEY = 'coframe.preview_variant';
-function readPreviewVariantId() {
-    try {
-        return sessionStorage.getItem(SESSION_VARIANT_KEY);
-    }
-    catch (_a) {
-        return null;
-    }
-}
-function persistPreviewVariantId(variantId) {
-    try {
-        sessionStorage.setItem(SESSION_VARIANT_KEY, variantId);
-    }
-    catch (_a) {
-    }
-}
-
 function startSession(Coframe, cookiesEnabled, executionStartTime, personalizationHeaders) {
     const sessionPayload = [
         Coframe,
@@ -3182,6 +3277,8 @@ function createApplyVariants(Coframe, config, previewVariantId, isSessionVariant
         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;
@@ -3201,6 +3298,11 @@ function createApplyVariants(Coframe, config, previewVariantId, isSessionVariant
 async function modifyPage(Coframe, configResult, projectResult, analytics) {
     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) {
@@ -3222,6 +3324,105 @@ async function modifyPage(Coframe, configResult, projectResult, analytics) {
     setupFlushInterval(Coframe.projectId);
 }
 
+const TIMEOUT_MAX_MS = 5000;
+function getFeatureFlagValue(cmd) {
+    if (cmd.featureFlagSet !== undefined)
+        return cmd.featureFlagSet;
+    if (typeof cmd.emit === 'object' &&
+        cmd.emit !== null &&
+        'featureFlagSet' in cmd.emit) {
+        return cmd.emit.featureFlagSet;
+    }
+    return undefined;
+}
+async function resolveFeatureFlag(Coframe, timeoutMs) {
+    const cmd = await waitForCmd((cmd) => typeof getFeatureFlagValue(cmd) === 'boolean', Coframe, timeoutMs);
+    if (!cmd)
+        return undefined;
+    return getFeatureFlagValue(cmd);
+}
+async function resolveConfig(Coframe, revealPage) {
+    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');
+        return null;
+    }
+    const config = configCmd.config;
+    const timeoutMs = (config === null || config === void 0 ? void 0 : config.timeoutMs)
+        ? Math.min(config.timeoutMs, TIMEOUT_MAX_MS)
+        : TIMEOUT_MAX_MS;
+    const integrationStartTime = (config === null || config === void 0 ? void 0 : config.startTime)
+        ? new Date(config.startTime)
+        : null;
+    const executionStartTime = new Date();
+    Coframe.batchSize = config.batchSize || 32;
+    const gracefulExit = (msg) => {
+        console.warn(`[Coframe] ${msg}`);
+        revealPage();
+        return null;
+    };
+    if (config.waitForFeatureFlag) {
+        const flag = await resolveFeatureFlag(Coframe, timeoutMs);
+        if (flag === undefined) {
+            return gracefulExit('Feature flag was not set after timeout, graceful exit');
+        }
+        if (flag === false) {
+            return gracefulExit('Feature flag is set to false, graceful exit');
+        }
+    }
+    const projectId = config === null || config === void 0 ? void 0 : config.projectId;
+    const warnMissingVariant = () => {
+        if (applyVariantChangesStarted) {
+            logger.warn('Failed to wait for variant rendered command', 'missing_variant_rendered');
+        }
+    };
+    waitForCmd((cmd) => cmd.variantRendered === true || cmd.emit === 'variantRendered', Coframe, timeoutMs)
+        .then((cmd) => {
+        if (!cmd) {
+            warnMissingVariant();
+        }
+    })
+        .finally(() => {
+        revealPage();
+    });
+    if (!projectId) {
+        logger.error('No project ID', 'no_project_id', {
+            description: 'No Coframe Page ID',
+        });
+        variantRendered();
+        return null;
+    }
+    Coframe.projectId = projectId;
+    const urlParams = getCurrentUrlSearchParams();
+    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);
+    return {
+        config,
+        timeoutMs,
+        projectId,
+        previewVariantId,
+        isSessionVariant,
+        integrationStartTime,
+        executionStartTime,
+    };
+}
+
 async function resolveIdentity(config, Coframe, timeoutMs, gracefulExit) {
     const logger = Coframe.logger;
     let userToken;

package/dist/pkg/cf.esm.mjs

@@ -2577,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 = () => {
@@ -2603,125 +2817,6 @@ function observeUrlChanges(baseUrlMatch, onUrlChange) {
     patchHistoryMethod('replaceState');
 }
 
-const TIMEOUT_MAX_MS = 5000;
-function getFeatureFlagValue(cmd) {
-    if (cmd.featureFlagSet !== undefined)
-        return cmd.featureFlagSet;
-    if (typeof cmd.emit === 'object' &&
-        cmd.emit !== null &&
-        'featureFlagSet' in cmd.emit) {
-        return cmd.emit.featureFlagSet;
-    }
-    return undefined;
-}
-async function resolveFeatureFlag(Coframe, timeoutMs) {
-    const cmd = await waitForCmd((cmd) => typeof getFeatureFlagValue(cmd) === 'boolean', Coframe, timeoutMs);
-    if (!cmd)
-        return undefined;
-    return getFeatureFlagValue(cmd);
-}
-async function resolveConfig(Coframe, revealPage) {
-    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');
-        return null;
-    }
-    const config = configCmd.config;
-    const timeoutMs = (config === null || config === void 0 ? void 0 : config.timeoutMs)
-        ? Math.min(config.timeoutMs, TIMEOUT_MAX_MS)
-        : TIMEOUT_MAX_MS;
-    const integrationStartTime = (config === null || config === void 0 ? void 0 : config.startTime)
-        ? new Date(config.startTime)
-        : null;
-    const executionStartTime = new Date();
-    Coframe.batchSize = config.batchSize || 32;
-    const gracefulExit = (msg) => {
-        console.warn(`[Coframe] ${msg}`);
-        revealPage();
-        return null;
-    };
-    if (config.waitForFeatureFlag) {
-        const flag = await resolveFeatureFlag(Coframe, timeoutMs);
-        if (flag === undefined) {
-            return gracefulExit('Feature flag was not set after timeout, graceful exit');
-        }
-        if (flag === false) {
-            return gracefulExit('Feature flag is set to false, graceful exit');
-        }
-    }
-    const projectId = config === null || config === void 0 ? void 0 : config.projectId;
-    const warnMissingVariant = () => {
-        if (applyVariantChangesStarted) {
-            logger.warn('Failed to wait for variant rendered command', 'missing_variant_rendered');
-        }
-    };
-    waitForCmd((cmd) => cmd.variantRendered === true || cmd.emit === 'variantRendered', Coframe, timeoutMs)
-        .then((cmd) => {
-        if (!cmd) {
-            warnMissingVariant();
-        }
-    })
-        .finally(() => {
-        revealPage();
-    });
-    if (!projectId) {
-        logger.error('No project ID', 'no_project_id', {
-            description: 'No Coframe Page ID',
-        });
-        variantRendered();
-        return null;
-    }
-    Coframe.projectId = projectId;
-    const urlParams = getCurrentUrlSearchParams();
-    const urlVariantId = urlParams.get('coframe_variant_id');
-    const shouldSendEventsParam = urlParams.get('coframe_should_send_events');
-    const keepForSession = urlParams.get('keep_preview_for_session') === 'true';
-    let previewVariantId = null;
-    let isSessionVariant = false;
-    if (urlVariantId) {
-        previewVariantId = urlVariantId;
-        if (keepForSession) {
-            persistPreviewVariantId(urlVariantId);
-        }
-    }
-    else {
-        const stored = readPreviewVariantId();
-        if (stored) {
-            previewVariantId = stored;
-            isSessionVariant = true;
-        }
-    }
-    setForceSendEvents(shouldSendEventsParam === 'true');
-    setIsPreviewVariant(!!previewVariantId);
-    setWaitingForCookies(!!config.waitForCookiesEnabled);
-    return {
-        config,
-        timeoutMs,
-        projectId,
-        previewVariantId,
-        isSessionVariant,
-        integrationStartTime,
-        executionStartTime,
-    };
-}
-const SESSION_VARIANT_KEY = 'coframe.preview_variant';
-function readPreviewVariantId() {
-    try {
-        return sessionStorage.getItem(SESSION_VARIANT_KEY);
-    }
-    catch (_a) {
-        return null;
-    }
-}
-function persistPreviewVariantId(variantId) {
-    try {
-        sessionStorage.setItem(SESSION_VARIANT_KEY, variantId);
-    }
-    catch (_a) {
-    }
-}
-
 function startSession(Coframe, cookiesEnabled, executionStartTime, personalizationHeaders) {
     const sessionPayload = [
         Coframe,
@@ -3180,6 +3275,8 @@ function createApplyVariants(Coframe, config, previewVariantId, isSessionVariant
         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;
@@ -3199,6 +3296,11 @@ function createApplyVariants(Coframe, config, previewVariantId, isSessionVariant
 async function modifyPage(Coframe, configResult, projectResult, analytics) {
     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) {
@@ -3220,6 +3322,105 @@ async function modifyPage(Coframe, configResult, projectResult, analytics) {
     setupFlushInterval(Coframe.projectId);
 }
 
+const TIMEOUT_MAX_MS = 5000;
+function getFeatureFlagValue(cmd) {
+    if (cmd.featureFlagSet !== undefined)
+        return cmd.featureFlagSet;
+    if (typeof cmd.emit === 'object' &&
+        cmd.emit !== null &&
+        'featureFlagSet' in cmd.emit) {
+        return cmd.emit.featureFlagSet;
+    }
+    return undefined;
+}
+async function resolveFeatureFlag(Coframe, timeoutMs) {
+    const cmd = await waitForCmd((cmd) => typeof getFeatureFlagValue(cmd) === 'boolean', Coframe, timeoutMs);
+    if (!cmd)
+        return undefined;
+    return getFeatureFlagValue(cmd);
+}
+async function resolveConfig(Coframe, revealPage) {
+    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');
+        return null;
+    }
+    const config = configCmd.config;
+    const timeoutMs = (config === null || config === void 0 ? void 0 : config.timeoutMs)
+        ? Math.min(config.timeoutMs, TIMEOUT_MAX_MS)
+        : TIMEOUT_MAX_MS;
+    const integrationStartTime = (config === null || config === void 0 ? void 0 : config.startTime)
+        ? new Date(config.startTime)
+        : null;
+    const executionStartTime = new Date();
+    Coframe.batchSize = config.batchSize || 32;
+    const gracefulExit = (msg) => {
+        console.warn(`[Coframe] ${msg}`);
+        revealPage();
+        return null;
+    };
+    if (config.waitForFeatureFlag) {
+        const flag = await resolveFeatureFlag(Coframe, timeoutMs);
+        if (flag === undefined) {
+            return gracefulExit('Feature flag was not set after timeout, graceful exit');
+        }
+        if (flag === false) {
+            return gracefulExit('Feature flag is set to false, graceful exit');
+        }
+    }
+    const projectId = config === null || config === void 0 ? void 0 : config.projectId;
+    const warnMissingVariant = () => {
+        if (applyVariantChangesStarted) {
+            logger.warn('Failed to wait for variant rendered command', 'missing_variant_rendered');
+        }
+    };
+    waitForCmd((cmd) => cmd.variantRendered === true || cmd.emit === 'variantRendered', Coframe, timeoutMs)
+        .then((cmd) => {
+        if (!cmd) {
+            warnMissingVariant();
+        }
+    })
+        .finally(() => {
+        revealPage();
+    });
+    if (!projectId) {
+        logger.error('No project ID', 'no_project_id', {
+            description: 'No Coframe Page ID',
+        });
+        variantRendered();
+        return null;
+    }
+    Coframe.projectId = projectId;
+    const urlParams = getCurrentUrlSearchParams();
+    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);
+    return {
+        config,
+        timeoutMs,
+        projectId,
+        previewVariantId,
+        isSessionVariant,
+        integrationStartTime,
+        executionStartTime,
+    };
+}
+
 async function resolveIdentity(config, Coframe, timeoutMs, gracefulExit) {
     const logger = Coframe.logger;
     let userToken;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coframe/sdk",
-  "version": "1.1.4",
+  "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",