@explorer02/cfm-survey-sdk 0.4.1 → 0.4.3

package/templates/docs/templates/CsatMatrixScale.tsx

@@ -8,7 +8,8 @@ import {
   matrixRadioRingStyle,
   matrixRadioDotStyle,
   matrixRowBackgroundStyle,
-  scaleCellSelectedStyle,
+  matrixNumberedCellStyle,
+  matrixStatementRowsContainerStyle,
   unselectedOpacityStyle,
   emojiSizeStyle,
   cellSelectedVar,
@@ -16,7 +17,7 @@ import {
   mcqSelectedAccentVar,
   mcqSelectedBgVar,
 } from '@/lib/surveyUi/selectionStyles';
-import { csatColumnLabelStyle, ratingColumnLabelStyle, stackAnchorLabelLines, ratingAnchorLabelPillStyle } 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)';
 
@@ -34,19 +35,25 @@ function anchorLabelPositionPercent(
   question: CsatMatrixQuestion,
 ): number {
   if (labelCount === 1) return 50;
-  const useFullSpan = isGraphics || question.type === 'RATING_MATRIX';
+  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 (question.type === 'RATING_MATRIX' && hasLabels) return '44px';
+  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') return label;
+  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) => (
@@ -65,6 +72,14 @@ function anchorLabelBoxStyle(question: CsatMatrixQuestion, isGraphics: boolean):
       ...ratingAnchorLabelPillStyle(),
     };
   }
+  if (question.type === 'CSAT_MATRIX') {
+    return {
+      textAlign: 'center',
+      fontSize: '12px',
+      fontWeight: 600,
+      ...csatAnchorLabelPillStyle(),
+    };
+  }
   return {
     textAlign: 'center',
     fontSize: isGraphics ? '12px' : '13px',
@@ -158,7 +173,7 @@ function CsatMatrixVerticalList({
   const { statementRows, hasNotApplicableOption: hasNotApplicable } = question;
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+    <div style={matrixStatementRowsContainerStyle()}>
       {statementRows.map(row => (
         <div key={row.id} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
           <h3 style={{ fontSize: '15px', fontWeight: 500, color: '#111827', lineHeight: 1.6, margin: 0 }}>
@@ -282,7 +297,9 @@ function CsatMatrixGrid({
               position: 'relative',
               minHeight: anchorLabelRowMinHeight(question, Boolean(showLabels)),
               minWidth: 0,
-              ...(isGraphics || question.type === 'RATING_MATRIX' ? { margin: '0 8px' } : {}),
+              ...(isGraphics || question.type === 'RATING_MATRIX' || question.type === 'CSAT_MATRIX'
+                ? { margin: '0 8px' }
+                : {}),
             }}>
               {labels!.map((label, i) => {
                 const percent = anchorLabelPositionPercent(i, n, m, isGraphics, question);
@@ -343,7 +360,7 @@ function CsatMatrixGrid({
       )}
 
       {/* Grid Rows */}
-      <div>
+      <div style={matrixStatementRowsContainerStyle()}>
         {statementRows.map((row, rowIdx) => (
           <div key={row.id} style={{
             display: 'flex', alignItems: 'center', borderRadius: '8px',
@@ -418,21 +435,8 @@ 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',
-                                fontSize: '14px', fontWeight: 500,
-                                ...(isSelected
-                                  ? scaleCellSelectedStyle(true)
-                                  : {
-                                      border: '1px solid #d1d5db',
-                                      backgroundColor: '#fff',
-                                      color: '#111827',
-                                      ...unselectedOpacityStyle(),
-                                    }),
-                                transition: 'all 0.15s',
-                              } : { padding: '8px', ...(!isSelected ? unselectedOpacityStyle() : {}) }),
+                              } : isNumbered ? matrixNumberedCellStyle(displayIdx, isSelected) : { padding: '8px', ...(!isSelected ? unselectedOpacityStyle() : {}) }),
                           }}
                         >
                           {(EmojiNode ?? StarNode ?? (isNumbered ? (displayIdx + 1) : RadioNode)) as React.ReactNode}
@@ -523,7 +527,9 @@ function CsatMatrixCarousel({
           position: 'relative',
           minHeight: anchorLabelRowMinHeight(question, Boolean(showLabels)),
           marginBottom: '16px',
-          ...(isGraphics || question.type === 'RATING_MATRIX' ? { padding: '0 8px' } : {}),
+          ...(isGraphics || question.type === 'RATING_MATRIX' || question.type === 'CSAT_MATRIX'
+            ? { padding: '0 8px' }
+            : {}),
         }}>
           {labels!.map((label, i) => {
             const m = scaleColumns.length;
@@ -601,17 +607,7 @@ function CsatMatrixCarousel({
                       ...(isSelected ? { backgroundColor: 'rgba(252, 231, 243, 0.6)', boxShadow: '0 0 0 2px rgba(226, 0, 116, 0.3)', borderRadius: '50%' } : {}),
                     } : isStar ? {
                       padding: '4px', transform: isHovered ? 'scale(1.1)' : 'scale(1)', opacity: isSelected ? 1 : isHovered ? 1 : 0.5,
-                    } : isNumbered ? {
-                      width: '40px', height: '40px', borderRadius: '8px', fontSize: '14px', fontWeight: 500,
-                      ...(isSelected
-                        ? scaleCellSelectedStyle(true)
-                        : {
-                            border: '1px solid #d1d5db',
-                            backgroundColor: '#fff',
-                            color: '#111827',
-                            ...unselectedOpacityStyle(),
-                          }),
-                    } : { padding: '8px', ...(!isSelected ? unselectedOpacityStyle() : {}) }),
+                    } : isNumbered ? matrixNumberedCellStyle(displayIdx, isSelected) : { padding: '8px', ...(!isSelected ? unselectedOpacityStyle() : {}) }),
                   }}
                 >
                   {(EmojiNode ?? StarNode ?? (isNumbered ? (displayIdx + 1) : RadioNode)) as React.ReactNode}

package/templates/docs/templates/LikertMatrixScale.tsx

@@ -3,7 +3,7 @@ import type { CfmMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-survey
 import { columnSubmitValue } from './surveyUiScaleUtils';
 import MatrixDropdown from './MatrixDropdown';
 import { matrixColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
-import { focusRingVar, matrixCarouselDotVar, matrixRadioDotStyle, matrixRadioRingStyle, matrixRowBackgroundStyle } from '@/lib/surveyUi/selectionStyles';
+import { focusRingVar, matrixCarouselDotVar, matrixRadioDotStyle, matrixRadioRingStyle, matrixRowBackgroundStyle, matrixStatementRowsContainerStyle } from '@/lib/surveyUi/selectionStyles';
 
 const MATRIX_ROW_LABEL_WIDTH = 'var(--cfm-matrix-row-width, 180px)';
 const BIPOLAR_COL_WIDTH = 'var(--cfm-matrix-bipolar-width, 25%)';
@@ -33,7 +33,7 @@ function LikertMatrixDropdownLayout({
   const { statementRows, scaleColumns } = question;
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+    <div style={matrixStatementRowsContainerStyle()}>
       {statementRows.map(row => (
         <div key={row.id} style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
           <div style={{ fontSize: '15px', fontWeight: 500, color: '#374151' }} dangerouslySetInnerHTML={{ __html: row.statementText }} />
@@ -251,7 +251,10 @@ function LikertMatrixGridLayout({
     <div style={{ width: '100%', maxWidth: '100%', minWidth: 0, overflowX: 'auto', boxSizing: 'border-box' }}>
       {!repeatColumnHeaders && renderHeader()}
 
-      <div style={{ display: 'flex', flexDirection: 'column', gap: repeatColumnHeaders ? '24px' : '0' }}>
+      <div style={{
+        ...matrixStatementRowsContainerStyle(),
+        gap: repeatColumnHeaders ? '24px' : 'var(--cfm-matrix-statement-row-gap, 0px)',
+      }}>
         {gridRows.map((rowItem, rowIdx) => {
           return (
             <div key={rowItem.id} style={{ display: 'flex', flexDirection: 'column' }}>

package/templates/docs/templates/RatingScale.tsx

@@ -4,12 +4,13 @@ import type { AnswerValue, NpsScalePoint } from '@explorer02/cfm-survey-sdk';
 import {
   scaleRadioRingStyle,
   scaleRadioDotStyle,
-  scaleCellSelectedStyle,
+  npsNumberBadgeStyle,
 } from '@/lib/surveyUi/selectionStyles';
 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 };
   });
 
@@ -117,15 +101,14 @@ export default function RatingScale({
             return (
               <div key={`${questionId}-badge-${option.value}`} className="flex justify-center">
                 <div
-                  className="flex items-center justify-center rounded-[3px] text-[10px] font-bold text-white shadow-sm sm:text-xs"
+                  className={`flex items-center justify-center rounded-[3px] text-[10px] font-bold shadow-sm sm:text-xs${isSelected ? ' selected' : ''}`}
                   style={{
                     width: 'var(--cfm-nps-cell-size, 24px)',
                     height: 'var(--cfm-nps-cell-size, 24px)',
-                    ...(isSelected
-                      ? scaleCellSelectedStyle(true)
-                      : { backgroundColor: option.color }),
+                    ...npsNumberBadgeStyle(option.color, isSelected),
                   }}
                   data-cfm-number-badge={index}
+                  data-cfm-nps-badge
                   title={option.label}
                 >
                   {option.label}

package/templates/docs/templates/SliderMatrixScale.tsx

@@ -10,6 +10,7 @@ import type { SliderMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-sur
 import { tickColorFromIndex } from './surveyUiScaleUtils';
 import { CustomSliderTrack } from './CustomSliderTrack';
 import { hintLabelStyle, sliderTickLabelStyle } from '@/lib/surveyUi/labelStyles';
+import { matrixStatementRowsContainerStyle } from '@/lib/surveyUi/selectionStyles';
 
 const MATRIX_ROW_LABEL_WIDTH = 'var(--cfm-matrix-row-width, 180px)';
 const SLIDER_ROW_BAND = 'var(--cfm-slider-row-band, var(--cfm-row-band, #f3f4f6))';
@@ -168,7 +169,7 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
   };
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width: '100%', maxWidth: '100%', minWidth: 0, overflowX: 'auto', boxSizing: 'border-box' }}>
+    <div style={{ ...matrixStatementRowsContainerStyle(), width: '100%', maxWidth: '100%', minWidth: 0, overflowX: 'auto', boxSizing: 'border-box' }}>
       {renderHeaderRow()}
 
       {statementRows.map(row => {

package/templates/docs/templates/labelStyles.ts

@@ -75,6 +75,23 @@ export function stackAnchorLabelLines(label: string): string[] {
   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 {

package/templates/docs/templates/selectionStyles.ts

@@ -7,6 +7,7 @@
  *   --cfm-input-focus-ring   = focus ring (outer border + inner dot)
  */
 import type { CSSProperties } from 'react';
+import { resolveNumberLabelColor } from './surveyUiScaleUtils';
 
 /** Terminal hex fallbacks match apps/client — visible before survey-theme.css loads. */
 export const cellSelectedVar = 'var(--cfm-matrix-selected, var(--cfm-primary, #fbe8f3))';
@@ -173,10 +174,67 @@ export function scaleCellSelectedStyle(isSelected: boolean): CSSProperties {
     : {};
 }
 
+/** NPS numbered badge row — React-owned; do not patch via preview bridge DOM hooks. */
+export function npsNumberBadgeStyle(backgroundColor: string, isSelected: boolean): CSSProperties {
+  const base: CSSProperties = {
+    color: '#ffffff',
+    boxSizing: 'border-box',
+  };
+  if (isSelected) {
+    return {
+      ...base,
+      border: `2px solid ${focusRingVar}`,
+      backgroundColor: cellSelectedVar,
+    };
+  }
+  return {
+    ...base,
+    backgroundColor,
+    border: 'none',
+  };
+}
+
+/** CSAT / Rating matrix numbered cell (unselected uses traffic/mono/individual badge colors). */
+export function matrixNumberedCellStyle(index: number, isSelected: boolean): CSSProperties {
+  const base: CSSProperties = {
+    width: '40px',
+    height: '40px',
+    borderRadius: '8px',
+    fontSize: '14px',
+    fontWeight: 500,
+    transition: 'all 0.15s',
+  };
+
+  if (isSelected) {
+    return {
+      ...base,
+      border: `2px solid ${focusRingVar}`,
+      backgroundColor: cellSelectedVar,
+      color: 'var(--cfm-matrix-number-text-color, #ffffff)',
+    };
+  }
+
+  return {
+    ...base,
+    border: '1px solid #d1d5db',
+    backgroundColor: resolveNumberLabelColor(index),
+    color: 'var(--cfm-matrix-number-text-color, #ffffff)',
+    ...unselectedOpacityStyle(),
+  };
+}
+
 export function unselectedOpacityStyle(): CSSProperties {
   return { opacity: 'var(--cfm-csat-unselected-opacity, 0.5)' };
 }
 
+export function matrixStatementRowsContainerStyle(): CSSProperties {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--cfm-matrix-statement-row-gap, 0px)',
+  };
+}
+
 /** Matrix statement row — zebra when --cfm-matrix-zebra-enabled is 1 (wizard multi-statement preview). */
 export function matrixRowBackgroundStyle(rowIdx: number): CSSProperties {
   let zebraOn = false;

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/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;
@@ -57,6 +68,7 @@ function setDisplay(selector, visible) {
     var mode = readVar('--cfm-number-label-mode', 'traffic');
     var mono = readVar('--cfm-number-mono-color', '#9ca3af');
     document.querySelectorAll('[data-cfm-number-badge]').forEach(function (el) {
+      if (el.closest('[data-cfm-nps-area]')) return;
       if (el.classList.contains('selected')) return;
       var i = parseInt(el.getAttribute('data-cfm-number-badge'), 10);
       if (isNaN(i)) return;
@@ -282,6 +294,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

@@ -17,26 +17,37 @@ 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.closest('[data-cfm-nps-area]')) return;
     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);
   });
 }
 
@@ -82,11 +93,17 @@ 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 }, '*');
@@ -102,6 +119,8 @@ export function PreviewConfigProvider({ children }: { children: ReactNode }) {
       if (!data?.type) return;
       if (data.type !== PREVIEW_BRIDGE_SNAPSHOT && data.type !== PREVIEW_BRIDGE_DELTA) return;
 
+      enableLiveEditMode();
+
       const isSnapshot = data.type === PREVIEW_BRIDGE_SNAPSHOT;
       let shouldBumpRevision = isSnapshot;
 

package/templates/preview-harness/vite-app/src/globals.css

@@ -6,9 +6,9 @@
 
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  color: #262626;
-  background-color: #ffffff;
+  font-family: var(--cfm-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+  color: var(--cfm-text, #262626);
+  background-color: var(--cfm-background, #ffffff);
   max-width: 100%;
   overflow-x: hidden;
   box-sizing: border-box;
@@ -19,4 +19,5 @@ body {
   max-width: 100%;
   overflow-x: hidden;
   box-sizing: border-box;
+  font-family: inherit;
 }

package/templates/preview-harness/vite-app/src/mergePreviewQuestion.ts

@@ -224,10 +224,32 @@ export function mergePreviewQuestion(
   });
 }
 
-/** Survey page layout — each question reflects its type-tab customization mapping. */
+/** Survey page layout — each embedded question uses its type-tab customization. */
 export function mergeSurveyPageQuestion(
   question: SurveyQuestion,
   previewState: PreviewStatePatch,
 ): SurveyQuestion {
-  return mergePreviewQuestion(question, normalizeSurveyPagePreviewState(previewState));
+  const normalized = normalizeSurveyPagePreviewState(previewState);
+  let state = normalized;
+
+  if (question.type === 'NPS_SCALE') {
+    state = {
+      ...normalized,
+      npsButtonStyle:
+        previewState.npsButtonStyle
+        ?? normalized.npsButtonStyle
+        ?? (question.buttonStyle as string | undefined),
+      hintMinText: previewState.hintMinText ?? normalized.hintMinText,
+      hintMaxText: previewState.hintMaxText ?? normalized.hintMaxText,
+    };
+  } else if (question.type === 'MCQ') {
+    state = {
+      ...normalized,
+      mcqOptionStyle: previewState.mcqOptionStyle ?? normalized.mcqOptionStyle,
+    };
+  } else if (question.type === 'CFM_MATRIX') {
+    state = { ...normalized, multiStatement: true };
+  }
+
+  return mergePreviewQuestion(question, state);
 }

package/templates/preview-harness/vite-app/src/preview-live-overrides.css

@@ -122,6 +122,7 @@ html.cfm-live-edit #root {
   max-width: 100%;
   overflow-x: hidden;
   box-sizing: border-box;
+  font-family: var(--cfm-font-family, system-ui, sans-serif) !important;
 }
 
 html.cfm-live-edit [data-cfm-question-area],
@@ -136,3 +137,7 @@ html.cfm-live-edit [data-cfm-nps-area] {
   max-width: 100%;
   overflow-x: auto;
 }
+
+html.cfm-live-edit [data-cfm-nps-area] [data-cfm-nps-badge] {
+  color: #ffffff !important;
+}

package/templates/previewBridge.ts

@@ -33,6 +33,18 @@ let rafId: number | null = null;
 const pendingVars: Record<string, string> = {};
 let liveEditClass = false;
 
+const 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';
+
+function ensurePreviewFonts(): void {
+  if (document.getElementById('cfm-preview-fonts')) return;
+  const link = document.createElement('link');
+  link.id = 'cfm-preview-fonts';
+  link.rel = 'stylesheet';
+  link.href = PREVIEW_FONTS_HREF;
+  document.head.appendChild(link);
+}
+
 function flushCssVars(): void {
   rafId = null;
   const root = document.documentElement;
@@ -285,6 +297,7 @@ function applyThemeSideEffects(): void {
   const mode = readCssVar('--cfm-number-label-mode', 'traffic');
   const mono = readCssVar('--cfm-number-mono-color', '#9ca3af');
   document.querySelectorAll('[data-cfm-number-badge]').forEach((el) => {
+    if (el.closest('[data-cfm-nps-area]')) return;
     if (el.classList.contains('selected')) return;
     const i = parseInt(el.getAttribute('data-cfm-number-badge') ?? '', 10);
     if (Number.isNaN(i)) return;
@@ -302,6 +315,7 @@ function applyThemeSideEffects(): void {
 function setLiveEditMode(on: boolean): void {
   if (liveEditClass === on) return;
   liveEditClass = on;
+  if (on) ensurePreviewFonts();
   document.documentElement.classList.toggle('cfm-live-edit', on);
 }
 

package/templates/survey-theme.css

@@ -98,10 +98,12 @@
   --cfm-matrix-bipolar-width: 25%;
   --cfm-matrix-carousel-dot: #2563eb;
   --cfm-matrix-cell-padding: 8px;
+  --cfm-matrix-statement-row-gap: 8px;
 
   --cfm-csat-accent: var(--cfm-accent);
   --cfm-csat-emoji-size: 24px;
   --cfm-csat-unselected-opacity: 0.5;
+  --cfm-matrix-number-text-color: #ffffff;
   --cfm-csat-ring-color: var(--cfm-accent);
   --cfm-csat-cell-size: 40px;
 

package/templates/wizard-dist/assets/{PreviewMock-MsONyaq9.js → PreviewMock-DkCiCfU3.js}

@@ -1 +1 @@
-import{u as x,j as e}from"./index-C7RSJr09.js";import{b as t}from"./vendor-BwkXDkd3.js";function p(d=150){const l=x(r=>r.config),[a,s]=t.useState(l);return t.useEffect(()=>{const r=window.setTimeout(()=>s(l),d);return()=>window.clearTimeout(r)},[l,d]),a}const h=t.memo(function(){const l=p(150),a=x(n=>n.logoPreviewDataUrl),{global:s}=l,{layout:r,colorScheme:o,buttons:c}=s,m=t.useMemo(()=>r.borderStyle==="sharp"?"rounded-none":r.borderStyle==="pill"?"rounded-[32px]":"rounded-2xl",[r.borderStyle]),i=t.useMemo(()=>r.fontStyle==="serif"?"Georgia, serif":r.fontStyle==="system"?"system-ui, sans-serif":"Inter, sans-serif",[r.fontStyle]),u=a??s.logo.url,f=t.useMemo(()=>({backgroundColor:o.background,color:o.text,borderColor:o.secondary,fontFamily:i}),[o,i]);return e.jsxs("div",{className:`overflow-hidden border shadow-md ${m}`,style:f,children:[r.showHeader&&e.jsxs("div",{className:"flex items-center gap-3 border-b px-5 py-4",style:{borderColor:o.secondary},children:[u&&e.jsx("img",{src:u,alt:"Logo",className:"max-h-6 w-auto object-contain",loading:"lazy"}),e.jsx("span",{className:"text-xs font-semibold tracking-wider",children:s.companyName})]}),e.jsxs("div",{className:"space-y-6 p-6",children:[r.showProgressBar&&e.jsxs("div",{className:"space-y-1.5",children:[e.jsxs("div",{className:"flex justify-between text-[10px] font-semibold text-slate-400",children:[e.jsx("span",{children:"Progress"}),e.jsx("span",{children:"35%"})]}),e.jsx("div",{className:"h-1.5 w-full overflow-hidden rounded-full bg-slate-100",children:e.jsx("div",{className:"h-full w-[35%] rounded-full",style:{backgroundColor:o.accent}})})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("h4",{className:"flex items-start gap-1.5 text-sm font-bold leading-snug",children:[r.showQuestionNumbers&&e.jsx("span",{className:"font-medium text-slate-400",children:"Q1."}),e.jsx("span",{children:s.surveyTitle}),r.showRequiredAsterisk&&e.jsx("span",{className:"text-red-500",children:"*"})]}),e.jsx("p",{className:"text-[11px] text-slate-400",children:"How would you rate your overall experience?"}),e.jsx("div",{className:"grid grid-cols-5 gap-2",children:[1,2,3,4,5].map(n=>e.jsx("div",{className:`flex h-9 items-center justify-center border text-xs font-semibold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:n===1?{backgroundColor:o.secondary,borderColor:o.primary,color:o.primary}:{backgroundColor:o.background,borderColor:o.secondary,color:o.text},children:n},n))})]})]}),e.jsxs("div",{className:"flex items-center justify-between border-t bg-slate-50/50 px-6 py-4",children:[r.showBackButton&&e.jsx("span",{className:`border px-3 py-1.5 text-[10px] font-semibold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:{borderColor:o.secondary,color:o.text},children:c.back}),e.jsx("div",{className:"flex-1"}),r.showNextButton&&e.jsx("span",{className:`px-4 py-1.5 text-[10px] font-bold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:{backgroundColor:o.primary,color:o.buttonText},children:c.next})]})]})});export{h as PreviewMock};
+import{u as x,j as e}from"./index-COdmy8Xp.js";import{b as t}from"./vendor-BwkXDkd3.js";function p(d=150){const l=x(r=>r.config),[a,s]=t.useState(l);return t.useEffect(()=>{const r=window.setTimeout(()=>s(l),d);return()=>window.clearTimeout(r)},[l,d]),a}const h=t.memo(function(){const l=p(150),a=x(n=>n.logoPreviewDataUrl),{global:s}=l,{layout:r,colorScheme:o,buttons:c}=s,m=t.useMemo(()=>r.borderStyle==="sharp"?"rounded-none":r.borderStyle==="pill"?"rounded-[32px]":"rounded-2xl",[r.borderStyle]),i=t.useMemo(()=>r.fontStyle==="serif"?"Georgia, serif":r.fontStyle==="system"?"system-ui, sans-serif":"Inter, sans-serif",[r.fontStyle]),u=a??s.logo.url,f=t.useMemo(()=>({backgroundColor:o.background,color:o.text,borderColor:o.secondary,fontFamily:i}),[o,i]);return e.jsxs("div",{className:`overflow-hidden border shadow-md ${m}`,style:f,children:[r.showHeader&&e.jsxs("div",{className:"flex items-center gap-3 border-b px-5 py-4",style:{borderColor:o.secondary},children:[u&&e.jsx("img",{src:u,alt:"Logo",className:"max-h-6 w-auto object-contain",loading:"lazy"}),e.jsx("span",{className:"text-xs font-semibold tracking-wider",children:s.companyName})]}),e.jsxs("div",{className:"space-y-6 p-6",children:[r.showProgressBar&&e.jsxs("div",{className:"space-y-1.5",children:[e.jsxs("div",{className:"flex justify-between text-[10px] font-semibold text-slate-400",children:[e.jsx("span",{children:"Progress"}),e.jsx("span",{children:"35%"})]}),e.jsx("div",{className:"h-1.5 w-full overflow-hidden rounded-full bg-slate-100",children:e.jsx("div",{className:"h-full w-[35%] rounded-full",style:{backgroundColor:o.accent}})})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("h4",{className:"flex items-start gap-1.5 text-sm font-bold leading-snug",children:[r.showQuestionNumbers&&e.jsx("span",{className:"font-medium text-slate-400",children:"Q1."}),e.jsx("span",{children:s.surveyTitle}),r.showRequiredAsterisk&&e.jsx("span",{className:"text-red-500",children:"*"})]}),e.jsx("p",{className:"text-[11px] text-slate-400",children:"How would you rate your overall experience?"}),e.jsx("div",{className:"grid grid-cols-5 gap-2",children:[1,2,3,4,5].map(n=>e.jsx("div",{className:`flex h-9 items-center justify-center border text-xs font-semibold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:n===1?{backgroundColor:o.secondary,borderColor:o.primary,color:o.primary}:{backgroundColor:o.background,borderColor:o.secondary,color:o.text},children:n},n))})]})]}),e.jsxs("div",{className:"flex items-center justify-between border-t bg-slate-50/50 px-6 py-4",children:[r.showBackButton&&e.jsx("span",{className:`border px-3 py-1.5 text-[10px] font-semibold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:{borderColor:o.secondary,color:o.text},children:c.back}),e.jsx("div",{className:"flex-1"}),r.showNextButton&&e.jsx("span",{className:`px-4 py-1.5 text-[10px] font-bold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:{backgroundColor:o.primary,color:o.buttonText},children:c.next})]})]})});export{h as PreviewMock};