@explorer02/cfm-survey-sdk 0.3.1 → 0.3.2

package/templates/docs/templates/surveyUiScaleUtils.ts

@@ -13,23 +13,56 @@ export function getAccentColor(value: number): string {
 }
 
 export function tickColorFromIndex(index: number, total: number): string {
+  if (typeof document !== 'undefined') {
+    const resolved = resolveNumberLabelColor(index);
+    if (resolved) return resolved;
+  }
   if (total <= 1) return '#e20074';
   const hue = Math.round((index / (total - 1)) * 120);
   return `hsl(${hue}, 90%, 40%)`;
 }
 
+/** Reads wizard number-label CSS vars for traffic / monochrome / individual modes. */
+export function resolveNumberLabelColor(index: number, fallback = ''): string {
+  if (typeof document === 'undefined') return fallback || getAccentColor(index);
+
+  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() ||
+      fallback ||
+      '#9CA3AF'
+    );
+  }
+  if (mode === 'individual') {
+    return (
+      getComputedStyle(root).getPropertyValue(`--cfm-number-color-${index}`).trim() ||
+      fallback ||
+      '#9CA3AF'
+    );
+  }
+  return fallback || getAccentColor(index);
+}
+
 export function nonNaScaleColumns(columns: ScaleColumn[]): ScaleColumn[] {
   return columns.filter(col => col.id !== 'na');
 }
 
+function stripHtml(label: string): string {
+  return label.replace(/<[^>]*>/g, '').trim();
+}
+
 export function starValueFromOption(option: NpsScalePoint, index: number): number {
-  const numeric = Number(option.optionLabel);
-  return Number.isFinite(numeric) && option.optionLabel.trim() !== '' ? numeric : index;
+  const label = stripHtml(option.optionLabel);
+  const numeric = Number(label);
+  return Number.isFinite(numeric) && label !== '' ? numeric : index;
 }
 
 export function npsValueFromOption(option: NpsScalePoint, index: number): number {
-  const numeric = Number(option.optionLabel);
-  return Number.isFinite(numeric) && option.optionLabel.trim() !== '' ? numeric : index;
+  const label = stripHtml(option.optionLabel);
+  const numeric = Number(label);
+  return Number.isFinite(numeric) && label !== '' ? numeric : index;
 }
 
 /** Loose match for NPS/star stored answers (number) vs derived option values. */
@@ -40,7 +73,7 @@ export function isScaleAnswerSelected(
   if (selectedValue === undefined || selectedValue === null) return false;
   if (typeof selectedValue === 'number') return selectedValue === optionValue;
   if (typeof selectedValue === 'string') {
-    const parsed = Number(selectedValue);
+    const parsed = Number(stripHtml(selectedValue));
     return Number.isFinite(parsed) && parsed === optionValue;
   }
   return false;

package/templates/docs/templates/uiConfig.ts

@@ -31,3 +31,59 @@ export function getLogoSrc(options?: { staticExport?: boolean }): string | null
 export function shouldShowCompanyName(): boolean {
   return surveyUiConfig.global?.header?.showCompanyName !== false;
 }
+
+export function getSurveyTitle(): string {
+  return surveyUiConfig.global?.surveyTitle?.trim() ?? '';
+}
+
+export function getThankYouMessage(): string {
+  return surveyUiConfig.global?.thankYouMessage?.trim() ?? '';
+}
+
+export function getBrowserTabTitle(): string {
+  return surveyUiConfig.global?.browserTabTitle?.trim() ?? getSurveyTitle();
+}
+
+export function getButtonLabels(): { next: string; back: string; submit: string } {
+  const buttons = surveyUiConfig.global?.buttons;
+  return {
+    next: buttons?.next?.trim() || 'Next',
+    back: buttons?.back?.trim() || 'Back',
+    submit: buttons?.submit?.trim() || 'Submit',
+  };
+}
+
+export function getFooterCopyright(): string {
+  return surveyUiConfig.global?.footer?.copyrightText?.trim() ?? '';
+}
+
+export function getFooterLinks(): { label: string; url: string }[] {
+  const links = surveyUiConfig.global?.footer?.links;
+  return Array.isArray(links) ? links : [];
+}
+
+export function getLayoutFlags() {
+  const layout = surveyUiConfig.global?.layout ?? {};
+  const header = surveyUiConfig.global?.header ?? {};
+  const footer = surveyUiConfig.global?.footer ?? {};
+  return {
+    showHeader: layout.showHeader !== false,
+    showFooter: layout.showFooter !== false,
+    showProgressBar: layout.showProgressBar !== false,
+    showLanguageSwitcher: layout.showLanguageSwitcher === true,
+    showNextButton: layout.showNextButton !== false,
+    showBackButton: layout.showBackButton !== false,
+    showQuestionNumbers: layout.showQuestionNumbers !== false,
+    showRequiredAsterisk: layout.showRequiredAsterisk !== false,
+    showCompanyName: header.showCompanyName !== false,
+    showFooterLogo: footer.showLogo !== false,
+  };
+}
+
+export function getPlaceholders(): Record<string, string> {
+  return { ...(surveyUiConfig.placeholders ?? {}) };
+}
+
+export function isDebugEnabled(): boolean {
+  return surveyUiConfig.debug?.enabled === true;
+}

package/templates/preview-harness/previewPages.js

@@ -11,7 +11,7 @@ const sharedStyles = `
   .cfm-progress { height:var(--cfm-progress-height); background:var(--cfm-progress-track); border-radius:999px; overflow:hidden; margin:var(--cfm-sticky-pt) 0 var(--cfm-sticky-pb); }
   .cfm-progress-fill { height:100%; width:45%; background:var(--cfm-progress-fill); border-radius:999px; }
   .cfm-mcq-option { border:2px solid #e5e7eb; border-radius:var(--cfm-mcq-border-radius); padding:var(--cfm-mcq-card-padding); margin-bottom:var(--cfm-mcq-option-gap); display:flex; align-items:center; gap:8px; }
-  .cfm-mcq-option.selected { border-color:var(--cfm-mcq-selected-accent); background:var(--cfm-mcq-selected-bg); }
+  .cfm-mcq-option.selected { border-color:var(--cfm-input-focus-ring); background:var(--cfm-mcq-selected-bg); }
   .cfm-hint-row { display:flex; justify-content:space-between; font-size:12px; font-weight:600; margin-bottom:8px; }
   .cfm-hint-min, .cfm-hint-max { color:var(--cfm-hint-label-color,#6b7280); background:var(--cfm-hint-label-bg,transparent); padding:2px 4px; border-radius:4px; }
   .cfm-nps-badges { display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); gap:var(--cfm-nps-cell-gap,2px); margin-bottom:8px; }
@@ -91,11 +91,8 @@ const npsCells = Array.from({ length: 11 }, (_, i) =>
 const PREVIEW_PAGE_DEFS = [
   { key: 'header', title: 'Header', body: `<header class="cfm-header"><img data-cfm-logo class="cfm-header-logo" src="" alt="Logo" style="display:none" /><span data-cfm-company class="cfm-header-company">Company Name</span></header>` },
   { key: 'footer', title: 'Footer', body: `<footer class="cfm-footer"><div><img data-cfm-logo style="width:var(--cfm-footer-logo-width);height:var(--cfm-footer-logo-height);object-fit:contain;display:none" src="" alt="" /><p data-cfm-copyright style="font-size:12px;margin-top:8px">© Company</p></div><nav data-cfm-footer-links class="cfm-footer-links"></nav></footer>` },
-  { key: 'chrome', title: 'Chrome', body: `<header class="cfm-header"><img data-cfm-logo class="cfm-header-logo" src="" alt="" style="display:none" /><span data-cfm-company class="cfm-header-company">Company</span></header><div class="cfm-progress"><div class="cfm-progress-fill"></div></div><p data-cfm-survey-title style="font-size:20px;font-weight:var(--cfm-heading-weight);margin:16px 0">Survey Title</p><div style="display:flex;gap:12px;margin-top:24px"><button data-cfm-btn-back class="cfm-btn-back">Back</button><button data-cfm-btn-next class="cfm-btn-primary">Next</button></div>` },
   { key: 'survey_page', title: 'Survey Page', body: `<header class="cfm-header"><img data-cfm-logo class="cfm-header-logo" src="" alt="" style="display:none" /><span data-cfm-company class="cfm-header-company">Company</span></header><div data-cfm-progress class="cfm-progress"><div class="cfm-progress-fill" style="width:35%"></div></div><div data-cfm-language style="text-align:right;margin:16px 0"><select class="cfm-input" style="width:auto"><option>English</option><option>Deutsch</option></select></div><p style="font-weight:600"><span data-cfm-question-number>1.</span> Sample question <span data-cfm-required style="color:red">*</span></p><div class="cfm-mcq-option selected"><span>◉</span> Option A</div><p style="font-weight:600;margin-top:24px"><span data-cfm-question-number>2.</span> NPS question</p><div class="cfm-nps-track"><div class="cfm-nps-row">${npsCells}</div></div><div style="display:flex;gap:12px;margin-top:24px"><button data-cfm-btn-back class="cfm-btn-back">Back</button><button data-cfm-btn-next class="cfm-btn-primary">Next</button></div><footer class="cfm-footer" style="margin-top:32px"><p data-cfm-copyright>© Company</p><nav data-cfm-footer-links class="cfm-footer-links"></nav></footer>` },
-  { key: 'intro', title: 'Intro', body: `<h1 data-cfm-survey-title style="font-size:28px;font-weight:var(--cfm-heading-weight)">Welcome</h1><p style="margin:16px 0;color:#6b7280">Please take a few minutes to share your feedback.</p><button class="cfm-btn-primary">Start Survey</button>` },
-  { key: 'end', title: 'End', body: `<h1 style="font-size:28px;font-weight:var(--cfm-heading-weight)">Thank you!</h1><p data-cfm-thank-you style="margin:16px 0">Thank you for your feedback.</p>` },
-  { key: 'MCQ_single', title: 'MCQ Single', body: `<p style="font-weight:600;margin-bottom:16px">1. Select one option</p><div data-cfm-mcq-style="outlined"><div class="cfm-mcq-option selected"><span>◉</span> Option A</div><div class="cfm-mcq-option"><span>○</span> Option B</div><div class="cfm-mcq-option"><span>○</span> Option C</div></div>` },
+  { key: 'MCQ_single', title: 'MCQ Single', body: `<p style="font-weight:600;margin-bottom:16px"><span data-cfm-question-number>1.</span> Select one option</p><div data-cfm-mcq-style="outlined"><div class="cfm-mcq-option selected"><span style="display:inline-flex;width:20px;height:20px;border-radius:50%;border:2px solid var(--cfm-input-focus-ring);align-items:center;justify-content:center"><span style="width:10px;height:10px;border-radius:50%;background:var(--cfm-input-focus-ring)"></span></span> Option A</div><div class="cfm-mcq-option"><span style="display:inline-flex;width:20px;height:20px;border-radius:50%;border:1px solid #9ca3af"></span> Option B</div><div class="cfm-mcq-option"><span style="display:inline-flex;width:20px;height:20px;border-radius:50%;border:1px solid #9ca3af"></span> Option C</div></div>` },
   { key: 'MCQ_multiple', title: 'MCQ Multiple', body: `<p style="font-weight:600;margin-bottom:16px">Select all that apply</p><div class="cfm-mcq-option selected"><span>☑</span> Option A</div><div class="cfm-mcq-option"><span>☐</span> Option B</div>` },
   { key: 'TEXTFIELD_short', title: 'Text Short', body: `<p style="font-weight:600;margin-bottom:8px">Your name</p><input class="cfm-input" data-cfm-textfield placeholder="Type here..." />` },
   { key: 'TEXTFIELD_long', title: 'Text Long', body: `<p style="font-weight:600;margin-bottom:8px">Comments</p><textarea class="cfm-input" data-cfm-textfield style="height:120px;padding:12px" placeholder="Type your response..."></textarea>` },
@@ -111,13 +108,13 @@ const PREVIEW_PAGE_DEFS = [
   { key: 'CSAT_graphics', title: 'CSAT Graphics', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Slider row</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>` },
   { key: 'CSAT_carousel', title: 'CSAT Carousel', body: `${matrixPreview('Carousel row', 'emoji')}<div style="text-align:center"><span style="color:var(--cfm-matrix-selected)">●</span> ○</div>` },
   { key: 'CSAT_dropdown', title: 'CSAT Dropdown', body: `<div class="cfm-matrix-label">Statement</div><select class="cfm-input" style="margin-top:8px"><option>Choose rating...</option></select>` },
-  { key: 'RATING_star', title: 'Rating Star', body: `<div class="cfm-matrix-cells" style="justify-content:flex-start;padding:16px"><span class="cfm-star selected">★</span><span class="cfm-star selected">★</span><span class="cfm-star">★</span><span class="cfm-star">★</span><span class="cfm-star">★</span></div>` },
+  { key: 'RATING_star', title: 'Rating Star', body: `<div class="cfm-matrix-row" style="background:transparent;margin-bottom:4px"><div class="cfm-matrix-label"></div><div class="cfm-matrix-cells">${['Strongly Disagree','Disagree','Neutral','Agree','Strongly Agree'].map(l=>`<span class="cfm-matrix-col-label">${l}</span>`).join('')}</div></div><div class="cfm-matrix-row"><div class="cfm-matrix-label">Statement Item 1</div><div class="cfm-matrix-cells"><span class="cfm-star">★</span><span class="cfm-star">★</span><span class="cfm-star">★</span><span class="cfm-star">★</span><span class="cfm-star">★</span></div></div><div class="cfm-matrix-row" data-cfm-matrix-row-extra style="display:none"><div class="cfm-matrix-label">Statement Item 2</div><div class="cfm-matrix-cells"><span class="cfm-star">★</span><span class="cfm-star">★</span><span class="cfm-star">★</span><span class="cfm-star">★</span><span class="cfm-star">★</span></div></div>` },
   { key: 'RATING_numbered', title: 'Rating Numbered', body: `<div class="cfm-matrix-cells" style="padding:16px">${[1,2,3,4,5].map((n,i)=>`<div class="cfm-badge${i===1?' selected':''}" data-cfm-number-badge="${i}">${n}</div>`).join('')}</div>` },
   { key: 'RATING_radio', title: 'Rating Radio', body: matrixPreview('Recommend to a friend', 'radio') },
   { key: 'RATING_emoji', title: 'Rating Emoji', body: `<div class="cfm-matrix-cells" style="padding:16px"><span class="cfm-emoji">🙂</span><span class="cfm-emoji selected">😊</span><span class="cfm-emoji">🤩</span></div>` },
   { key: 'RATING_graphics', title: 'Rating Graphics', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Experience</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>` },
   { key: 'RATING_slider', title: 'Rating Slider', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Rate on slider</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>` },
-  { key: 'SLIDER_matrix', title: 'Slider Matrix', body: `<div style="display:flex;gap:4px;margin-bottom:16px;padding-left:var(--cfm-matrix-row-width,180px)">${[0,1,2,3,4,5].map((n,i)=>`<div class="cfm-tick" data-cfm-number-badge="${i}">${n}</div>`).join('')}</div><div style="display:flex;gap:8px;margin-bottom:8px;padding-left:var(--cfm-matrix-row-width,180px)"><span class="cfm-slider-tick-label">Low</span><span class="cfm-slider-tick-label" style="margin-left:auto">High</span></div><div class="cfm-matrix-row"><div class="cfm-matrix-label">Statement 1</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div><div class="cfm-matrix-row" data-cfm-matrix-row-extra style="display:none"><div class="cfm-matrix-label">Statement 2</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb" style="left:30%"></div></div></div></div>` },
+  { key: 'SLIDER_matrix', title: 'Slider Matrix', body: `<div style="display:flex;gap:4px;margin-bottom:16px;padding-left:var(--cfm-matrix-row-width,180px)">${Array.from({length:11},(_,i)=>`<div class="cfm-tick" data-cfm-number-badge="${i}" style="background:${TRAFFIC[i]??'#6b7280'}">${i}</div>`).join('')}</div><div style="display:flex;gap:8px;margin-bottom:8px;padding-left:var(--cfm-matrix-row-width,180px)"><span class="cfm-slider-tick-label">Label 1</span><span class="cfm-slider-tick-label" style="margin-left:auto">Label 2</span></div><div class="cfm-matrix-row" style="background:var(--cfm-slider-row-band,#f3f4f6);border-radius:8px;padding:12px 0"><div class="cfm-matrix-label">Statement Item 1</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb" style="left:50%"></div></div></div></div><div class="cfm-matrix-row" data-cfm-matrix-row-extra style="display:none;background:var(--cfm-slider-row-band,#f3f4f6);border-radius:8px;padding:12px 0"><div class="cfm-matrix-label">Statement Item 2</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb" style="left:0%"></div></div></div></div>` },
   { key: 'FILE_UPLOAD', title: 'File Upload', body: `<div class="cfm-dropzone" data-cfm-dropzone>Drop files here or click to upload</div>` },
   { key: 'TEXT_AND_MEDIA', title: 'Text & Media', body: `<div class="cfm-media">Media preview</div><p style="font-size:var(--cfm-media-caption-size,12px);color:var(--cfm-media-caption-color,#6b7280);margin-top:8px">Caption text</p>` },
   { key: 'HEATMAP', title: 'Heatmap', body: `<div style="position:relative;background:#e5e7eb;height:240px;border-radius:var(--cfm-border-radius)"><div class="cfm-pin" style="top:40%;left:55%"></div><div class="cfm-pin" style="top:60%;left:30%"></div></div>` },

package/templates/preview-harness/previewPages.ts

@@ -11,17 +11,17 @@ const sharedStyles = `
   .cfm-progress { height:var(--cfm-progress-height); background:var(--cfm-progress-track); border-radius:999px; overflow:hidden; margin:var(--cfm-sticky-pt) 0 var(--cfm-sticky-pb); }
   .cfm-progress-fill { height:100%; width:45%; background:var(--cfm-progress-fill); border-radius:999px; }
   .cfm-mcq-option { border:2px solid #e5e7eb; border-radius:var(--cfm-mcq-border-radius); padding:var(--cfm-mcq-card-padding); margin-bottom:var(--cfm-mcq-option-gap); display:flex; align-items:center; gap:8px; }
-  .cfm-mcq-option.selected { border-color:var(--cfm-mcq-selected-accent); background:var(--cfm-mcq-selected-bg); }
+  .cfm-mcq-option.selected { border-color:var(--cfm-input-focus-ring); background:var(--cfm-mcq-selected-bg); }
   .cfm-nps-row { display:flex; gap:var(--cfm-nps-cell-gap); flex-wrap:wrap; }
-  .cfm-nps-cell { width:var(--cfm-nps-cell-size); height:var(--cfm-nps-cell-size); border-radius:var(--cfm-border-radius); background:var(--cfm-nps-track-bar); display:flex; align-items:center; justify-content:center; font-size:14px; }
-  .cfm-nps-cell.selected { background:var(--cfm-nps-selected-fill); border:2px solid var(--cfm-accent); }
+  .cfm-nps-cell { width:var(--cfm-nps-cell-size); height:var(--cfm-nps-cell-size); border-radius:var(--cfm-border-radius); background:var(--cfm-nps-track-bar); display:flex; align-items:center; justify-content:center; font-size:14px; border:2px solid transparent; box-sizing:border-box; }
+  .cfm-nps-cell.selected { border-color:var(--cfm-input-focus-ring); background:var(--cfm-matrix-selected); }
   .cfm-matrix-row { display:flex; align-items:center; padding:8px 0; background:var(--cfm-row-band); margin-bottom:4px; }
   .cfm-matrix-label { width:var(--cfm-matrix-row-width); flex-shrink:0; padding:0 16px; font-size:14px; font-weight:500; }
   .cfm-matrix-cells { display:flex; gap:8px; flex:1; justify-content:center; }
-  .cfm-matrix-cell { width:var(--cfm-csat-cell-size); height:var(--cfm-csat-cell-size); border-radius:50%; border:2px solid #d1d5db; }
-  .cfm-matrix-cell.selected { border-color:var(--cfm-csat-ring-color); background:var(--cfm-selected-bg); }
+  .cfm-matrix-cell { width:var(--cfm-csat-cell-size); height:var(--cfm-csat-cell-size); border-radius:50%; border:2px solid #d1d5db; box-sizing:border-box; }
+  .cfm-matrix-cell.selected { border-color:var(--cfm-input-focus-ring); background:var(--cfm-matrix-selected); }
   .cfm-emoji { font-size:var(--cfm-csat-emoji-size); opacity:var(--cfm-csat-unselected-opacity); }
-  .cfm-emoji.selected { opacity:1; outline:2px solid var(--cfm-csat-ring-color); border-radius:8px; }
+  .cfm-emoji.selected { opacity:1; outline:2px solid var(--cfm-input-focus-ring); background:var(--cfm-matrix-selected); border-radius:50%; }
   .cfm-star { color:var(--cfm-star-color); font-size:24px; opacity:var(--cfm-star-unselected-opacity); }
   .cfm-star.selected { opacity:1; }
   .cfm-badge { width:40px; height:40px; border-radius:8px; background:var(--cfm-badge-color); color:white; display:flex; align-items:center; justify-content:center; font-weight:600; }
@@ -75,20 +75,6 @@ export const PREVIEW_PAGE_DEFS: PreviewPageDef[] = [
       <nav data-cfm-footer-links class="cfm-footer-links"></nav>
     </footer>`,
   },
-  {
-    key: 'chrome',
-    title: 'Chrome',
-    body: `<header class="cfm-header">
-      <img data-cfm-logo class="cfm-header-logo" src="" alt="" style="display:none" />
-      <span data-cfm-company class="cfm-header-company">Company</span>
-    </header>
-    <div class="cfm-progress"><div class="cfm-progress-fill"></div></div>
-    <p data-cfm-survey-title style="font-size:20px;font-weight:var(--cfm-heading-weight);margin:16px 0">Survey Title</p>
-    <div style="display:flex;gap:12px;margin-top:24px">
-      <button data-cfm-btn-back class="cfm-btn-back">Back</button>
-      <button data-cfm-btn-next class="cfm-btn-primary">Next</button>
-    </div>`,
-  },
   {
     key: 'survey_page',
     title: 'Survey Page',
@@ -101,7 +87,7 @@ export const PREVIEW_PAGE_DEFS: PreviewPageDef[] = [
     <p style="font-weight:600"><span data-cfm-question-number>1.</span> Sample question <span data-cfm-required style="color:red">*</span></p>
     <div class="cfm-mcq-option selected"><span>◉</span> Option A</div>
     <p style="font-weight:600;margin-top:24px"><span data-cfm-question-number>2.</span> NPS question</p>
-    <div class="cfm-nps-row">${Array.from({ length: 11 }, (_, i) => `<div class="cfm-nps-cell">${i}</div>`).join('')}</div>
+    <div class="cfm-nps-row">${Array.from({ length: 11 }, (_, i) => `<div class="cfm-nps-cell${i === 8 ? ' selected' : ''}">${i}</div>`).join('')}</div>
     <div style="display:flex;gap:12px;margin-top:24px">
       <button data-cfm-btn-back class="cfm-btn-back">Back</button>
       <button data-cfm-btn-next class="cfm-btn-primary">Next</button>
@@ -111,19 +97,6 @@ export const PREVIEW_PAGE_DEFS: PreviewPageDef[] = [
       <nav data-cfm-footer-links class="cfm-footer-links"></nav>
     </footer>`,
   },
-  {
-    key: 'intro',
-    title: 'Intro',
-    body: `<h1 data-cfm-survey-title style="font-size:28px;font-weight:var(--cfm-heading-weight)">Welcome</h1>
-    <p style="margin:16px 0;color:#6b7280">Please take a few minutes to share your feedback.</p>
-    <button class="cfm-btn-primary">Start Survey</button>`,
-  },
-  {
-    key: 'end',
-    title: 'End',
-    body: `<h1 style="font-size:28px;font-weight:var(--cfm-heading-weight)">Thank you!</h1>
-    <p data-cfm-thank-you style="margin:16px 0">Thank you for your feedback.</p>`,
-  },
   {
     key: 'MCQ_single',
     title: 'MCQ Single',

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

@@ -1,6 +1,7 @@
 import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
 
 export type PreviewStatePatch = {
+  activePreviewKey?: string;
   multiStatement?: boolean;
   textfieldPlaceholder?: string;
   npsButtonStyle?: string;
@@ -40,6 +41,12 @@ export function PreviewConfigProvider({ children }: { children: ReactNode }) {
           root.setAttribute(key, value as string);
         }
       }
+      if (data.cssVars) {
+        const root = document.documentElement;
+        for (const [key, value] of Object.entries(data.cssVars)) {
+          root.style.setProperty(key, value as string);
+        }
+      }
     };
 
     window.addEventListener('message', handler);

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

@@ -27,12 +27,33 @@ function resolveNumberLabelColor(index: number): string {
   return '';
 }
 
+function applyMatrixRowCount<T extends SurveyQuestion & { statementRows?: { id: string; statementText: string }[] }>(
+  q: T,
+  multiStatement: boolean | undefined,
+): T {
+  if (!('statementRows' in q) || !Array.isArray(q.statementRows)) return q;
+  const rows = q.statementRows;
+  if (multiStatement) {
+    if (rows.length >= 2) return q;
+    return {
+      ...q,
+      statementRows: [
+        ...rows,
+        { id: 'r2', statementText: 'Statement Item 2' },
+        ...(rows.length === 1 ? [{ id: 'r3', statementText: 'Statement Item 3' }] : []),
+      ],
+    } as T;
+  }
+  return { ...q, statementRows: rows.slice(0, 1) } as T;
+}
+
 function QuestionPreviewInner({ question, initialValue }: QuestionPreviewProps) {
   const { previewState } = usePreviewConfig();
   const [value, setValue] = useState<AnswerValue | undefined>(initialValue);
 
   const mergedQuestion = useMemo(() => {
     let q = { ...question } as SurveyQuestion;
+    const previewKey = previewState.activePreviewKey ?? '';
 
     if (previewState.textfieldPlaceholder && q.type === 'TEXTFIELD') {
       q = { ...q, placeholder: previewState.textfieldPlaceholder };
@@ -40,31 +61,15 @@ function QuestionPreviewInner({ question, initialValue }: QuestionPreviewProps)
 
     if (previewState.npsButtonStyle && q.type === 'NPS_SCALE') {
       const style = previewState.npsButtonStyle;
-      q = {
-        ...q,
-        buttonStyle: style === 'pill' ? 'numbered' : (style as 'standard' | 'numbered'),
-      };
-    }
-
-    if ('statementRows' in q && Array.isArray(q.statementRows)) {
-      const rows = q.statementRows;
-      if (previewState.multiStatement) {
-        q = {
-          ...q,
-          statementRows:
-            rows.length >= 2
-              ? rows
-              : [
-                  ...rows,
-                  {
-                    id: 'r2',
-                    statementText: 'Second statement row',
-                  },
-                ],
-        } as typeof q;
-      } else {
-        q = { ...q, statementRows: rows.slice(0, 1) } as typeof q;
-      }
+      const buttonStyle =
+        style === 'numbered'
+          ? 'numbered'
+          : style === 'pill'
+            ? 'pill'
+            : style === 'emoji'
+              ? 'emoji'
+              : 'standard';
+      q = { ...q, buttonStyle };
     }
 
     if (previewState.hintMinText !== undefined || previewState.hintMaxText !== undefined) {
@@ -86,13 +91,37 @@ function QuestionPreviewInner({ question, initialValue }: QuestionPreviewProps)
       }
     }
 
-    if (previewState.rankVariant === 'drag' && q.type === 'RANK_ORDER') {
-      q = { ...q, interactionMode: 'dragAndDrop', optionDisplay: 'textOnly' };
+    if (q.type === 'CFM_MATRIX') {
+      if (previewKey === 'CFM_bipolar') {
+        q = {
+          ...q,
+          statementLayout: 'bipolar',
+          showColumnHeaders: false,
+          gridLayout: 'standard',
+          transposeTable: false,
+        };
+      } else if (previewKey === 'CFM_transpose') {
+        q = { ...q, statementLayout: 'likert', transposeTable: true, gridLayout: 'standard' };
+      } else if (previewKey === 'CFM_carousel') {
+        q = { ...q, statementLayout: 'likert', gridLayout: 'carousel', transposeTable: false };
+      } else if (previewKey === 'CFM_dropdown') {
+        q = { ...q, statementLayout: 'likert', gridLayout: 'dropdown', transposeTable: false };
+      } else {
+        q = { ...q, statementLayout: 'likert', gridLayout: 'standard', transposeTable: false };
+      }
     }
-    if (previewState.rankVariant === 'dropdown' && q.type === 'RANK_ORDER') {
-      q = { ...q, interactionMode: 'dropdown', optionDisplay: 'textOnly' };
+
+    if (q.type === 'RANK_ORDER') {
+      if (previewState.rankVariant === 'drag' || previewKey === 'RANK_drag') {
+        q = { ...q, interactionMode: 'dragAndDrop', optionDisplay: 'textAndImage' };
+      }
+      if (previewState.rankVariant === 'dropdown' || previewKey === 'RANK_dropdown') {
+        q = { ...q, interactionMode: 'dropdown', optionDisplay: 'textAndImage' };
+      }
     }
 
+    q = applyMatrixRowCount(q, previewState.multiStatement);
+
     return q;
   }, [question, previewState]);
 
@@ -109,7 +138,7 @@ function QuestionPreviewInner({ question, initialValue }: QuestionPreviewProps)
 
   return (
     <div
-      className="cfm-question-card mx-auto max-w-3xl p-6"
+      className="mx-auto max-w-4xl px-4 py-6"
       style={{ fontFamily: 'var(--cfm-font-family)' }}
       data-cfm-question-area
     >

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

@@ -4,11 +4,23 @@ import SurveyStickyChrome from '@/components/SurveyStickyChrome';
 import LanguageSelector from '@/components/LanguageSelector';
 import Question from '@/components/Question';
 import Footer from '@/components/Footer';
-import { FIXTURE_SURVEY_PAGE_NPS, PREVIEW_LANGUAGES } from './fixtures/questions';
+import { PreviewConfigProvider } from './PreviewConfigContext';
+import {
+  FIXTURE_SURVEY_PAGE_MCQ,
+  FIXTURE_SURVEY_PAGE_NPS,
+  PREVIEW_LANGUAGES,
+} from './fixtures/questions';
 
-export function SurveyPagePreview() {
+function SurveyPagePreviewInner() {
   const [lang, setLang] = useState('en');
-  const [answer, setAnswer] = useState<AnswerValue | undefined>();
+  const [mcqAnswer, setMcqAnswer] = useState<AnswerValue>('a');
+  const [npsAnswer, setNpsAnswer] = useState<AnswerValue>(8);
+
+  const allQuestions = [FIXTURE_SURVEY_PAGE_MCQ, FIXTURE_SURVEY_PAGE_NPS];
+  const allAnswers = {
+    [FIXTURE_SURVEY_PAGE_MCQ.id]: mcqAnswer,
+    [FIXTURE_SURVEY_PAGE_NPS.id]: npsAnswer,
+  };
 
   return (
     <div
@@ -30,13 +42,20 @@ export function SurveyPagePreview() {
           onChange={setLang}
         />
 
-        <div className="space-y-12">
+        <div className="space-y-8">
+          <Question
+            question={FIXTURE_SURVEY_PAGE_MCQ}
+            selectedValue={mcqAnswer}
+            allAnswers={allAnswers}
+            allQuestions={allQuestions}
+            onSelect={setMcqAnswer}
+          />
           <Question
             question={FIXTURE_SURVEY_PAGE_NPS}
-            selectedValue={answer}
-            allAnswers={answer ? { [FIXTURE_SURVEY_PAGE_NPS.id]: answer } : {}}
-            allQuestions={[FIXTURE_SURVEY_PAGE_NPS]}
-            onSelect={setAnswer}
+            selectedValue={npsAnswer}
+            allAnswers={allAnswers}
+            allQuestions={allQuestions}
+            onSelect={setNpsAnswer}
           />
         </div>
 
@@ -73,3 +92,12 @@ export function SurveyPagePreview() {
     </div>
   );
 }
+
+/** Full survey page mockup for wizard Theme / Layout steps — header, progress, language, cards, footer. */
+export function SurveyPagePreview() {
+  return (
+    <PreviewConfigProvider>
+      <SurveyPagePreviewInner />
+    </PreviewConfigProvider>
+  );
+}