@explorer02/cfm-survey-sdk 0.2.9 → 0.3.1

package/templates/docs/templates/selectionStyles.ts

@@ -8,8 +8,9 @@
  */
 import type { CSSProperties } from 'react';
 
-export const cellSelectedVar = 'var(--cfm-matrix-selected, var(--cfm-primary))';
-export const focusRingVar = 'var(--cfm-input-focus-ring, var(--cfm-primary))';
+/** Terminal hex fallbacks match apps/client RatingScale — visible before survey-theme.css loads. */
+export const cellSelectedVar = 'var(--cfm-matrix-selected, var(--cfm-primary, #fbe8f3))';
+export const focusRingVar = 'var(--cfm-input-focus-ring, var(--cfm-primary, #e20074))';
 
 const unselectedRing = '#d1d5db';
 const unselectedDot = '#d1d5db';

package/templates/docs/templates/surveyUiScaleUtils.ts

@@ -1,7 +1,7 @@
 /**
  * Portable scale utilities — copy to src/lib/surveyUiScaleUtils.ts or co-locate with components.
  */
-import type { NpsScalePoint, ScaleColumn } from '@explorer02/cfm-survey-sdk';
+import type { AnswerValue, NpsScalePoint, ScaleColumn } from '@explorer02/cfm-survey-sdk';
 
 export const SCALE_COLORS: readonly string[] = [
   '#e2001a', '#e4251b', '#ec610a', '#f18b00', '#f7b200', '#fcd900',
@@ -32,6 +32,20 @@ export function npsValueFromOption(option: NpsScalePoint, index: number): number
   return Number.isFinite(numeric) && option.optionLabel.trim() !== '' ? numeric : index;
 }
 
+/** Loose match for NPS/star stored answers (number) vs derived option values. */
+export function isScaleAnswerSelected(
+  selectedValue: AnswerValue | undefined,
+  optionValue: number,
+): boolean {
+  if (selectedValue === undefined || selectedValue === null) return false;
+  if (typeof selectedValue === 'number') return selectedValue === optionValue;
+  if (typeof selectedValue === 'string') {
+    const parsed = Number(selectedValue);
+    return Number.isFinite(parsed) && parsed === optionValue;
+  }
+  return false;
+}
+
 /** Matches SDK matrixColumnStoredValue — scale-matrix answers store column ids. */
 export function matrixColumnStoredValue(column: { id: string; label: string }): string | null {
   return column.id === 'na' ? null : column.id;

package/templates/docs/templates/verify-agent-build.sh

@@ -102,23 +102,6 @@ if ! grep -q "layoutFlags" "$PREVIEW_BRIDGE"; then
 fi
 echo "OK: previewBridge.ts present with layoutFlags"
 
-# Scale templates must consume wizard CSS vars (not only RatingScale)
-SCALE_CFM_COUNT=0
-for candidate in src/components/LikertMatrixScale.tsx components/LikertMatrixScale.tsx app/components/LikertMatrixScale.tsx; do
-  if [ -f "$candidate" ] && grep -q -- '--cfm-' "$candidate"; then SCALE_CFM_COUNT=1; break; fi
-done
-if [ "$SCALE_CFM_COUNT" -eq 0 ]; then
-  echo "WARN: LikertMatrixScale.tsx missing --cfm-* vars — copy from docs/templates"
-fi
-
-SCALE_CSAT_COUNT=0
-for candidate in src/components/CsatMatrixScale.tsx components/CsatMatrixScale.tsx app/components/CsatMatrixScale.tsx; do
-  if [ -f "$candidate" ] && grep -q -- '--cfm-' "$candidate"; then SCALE_CSAT_COUNT=1; break; fi
-done
-if [ "$SCALE_CSAT_COUNT" -eq 0 ]; then
-  echo "WARN: CsatMatrixScale.tsx missing --cfm-* vars — copy from docs/templates"
-fi
-
 REQUIRED_TYPES=(MCQ TEXTFIELD NPS_SCALE CFM_MATRIX CSAT_MATRIX RATING_MATRIX SLIDER_MATRIX FILE_UPLOAD TEXT_AND_MEDIA HEATMAP RANK_ORDER)
 QUESTION_FILE=""
 for candidate in src/components/Question.tsx components/Question.tsx app/components/Question.tsx; do

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

@@ -17,6 +17,7 @@
         delete pending[k];
       }
     }
+    applyThemeSideEffects();
   }
 
   function queue(vars) {
@@ -33,6 +34,7 @@
         root.style.setProperty(k, vars[k]);
       }
     }
+    applyThemeSideEffects();
   }
 
   function setDisplay(selector, visible) {
@@ -41,6 +43,44 @@
     });
   }
 
+  var TRAFFIC = ['#ef4444', '#f97316', '#eab308', '#84cc16', '#22c55e', '#14b8a6', '#06b6d4', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7'];
+
+  function readVar(name, fallback) {
+    return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+  }
+
+  function applyNumberBadgeColors() {
+    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.classList.contains('selected')) return;
+      var i = parseInt(el.getAttribute('data-cfm-number-badge'), 10);
+      if (isNaN(i)) return;
+      var bg = TRAFFIC[i] || '#9ca3af';
+      if (mode === 'monochrome') bg = mono;
+      if (mode === 'individual') bg = readVar('--cfm-number-color-' + i, '#9ca3af');
+      el.style.backgroundColor = bg;
+    });
+  }
+
+  function applyMultiStatement(show) {
+    document.querySelectorAll('[data-cfm-matrix-row-extra]').forEach(function (el) {
+      el.style.display = show ? '' : 'none';
+    });
+  }
+
+  function applyDropzoneStyle() {
+    var style = readVar('--cfm-upload-border-style', 'dashed');
+    document.querySelectorAll('[data-cfm-dropzone], .cfm-dropzone').forEach(function (el) {
+      el.style.borderStyle = style;
+    });
+  }
+
+  function applyThemeSideEffects() {
+    applyNumberBadgeColors();
+    applyDropzoneStyle();
+  }
+
   function applyContent(patch) {
     if (!patch) return;
     if (patch.logoUrl !== undefined) {
@@ -49,6 +89,7 @@
         if (patch.logoUrl) {
           img.src = patch.logoUrl;
           img.style.display = '';
+          img.style.background = 'transparent';
         } else if (el.hasAttribute('data-cfm-logo')) {
           img.style.display = 'none';
           img.removeAttribute('src');
@@ -171,21 +212,27 @@
         }
       }
     }
-    if (patch.previewState && patch.previewState.textfieldPlaceholder !== undefined) {
-      document.querySelectorAll('[data-cfm-textfield]').forEach(function (el) {
-        el.setAttribute('placeholder', patch.previewState.textfieldPlaceholder || '');
-      });
-    }
-    if (patch.previewState && patch.previewState.hintMinText !== undefined) {
-      document.querySelectorAll('[data-cfm-hint-min]').forEach(function (el) {
-        el.textContent = patch.previewState.hintMinText || '';
-      });
-    }
-    if (patch.previewState && patch.previewState.hintMaxText !== undefined) {
-      document.querySelectorAll('[data-cfm-hint-max]').forEach(function (el) {
-        el.textContent = patch.previewState.hintMaxText || '';
-      });
+    if (patch.previewState) {
+      if (patch.previewState.textfieldPlaceholder !== undefined) {
+        document.querySelectorAll('[data-cfm-textfield]').forEach(function (el) {
+          el.setAttribute('placeholder', patch.previewState.textfieldPlaceholder || '');
+        });
+      }
+      if (patch.previewState.hintMinText !== undefined) {
+        document.querySelectorAll('[data-cfm-hint-min], .cfm-hint-min').forEach(function (el) {
+          el.textContent = patch.previewState.hintMinText || '';
+        });
+      }
+      if (patch.previewState.hintMaxText !== undefined) {
+        document.querySelectorAll('[data-cfm-hint-max], .cfm-hint-max').forEach(function (el) {
+          el.textContent = patch.previewState.hintMaxText || '';
+        });
+      }
+      if (patch.previewState.multiStatement !== undefined) {
+        applyMultiStatement(!!patch.previewState.multiStatement);
+      }
     }
+    applyThemeSideEffects();
   }
 
   function handleMessage(event) {

package/templates/preview-harness/previewPages.js

@@ -1,8 +1,9 @@
 'use strict';
 
+/** Static wizard preview pages — layout matches previewPages.ts; tokens via --cfm-* + preview-bridge. */
 const sharedStyles = `
   .cfm-header { height:var(--cfm-header-height); background:var(--cfm-header-bg); border-bottom:1px solid var(--cfm-header-border); display:flex; align-items:center; padding:0 var(--cfm-header-padding-x); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
-  .cfm-header-logo { width:var(--cfm-header-logo-width); height:var(--cfm-header-logo-height); object-fit:contain; padding:var(--cfm-header-logo-padding); background:var(--cfm-primary); }
+  .cfm-header-logo { width:var(--cfm-header-logo-width); height:var(--cfm-header-logo-height); max-height:calc(var(--cfm-header-height, 120px) - 8px); object-fit:contain; padding:var(--cfm-header-logo-padding); background:transparent; }
   .cfm-header-company { font-size:var(--cfm-header-company-size); font-weight:var(--cfm-header-company-weight); color:var(--cfm-header-company-color); margin-left:16px; }
   .cfm-footer { background:var(--cfm-footer-bg); color:var(--cfm-footer-text); padding:var(--cfm-footer-padding-y) var(--cfm-footer-padding-x); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end; }
   .cfm-footer-links { display:flex; gap:24px; flex-wrap:wrap; }
@@ -11,82 +12,117 @@ const sharedStyles = `
   .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-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-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; }
+  .cfm-nps-badge { width:var(--cfm-nps-cell-size,24px); height:var(--cfm-nps-cell-size,24px); margin:0 auto; border-radius:3px; font-size:10px; font-weight:700; color:#fff; display:flex; align-items:center; justify-content:center; box-sizing:border-box; }
+  .cfm-nps-badge.selected { border:2px solid var(--cfm-input-focus-ring); background:var(--cfm-matrix-selected); }
+  .cfm-nps-track { background:var(--cfm-nps-track-bar,#f2f2f2); border-radius:6px; padding:8px 4px; }
+  .cfm-nps-row { display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); gap:var(--cfm-nps-cell-gap,2px); }
+  .cfm-nps-radio { width:var(--cfm-nps-cell-size,32px); height:var(--cfm-nps-cell-size,32px); margin:0 auto; border-radius:50%; border:2px solid #d1d5db; background:#fff; box-sizing:border-box; display:flex; align-items:center; justify-content:center; }
+  .cfm-nps-radio.selected { border-color:var(--cfm-input-focus-ring); background:var(--cfm-matrix-selected); }
+  .cfm-nps-radio.selected::after { content:''; width:33%; height:33%; border-radius:50%; background:var(--cfm-input-focus-ring); }
   .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-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-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; }
-  .cfm-slider-track { height:8px; background:var(--cfm-slider-track); border-radius:4px; position:relative; margin:24px 0; }
-  .cfm-slider-thumb { width:20px; height:20px; background:var(--cfm-slider-thumb); border-radius:50%; position:absolute; top:-6px; left:60%; }
-  .cfm-tick { width:var(--cfm-slider-tick-size); height:var(--cfm-slider-tick-size); background:var(--cfm-slider-tick); border-radius:4px; font-size:11px; display:flex; align-items:center; justify-content:center; color:white; }
-  .cfm-dropzone { border:2px dashed var(--cfm-upload-accent); border-radius:var(--cfm-border-radius); padding:var(--cfm-upload-padding); text-align:center; color:var(--cfm-text); }
+  .cfm-matrix-label { width:var(--cfm-matrix-row-width,180px); flex-shrink:0; padding:0 16px; font-size:14px; font-weight:500; box-sizing:border-box; }
+  .cfm-matrix-cells { display:flex; gap:8px; flex:1; justify-content:center; align-items:center; }
+  .cfm-matrix-col-label { font-size:13px; font-weight:500; text-align:center; color:var(--cfm-csat-column-label-color,var(--cfm-matrix-column-label-color,#4b5563)); background:var(--cfm-csat-column-label-bg,var(--cfm-matrix-column-label-bg,transparent)); padding:2px 6px; border-radius:4px; }
+  .cfm-matrix-cell { width:var(--cfm-csat-cell-size,18px); height:var(--cfm-csat-cell-size,18px); 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,28px); opacity:var(--cfm-csat-unselected-opacity,0.5); line-height:1; }
+  .cfm-emoji.selected { opacity:1; outline:2px solid var(--cfm-input-focus-ring); border-radius:8px; }
+  .cfm-star { color:var(--cfm-input-focus-ring); font-size:var(--cfm-csat-emoji-size,24px); opacity:var(--cfm-csat-unselected-opacity,0.5); }
+  .cfm-star.selected { opacity:1; color:var(--cfm-matrix-selected); }
+  .cfm-badge { width:40px; height:40px; border-radius:8px; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; border:1px solid #d1d5db; box-sizing:border-box; }
+  .cfm-badge.selected { border:2px solid var(--cfm-input-focus-ring); background:var(--cfm-matrix-selected); color:#fff; }
+  .cfm-slider-track { height:8px; background:var(--cfm-slider-track,#e5e7eb); border-radius:4px; position:relative; margin:24px 0; }
+  .cfm-slider-thumb { width:20px; height:20px; background:var(--cfm-slider-thumb,var(--cfm-input-focus-ring)); border-radius:50%; position:absolute; top:-6px; left:60%; border:2px solid var(--cfm-input-focus-ring); box-sizing:border-box; }
+  .cfm-tick { min-width:var(--cfm-slider-tick-size,24px); height:var(--cfm-slider-tick-size,24px); background:var(--cfm-slider-tick,#6b7280); border-radius:4px; font-size:11px; display:flex; align-items:center; justify-content:center; color:#fff; padding:0 4px; }
+  .cfm-slider-tick-label { font-size:12px; font-weight:500; color:var(--cfm-slider-tick-label-color,#4b5563); background:var(--cfm-slider-tick-label-bg,transparent); padding:2px 4px; border-radius:4px; }
+  .cfm-dropzone { border-width:2px; border-style:var(--cfm-upload-border-style,dashed); border-color:var(--cfm-upload-border-color,#d1d5db); border-radius:var(--cfm-border-radius,12px); padding:var(--cfm-upload-padding,24px); background:var(--cfm-upload-fill,#f9fafb); text-align:center; color:var(--cfm-text); }
   .cfm-input { width:100%; height:var(--cfm-input-height); border:1px solid var(--cfm-input-border); border-radius:var(--cfm-input-radius); padding:0 var(--cfm-input-padding); font-family:inherit; box-sizing:border-box; }
-  .cfm-rank-item { background:var(--cfm-rank-item-bg); padding:var(--cfm-rank-item-padding); margin-bottom:var(--cfm-rank-item-gap); border-radius:var(--cfm-border-radius); display:flex; align-items:center; gap:12px; }
-  .cfm-rank-badge { background:var(--cfm-rank-badge); color:white; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; }
-  .cfm-handle { color:var(--cfm-rank-handle); cursor:grab; }
-  .cfm-pin { width:var(--cfm-heatmap-pin-size); height:var(--cfm-heatmap-pin-size); background:var(--cfm-heatmap-pin); border:2px solid white; border-radius:50%; position:absolute; }
+  .cfm-input:focus { outline:2px solid var(--cfm-input-focus-ring); }
+  .cfm-rank-item { background:var(--cfm-rank-item-bg,#fff); padding:var(--cfm-rank-item-padding,12px 16px); margin-bottom:var(--cfm-rank-item-gap,8px); border-radius:var(--cfm-border-radius,8px); display:flex; align-items:center; gap:12px; }
+  .cfm-rank-badge { background:var(--cfm-rank-badge,var(--cfm-primary)); color:#fff; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
+  .cfm-handle { color:var(--cfm-rank-handle,#9ca3af); cursor:grab; }
+  .cfm-rank-select { border-color:var(--cfm-rank-select-border,#d1d5db) !important; }
+  .cfm-pin { width:var(--cfm-heatmap-pin-size,16px); height:var(--cfm-heatmap-pin-size,16px); background:var(--cfm-heatmap-pin,#f97316); border:2px solid var(--cfm-heatmap-pin-border,#fff); border-radius:50%; position:absolute; box-sizing:border-box; }
   .cfm-media { max-width:var(--cfm-media-max-width); border-radius:var(--cfm-media-radius); background:#e5e7eb; height:200px; display:flex; align-items:center; justify-content:center; }
   .cfm-btn-primary { background:var(--cfm-primary); color:var(--cfm-button-text); border:none; border-radius:var(--cfm-border-radius); padding:10px 20px; }
   .cfm-btn-back { background:transparent; color:var(--cfm-primary); border:1px solid var(--cfm-primary); border-radius:var(--cfm-border-radius); padding:10px 20px; }
 `;
 
+const TRAFFIC = ['#ef4444', '#f97316', '#eab308', '#84cc16', '#22c55e', '#14b8a6', '#06b6d4', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7'];
+
 function cells(n) {
   return Array.from({ length: n }, (_, i) =>
     `<div class="cfm-matrix-cell${i === 2 ? ' selected' : ''}"></div>`,
   ).join('');
 }
 
-function matrixPreview(label) {
-  return `<div class="cfm-matrix-row"><div class="cfm-matrix-label">${label}</div><div class="cfm-matrix-cells">${cells(5)}</div></div>`;
+function colLabels(n) {
+  return Array.from({ length: n }, (_, i) => `<span class="cfm-matrix-col-label">${i + 1}</span>`).join('');
+}
+
+function matrixPreview(label, mode) {
+  if (mode === 'emoji') {
+    return `<div class="cfm-matrix-row"><div class="cfm-matrix-label">${label}</div><div class="cfm-matrix-cells"><span class="cfm-emoji">😞</span><span class="cfm-emoji selected">🙂</span><span class="cfm-emoji">😊</span></div></div>`;
+  }
+  return `<div class="cfm-matrix-row" style="background:transparent;margin-bottom:4px"><div class="cfm-matrix-label"></div><div class="cfm-matrix-cells">${colLabels(5)}</div></div>
+<div class="cfm-matrix-row"><div class="cfm-matrix-label">${label}</div><div class="cfm-matrix-cells">${cells(5)}</div></div>`;
+}
+
+function npsPreview() {
+  const badges = Array.from({ length: 11 }, (_, i) =>
+    `<div class="cfm-nps-badge${i === 8 ? ' selected' : ''}" data-cfm-number-badge="${i}">${i}</div>`,
+  ).join('');
+  const radios = Array.from({ length: 11 }, (_, i) =>
+    `<div class="cfm-nps-radio${i === 8 ? ' selected' : ''}"></div>`,
+  ).join('');
+  return `<p style="font-weight:600;margin-bottom:8px">How likely are you to recommend us?</p>
+<div class="cfm-hint-row"><span class="cfm-hint-min" data-cfm-hint-min>Not likely</span><span class="cfm-hint-max" data-cfm-hint-max>Very likely</span></div>
+<div class="cfm-nps-badges">${badges}</div>
+<div class="cfm-nps-track"><div class="cfm-nps-row">${radios}</div></div>`;
 }
 
 const npsCells = Array.from({ length: 11 }, (_, i) =>
-  `<div class="cfm-nps-cell${i === 8 ? ' selected' : ''}">${i}</div>`,
+  `<div class="cfm-nps-radio${i === 8 ? ' selected' : ''}"></div>`,
 ).join('');
 
 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></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-row">${npsCells}</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 share your feedback.</p><button class="cfm-btn-primary">Start Survey</button>` },
+  { 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>` },
+  { 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_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" placeholder="Type here..." />` },
-  { key: 'TEXTFIELD_long', title: 'Text Long', body: `<p style="font-weight:600;margin-bottom:8px">Comments</p><textarea class="cfm-input" style="height:120px;padding:12px" placeholder="Type your response..."></textarea>` },
-  { key: 'NPS_SCALE', title: 'NPS', body: `<p style="font-weight:600;margin-bottom:8px">How likely are you to recommend us?</p><div class="cfm-nps-row">${npsCells}</div>` },
-  { key: 'CFM_likert', title: 'CFM Likert', body: matrixPreview('Statement item 1') },
-  { key: 'CFM_bipolar', title: 'CFM Bipolar', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width)">Left</div><div class="cfm-matrix-cells">${cells(5)}</div><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width);text-align:right">Right</div></div>` },
-  { key: 'CFM_transpose', title: 'CFM Transpose', body: matrixPreview('Scale item (transposed)') },
-  { key: 'CFM_carousel', title: 'CFM Carousel', body: `${matrixPreview('Row 1 of 3')}<div style="text-align:center;margin-top:12px"><span style="color:var(--cfm-matrix-carousel-dot)">●</span> ○ ○</div>` },
-  { key: 'CFM_dropdown', title: 'CFM Dropdown', body: `<div class="cfm-matrix-label">Statement 1</div><select class="cfm-input" style="margin-top:8px"><option>Select...</option></select>` },
-  { key: 'CSAT_emoji', title: 'CSAT Emoji', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">How satisfied?</div><div class="cfm-matrix-cells"><span class="cfm-emoji selected">😞</span><span class="cfm-emoji">🙂</span><span class="cfm-emoji">😊</span></div></div>` },
-  { key: 'CSAT_star', title: 'CSAT Star', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Rate us</div><div class="cfm-matrix-cells"><span class="cfm-star selected">★</span><span class="cfm-star selected">★</span><span class="cfm-star">★</span></div></div>` },
-  { key: 'CSAT_numbered', title: 'CSAT Numbered', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Score</div><div class="cfm-matrix-cells"><div class="cfm-badge">1</div><div class="cfm-badge">2</div><div class="cfm-badge">3</div></div></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>` },
+  { key: 'NPS_SCALE', title: 'NPS', body: npsPreview() },
+  { key: 'CFM_likert', title: 'CFM Likert', body: `${matrixPreview('Statement item 1', 'radio')}<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">${cells(5)}</div></div>` },
+  { key: 'CFM_bipolar', title: 'CFM Bipolar', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width,25%)">Left statement</div><div class="cfm-matrix-cells">${cells(5)}</div><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width,25%);text-align:right">Right statement</div></div>` },
+  { key: 'CFM_transpose', title: 'CFM Transpose', body: matrixPreview('Scale item (transposed row)', 'radio') },
+  { key: 'CFM_carousel', title: 'CFM Carousel', body: `${matrixPreview('Row 1 of 3', 'radio')}<div style="text-align:center;margin-top:12px"><span style="color:var(--cfm-matrix-selected)">●</span> ○ ○</div>` },
+  { key: 'CFM_dropdown', title: 'CFM Dropdown', body: `<div class="cfm-matrix-label" style="width:100%;margin-bottom:8px">Statement 1</div><select class="cfm-input"><option>Select...</option><option>Col 1</option><option>Col 2</option></select>` },
+  { key: 'CSAT_emoji', title: 'CSAT Emoji', body: `<div class="cfm-matrix-row" style="background:transparent;margin-bottom:4px"><div class="cfm-matrix-label"></div><div class="cfm-matrix-cells">${colLabels(5)}</div></div><div class="cfm-matrix-row"><div class="cfm-matrix-label">How satisfied?</div><div class="cfm-matrix-cells"><span class="cfm-emoji selected">😞</span><span class="cfm-emoji">😐</span><span class="cfm-emoji">🙂</span><span class="cfm-emoji">😊</span><span class="cfm-emoji">🤩</span></div></div>` },
+  { key: 'CSAT_star', title: 'CSAT Star', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Rate us</div><div class="cfm-matrix-cells"><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></div>` },
+  { key: 'CSAT_numbered', title: 'CSAT Numbered', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Score</div><div class="cfm-matrix-cells">${[1,2,3,4,5].map((n,i)=>`<div class="cfm-badge${i===2?' selected':''}" data-cfm-number-badge="${i}">${n}</div>`).join('')}</div></div>` },
   { 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')}<div style="text-align:center"><span style="color:var(--cfm-csat-accent)">●</span> ○</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></div>` },
-  { key: 'RATING_numbered', title: 'Rating Numbered', body: `<div class="cfm-matrix-cells" style="padding:16px"><div class="cfm-badge">1</div><div class="cfm-badge">2</div><div class="cfm-badge">3</div></div>` },
-  { key: 'RATING_radio', title: 'Rating Radio', body: matrixPreview('Recommend to a friend') },
+  { 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_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 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>` },
-  { key: 'FILE_UPLOAD', title: 'File Upload', body: `<div data-cfm-dropzone-style="dashed" class="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>` },
-  { 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>` },
+  { 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: '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>` },
   { key: 'RANK_drag', title: 'Rank Drag', body: `<div class="cfm-rank-item"><span class="cfm-handle">⠿</span><span class="cfm-rank-badge">1</span> Item A</div><div class="cfm-rank-item"><span class="cfm-handle">⠿</span><span class="cfm-rank-badge">2</span> Item B</div>` },
-  { key: 'RANK_dropdown', title: 'Rank Dropdown', body: `<div style="display:flex;align-items:center;gap:12px"><span>Item A</span><select class="cfm-input" style="width:80px"><option>1</option></select></div>` },
+  { 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) {
@@ -105,4 +141,4 @@ function buildPreviewHtml(def, inlineCss, inlineJs) {
 </html>`;
 }
 
-module.exports = { PREVIEW_PAGE_DEFS, buildPreviewHtml, sharedStyles, PREVIEW_KEYS: PREVIEW_PAGE_DEFS.map((d) => d.key) };
+module.exports = { PREVIEW_PAGE_DEFS, buildPreviewHtml, sharedStyles, PREVIEW_KEYS: PREVIEW_PAGE_DEFS.map((d) => d.key), TRAFFIC };

package/templates/preview-harness/previewPages.ts

@@ -3,9 +3,8 @@ export type PreviewPageDef = { key: string; title: string; body: string };
 
 const sharedStyles = `
   .cfm-header { height:var(--cfm-header-height); background:var(--cfm-header-bg); border-bottom:1px solid var(--cfm-header-border); display:flex; align-items:center; padding:0 var(--cfm-header-padding-x); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
-  .cfm-header-brand { display:flex; align-items:center; gap:var(--cfm-header-brand-gap,16px); }
-  .cfm-header-logo { width:var(--cfm-header-logo-width); height:var(--cfm-header-logo-height); object-fit:contain; padding:var(--cfm-header-logo-padding); background:var(--cfm-header-logo-bg,transparent); }
-  .cfm-header-company { font-size:var(--cfm-header-company-size); font-weight:var(--cfm-header-company-weight); color:var(--cfm-header-company-color); }
+  .cfm-header-logo { width:var(--cfm-header-logo-width); height:var(--cfm-header-logo-height); object-fit:contain; padding:var(--cfm-header-logo-padding); background:var(--cfm-primary); }
+  .cfm-header-company { font-size:var(--cfm-header-company-size); font-weight:var(--cfm-header-company-weight); color:var(--cfm-header-company-color); margin-left:16px; }
   .cfm-footer { background:var(--cfm-footer-bg); color:var(--cfm-footer-text); padding:var(--cfm-footer-padding-y) var(--cfm-footer-padding-x); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end; }
   .cfm-footer-links { display:flex; gap:24px; flex-wrap:wrap; }
   .cfm-footer-links a { color:var(--cfm-footer-link); text-decoration:none; font-size:12px; }
@@ -29,7 +28,7 @@ const sharedStyles = `
   .cfm-slider-track { height:8px; background:var(--cfm-slider-track); border-radius:4px; position:relative; margin:24px 0; }
   .cfm-slider-thumb { width:20px; height:20px; background:var(--cfm-slider-thumb); border-radius:50%; position:absolute; top:-6px; left:60%; }
   .cfm-tick { width:var(--cfm-slider-tick-size); height:var(--cfm-slider-tick-size); background:var(--cfm-slider-tick); border-radius:4px; font-size:11px; display:flex; align-items:center; justify-content:center; color:white; }
-  .cfm-dropzone { border:2px dashed var(--cfm-upload-border-color); border-radius:var(--cfm-border-radius); padding:var(--cfm-upload-padding); background:var(--cfm-upload-fill); text-align:center; color:var(--cfm-text); }
+  .cfm-dropzone { border:2px dashed var(--cfm-upload-accent); border-radius:var(--cfm-border-radius); padding:var(--cfm-upload-padding); text-align:center; color:var(--cfm-text); }
   .cfm-input { width:100%; height:var(--cfm-input-height); border:1px solid var(--cfm-input-border); border-radius:var(--cfm-input-radius); padding:0 var(--cfm-input-padding); font-family:inherit; }
   .cfm-input:focus { outline:2px solid var(--cfm-input-focus-ring); }
   .cfm-rank-item { background:var(--cfm-rank-item-bg); padding:var(--cfm-rank-item-padding); margin-bottom:var(--cfm-rank-item-gap); border-radius:var(--cfm-border-radius); display:flex; align-items:center; gap:12px; }
@@ -60,7 +59,10 @@ export const PREVIEW_PAGE_DEFS: PreviewPageDef[] = [
   {
     key: 'header',
     title: 'Header',
-    body: `<header class="cfm-header"><div class="cfm-header-brand"><img data-cfm-logo class="cfm-header-logo" src="" alt="Logo" style="display:none" /><span data-cfm-company class="cfm-header-company"></span></div></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',

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

@@ -46,7 +46,28 @@ function QuestionPreviewInner({ question, initialValue }: QuestionPreviewProps)
       };
     }
 
-    if (previewState.hintMinText || previewState.hintMaxText) {
+    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;
+      }
+    }
+
+    if (previewState.hintMinText !== undefined || previewState.hintMaxText !== undefined) {
       if (q.type === 'NPS_SCALE') {
         q = {
           ...q,
@@ -65,19 +86,6 @@ function QuestionPreviewInner({ question, initialValue }: QuestionPreviewProps)
       }
     }
 
-    const matrixTypes = new Set(['CFM_MATRIX', 'CSAT_MATRIX', 'RATING_MATRIX', 'SLIDER_MATRIX']);
-    if ('statementRows' in q && matrixTypes.has(q.type)) {
-      const rows = q.statementRows ?? [];
-      if (previewState.multiStatement) {
-        if (rows.length === 1) {
-          const extra = { id: 'r2', statementText: 'Second statement row' };
-          q = { ...q, statementRows: [...rows, extra] } as typeof q;
-        }
-      } else if (rows.length > 1) {
-        q = { ...q, statementRows: rows.slice(0, 1) } as typeof q;
-      }
-    }
-
     if (previewState.rankVariant === 'drag' && q.type === 'RANK_ORDER') {
       q = { ...q, interactionMode: 'dragAndDrop', optionDisplay: 'textOnly' };
     }

package/templates/preview-harness/vite-app/src/fixtures/questions.ts

@@ -11,6 +11,15 @@ const base = (partial: Partial<SurveyQuestion> & { type: SurveyQuestion['type']
     ...partial,
   }) as SurveyQuestion;
 
+const MATRIX_ROW_SINGLE = [
+  { id: 'r1', statementText: 'The product is easy to use' },
+];
+
+const MATRIX_ROWS_MULTI = [
+  { id: 'r1', statementText: 'The product is easy to use' },
+  { id: 'r2', statementText: 'Support was helpful' },
+];
+
 export const FIXTURE_INTRO: SpecialPage = {
   id: 'preview-intro',
   header: 'Welcome to our survey',
@@ -94,7 +103,7 @@ export const FIXTURE_TEXT_LONG = base({
 
 export const FIXTURE_CFM_LIKERT = base({
   type: 'CFM_MATRIX',
-  statementRows: [{ id: 'r1', statementText: 'The product is easy to use' }],
+  statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: [
     { id: 'c1', label: 'Strongly disagree' },
     { id: 'c2', label: 'Disagree' },
@@ -227,7 +236,9 @@ export const FIXTURE_RATING_SLIDER = base({
 
 export const FIXTURE_SLIDER = base({
   type: 'SLIDER_MATRIX',
-  statementRows: [{ id: 'r1', statementText: 'Ease of use', min: 0, max: 10, step: 1 }],
+  statementRows: [
+    { id: 'r1', statementText: 'Ease of use', min: 0, max: 10, step: 1 },
+  ],
   scaleAnchorLabels: ['Not at all', 'Extremely'],
   ticks: {
     count: 11,

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

@@ -75,20 +75,15 @@ html.cfm-live-edit .max-w-4xl {
   max-width: var(--cfm-max-width, 48rem) !important;
 }
 
-html.cfm-live-edit .cfm-header-brand {
-  display: flex !important;
-  align-items: center !important;
-  gap: var(--cfm-header-brand-gap, 16px) !important;
-}
-
-html.cfm-live-edit [data-cfm-logo] {
-  background: var(--cfm-header-logo-bg, transparent) !important;
-  object-fit: contain !important;
+html.cfm-live-edit .cfm-header-inner {
+  flex-direction: var(--cfm-header-flex-direction, column) !important;
+  justify-content: var(--cfm-header-justify, flex-start) !important;
+  align-items: var(--cfm-header-brand-align, flex-start) !important;
 }
 
 html.cfm-live-edit [data-cfm-company] {
-  margin-top: 0 !important;
-  margin-left: 0 !important;
+  margin-top: var(--cfm-header-company-margin-top, 8px) !important;
+  margin-left: var(--cfm-header-company-margin-left, 0) !important;
 }
 
 html.cfm-live-edit .cfm-footer-inner {