@explorer02/cfm-survey-sdk 0.4.0 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer02/cfm-survey-sdk",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/templates/docs/templates/CsatMatrixScale.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import type { CsatQuestion, RatingMatrixQuestion, MatrixRowAnswers, ScaleColumn } from '@explorer02/cfm-survey-sdk';
 import { getEmojiForIndex, CsatStarIcons } from './surveyUiIcons';
-import { columnSubmitValue, nonNaScaleColumns } from './surveyUiScaleUtils';
+import { columnSubmitValue, nonNaScaleColumns, resolveNumberLabelColor } from './surveyUiScaleUtils';
 import { CustomSliderTrack } from './CustomSliderTrack';
 import MatrixDropdown from './MatrixDropdown';
 import {
@@ -16,14 +16,78 @@ import {
   mcqSelectedAccentVar,
   mcqSelectedBgVar,
 } from '@/lib/surveyUi/selectionStyles';
-import { csatColumnLabelStyle, ratingColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
+import { csatColumnLabelStyle, ratingColumnLabelStyle, stackAnchorLabelLines, ratingAnchorLabelPillStyle, csatAnchorLabelPillStyle } from '@/lib/surveyUi/labelStyles';
 
 const MATRIX_ROW_LABEL_WIDTH = 'var(--cfm-matrix-row-width, 180px)';
 
 type CsatMatrixQuestion = CsatQuestion | RatingMatrixQuestion;
 
 function anchorLabelStyle(question: CsatMatrixQuestion) {
-  return question.type === 'RATING_MATRIX' ? ratingColumnLabelStyle() : csatColumnLabelStyle();
+  return question.type === 'RATING_MATRIX' ? ratingAnchorLabelPillStyle() : csatColumnLabelStyle();
+}
+
+function anchorLabelPositionPercent(
+  index: number,
+  labelCount: number,
+  columnCount: number,
+  isGraphics: boolean,
+  question: CsatMatrixQuestion,
+): number {
+  if (labelCount === 1) return 50;
+  const useFullSpan =
+    isGraphics || question.type === 'RATING_MATRIX' || question.type === 'CSAT_MATRIX';
+  const startPercent = useFullSpan ? 0 : 0.5 / columnCount;
+  const rangePercent = useFullSpan ? 1 : (columnCount - 1) / columnCount;
+  return (startPercent + (index / (labelCount - 1)) * rangePercent) * 100;
+}
+
+function anchorLabelRowMinHeight(question: CsatMatrixQuestion, hasLabels: boolean): string {
+  if (
+    hasLabels &&
+    (question.type === 'RATING_MATRIX' || question.type === 'CSAT_MATRIX')
+  ) {
+    return '44px';
+  }
+  return '24px';
+}
+
+function renderAnchorLabelContent(label: string, question: CsatMatrixQuestion): React.ReactNode {
+  if (question.type !== 'RATING_MATRIX' && question.type !== 'CSAT_MATRIX') return label;
+  const lines = stackAnchorLabelLines(label);
+  if (lines.length === 1) return label;
+  return lines.map((line, idx) => (
+    <span key={idx} style={{ display: 'block' }}>
+      {line}
+    </span>
+  ));
+}
+
+function anchorLabelBoxStyle(question: CsatMatrixQuestion, isGraphics: boolean): React.CSSProperties {
+  if (question.type === 'RATING_MATRIX') {
+    return {
+      textAlign: 'center',
+      fontSize: '12px',
+      fontWeight: 600,
+      ...ratingAnchorLabelPillStyle(),
+    };
+  }
+  if (question.type === 'CSAT_MATRIX') {
+    return {
+      textAlign: 'center',
+      fontSize: '12px',
+      fontWeight: 600,
+      ...csatAnchorLabelPillStyle(),
+    };
+  }
+  return {
+    textAlign: 'center',
+    fontSize: isGraphics ? '12px' : '13px',
+    fontWeight: 600,
+    lineHeight: 1.3,
+    whiteSpace: isGraphics ? 'normal' : 'nowrap',
+    maxWidth: isGraphics ? '72px' : undefined,
+    ...anchorLabelStyle(question),
+  };
 }
 
 function columnHeaderLabelStyle(question: CsatMatrixQuestion) {
@@ -227,24 +291,27 @@ function CsatMatrixGrid({
         <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '12px', minWidth: 0 }}>
           <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0, minWidth: 0 }} />
           <div style={{ flex: 1, display: 'flex', minWidth: 0 }}>
-            <div style={{ flex: 1, position: 'relative', minHeight: '24px', minWidth: 0, ...(isGraphics ? { margin: '0 8px' } : {}) }}>
+            <div style={{
+              flex: 1,
+              position: 'relative',
+              minHeight: anchorLabelRowMinHeight(question, Boolean(showLabels)),
+              minWidth: 0,
+              ...(isGraphics || question.type === 'RATING_MATRIX' || question.type === 'CSAT_MATRIX'
+                ? { margin: '0 8px' }
+                : {}),
+            }}>
               {labels!.map((label, i) => {
-                const startPercent = isGraphics ? 0 : 0.5 / m;
-                const rangePercent = isGraphics ? 1 : (m - 1) / m;
-                const percent = n === 1 ? 50 : (startPercent + (i / (n - 1)) * rangePercent) * 100;
+                const percent = anchorLabelPositionPercent(i, n, m, isGraphics, question);
 
                 return (
                   <div key={i} style={{
                     position: 'absolute',
                     left: `${percent}%`,
+                    bottom: 0,
                     transform: 'translateX(-50%)',
-                    textAlign: 'center', fontSize: isGraphics ? '12px' : '13px', fontWeight: 600,
-                    lineHeight: 1.3,
-                    whiteSpace: isGraphics ? 'normal' : 'nowrap',
-                    maxWidth: isGraphics ? '72px' : undefined,
-                    ...anchorLabelStyle(question),
+                    ...anchorLabelBoxStyle(question, isGraphics),
                   }}>
-                    {label}
+                    {renderAnchorLabelContent(label, question)}
                   </div>
                 );
               })}
@@ -367,7 +434,6 @@ function CsatMatrixGrid({
                             } : isStar ? {
                               padding: '4px',
                               transform: isHovered ? 'scale(1.1)' : 'scale(1)',
-                              color: isSelected ? cellSelectedVar : focusRingVar,
                               ...(isSelected ? {} : unselectedOpacityStyle()),
                               } : isNumbered ? {
                                 width: '40px', height: '40px', borderRadius: '8px',
@@ -376,8 +442,8 @@ function CsatMatrixGrid({
                                   ? scaleCellSelectedStyle(true)
                                   : {
                                       border: '1px solid #d1d5db',
-                                      backgroundColor: '#fff',
-                                      color: '#111827',
+                                      backgroundColor: resolveNumberLabelColor(displayIdx, '#fff'),
+                                      color: '#fff',
                                       ...unselectedOpacityStyle(),
                                     }),
                                 transition: 'all 0.15s',
@@ -465,24 +531,31 @@ function CsatMatrixCarousel({
       <h3 style={{ fontSize: '18px', fontWeight: 500, color: '#111827', marginBottom: '32px', textAlign: 'center' }} dangerouslySetInnerHTML={{ __html: row.statementText }} />
       
       {showLabels && scaleColumns.length > 0 && (
-        <div style={{ width: '100%', maxWidth: '100%', minWidth: 0, position: 'relative', height: '24px', marginBottom: '16px' }}>
+        <div style={{
+          width: '100%',
+          maxWidth: '100%',
+          minWidth: 0,
+          position: 'relative',
+          minHeight: anchorLabelRowMinHeight(question, Boolean(showLabels)),
+          marginBottom: '16px',
+          ...(isGraphics || question.type === 'RATING_MATRIX' || question.type === 'CSAT_MATRIX'
+            ? { padding: '0 8px' }
+            : {}),
+        }}>
           {labels!.map((label, i) => {
             const m = scaleColumns.length;
             const n = labels!.length;
-            const startPercent = isGraphics ? 0 : 0.5 / m;
-            const rangePercent = isGraphics ? 1 : (m - 1) / m;
-            const percent = n === 1 ? 50 : (startPercent + (i / (n - 1)) * rangePercent) * 100;
+            const percent = anchorLabelPositionPercent(i, n, m, isGraphics, question);
 
             return (
               <div key={i} style={{
-                position: 'absolute', left: `${percent}%`, transform: 'translateX(-50%)',
-                textAlign: 'center', fontSize: isGraphics ? '12px' : '13px', fontWeight: 600,
-                lineHeight: 1.3,
-                whiteSpace: isGraphics ? 'normal' : 'nowrap',
-                maxWidth: isGraphics ? '72px' : undefined,
-                ...anchorLabelStyle(question),
+                position: 'absolute',
+                left: `${percent}%`,
+                bottom: 0,
+                transform: 'translateX(-50%)',
+                ...anchorLabelBoxStyle(question, isGraphics),
               }}>
-                {label}
+                {renderAnchorLabelContent(label, question)}
               </div>
             );
           })}
@@ -551,8 +624,8 @@ function CsatMatrixCarousel({
                         ? scaleCellSelectedStyle(true)
                         : {
                             border: '1px solid #d1d5db',
-                            backgroundColor: '#fff',
-                            color: '#111827',
+                            backgroundColor: resolveNumberLabelColor(colIdx, '#fff'),
+                            color: '#fff',
                             ...unselectedOpacityStyle(),
                           }),
                     } : { padding: '8px', ...(!isSelected ? unselectedOpacityStyle() : {}) }),

package/templates/docs/templates/Footer.tsx

@@ -39,10 +39,11 @@ export default function Footer() {
               data-cfm-logo
               src={seedLogoSrc!}
               alt=""
-              className="object-contain"
+              className="object-contain object-left"
               style={{
-                width: 'var(--cfm-footer-logo-width, 120px)',
                 height: 'var(--cfm-footer-logo-height, 32px)',
+                maxWidth: 'var(--cfm-footer-logo-width, 120px)',
+                width: 'auto',
               }}
             />
           </div>

package/templates/docs/templates/RatingScale.tsx

@@ -10,6 +10,7 @@ import {
   getAccentColor,
   isScaleAnswerSelected,
   npsValueFromOption,
+  resolveNumberLabelColor,
   starValueFromOption,
 } from './surveyUiScaleUtils';
 import { getEmojiForIndex } from './surveyUiIcons';
@@ -23,25 +24,6 @@ type RatingScaleProps = {
   buttonStyle?: 'standard' | 'numbered' | 'emoji' | 'pill';
 };
 
-function resolveBadgeColor(index: number, value: number): string {
-  if (typeof document === 'undefined') return getAccentColor(value);
-
-  const root = document.documentElement;
-  const mode = getComputedStyle(root).getPropertyValue('--cfm-number-label-mode').trim();
-  if (mode === 'monochrome') {
-    return (
-      getComputedStyle(root).getPropertyValue('--cfm-number-mono-color').trim() || getAccentColor(value)
-    );
-  }
-  if (mode === 'individual') {
-    return (
-      getComputedStyle(root).getPropertyValue(`--cfm-number-color-${index}`).trim() ||
-      getAccentColor(value)
-    );
-  }
-  return getAccentColor(value);
-}
-
 export default function RatingScale({
   questionId,
   options,
@@ -57,7 +39,9 @@ export default function RatingScale({
         : npsValueFromOption(option as NpsScalePoint, index);
     const numericValue = typeof value === 'number' ? value : index;
     const color =
-      variant === 'nps' ? resolveBadgeColor(index, numericValue) : 'var(--cfm-primary, #e20074)';
+      variant === 'nps'
+        ? resolveNumberLabelColor(index, getAccentColor(numericValue))
+        : 'var(--cfm-primary, #e20074)';
     return { id: option.id, label: option.optionLabel, value, color };
   });
 

package/templates/docs/templates/labelStyles.ts

@@ -64,3 +64,47 @@ export function ratingColumnLabelStyle(): CSSProperties {
 export function sliderTickLabelStyle(): CSSProperties {
   return columnLabelPillStyle('sliderTick');
 }
+
+/** Split multi-word anchor labels into stacked lines for equal-width matrix headers. */
+export function stackAnchorLabelLines(label: string): string[] {
+  const trimmed = label.trim();
+  if (!trimmed) return [''];
+  const words = trimmed.split(/\s+/);
+  if (words.length <= 1) return [trimmed];
+  const mid = Math.ceil(words.length / 2);
+  return [words.slice(0, mid).join(' '), words.slice(mid).join(' ')].filter(Boolean);
+}
+
+/** CSAT matrix anchor pills — stacked text, fixed width, same look on every format. */
+export function csatAnchorLabelPillStyle(): CSSProperties {
+  return {
+    ...columnLabelPillStyle('csat'),
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    whiteSpace: 'normal',
+    maxWidth: '72px',
+    minWidth: '52px',
+    padding: '3px 6px',
+    wordBreak: 'break-word',
+    lineHeight: 1.15,
+  };
+}
+
+/** Rating matrix anchor pills — stacked text, fixed width, same look on every format. */
+export function ratingAnchorLabelPillStyle(): CSSProperties {
+  return {
+    ...columnLabelPillStyle('rating'),
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    whiteSpace: 'normal',
+    maxWidth: '72px',
+    minWidth: '52px',
+    padding: '3px 6px',
+    wordBreak: 'break-word',
+    lineHeight: 1.15,
+  };
+}

package/templates/docs/templates/surveyUiIcons.tsx

@@ -58,6 +58,11 @@ export const CsatStarIcons: { filled: React.ReactNode; empty: React.ReactNode }
     style: { color: 'var(--cfm-csat-accent, var(--cfm-primary, #e20074))', fontSize: 'var(--cfm-csat-emoji-size, 28px)' },
   }),
   empty: React.createElement(FaRegStar as React.ElementType, {
-    style: { color: '#d1d5db', fontSize: 'var(--cfm-csat-emoji-size, 28px)', stroke: '#d1d5db', strokeWidth: '16px' },
+    style: {
+      color: 'var(--cfm-star-color, var(--cfm-csat-accent, var(--cfm-primary, #e20074)))',
+      fontSize: 'var(--cfm-csat-emoji-size, 28px)',
+      stroke: 'var(--cfm-star-color, var(--cfm-csat-accent, var(--cfm-primary, #e20074)))',
+      strokeWidth: '16px',
+    },
   }),
 };

package/templates/docs/templates/uiConfig.ts

@@ -136,6 +136,15 @@ export function resolveNpsButtonStyle(questionStyle?: string): NpsButtonStyle {
   const live = readLiveNpsButtonStyle();
   if (live) return live;
 
+  if (
+    questionStyle === 'standard' ||
+    questionStyle === 'numbered' ||
+    questionStyle === 'emoji' ||
+    questionStyle === 'pill'
+  ) {
+    return questionStyle;
+  }
+
   const fromJson = (
     surveyUiConfig.questionTypes as { NPS_SCALE?: { buttonStyle?: string } } | undefined
   )?.NPS_SCALE?.buttonStyle;
@@ -147,18 +156,24 @@ export function resolveNpsButtonStyle(questionStyle?: string): NpsButtonStyle {
   ) {
     return fromJson;
   }
-  if (
-    questionStyle === 'standard' ||
-    questionStyle === 'numbered' ||
-    questionStyle === 'emoji' ||
-    questionStyle === 'pill'
-  ) {
-    return questionStyle;
-  }
   return 'numbered';
 }
 
+function readLiveNpsHintText(kind: 'min' | 'max'): string | null {
+  if (typeof window === 'undefined') return null;
+  const root = document.documentElement;
+  const cssVar = kind === 'min' ? '--cfm-hint-min-text' : '--cfm-hint-max-text';
+  const fromCss =
+    root.style.getPropertyValue(cssVar).trim() ||
+    getComputedStyle(root).getPropertyValue(cssVar).trim();
+  return fromCss || null;
+}
+
 function resolveNpsHintText(kind: 'min' | 'max', questionFallback: string): string {
+  const fromCss = readLiveNpsHintText(kind);
+  if (fromCss) return fromCss;
+  if (questionFallback.trim()) return questionFallback;
+
   const nps = (
     surveyUiConfig.questionTypes as { NPS_SCALE?: { hintMinText?: string; hintMaxText?: string } } | undefined
   )?.NPS_SCALE;

package/templates/preview-harness/preview-bridge.inline.js

@@ -2,10 +2,21 @@
   var SNAPSHOT = 'CFM_UI_CONFIG_SNAPSHOT';
   var DELTA = 'CFM_UI_CONFIG_DELTA';
   var LEGACY = 'CFM_UI_CONFIG';
+  var PREVIEW_FONTS_HREF =
+    'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&family=Lato:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&family=Raleway:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Merriweather:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap';
   var rafId = null;
   var pending = {};
   var liveEdit = false;
 
+  function ensurePreviewFonts() {
+    if (document.getElementById('cfm-preview-fonts')) return;
+    var link = document.createElement('link');
+    link.id = 'cfm-preview-fonts';
+    link.rel = 'stylesheet';
+    link.href = PREVIEW_FONTS_HREF;
+    document.head.appendChild(link);
+  }
+
   function flush() {
     rafId = null;
     var root = document.documentElement;
@@ -282,6 +293,7 @@ function setDisplay(selector, visible) {
 
     if (!liveEdit) {
       liveEdit = true;
+      ensurePreviewFonts();
       document.documentElement.classList.add('cfm-live-edit');
     }
 

package/templates/preview-harness/preview-google-fonts.html

@@ -0,0 +1,6 @@
+<link id="cfm-preview-fonts" rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&family=Lato:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&family=Raleway:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Merriweather:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap"
+/>

package/templates/preview-harness/previewPages.js

@@ -122,14 +122,15 @@ const PREVIEW_PAGE_DEFS = [
   { key: 'RANK_dropdown', title: 'Rank Dropdown', body: `<div class="cfm-rank-item"><span>Item A</span><select class="cfm-input cfm-rank-select" style="width:80px;margin-left:auto"><option>1</option><option>2</option></select></div>` },
 ];
 
-function buildPreviewHtml(def, inlineCss, inlineJs) {
+function buildPreviewHtml(def, inlineCss, inlineJs, fontsSnippet) {
+  const fonts = fontsSnippet ? `${fontsSnippet}\n` : '';
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>${def.title} — CFM Preview</title>
-  <style>${inlineCss}\n${sharedStyles}</style>
+  ${fonts}<style>${inlineCss}\n${sharedStyles}</style>
 </head>
 <body>
   <div class="cfm-preview-root">${def.body}</div>

package/templates/preview-harness/vite-app/src/PreviewConfigContext.tsx

@@ -15,27 +15,38 @@ export type PreviewStatePatch = {
 
 export const PREVIEW_BRIDGE_SNAPSHOT = 'CFM_UI_CONFIG_SNAPSHOT';
 export const PREVIEW_BRIDGE_DELTA = 'CFM_UI_CONFIG_DELTA';
+export const PREVIEW_BRIDGE_READY = 'CFM_PREVIEW_READY';
 
-const TRAFFIC = [
-  '#ef4444', '#f97316', '#eab308', '#84cc16', '#22c55e', '#14b8a6',
-  '#06b6d4', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7',
-];
+const SCALE_COLORS = [
+  '#e2001a', '#e4251b', '#ec610a', '#f18b00', '#f7b200', '#fcd900',
+  '#d2dc00', '#9fca00', '#6bb300', '#339a00', '#008000',
+] as const;
+
+function trafficColor(index: number): string {
+  return SCALE_COLORS[index] ?? '#9ca3af';
+}
 
 function readVar(name: string, fallback: string): string {
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
 }
 
-function applyNumberBadgeColors(): void {
+function resolveLiveNumberLabelColor(index: number): string {
   const mode = readVar('--cfm-number-label-mode', 'traffic');
-  const mono = readVar('--cfm-number-mono-color', '#9ca3af');
+  if (mode === 'monochrome') {
+    return readVar('--cfm-number-mono-color', '#9ca3af');
+  }
+  if (mode === 'individual') {
+    return readVar(`--cfm-number-color-${index}`, '#9ca3af');
+  }
+  return trafficColor(index);
+}
+
+function applyNumberBadgeColors(): void {
   document.querySelectorAll('[data-cfm-number-badge]').forEach((el) => {
     if (el.classList.contains('selected')) return;
     const i = parseInt(el.getAttribute('data-cfm-number-badge') ?? '', 10);
     if (Number.isNaN(i)) return;
-    let bg = TRAFFIC[i] ?? '#9ca3af';
-    if (mode === 'monochrome') bg = mono;
-    if (mode === 'individual') bg = readVar(`--cfm-number-color-${i}`, '#9ca3af');
-    (el as HTMLElement).style.backgroundColor = bg;
+    (el as HTMLElement).style.backgroundColor = resolveLiveNumberLabelColor(i);
   });
 }
 
@@ -51,6 +62,26 @@ function applyThemeSideEffects(): void {
   applyDropzoneStyle();
 }
 
+function previewStateFromCssVars(
+  cssVars: Record<string, string>,
+  prev: PreviewStatePatch,
+): PreviewStatePatch {
+  const next: PreviewStatePatch = { ...prev };
+  if (cssVars['--cfm-matrix-multi-statement'] !== undefined) {
+    next.multiStatement = cssVars['--cfm-matrix-multi-statement'] === '1';
+  }
+  if (cssVars['--cfm-nps-button-style']) {
+    next.npsButtonStyle = cssVars['--cfm-nps-button-style'];
+  }
+  if (cssVars['--cfm-hint-min-text']) {
+    next.hintMinText = cssVars['--cfm-hint-min-text'];
+  }
+  if (cssVars['--cfm-hint-max-text']) {
+    next.hintMaxText = cssVars['--cfm-hint-max-text'];
+  }
+  return next;
+}
+
 type PreviewConfigContextValue = {
   previewState: PreviewStatePatch;
   configRevision: number;
@@ -61,22 +92,60 @@ const PreviewConfigContext = createContext<PreviewConfigContextValue>({
   configRevision: 0,
 });
 
+function enableLiveEditMode(): void {
+  document.documentElement.classList.add('cfm-live-edit');
+}
+
 export function PreviewConfigProvider({ children }: { children: ReactNode }) {
   const [previewState, setPreviewState] = useState<PreviewStatePatch>({});
   const [configRevision, setConfigRevision] = useState(0);
 
   useEffect(() => {
+    enableLiveEditMode();
+
+    const requestSnapshot = () => {
+      try {
+        window.parent.postMessage({ type: PREVIEW_BRIDGE_READY }, '*');
+      } catch {
+        /* ignore */
+      }
+    };
+
+    requestSnapshot();
+
     const handler = (event: MessageEvent) => {
       const data = event.data;
       if (!data?.type) return;
       if (data.type !== PREVIEW_BRIDGE_SNAPSHOT && data.type !== PREVIEW_BRIDGE_DELTA) return;
 
-      let shouldBumpRevision = false;
+      enableLiveEditMode();
+
+      const isSnapshot = data.type === PREVIEW_BRIDGE_SNAPSHOT;
+      let shouldBumpRevision = isSnapshot;
+
+      if (data.cssVars) {
+        const root = document.documentElement;
+        for (const [key, value] of Object.entries(data.cssVars)) {
+          root.style.setProperty(key, value as string);
+        }
+        shouldBumpRevision = true;
+      }
 
-      if (data.contentPatch?.previewState) {
+      if (isSnapshot) {
+        const patchState = (data.contentPatch?.previewState ?? {}) as PreviewStatePatch;
+        const nextState = data.cssVars
+          ? previewStateFromCssVars(data.cssVars, patchState)
+          : patchState;
+        setPreviewState(nextState);
+        shouldBumpRevision = true;
+      } else if (data.contentPatch?.previewState) {
         setPreviewState((prev) => ({ ...prev, ...data.contentPatch.previewState }));
         shouldBumpRevision = true;
+      } else if (data.cssVars) {
+        setPreviewState((prev) => previewStateFromCssVars(data.cssVars, prev));
+        shouldBumpRevision = true;
       }
+
       if (data.contentPatch?.domAttributes) {
         const root = document.documentElement;
         for (const [key, value] of Object.entries(data.contentPatch.domAttributes)) {
@@ -84,12 +153,7 @@ export function PreviewConfigProvider({ children }: { children: ReactNode }) {
         }
         shouldBumpRevision = true;
       }
-      if (data.cssVars) {
-        const root = document.documentElement;
-        for (const [key, value] of Object.entries(data.cssVars)) {
-          root.style.setProperty(key, value as string);
-        }
-      }
+
       if (shouldBumpRevision) {
         setConfigRevision((r) => r + 1);
       }

package/templates/preview-harness/vite-app/src/QuestionPreview.tsx

@@ -34,7 +34,7 @@ function QuestionPreviewInner({ question, initialValue }: QuestionPreviewProps)
 
   const mergedQuestion = useMemo(
     () => mergePreviewQuestion(question, previewState),
-    [question, previewState],
+    [question, previewState, configRevision],
   );
 
   const heatmapInitial =

package/templates/preview-harness/vite-app/src/SurveyPagePreview.tsx

@@ -22,15 +22,15 @@ function SurveyPagePreviewInner() {
 
   const mcqQuestion = useMemo(
     () => mergeSurveyPageQuestion(FIXTURE_SURVEY_PAGE_MCQ, previewState),
-    [previewState],
+    [previewState, configRevision],
   );
   const matrixQuestion = useMemo(
     () => mergeSurveyPageQuestion(FIXTURE_SURVEY_PAGE_CFM_LIKERT, previewState),
-    [previewState],
+    [previewState, configRevision],
   );
   const npsQuestion = useMemo(
     () => mergeSurveyPageQuestion(FIXTURE_SURVEY_PAGE_NPS, previewState),
-    [previewState],
+    [previewState, configRevision],
   );
 
   const allQuestions = [mcqQuestion, matrixQuestion, npsQuestion];