@explorer02/cfm-survey-sdk 0.3.9 → 0.4.0

package/templates/docs/templates/CsatMatrixScale.tsx

@@ -36,6 +36,15 @@ function graphicsColumnLabelStyle(question: CsatMatrixQuestion) {
   return { fontSize: '12px', fontWeight: 500, lineHeight: 1.2, wordBreak: 'break-word' as const, ...pillStyle };
 }
 
+/** Graphics uses anchor labels (bold top row) — per-column tick badges duplicate them for CSAT + RATING. */
+function hasGraphicsAnchorLabels(labels: string[] | undefined): boolean {
+  return Boolean(labels?.some((label) => label.trim().length > 0));
+}
+
+function shouldShowGraphicsColumnLabelRow(isGraphics: boolean, labels: string[] | undefined): boolean {
+  return isGraphics && !hasGraphicsAnchorLabels(labels);
+}
+
 function GraphicsColumnLabelsRow({
   scaleColumns,
   question,
@@ -47,8 +56,8 @@ function GraphicsColumnLabelsRow({
   const labelStyle = graphicsColumnLabelStyle(question);
 
   return (
-    <div style={{ flex: 1, padding: '0 24px' }}>
-      <div style={{ position: 'relative', margin: '0 16px', height: '16px' }}>
+    <div style={{ flex: 1, minWidth: 0, padding: '0 8px' }}>
+      <div style={{ position: 'relative', margin: '0 8px', height: '16px' }}>
         {scaleColumns.map((col, i) => {
           const percent = scaleColumns.length === 1 ? 0 : (i / (scaleColumns.length - 1)) * 100;
           return (
@@ -60,7 +69,7 @@ function GraphicsColumnLabelsRow({
                 transform: 'translateX(-50%)',
                 bottom: 0,
                 textAlign: 'center',
-                width: '64px',
+                maxWidth: '72px',
               }}
             >
               <span style={labelStyle} dangerouslySetInnerHTML={{ __html: col.label }} />
@@ -212,13 +221,13 @@ function CsatMatrixGrid({
   const n = labels?.length || 0;
 
   return (
-    <div style={{ width: '100%' }}>
+    <div style={{ width: '100%', maxWidth: '100%', minWidth: 0, overflowX: 'auto', boxSizing: 'border-box' }}>
       {/* Labels row */}
       {showLabels && m > 0 && (
-        <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '12px' }}>
-          <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0 }} />
-          <div style={{ flex: 1, display: 'flex' }}>
-            <div style={{ flex: 1, position: 'relative', height: '24px', ...(isGraphics ? { margin: '0 40px' } : {}) }}>
+        <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '12px', minWidth: 0 }}>
+          <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0, minWidth: 0 }} />
+          <div style={{ flex: 1, display: 'flex', minWidth: 0 }}>
+            <div style={{ flex: 1, position: 'relative', minHeight: '24px', minWidth: 0, ...(isGraphics ? { margin: '0 8px' } : {}) }}>
               {labels!.map((label, i) => {
                 const startPercent = isGraphics ? 0 : 0.5 / m;
                 const rangePercent = isGraphics ? 1 : (m - 1) / m;
@@ -229,8 +238,10 @@ function CsatMatrixGrid({
                     position: 'absolute',
                     left: `${percent}%`,
                     transform: 'translateX(-50%)',
-                    textAlign: 'center', fontSize: '13px', fontWeight: 600,
-                    lineHeight: 1.3, whiteSpace: 'nowrap',
+                    textAlign: 'center', fontSize: isGraphics ? '12px' : '13px', fontWeight: 600,
+                    lineHeight: 1.3,
+                    whiteSpace: isGraphics ? 'normal' : 'nowrap',
+                    maxWidth: isGraphics ? '72px' : undefined,
                     ...anchorLabelStyle(question),
                   }}>
                     {label}
@@ -243,9 +254,9 @@ function CsatMatrixGrid({
         </div>
       )}
 
-      {/* Column tick labels for graphics sliders (shown with or without anchor labels) */}
-      {isGraphics && m > 0 && (
-        <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: showLabels ? '8px' : '16px', minHeight: '24px' }}>
+      {/* Column tick labels for graphics — only when no anchor label row above */}
+      {shouldShowGraphicsColumnLabelRow(isGraphics, labels) && m > 0 && (
+        <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '16px', minHeight: '24px' }}>
           <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0 }} />
           <div style={{ flex: 1, display: 'flex' }}>
             <GraphicsColumnLabelsRow scaleColumns={scaleColumns} question={question} />
@@ -285,15 +296,15 @@ function CsatMatrixGrid({
         {statementRows.map((row, rowIdx) => (
           <div key={row.id} style={{
             display: 'flex', alignItems: 'center', borderRadius: '8px',
-            padding: '12px 0', ...matrixRowBackgroundStyle(rowIdx),
+            padding: '12px 0', minWidth: 0, ...matrixRowBackgroundStyle(rowIdx),
           }}>
-            <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0, padding: '0 16px' }}>
+            <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0, minWidth: 0, padding: '0 12px' }}>
               <span style={{ fontSize: '14px', fontWeight: 500, color: '#111827', lineHeight: 1.4 }}
                 dangerouslySetInnerHTML={{ __html: row.statementText }} />
             </div>
 
             {isGraphics ? (
-              <div style={{ flex: 1, padding: '0 24px', position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+              <div style={{ flex: 1, minWidth: 0, padding: '0 8px', position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                 <CustomSliderTrack
                   min={0}
                   max={scaleColumns.length - 1}
@@ -450,11 +461,11 @@ function CsatMatrixCarousel({
   const showLabels = labels && labels.length > 0;
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', backgroundColor: '#fff', borderRadius: '12px', border: '1px solid #e5e5e5', padding: '32px', boxShadow: '0 4px 6px -1px rgba(0,0,0,0.05)', width: '100%', boxSizing: 'border-box' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', backgroundColor: '#fff', borderRadius: '12px', border: '1px solid #e5e5e5', padding: '24px 16px', boxShadow: '0 4px 6px -1px rgba(0,0,0,0.05)', width: '100%', maxWidth: '100%', minWidth: 0, overflowX: 'auto', boxSizing: 'border-box' }}>
       <h3 style={{ fontSize: '18px', fontWeight: 500, color: '#111827', marginBottom: '32px', textAlign: 'center' }} dangerouslySetInnerHTML={{ __html: row.statementText }} />
       
       {showLabels && scaleColumns.length > 0 && (
-        <div style={{ width: '100%', maxWidth: '800px', display: 'flex', position: 'relative', height: '24px', marginBottom: '16px' }}>
+        <div style={{ width: '100%', maxWidth: '100%', minWidth: 0, position: 'relative', height: '24px', marginBottom: '16px' }}>
           {labels!.map((label, i) => {
             const m = scaleColumns.length;
             const n = labels!.length;
@@ -465,8 +476,10 @@ function CsatMatrixCarousel({
             return (
               <div key={i} style={{
                 position: 'absolute', left: `${percent}%`, transform: 'translateX(-50%)',
-                textAlign: 'center', fontSize: '13px', fontWeight: 600,
-                lineHeight: 1.3, whiteSpace: 'nowrap',
+                textAlign: 'center', fontSize: isGraphics ? '12px' : '13px', fontWeight: 600,
+                lineHeight: 1.3,
+                whiteSpace: isGraphics ? 'normal' : 'nowrap',
+                maxWidth: isGraphics ? '72px' : undefined,
                 ...anchorLabelStyle(question),
               }}>
                 {label}
@@ -476,14 +489,14 @@ function CsatMatrixCarousel({
         </div>
       )}
 
-      {isGraphics && scaleColumns.length > 0 && (
-        <div style={{ width: '100%', maxWidth: '800px', marginBottom: showLabels ? '8px' : '16px' }}>
+      {shouldShowGraphicsColumnLabelRow(isGraphics, labels) && scaleColumns.length > 0 && (
+        <div style={{ width: '100%', maxWidth: '100%', marginBottom: '16px' }}>
           <GraphicsColumnLabelsRow scaleColumns={scaleColumns} question={question} />
         </div>
       )}
 
       {isGraphics ? (
-        <div style={{ width: '100%', maxWidth: '800px', marginBottom: '40px', padding: '0 24px' }}>
+        <div style={{ width: '100%', maxWidth: '100%', minWidth: 0, marginBottom: '40px', padding: '0 8px' }}>
            <CustomSliderTrack
             min={0} max={scaleColumns.length - 1} htmlStep={1}
             value={

package/templates/docs/templates/CustomSliderTrack.tsx

@@ -56,7 +56,7 @@ export function CustomSliderTrack({
 
   return (
     <div
-      style={{ position: 'relative', height: '32px', display: 'flex', alignItems: 'center', margin: '0 16px', opacity: disabled ? 0.5 : 1 }}
+      style={{ position: 'relative', height: '32px', display: 'flex', alignItems: 'center', margin: '0 8px', opacity: disabled ? 0.5 : 1 }}
       onMouseEnter={() => !disabled && setIsHovered(true)}
       onMouseLeave={() => { setIsHovered(false); setIsDragging(false); }}
     >
@@ -94,7 +94,7 @@ export function CustomSliderTrack({
         onTouchStart={() => !disabled && setIsDragging(true)}
         onTouchEnd={() => setIsDragging(false)}
         style={{
-          position: 'absolute', top: '50%', left: '-16px', right: '-16px', width: 'calc(100% + 32px)', height: '100%',
+          position: 'absolute', top: '50%', left: '-8px', right: '-8px', width: 'calc(100% + 16px)', height: '100%',
           transform: 'translateY(-50%)', opacity: 0, cursor: disabled ? 'not-allowed' : 'pointer', zIndex: 10, margin: 0,
         }}
       />

package/templates/docs/templates/Header.tsx

@@ -76,20 +76,20 @@ export default function Header({ embedded = false }: HeaderProps) {
             {seedCompany}
           </span>
 
-          {seedCompany ? (
-            <span
-              data-cfm-company
-              className="font-semibold"
-              style={{
-                display: hasLogoFile && seedShowCompany ? undefined : 'none',
-                color: 'var(--cfm-header-company-color, var(--cfm-text))',
-                fontSize: 'var(--cfm-header-company-size, 18px)',
-                fontWeight: 'var(--cfm-header-company-weight, 600)',
-              }}
-            >
-              {seedCompany}
-            </span>
-          ) : null}
+          {/* Always in DOM for wizard bridge — visibility toggled via layoutFlags.showCompanyName */}
+          <span
+            data-cfm-company
+            className="font-semibold"
+            style={{
+              display:
+                seedCompany && hasLogoFile && seedShowCompany ? undefined : 'none',
+              color: 'var(--cfm-header-company-color, var(--cfm-text))',
+              fontSize: 'var(--cfm-header-company-size, 18px)',
+              fontWeight: 'var(--cfm-header-company-weight, 600)',
+            }}
+          >
+            {seedCompany}
+          </span>
         </div>
       </div>
     </header>

package/templates/docs/templates/LikertMatrixScale.tsx

@@ -248,7 +248,7 @@ function LikertMatrixGridLayout({
   };
 
   return (
-    <div style={{ width: '100%' }}>
+    <div style={{ width: '100%', maxWidth: '100%', minWidth: 0, overflowX: 'auto', boxSizing: 'border-box' }}>
       {!repeatColumnHeaders && renderHeader()}
 
       <div style={{ display: 'flex', flexDirection: 'column', gap: repeatColumnHeaders ? '24px' : '0' }}>
@@ -326,7 +326,7 @@ function LikertMatrixGridLayout({
                 </div>
 
                 {isBipolar && (
-                  <div style={{ flex: '0 0 25%', padding: '0 16px', textAlign: 'right', boxSizing: 'border-box' }}>
+                  <div style={{ flex: `0 0 ${BIPOLAR_COL_WIDTH}`, padding: '0 16px', textAlign: 'right', boxSizing: 'border-box' }}>
                     <span style={{ fontSize: '14px', fontWeight: 500, color: '#111827', lineHeight: 1.4, wordWrap: 'break-word', display: 'block' }}
                       dangerouslySetInnerHTML={{ __html: transposeTable ? '' : ('oppositeStatementText' in rowItem ? rowItem.oppositeStatementText ?? '' : '') }} />
                   </div>

package/templates/docs/templates/Question.tsx

@@ -19,7 +19,7 @@ import { FileUploadScale } from './FileUploadScale';
 import { HeatmapScale } from './HeatmapScale';
 import { RankOrderScale } from './RankOrderScale';
 import RatingScale from './RatingScale';
-import { getLayoutFlags } from '@/lib/uiConfig';
+import { showQuestionNumbersInChrome, showRequiredAsteriskInChrome, resolveNpsButtonStyle, resolveNpsHintMinLabel, resolveNpsHintMaxLabel } from '@/lib/uiConfig';
 import { hintLabelStyle } from '@/lib/surveyUi/labelStyles';
 import {
   mcqCheckboxControlStyle,
@@ -48,7 +48,8 @@ export default function Question({
   customFieldValues = {},
   onSelect,
 }: QuestionProps) {
-  const { showQuestionNumbers, showRequiredAsterisk } = getLayoutFlags();
+  const showNumbers = showQuestionNumbersInChrome();
+  const showAsterisk = showRequiredAsteriskInChrome();
 
   const questionsById = useMemo(
     () => new Map(allQuestions.map(q => [q.id, q])),
@@ -125,31 +126,35 @@ export default function Question({
         borderRadius: 'var(--cfm-border-radius, 12px)',
         fontFamily: 'var(--cfm-font-family)',
         marginBottom: 'var(--cfm-card-gap, 32px)',
+        maxWidth: '100%',
+        overflowX: 'auto',
+        boxSizing: 'border-box',
       }}
     >
       <h2
         className="text-lg font-medium leading-relaxed"
         style={{ color: 'var(--cfm-text, #111827)' }}
       >
-        {question.questionNumber != null && (
-          <span
-            data-cfm-question-number
-            className="mr-1 font-semibold"
-            style={{ display: showQuestionNumbers ? undefined : 'none' }}
-          >
-            {question.questionNumber}.
-          </span>
-        )}
+        <span
+          data-cfm-question-number
+          className="mr-1 font-semibold"
+          style={{
+            display:
+              question.questionNumber != null && showNumbers ? undefined : 'none',
+          }}
+        >
+          {question.questionNumber != null ? `${question.questionNumber}.` : ''}
+        </span>
         <span dangerouslySetInnerHTML={{ __html: displayQuestionText }} />
-        {question.required && (
-          <span
-            data-cfm-required
-            className="ml-1 text-red-500"
-            style={{ display: showRequiredAsterisk ? undefined : 'none' }}
-          >
-            *
-          </span>
-        )}
+        <span
+          data-cfm-required
+          className="ml-1 text-red-500"
+          style={{
+            display: question.required && showAsterisk ? undefined : 'none',
+          }}
+        >
+          *
+        </span>
       </h2>
       {displayQuestionDescription && (
         <div
@@ -165,7 +170,8 @@ export default function Question({
               <span
                 className="absolute left-0 top-0 max-w-[30%] text-left leading-tight"
                 style={{ ...hintLabelStyle(), padding: '2px 6px', borderRadius: '4px' }}
-                dangerouslySetInnerHTML={{ __html: question.minLabel ?? '' }}
+                data-cfm-hint-min
+                dangerouslySetInnerHTML={{ __html: resolveNpsHintMinLabel(question.minLabel ?? '') }}
               />
               {question.midLabel && (
                 <span
@@ -184,7 +190,8 @@ export default function Question({
               <span
                 className="absolute right-0 top-0 max-w-[30%] text-right leading-tight"
                 style={{ ...hintLabelStyle(), padding: '2px 6px', borderRadius: '4px' }}
-                dangerouslySetInnerHTML={{ __html: question.maxLabel ?? '' }}
+                data-cfm-hint-max
+                dangerouslySetInnerHTML={{ __html: resolveNpsHintMaxLabel(question.maxLabel ?? '') }}
               />
             </div>
           )}
@@ -194,7 +201,7 @@ export default function Question({
             selectedValue={selectedValue}
             onSelect={onSelect}
             variant="nps"
-            buttonStyle={question.buttonStyle}
+            buttonStyle={resolveNpsButtonStyle(question.buttonStyle)}
           />
         </div>
       )}

package/templates/docs/templates/RankOrderScale.tsx

@@ -182,8 +182,16 @@ function DropdownRankLayout({
                 aria-label={`Rank for ${option.optionLabel || option.id}`}
                 value={currentRank ?? ''}
                 onChange={event => handleRankChange(option.id, event.target.value)}
-                className="h-10 w-16 shrink-0 rounded border bg-white px-2 text-sm outline-none"
-                style={{ borderColor: 'var(--cfm-rank-select-border, #d1d5db)' }}
+                className="h-10 w-16 shrink-0 rounded border px-2 text-sm font-semibold outline-none"
+                style={{
+                  borderColor: 'var(--cfm-rank-select-border, #d1d5db)',
+                  backgroundColor: currentRank
+                    ? 'var(--cfm-rank-badge-bg, var(--cfm-mcq-selected-bg, #fdf2f8))'
+                    : '#ffffff',
+                  color: currentRank
+                    ? 'var(--cfm-rank-badge-text, var(--cfm-mcq-selected-accent, var(--cfm-primary, #e20074)))'
+                    : '#374151',
+                }}
                 onFocus={e => {
                   e.currentTarget.style.borderColor = focusRingVar;
                   e.currentTarget.style.boxShadow = `0 0 0 1px ${focusRingVar}`;

package/templates/docs/templates/SliderMatrixScale.tsx

@@ -168,7 +168,7 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
   };
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width: '100%', maxWidth: '100%', minWidth: 0, overflowX: 'auto', boxSizing: 'border-box' }}>
       {renderHeaderRow()}
 
       {statementRows.map(row => {

package/templates/docs/templates/uiConfig.ts

@@ -82,6 +82,29 @@ export function getLayoutFlags() {
   };
 }
 
+function readLiveChromeFlag(cssVar: string, configFallback: boolean): boolean {
+  if (typeof window === 'undefined') return configFallback;
+  const root = document.documentElement;
+  const live =
+    root.style.getPropertyValue(cssVar).trim() ||
+    getComputedStyle(root).getPropertyValue(cssVar).trim();
+  if (live === '0') return false;
+  if (live === '1') return true;
+  return configFallback;
+}
+
+/** Wizard live preview reads --cfm-show-question-numbers; production uses survey-ui-config.json. */
+export function showQuestionNumbersInChrome(): boolean {
+  const flags = getLayoutFlags();
+  return readLiveChromeFlag('--cfm-show-question-numbers', flags.showQuestionNumbers);
+}
+
+/** Wizard live preview reads --cfm-show-required-asterisk; production uses survey-ui-config.json. */
+export function showRequiredAsteriskInChrome(): boolean {
+  const flags = getLayoutFlags();
+  return readLiveChromeFlag('--cfm-show-required-asterisk', flags.showRequiredAsterisk);
+}
+
 export function getPlaceholders(): Record<string, string> {
   return { ...(surveyUiConfig.placeholders ?? {}) };
 }
@@ -89,3 +112,65 @@ export function getPlaceholders(): Record<string, string> {
 export function isDebugEnabled(): boolean {
   return surveyUiConfig.debug?.enabled === true;
 }
+
+export type NpsButtonStyle = 'standard' | 'numbered' | 'emoji' | 'pill';
+
+function readLiveNpsButtonStyle(): NpsButtonStyle | null {
+  if (typeof window === 'undefined') return null;
+  const root = document.documentElement;
+  const attr = root.getAttribute('data-cfm-nps-button-style');
+  if (attr === 'standard' || attr === 'numbered' || attr === 'emoji' || attr === 'pill') {
+    return attr;
+  }
+  const live =
+    root.style.getPropertyValue('--cfm-nps-button-style').trim() ||
+    getComputedStyle(root).getPropertyValue('--cfm-nps-button-style').trim();
+  if (live === 'standard' || live === 'numbered' || live === 'emoji' || live === 'pill') {
+    return live;
+  }
+  return null;
+}
+
+/** Wizard bridge + survey-ui-config.json override API `buttonStyle` for NPS cells. */
+export function resolveNpsButtonStyle(questionStyle?: string): NpsButtonStyle {
+  const live = readLiveNpsButtonStyle();
+  if (live) return live;
+
+  const fromJson = (
+    surveyUiConfig.questionTypes as { NPS_SCALE?: { buttonStyle?: string } } | undefined
+  )?.NPS_SCALE?.buttonStyle;
+  if (
+    fromJson === 'standard' ||
+    fromJson === 'numbered' ||
+    fromJson === 'emoji' ||
+    fromJson === 'pill'
+  ) {
+    return fromJson;
+  }
+  if (
+    questionStyle === 'standard' ||
+    questionStyle === 'numbered' ||
+    questionStyle === 'emoji' ||
+    questionStyle === 'pill'
+  ) {
+    return questionStyle;
+  }
+  return 'numbered';
+}
+
+function resolveNpsHintText(kind: 'min' | 'max', questionFallback: string): string {
+  const nps = (
+    surveyUiConfig.questionTypes as { NPS_SCALE?: { hintMinText?: string; hintMaxText?: string } } | undefined
+  )?.NPS_SCALE;
+  const fromJson = kind === 'min' ? nps?.hintMinText : nps?.hintMaxText;
+  const trimmed = fromJson?.trim();
+  return trimmed || questionFallback;
+}
+
+export function resolveNpsHintMinLabel(questionFallback = ''): string {
+  return resolveNpsHintText('min', questionFallback);
+}
+
+export function resolveNpsHintMaxLabel(questionFallback = ''): string {
+  return resolveNpsHintText('max', questionFallback);
+}

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

@@ -70,14 +70,19 @@ export function PreviewConfigProvider({ children }: { children: ReactNode }) {
       const data = event.data;
       if (!data?.type) return;
       if (data.type !== PREVIEW_BRIDGE_SNAPSHOT && data.type !== PREVIEW_BRIDGE_DELTA) return;
+
+      let shouldBumpRevision = false;
+
       if (data.contentPatch?.previewState) {
         setPreviewState((prev) => ({ ...prev, ...data.contentPatch.previewState }));
+        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;
@@ -85,7 +90,9 @@ export function PreviewConfigProvider({ children }: { children: ReactNode }) {
           root.style.setProperty(key, value as string);
         }
       }
-      setConfigRevision((r) => r + 1);
+      if (shouldBumpRevision) {
+        setConfigRevision((r) => r + 1);
+      }
       applyThemeSideEffects();
     };