@explorer02/cfm-survey-sdk 0.3.9 → 0.4.0

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],
+  );
 
   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],
+  );
+  const matrixQuestion = useMemo(
+    () => mergeSurveyPageQuestion(FIXTURE_SURVEY_PAGE_CFM_LIKERT, previewState),
+    [previewState],
+  );
+  const npsQuestion = useMemo(
+    () => mergeSurveyPageQuestion(FIXTURE_SURVEY_PAGE_NPS, previewState),
+    [previewState],
+  );
+
+  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',
@@ -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'],
 });
@@ -333,10 +367,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;
 }

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

@@ -0,0 +1,173 @@
+import type { SurveyQuestion } from '@explorer02/cfm-survey-sdk';
+import type { PreviewStatePatch } from './PreviewConfigContext';
+import {
+  BIPOLAR_ROWS_MULTI,
+  BIPOLAR_ROWS_SINGLE,
+  MATRIX_ROWS_MULTI,
+  MATRIX_ROW_SINGLE,
+  SLIDER_ROWS_MULTI,
+  SLIDER_ROWS_SINGLE,
+} from './fixtures/questions';
+
+function mapNpsButtonStyle(style: string | undefined): SurveyQuestion['buttonStyle'] {
+  if (style === 'numbered' || style === 'pill' || style === 'emoji' || style === 'standard') {
+    return style;
+  }
+  return 'numbered';
+}
+
+/** Survey page always shows multi-row matrix for zebra styling. */
+export function normalizeSurveyPagePreviewState(previewState: PreviewStatePatch): PreviewStatePatch {
+  return {
+    ...previewState,
+    activePreviewKey: 'survey_page',
+    multiStatement: true,
+  };
+}
+
+type MatrixRowCapable = SurveyQuestion & {
+  statementRows?: { id: string; statementText: string; oppositeStatementText?: string }[];
+  statementLayout?: string;
+};
+
+const MULTI_STATEMENT_MATRIX_TYPES = new Set([
+  'CFM_MATRIX',
+  'CSAT_MATRIX',
+  'RATING_MATRIX',
+  'SLIDER_MATRIX',
+]);
+
+export function applyMatrixRowCount<T extends MatrixRowCapable>(
+  q: T,
+  multiStatement: boolean | undefined,
+  options?: { preserveSurveyPageRows?: boolean },
+): T {
+  if (!MULTI_STATEMENT_MATRIX_TYPES.has(q.type)) return q;
+  if (!('statementRows' in q) || !Array.isArray(q.statementRows)) return q;
+
+  const isBipolar = q.type === 'CFM_MATRIX' && q.statementLayout === 'bipolar';
+  const isSlider = q.type === 'SLIDER_MATRIX';
+
+  if (options?.preserveSurveyPageRows && q.statementRows.length >= 2) return q;
+
+  if (multiStatement === true) {
+    if (isBipolar) {
+      return { ...q, statementRows: BIPOLAR_ROWS_MULTI } as T;
+    }
+    if (isSlider) {
+      return { ...q, statementRows: SLIDER_ROWS_MULTI } as T;
+    }
+    if (q.statementRows.length >= 3) return q;
+    return { ...q, statementRows: MATRIX_ROWS_MULTI } as T;
+  }
+
+  if (multiStatement === false) {
+    if (isBipolar) {
+      return { ...q, statementRows: BIPOLAR_ROWS_SINGLE } as T;
+    }
+    if (isSlider) {
+      return { ...q, statementRows: SLIDER_ROWS_SINGLE } as T;
+    }
+    return { ...q, statementRows: [...MATRIX_ROW_SINGLE] } as T;
+  }
+
+  // Before bridge snapshot — keep fixture row count (single-row fixtures stay single).
+  return q;
+}
+
+function applyCfmMatrixLayout(
+  q: SurveyQuestion & {
+    statementLayout?: string;
+    gridLayout?: string;
+    transposeTable?: boolean;
+    showColumnHeaders?: boolean;
+  },
+  previewKey: string,
+): SurveyQuestion {
+  if (previewKey === 'survey_page' || previewKey === 'CFM_likert' || !previewKey.startsWith('CFM_')) {
+    return {
+      ...q,
+      statementLayout: 'likert',
+      gridLayout: 'standard',
+      transposeTable: false,
+      showColumnHeaders: true,
+    } as SurveyQuestion;
+  }
+  if (previewKey === 'CFM_bipolar') {
+    return {
+      ...q,
+      statementLayout: 'bipolar',
+      showColumnHeaders: false,
+      gridLayout: 'standard',
+      transposeTable: false,
+    } as SurveyQuestion;
+  }
+  if (previewKey === 'CFM_transpose') {
+    return { ...q, statementLayout: 'likert', transposeTable: true, gridLayout: 'standard' } as SurveyQuestion;
+  }
+  if (previewKey === 'CFM_carousel') {
+    return { ...q, statementLayout: 'likert', gridLayout: 'carousel', transposeTable: false } as SurveyQuestion;
+  }
+  if (previewKey === 'CFM_dropdown') {
+    return { ...q, statementLayout: 'likert', gridLayout: 'dropdown', transposeTable: false } as SurveyQuestion;
+  }
+  return { ...q, statementLayout: 'likert', gridLayout: 'standard', transposeTable: false } as SurveyQuestion;
+}
+
+/** Apply wizard bridge previewState onto a fixture question. */
+export function mergePreviewQuestion(
+  question: SurveyQuestion,
+  previewState: PreviewStatePatch,
+): SurveyQuestion {
+  let q = { ...question } as SurveyQuestion;
+  const previewKey = previewState.activePreviewKey ?? '';
+  const isSurveyPage = previewKey === 'survey_page';
+
+  if (previewState.textfieldPlaceholder && q.type === 'TEXTFIELD') {
+    q = { ...q, placeholder: previewState.textfieldPlaceholder };
+  }
+
+  if (q.type === 'NPS_SCALE') {
+    q = {
+      ...q,
+      buttonStyle: mapNpsButtonStyle(previewState.npsButtonStyle ?? q.buttonStyle ?? 'numbered'),
+      minLabel: previewState.hintMinText ?? q.minLabel,
+      maxLabel: previewState.hintMaxText ?? q.maxLabel,
+    };
+  } else if (previewState.hintMinText !== undefined || previewState.hintMaxText !== undefined) {
+    if (q.type === 'SLIDER_MATRIX') {
+      q = {
+        ...q,
+        scaleAnchorLabels: [
+          previewState.hintMinText ?? q.scaleAnchorLabels?.[0] ?? '',
+          previewState.hintMaxText ?? q.scaleAnchorLabels?.[1] ?? '',
+        ],
+      };
+    }
+  }
+
+  if (q.type === 'CFM_MATRIX') {
+    q = applyCfmMatrixLayout(q, isSurveyPage ? 'survey_page' : previewKey);
+  }
+
+  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' };
+    }
+  }
+
+  return applyMatrixRowCount(q, previewState.multiStatement, {
+    preserveSurveyPageRows: isSurveyPage,
+  });
+}
+
+/** Survey page layout — each question reflects its type-tab customization mapping. */
+export function mergeSurveyPageQuestion(
+  question: SurveyQuestion,
+  previewState: PreviewStatePatch,
+): SurveyQuestion {
+  return mergePreviewQuestion(question, normalizeSurveyPagePreviewState(previewState));
+}

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

@@ -106,3 +106,25 @@ html.cfm-live-edit input[data-cfm-textfield]::placeholder {
   color: var(--cfm-input-placeholder, #9ca3af) !important;
   opacity: 1;
 }
+
+/* Keep every question-type preview inside the wizard iframe without horizontal bleed */
+html.cfm-live-edit,
+html.cfm-live-edit body,
+html.cfm-live-edit #root {
+  max-width: 100%;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+
+html.cfm-live-edit [data-cfm-question-area],
+html.cfm-live-edit .cfm-question-card {
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  box-sizing: border-box;
+}
+
+html.cfm-live-edit [data-cfm-nps-area] {
+  max-width: 100%;
+  overflow-x: auto;
+}

package/templates/previewBridge.ts

@@ -43,6 +43,8 @@ function flushCssVars(): void {
     delete pendingVars[key];
   }
   applyThemeSideEffects();
+  syncCompanyNameVisibility();
+  syncQuestionChromeVisibility();
 }
 
 function queueCssVars(vars: Record<string, string>): void {
@@ -58,6 +60,8 @@ function applyCssVarsImmediate(vars: Record<string, string>): void {
     root.style.setProperty(key, value);
   }
   applyThemeSideEffects();
+  syncCompanyNameVisibility();
+  syncQuestionChromeVisibility();
 }
 
 function setDisplay(selector: string, visible: boolean): void {
@@ -66,6 +70,58 @@ function setDisplay(selector: string, visible: boolean): void {
   });
 }
 
+function readCssVar(name: string, fallback: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+
+function isHeaderLogoVisible(): boolean {
+  const logoImg = document.querySelector(
+    'header [data-cfm-logo], .cfm-header [data-cfm-logo]',
+  ) as HTMLImageElement | null;
+  return Boolean(
+    logoImg &&
+      logoImg.style.display !== 'none' &&
+      Boolean(logoImg.getAttribute('src')),
+  );
+}
+
+/** Keep [data-cfm-company] beside logo when toggle, name, and logo are all present. */
+function syncCompanyNameVisibility(layoutShowCompany?: boolean): void {
+  const showFromCss = readCssVar('--cfm-header-show-company', '1') !== '0';
+  const showToggle =
+    layoutShowCompany !== undefined ? Boolean(layoutShowCompany) : showFromCss;
+
+  document.querySelectorAll('[data-cfm-company]').forEach((el) => {
+    const htmlEl = el as HTMLElement;
+    const hasName = Boolean(htmlEl.textContent?.trim());
+    const show = showToggle && hasName && isHeaderLogoVisible();
+    htmlEl.style.display = show ? '' : 'none';
+  });
+}
+
+function syncQuestionChromeVisibility(
+  layoutShowNumbers?: boolean,
+  layoutShowRequired?: boolean,
+): void {
+  const showNumbers =
+    layoutShowNumbers !== undefined
+      ? Boolean(layoutShowNumbers)
+      : readCssVar('--cfm-show-question-numbers', '1') !== '0';
+  const showRequired =
+    layoutShowRequired !== undefined
+      ? Boolean(layoutShowRequired)
+      : readCssVar('--cfm-show-required-asterisk', '1') !== '0';
+
+  document.querySelectorAll('[data-cfm-question-number]').forEach((el) => {
+    const htmlEl = el as HTMLElement;
+    const hasNumber = Boolean(htmlEl.textContent?.trim());
+    htmlEl.style.display = showNumbers && hasNumber ? '' : 'none';
+  });
+  document.querySelectorAll('[data-cfm-required]').forEach((el) => {
+    (el as HTMLElement).style.display = showRequired ? '' : 'none';
+  });
+}
+
 function applyContentPatch(patch: ContentPatch): void {
   if (patch.logoUrl !== undefined) {
     document.querySelectorAll('[data-cfm-logo], header img, footer img').forEach((el) => {
@@ -88,23 +144,12 @@ function applyContentPatch(patch: ContentPatch): void {
         htmlEl.classList.remove('hidden');
       }
     });
-    document.querySelectorAll('[data-cfm-company]').forEach((el) => {
-      const htmlEl = el as HTMLElement;
-      if (patch.logoUrl) {
-        if (!htmlEl.textContent?.trim()) {
-          htmlEl.style.display = 'none';
-        }
-      }
-    });
   }
 
   if (patch.companyName !== undefined) {
     const name = patch.companyName ?? '';
     document.querySelectorAll('[data-cfm-company]').forEach((el) => {
       (el as HTMLElement).textContent = name;
-      if (!name) {
-        (el as HTMLElement).style.display = 'none';
-      }
     });
     document.querySelectorAll('[data-cfm-logo-text]').forEach((el) => {
       const logoImg = document.querySelector('[data-cfm-logo]') as HTMLImageElement | null;
@@ -167,7 +212,7 @@ function applyContentPatch(patch: ContentPatch): void {
   if (patch.layoutFlags) {
     const flags = patch.layoutFlags;
     if (flags.showCompanyName !== undefined) {
-      setDisplay('[data-cfm-company]', Boolean(flags.showCompanyName));
+      syncCompanyNameVisibility(Boolean(flags.showCompanyName));
     }
     if (flags.showHeader !== undefined) {
       setDisplay('.cfm-header, header.cfm-header', Boolean(flags.showHeader));
@@ -188,10 +233,10 @@ function applyContentPatch(patch: ContentPatch): void {
       setDisplay('[data-cfm-btn-back]', Boolean(flags.showBackButton));
     }
     if (flags.showQuestionNumbers !== undefined) {
-      setDisplay('[data-cfm-question-number]', Boolean(flags.showQuestionNumbers));
+      syncQuestionChromeVisibility(Boolean(flags.showQuestionNumbers), undefined);
     }
     if (flags.showRequiredAsterisk !== undefined) {
-      setDisplay('[data-cfm-required]', Boolean(flags.showRequiredAsterisk));
+      syncQuestionChromeVisibility(undefined, Boolean(flags.showRequiredAsterisk));
     }
     if (flags.showFooterLogo !== undefined) {
       setDisplay('[data-cfm-footer-logo]', Boolean(flags.showFooterLogo));
@@ -229,15 +274,13 @@ function applyContentPatch(patch: ContentPatch): void {
       (el as HTMLElement).style.display = show ? '' : 'none';
     });
   }
+  syncCompanyNameVisibility();
+  syncQuestionChromeVisibility();
   applyThemeSideEffects();
 }
 
 const TRAFFIC_BADGE = ['#ef4444', '#f97316', '#eab308', '#84cc16', '#22c55e', '#14b8a6', '#06b6d4', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7'];
 
-function readCssVar(name: string, fallback: string): string {
-  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
-}
-
 function applyThemeSideEffects(): void {
   const mode = readCssVar('--cfm-number-label-mode', 'traffic');
   const mono = readCssVar('--cfm-number-mono-color', '#9ca3af');