@explorer02/cfm-survey-sdk 0.3.9 → 0.4.1

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

@@ -17,10 +17,12 @@
         delete pending[k];
       }
     }
-    applyThemeSideEffects();
-  }
+  applyThemeSideEffects();
+  syncCompanyNameVisibility();
+  syncQuestionChromeVisibility();
+}
 
-  function queue(vars) {
+function queue(vars) {
     for (var k in vars) {
       if (Object.prototype.hasOwnProperty.call(vars, k)) pending[k] = vars[k];
     }
@@ -34,10 +36,12 @@
         root.style.setProperty(k, vars[k]);
       }
     }
-    applyThemeSideEffects();
-  }
+  applyThemeSideEffects();
+  syncCompanyNameVisibility();
+  syncQuestionChromeVisibility();
+}
 
-  function setDisplay(selector, visible) {
+function setDisplay(selector, visible) {
     document.querySelectorAll(selector).forEach(function (el) {
       el.style.display = visible ? '' : 'none';
     });
@@ -81,6 +85,46 @@
     applyDropzoneStyle();
   }
 
+  function isHeaderLogoVisible() {
+    var logoImg = document.querySelector('header [data-cfm-logo], .cfm-header [data-cfm-logo]');
+    return Boolean(
+      logoImg &&
+        logoImg.style.display !== 'none' &&
+        logoImg.getAttribute('src'),
+    );
+  }
+
+  function syncCompanyNameVisibility(layoutShowCompany) {
+    var showFromCss = readVar('--cfm-header-show-company', '1') !== '0';
+    var showToggle =
+      layoutShowCompany !== undefined ? !!layoutShowCompany : showFromCss;
+
+    document.querySelectorAll('[data-cfm-company]').forEach(function (el) {
+      var hasName = Boolean((el.textContent || '').trim());
+      var show = showToggle && hasName && isHeaderLogoVisible();
+      el.style.display = show ? '' : 'none';
+    });
+  }
+
+  function syncQuestionChromeVisibility(layoutShowNumbers, layoutShowRequired) {
+    var showNumbers =
+      layoutShowNumbers !== undefined
+        ? !!layoutShowNumbers
+        : readVar('--cfm-show-question-numbers', '1') !== '0';
+    var showRequired =
+      layoutShowRequired !== undefined
+        ? !!layoutShowRequired
+        : readVar('--cfm-show-required-asterisk', '1') !== '0';
+
+    document.querySelectorAll('[data-cfm-question-number]').forEach(function (el) {
+      var hasNumber = Boolean((el.textContent || '').trim());
+      el.style.display = showNumbers && hasNumber ? '' : 'none';
+    });
+    document.querySelectorAll('[data-cfm-required]').forEach(function (el) {
+      el.style.display = showRequired ? '' : 'none';
+    });
+  }
+
   function applyContent(patch) {
     if (!patch) return;
     if (patch.logoUrl !== undefined) {
@@ -103,19 +147,11 @@
           el.classList.remove('hidden');
         }
       });
-      document.querySelectorAll('[data-cfm-company]').forEach(function (el) {
-        if (patch.logoUrl && !el.textContent) {
-          el.style.display = 'none';
-        }
-      });
     }
     if (patch.companyName !== undefined) {
       var name = patch.companyName || '';
       document.querySelectorAll('[data-cfm-company]').forEach(function (el) {
         el.textContent = name;
-        if (!name) {
-          el.style.display = 'none';
-        }
       });
       document.querySelectorAll('[data-cfm-logo-text]').forEach(function (el) {
         var logoImg = document.querySelector('[data-cfm-logo]');
@@ -176,7 +212,7 @@
     if (patch.layoutFlags) {
       var flags = patch.layoutFlags;
       if (flags.showCompanyName !== undefined) {
-        setDisplay('[data-cfm-company]', flags.showCompanyName);
+        syncCompanyNameVisibility(flags.showCompanyName);
       }
       if (flags.showHeader !== undefined) {
         setDisplay('.cfm-header, header.cfm-header', flags.showHeader);
@@ -197,10 +233,10 @@
         setDisplay('[data-cfm-btn-back]', flags.showBackButton);
       }
       if (flags.showQuestionNumbers !== undefined) {
-        setDisplay('[data-cfm-question-number]', flags.showQuestionNumbers);
+        syncQuestionChromeVisibility(flags.showQuestionNumbers, undefined);
       }
       if (flags.showRequiredAsterisk !== undefined) {
-        setDisplay('[data-cfm-required]', flags.showRequiredAsterisk);
+        syncQuestionChromeVisibility(undefined, flags.showRequiredAsterisk);
       }
       if (flags.showFooterLogo !== undefined) {
         setDisplay('[data-cfm-footer-logo]', flags.showFooterLogo);
@@ -234,6 +270,8 @@
         applyMultiStatement(!!patch.previewState.multiStatement);
       }
     }
+    syncCompanyNameVisibility();
+    syncQuestionChromeVisibility();
     applyThemeSideEffects();
   }
 

package/templates/preview-harness/previewPages.js

@@ -97,8 +97,8 @@ const PREVIEW_PAGE_DEFS = [
   { 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_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><div class="cfm-matrix-row" data-cfm-matrix-row-extra style="display:none"><div class="cfm-matrix-label">Statement item 3</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%)">Statement 1</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">Opposite 1</div></div><div class="cfm-matrix-row" data-cfm-matrix-row-extra style="display:none"><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width,25%)">Statement 2</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">Opposite 2</div></div><div class="cfm-matrix-row" data-cfm-matrix-row-extra style="display:none"><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width,25%)">Statement 3</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">Opposite 3</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>` },

package/templates/preview-harness/previewPages.ts

@@ -141,7 +141,7 @@ export const PREVIEW_PAGE_DEFS: PreviewPageDef[] = [
   {
     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 statement</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 statement</div></div>`,
+    body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width)">Statement 1</div><div class="cfm-matrix-cells">${cells(5)}</div><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width);text-align:right">Opposite 1</div></div><div class="cfm-matrix-row" data-cfm-matrix-row-extra style="display:none"><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width)">Statement 2</div><div class="cfm-matrix-cells">${cells(5)}</div><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width);text-align:right">Opposite 2</div></div><div class="cfm-matrix-row" data-cfm-matrix-row-extra style="display:none"><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width)">Statement 3</div><div class="cfm-matrix-cells">${cells(5)}</div><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width);text-align:right">Opposite 3</div></div>`,
   },
   {
     key: 'CFM_transpose',

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

@@ -15,6 +15,7 @@ export type PreviewStatePatch = {
 
 export const PREVIEW_BRIDGE_SNAPSHOT = 'CFM_UI_CONFIG_SNAPSHOT';
 export const PREVIEW_BRIDGE_DELTA = 'CFM_UI_CONFIG_DELTA';
+export const PREVIEW_BRIDGE_READY = 'CFM_PREVIEW_READY';
 
 const TRAFFIC = [
   '#ef4444', '#f97316', '#eab308', '#84cc16', '#22c55e', '#14b8a6',
@@ -51,6 +52,26 @@ function applyThemeSideEffects(): void {
   applyDropzoneStyle();
 }
 
+function previewStateFromCssVars(
+  cssVars: Record<string, string>,
+  prev: PreviewStatePatch,
+): PreviewStatePatch {
+  const next: PreviewStatePatch = { ...prev };
+  if (cssVars['--cfm-matrix-multi-statement'] !== undefined) {
+    next.multiStatement = cssVars['--cfm-matrix-multi-statement'] === '1';
+  }
+  if (cssVars['--cfm-nps-button-style']) {
+    next.npsButtonStyle = cssVars['--cfm-nps-button-style'];
+  }
+  if (cssVars['--cfm-hint-min-text']) {
+    next.hintMinText = cssVars['--cfm-hint-min-text'];
+  }
+  if (cssVars['--cfm-hint-max-text']) {
+    next.hintMaxText = cssVars['--cfm-hint-max-text'];
+  }
+  return next;
+}
+
 type PreviewConfigContextValue = {
   previewState: PreviewStatePatch;
   configRevision: number;
@@ -66,26 +87,58 @@ export function PreviewConfigProvider({ children }: { children: ReactNode }) {
   const [configRevision, setConfigRevision] = useState(0);
 
   useEffect(() => {
+    const requestSnapshot = () => {
+      try {
+        window.parent.postMessage({ type: PREVIEW_BRIDGE_READY }, '*');
+      } catch {
+        /* ignore */
+      }
+    };
+
+    requestSnapshot();
+
     const handler = (event: MessageEvent) => {
       const data = event.data;
       if (!data?.type) return;
       if (data.type !== PREVIEW_BRIDGE_SNAPSHOT && data.type !== PREVIEW_BRIDGE_DELTA) return;
-      if (data.contentPatch?.previewState) {
+
+      const isSnapshot = data.type === PREVIEW_BRIDGE_SNAPSHOT;
+      let shouldBumpRevision = isSnapshot;
+
+      if (data.cssVars) {
+        const root = document.documentElement;
+        for (const [key, value] of Object.entries(data.cssVars)) {
+          root.style.setProperty(key, value as string);
+        }
+        shouldBumpRevision = true;
+      }
+
+      if (isSnapshot) {
+        const patchState = (data.contentPatch?.previewState ?? {}) as PreviewStatePatch;
+        const nextState = data.cssVars
+          ? previewStateFromCssVars(data.cssVars, patchState)
+          : patchState;
+        setPreviewState(nextState);
+        shouldBumpRevision = true;
+      } else if (data.contentPatch?.previewState) {
         setPreviewState((prev) => ({ ...prev, ...data.contentPatch.previewState }));
+        shouldBumpRevision = true;
+      } else if (data.cssVars) {
+        setPreviewState((prev) => previewStateFromCssVars(data.cssVars, prev));
+        shouldBumpRevision = true;
       }
+
       if (data.contentPatch?.domAttributes) {
         const root = document.documentElement;
         for (const [key, value] of Object.entries(data.contentPatch.domAttributes)) {
           root.setAttribute(key, value as string);
         }
+        shouldBumpRevision = true;
       }
-      if (data.cssVars) {
-        const root = document.documentElement;
-        for (const [key, value] of Object.entries(data.cssVars)) {
-          root.style.setProperty(key, value as string);
-        }
+
+      if (shouldBumpRevision) {
+        setConfigRevision((r) => r + 1);
       }
-      setConfigRevision((r) => r + 1);
       applyThemeSideEffects();
     };
 

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

@@ -2,6 +2,7 @@ import { useMemo, useState } from 'react';
 import type { AnswerValue, SurveyQuestion } from '@explorer02/cfm-survey-sdk';
 import Question from '@/components/Question';
 import { PreviewConfigProvider, usePreviewConfig } from './PreviewConfigContext';
+import { mergePreviewQuestion } from './mergePreviewQuestion';
 
 type QuestionPreviewProps = {
   question: SurveyQuestion;
@@ -27,103 +28,14 @@ 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, configRevision } = 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 };
-    }
-
-    if (previewState.npsButtonStyle && q.type === 'NPS_SCALE') {
-      const style = previewState.npsButtonStyle;
-      const buttonStyle =
-        style === 'numbered'
-          ? 'numbered'
-          : style === 'pill'
-            ? 'pill'
-            : style === 'emoji'
-              ? 'emoji'
-              : 'standard';
-      q = { ...q, buttonStyle };
-    }
-
-    if (previewState.hintMinText !== undefined || previewState.hintMaxText !== undefined) {
-      if (q.type === 'NPS_SCALE') {
-        q = {
-          ...q,
-          minLabel: previewState.hintMinText ?? q.minLabel,
-          maxLabel: previewState.hintMaxText ?? q.maxLabel,
-        };
-      }
-      if (q.type === 'SLIDER_MATRIX') {
-        q = {
-          ...q,
-          scaleAnchorLabels: [
-            previewState.hintMinText ?? q.scaleAnchorLabels?.[0] ?? '',
-            previewState.hintMaxText ?? q.scaleAnchorLabels?.[1] ?? '',
-          ],
-        };
-      }
-    }
-
-    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 (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]);
+  const mergedQuestion = useMemo(
+    () => mergePreviewQuestion(question, previewState),
+    [question, previewState, configRevision],
+  );
 
   const heatmapInitial =
     previewState.heatmapPreviewPin && mergedQuestion.type === 'HEATMAP'
@@ -136,16 +48,25 @@ function QuestionPreviewInner({ question, initialValue }: QuestionPreviewProps)
         ]
       : initialValue;
 
+  const rankDropdownInitial =
+    mergedQuestion.type === 'RANK_ORDER' &&
+    (mergedQuestion as { interactionMode?: string }).interactionMode === 'dropdown' &&
+    value === undefined
+      ? { o1: 1 }
+      : undefined;
+
+  const resolvedValue = heatmapInitial ?? rankDropdownInitial ?? value;
+
   return (
     <div
-      className="mx-auto max-w-4xl px-4 py-6"
-      style={{ fontFamily: 'var(--cfm-font-family)' }}
+      className="mx-auto w-full min-w-0 max-w-full overflow-x-auto px-4 py-6 box-border"
+      style={{ fontFamily: 'var(--cfm-font-family)', maxWidth: 'min(100%, var(--cfm-max-width, 48rem))' }}
       data-cfm-question-area
     >
       <Question
         key={configRevision}
         question={mergedQuestion}
-        selectedValue={heatmapInitial ?? value}
+        selectedValue={resolvedValue}
         allAnswers={{}}
         allQuestions={[mergedQuestion]}
         onSelect={setValue}

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

@@ -1,26 +1,43 @@
-import { useState } from 'react';
-import type { AnswerValue } from '@explorer02/cfm-survey-sdk';
+import { useMemo, useState } from 'react';
+import type { AnswerValue, MatrixRowAnswers } from '@explorer02/cfm-survey-sdk';
 import SurveyStickyChrome from '@/components/SurveyStickyChrome';
 import LanguageSelector from '@/components/LanguageSelector';
 import Question from '@/components/Question';
 import Footer from '@/components/Footer';
 import { PreviewConfigProvider, usePreviewConfig } from './PreviewConfigContext';
+import { mergeSurveyPageQuestion } from './mergePreviewQuestion';
 import {
   FIXTURE_SURVEY_PAGE_MCQ,
+  FIXTURE_SURVEY_PAGE_CFM_LIKERT,
   FIXTURE_SURVEY_PAGE_NPS,
   PREVIEW_LANGUAGES,
 } from './fixtures/questions';
 
 function SurveyPagePreviewInner() {
-  const { configRevision } = usePreviewConfig();
+  const { previewState, configRevision } = usePreviewConfig();
   const [lang, setLang] = useState('en');
   const [mcqAnswer, setMcqAnswer] = useState<AnswerValue>('a');
+  const [matrixAnswer, setMatrixAnswer] = useState<MatrixRowAnswers>({});
   const [npsAnswer, setNpsAnswer] = useState<AnswerValue>(8);
 
-  const allQuestions = [FIXTURE_SURVEY_PAGE_MCQ, FIXTURE_SURVEY_PAGE_NPS];
+  const mcqQuestion = useMemo(
+    () => mergeSurveyPageQuestion(FIXTURE_SURVEY_PAGE_MCQ, previewState),
+    [previewState, configRevision],
+  );
+  const matrixQuestion = useMemo(
+    () => mergeSurveyPageQuestion(FIXTURE_SURVEY_PAGE_CFM_LIKERT, previewState),
+    [previewState, configRevision],
+  );
+  const npsQuestion = useMemo(
+    () => mergeSurveyPageQuestion(FIXTURE_SURVEY_PAGE_NPS, previewState),
+    [previewState, configRevision],
+  );
+
+  const allQuestions = [mcqQuestion, matrixQuestion, npsQuestion];
   const allAnswers = {
-    [FIXTURE_SURVEY_PAGE_MCQ.id]: mcqAnswer,
-    [FIXTURE_SURVEY_PAGE_NPS.id]: npsAnswer,
+    [mcqQuestion.id]: mcqAnswer,
+    [matrixQuestion.id]: matrixAnswer,
+    [npsQuestion.id]: npsAnswer,
   };
 
   return (
@@ -45,14 +62,21 @@ function SurveyPagePreviewInner() {
 
         <div className="space-y-8" key={configRevision}>
           <Question
-            question={FIXTURE_SURVEY_PAGE_MCQ}
+            question={mcqQuestion}
             selectedValue={mcqAnswer}
             allAnswers={allAnswers}
             allQuestions={allQuestions}
             onSelect={setMcqAnswer}
           />
           <Question
-            question={FIXTURE_SURVEY_PAGE_NPS}
+            question={matrixQuestion}
+            selectedValue={matrixAnswer}
+            allAnswers={allAnswers}
+            allQuestions={allQuestions}
+            onSelect={setMatrixAnswer}
+          />
+          <Question
+            question={npsQuestion}
             selectedValue={npsAnswer}
             allAnswers={allAnswers}
             allQuestions={allQuestions}

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

@@ -19,14 +19,37 @@ const LIKERT_COLUMNS = [
   { id: 'c5', label: 'Strongly Agree' },
 ];
 
-const MATRIX_ROW_SINGLE = [{ id: 'r1', statementText: 'Statement Item 1' }];
+export const MATRIX_ROW_SINGLE = [{ id: 'r1', statementText: 'Statement Item 1' }];
 
-const MATRIX_ROWS_MULTI = [
+export const MATRIX_ROWS_MULTI = [
   { id: 'r1', statementText: 'Statement Item 1' },
   { id: 'r2', statementText: 'Statement Item 2' },
   { id: 'r3', statementText: 'Statement Item 3' },
 ];
 
+/** Bipolar matrix preview rows — left statement + matching right opposite per row. */
+export const BIPOLAR_ROWS_SINGLE = [
+  { id: 'r1', statementText: 'Statement 1', oppositeStatementText: 'Opposite 1' },
+];
+
+export const BIPOLAR_ROWS_MULTI = [
+  { id: 'r1', statementText: 'Statement 1', oppositeStatementText: 'Opposite 1' },
+  { id: 'r2', statementText: 'Statement 2', oppositeStatementText: 'Opposite 2' },
+  { id: 'r3', statementText: 'Statement 3', oppositeStatementText: 'Opposite 3' },
+];
+
+const SLIDER_ROW_DEFAULTS = { min: 0, max: 10, step: 1 };
+
+export const SLIDER_ROWS_SINGLE = [
+  { id: 'r1', statementText: 'Statement Item 1', ...SLIDER_ROW_DEFAULTS },
+];
+
+export const SLIDER_ROWS_MULTI = [
+  { id: 'r1', statementText: 'Statement Item 1', ...SLIDER_ROW_DEFAULTS },
+  { id: 'r2', statementText: 'Statement Item 2', ...SLIDER_ROW_DEFAULTS },
+  { id: 'r3', statementText: 'Statement Item 3', ...SLIDER_ROW_DEFAULTS },
+];
+
 const SLIDER_TICKS = Array.from({ length: 11 }, (_, i) => ({
   tickPosition: i,
   tickLabel: String(i),
@@ -79,7 +102,7 @@ export const FIXTURE_NPS = base({
   type: 'NPS_SCALE',
   questionText:
     'Based on your experience, how likely are you to recommend [Company/Product/Service] to your friends and family?',
-  buttonStyle: 'standard',
+  buttonStyle: 'numbered',
   minLabel: 'Not Likely At All',
   maxLabel: 'Extremely Likely',
   options: Array.from({ length: 11 }, (_, i) => ({
@@ -104,8 +127,8 @@ export const FIXTURE_SURVEY_PAGE_MCQ = base({
 export const FIXTURE_SURVEY_PAGE_NPS = base({
   id: 'preview-survey-nps',
   type: 'NPS_SCALE',
-  questionNumber: 6,
-  buttonStyle: 'standard',
+  questionNumber: 3,
+  buttonStyle: 'numbered',
   questionText:
     'Based on your experience, how likely are you to recommend [Company/Product/Service] to your friends and family?',
   minLabel: 'Not Likely At All',
@@ -116,6 +139,23 @@ export const FIXTURE_SURVEY_PAGE_NPS = base({
   })),
 });
 
+/** Likert matrix with 3 statements — used on survey_page preview for zebra row styling. */
+export const FIXTURE_SURVEY_PAGE_CFM_LIKERT = base({
+  id: 'preview-survey-cfm-likert',
+  type: 'CFM_MATRIX',
+  questionNumber: 2,
+  questionText: 'Please rate each statement below.',
+  statementLayout: 'likert',
+  gridLayout: 'standard',
+  transposeTable: false,
+  selectionMode: 'single',
+  showColumnHeaders: true,
+  repeatColumnHeaders: false,
+  hasNotApplicableOption: false,
+  statementRows: MATRIX_ROWS_MULTI,
+  scaleColumns: LIKERT_COLUMNS,
+});
+
 export const FIXTURE_TEXT_SHORT = base({
   type: 'TEXTFIELD',
   questionText: 'Question',
@@ -141,7 +181,7 @@ export const FIXTURE_CFM_LIKERT = base({
   showColumnHeaders: true,
   repeatColumnHeaders: false,
   hasNotApplicableOption: false,
-  statementRows: MATRIX_ROWS_MULTI,
+  statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: LIKERT_COLUMNS,
 });
 
@@ -154,13 +194,7 @@ export const FIXTURE_CFM_BIPOLAR = base({
   showColumnHeaders: false,
   repeatColumnHeaders: false,
   hasNotApplicableOption: false,
-  statementRows: [
-    {
-      id: 'r1',
-      statementText: 'Difficult',
-      oppositeStatementText: 'Easy',
-    },
-  ],
+  statementRows: BIPOLAR_ROWS_SINGLE,
   scaleColumns: Array.from({ length: 5 }, (_, i) => ({ id: `c${i}`, label: '' })),
   scaleAnchorLabels: ['Hard', '', '', '', 'Easy'],
 });
@@ -187,7 +221,7 @@ export const FIXTURE_CFM_CAROUSEL = base({
   showColumnHeaders: true,
   repeatColumnHeaders: false,
   hasNotApplicableOption: false,
-  statementRows: MATRIX_ROWS_MULTI,
+  statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: LIKERT_COLUMNS,
 });
 
@@ -233,7 +267,7 @@ export const FIXTURE_CSAT_NUMBERED = base({
   type: 'CSAT_MATRIX',
   displayStyle: 'numbered',
   gridLayout: 'standard',
-  statementRows: MATRIX_ROWS_MULTI,
+  statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: LIKERT_COLUMNS,
   scaleAnchorLabels: LIKERT_ANCHOR_LABELS,
 });
@@ -273,7 +307,7 @@ export const FIXTURE_RATING_STAR = base({
   displayStyle: 'star',
   gridLayout: 'standard',
   showColumnHeaders: true,
-  statementRows: MATRIX_ROWS_MULTI,
+  statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: RATING_TEN_COLUMNS,
   scaleAnchorLabels: LIKERT_ANCHOR_LABELS,
 });
@@ -282,7 +316,7 @@ export const FIXTURE_RATING_NUMBERED = base({
   type: 'RATING_MATRIX',
   displayStyle: 'numbered',
   gridLayout: 'standard',
-  statementRows: MATRIX_ROWS_MULTI,
+  statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: RATING_TEN_COLUMNS,
   scaleAnchorLabels: LIKERT_ANCHOR_LABELS,
 });
@@ -318,10 +352,7 @@ export const FIXTURE_RATING_SLIDER = base({
   type: 'RATING_MATRIX',
   displayStyle: 'graphics',
   gridLayout: 'standard',
-  statementRows: [
-    { id: 'r1', statementText: 'Statement Item 1' },
-    { id: 'r2', statementText: 'Statement Item 2' },
-  ],
+  statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: [
     { id: 'c1', label: 'Likely' },
     { id: 'c2', label: 'Unlikely' },
@@ -333,10 +364,7 @@ export const FIXTURE_RATING_SLIDER = base({
 
 export const FIXTURE_SLIDER = base({
   type: 'SLIDER_MATRIX',
-  statementRows: [
-    { id: 'r1', statementText: 'Statement Item 1', min: 0, max: 10, step: 1 },
-    { id: 'r2', statementText: 'Statement Item 2', min: 0, max: 10, step: 1 },
-  ],
+  statementRows: SLIDER_ROWS_MULTI.slice(0, 2),
   scaleAnchorLabels: ['Label 1', 'Label 2'],
   ticks: {
     count: 11,

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

@@ -9,8 +9,14 @@ body {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   color: #262626;
   background-color: #ffffff;
+  max-width: 100%;
+  overflow-x: hidden;
+  box-sizing: border-box;
 }
 
 #root {
   min-height: 100vh;
+  max-width: 100%;
+  overflow-x: hidden;
+  box-sizing: border-box;
 }