@explorer02/cfm-survey-sdk 0.3.0 → 0.3.2

package/templates/docs/templates/RatingScale.tsx

@@ -6,7 +6,12 @@ import {
   scaleRadioDotStyle,
   scaleCellSelectedStyle,
 } from '@/lib/surveyUi/selectionStyles';
-import { getAccentColor, npsValueFromOption, starValueFromOption } from './surveyUiScaleUtils';
+import {
+  getAccentColor,
+  isScaleAnswerSelected,
+  npsValueFromOption,
+  starValueFromOption,
+} from './surveyUiScaleUtils';
 import { getEmojiForIndex } from './surveyUiIcons';
 
 type RatingScaleProps = {
@@ -15,22 +20,22 @@ type RatingScaleProps = {
   selectedValue?: AnswerValue;
   onSelect: (value: AnswerValue) => void;
   variant?: 'nps' | 'star';
-  buttonStyle?: 'standard' | 'numbered' | 'emoji';
+  buttonStyle?: 'standard' | 'numbered' | 'emoji' | 'pill';
 };
 
 function resolveBadgeColor(index: number, value: number): string {
-  const mode = getComputedStyle(document.documentElement)
-    .getPropertyValue('--cfm-number-label-mode')
-    .trim();
+  if (typeof document === 'undefined') return getAccentColor(value);
+
+  const root = document.documentElement;
+  const mode = getComputedStyle(root).getPropertyValue('--cfm-number-label-mode').trim();
   if (mode === 'monochrome') {
     return (
-      getComputedStyle(document.documentElement).getPropertyValue('--cfm-number-mono-color').trim() ||
-      'var(--cfm-primary)'
+      getComputedStyle(root).getPropertyValue('--cfm-number-mono-color').trim() || getAccentColor(value)
     );
   }
   if (mode === 'individual') {
     return (
-      getComputedStyle(document.documentElement).getPropertyValue(`--cfm-number-color-${index}`).trim() ||
+      getComputedStyle(root).getPropertyValue(`--cfm-number-color-${index}`).trim() ||
       getAccentColor(value)
     );
   }
@@ -52,7 +57,7 @@ export default function RatingScale({
         : npsValueFromOption(option as NpsScalePoint, index);
     const numericValue = typeof value === 'number' ? value : index;
     const color =
-      variant === 'nps' ? resolveBadgeColor(index, numericValue) : 'var(--cfm-primary)';
+      variant === 'nps' ? resolveBadgeColor(index, numericValue) : 'var(--cfm-primary, #e20074)';
     return { id: option.id, label: option.optionLabel, value, color };
   });
 
@@ -62,19 +67,34 @@ export default function RatingScale({
     gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
     gap: 'var(--cfm-nps-cell-gap, 2px)',
   };
+  const showNumberBadges = buttonStyle !== 'standard';
+  const usePillCells = buttonStyle === 'pill';
 
   if (buttonStyle === 'emoji') {
     return (
       <div role="radiogroup" className="w-full overflow-x-auto" data-cfm-nps-area>
         <div className="min-w-0" style={gridStyle}>
           {resolvedOptions.map((option, index) => {
-            const isSelected = selectedValue === option.value;
+            const isSelected = isScaleAnswerSelected(selectedValue, option.value);
             return (
-              <label key={`${questionId}-${option.value}`} title={option.label} className="flex cursor-pointer justify-center">
-                <input type="radio" name={questionId} checked={isSelected} onChange={() => onSelect(option.value)} className="sr-only" />
+              <label
+                key={`${questionId}-${option.value}`}
+                title={option.label}
+                className="flex cursor-pointer justify-center"
+              >
+                <input
+                  type="radio"
+                  name={questionId}
+                  checked={isSelected}
+                  onChange={() => onSelect(option.value)}
+                  className="sr-only"
+                />
                 <div
                   style={{
-                    ...scaleRadioRingStyle(isSelected, { pill: false, size: 'var(--cfm-csat-emoji-size, 48px)' }),
+                    ...scaleRadioRingStyle(isSelected, {
+                      pill: false,
+                      size: 'var(--cfm-csat-emoji-size, 40px)',
+                    }),
                     fontSize: 'var(--cfm-csat-emoji-size, 24px)',
                   }}
                 >
@@ -90,28 +110,30 @@ export default function RatingScale({
 
   return (
     <div role="radiogroup" className="w-full overflow-x-auto" data-cfm-nps-area>
-      <div className="mb-3 min-w-0" style={gridStyle}>
-        {resolvedOptions.map((option, index) => {
-          const isSelected = selectedValue === option.value;
-          return (
-            <div key={`${questionId}-badge-${option.value}`} className="flex justify-center">
-              <div
-                className="flex items-center justify-center rounded-[3px] text-[10px] font-bold text-white shadow-sm sm:text-xs"
-                style={{
-                  width: 'var(--cfm-nps-cell-size, 24px)',
-                  height: 'var(--cfm-nps-cell-size, 24px)',
-                  ...(isSelected
-                    ? scaleCellSelectedStyle(true)
-                    : { backgroundColor: option.color }),
-                }}
-                title={option.label}
-              >
-                {option.label}
+      {showNumberBadges && (
+        <div className="mb-3 min-w-0" style={gridStyle}>
+          {resolvedOptions.map((option) => {
+            const isSelected = isScaleAnswerSelected(selectedValue, option.value);
+            return (
+              <div key={`${questionId}-badge-${option.value}`} className="flex justify-center">
+                <div
+                  className="flex items-center justify-center rounded-[3px] text-[10px] font-bold text-white shadow-sm sm:text-xs"
+                  style={{
+                    width: 'var(--cfm-nps-cell-size, 24px)',
+                    height: 'var(--cfm-nps-cell-size, 24px)',
+                    ...(isSelected
+                      ? scaleCellSelectedStyle(true)
+                      : { backgroundColor: option.color }),
+                  }}
+                  title={option.label}
+                >
+                  {option.label}
+                </div>
               </div>
-            </div>
-          );
-        })}
-      </div>
+            );
+          })}
+        </div>
+      )}
 
       <div
         className="relative w-full rounded-md px-1 py-2"
@@ -119,12 +141,28 @@ export default function RatingScale({
       >
         <div className="min-w-0" style={gridStyle}>
           {resolvedOptions.map((option) => {
-            const isSelected = selectedValue === option.value;
+            const isSelected = isScaleAnswerSelected(selectedValue, option.value);
             return (
-              <label key={`${questionId}-${option.value}`} title={option.label} className="flex cursor-pointer justify-center">
-                <input type="radio" name={questionId} checked={isSelected} onChange={() => onSelect(option.value)} className="sr-only" />
-                <div style={scaleRadioRingStyle(isSelected, { size: 'var(--cfm-nps-cell-size, 40px)' })}>
-                  <div style={scaleRadioDotStyle(isSelected)} />
+              <label
+                key={`${questionId}-${option.value}`}
+                title={option.label}
+                className="flex cursor-pointer justify-center"
+              >
+                <input
+                  type="radio"
+                  name={questionId}
+                  checked={isSelected}
+                  onChange={() => onSelect(option.value)}
+                  className="sr-only"
+                />
+                <div
+                  className="flex items-center justify-center rounded-full border-2 transition-all"
+                  style={scaleRadioRingStyle(isSelected, {
+                    size: 'var(--cfm-nps-cell-size, 40px)',
+                    pill: usePillCells,
+                  })}
+                >
+                  <div style={scaleRadioDotStyle(isSelected, { pill: usePillCells })} />
                 </div>
               </label>
             );

package/templates/docs/templates/SliderMatrixScale.tsx

@@ -9,6 +9,10 @@ import React from 'react';
 import type { SliderMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-survey-sdk';
 import { tickColorFromIndex } from './surveyUiScaleUtils';
 import { CustomSliderTrack } from './CustomSliderTrack';
+import { hintLabelStyle, sliderTickLabelStyle } from '@/lib/surveyUi/labelStyles';
+
+const MATRIX_ROW_LABEL_WIDTH = 'var(--cfm-matrix-row-width, 180px)';
+const SLIDER_ROW_BAND = 'var(--cfm-slider-row-band, var(--cfm-row-band, #f3f4f6))';
 
 type SliderMatrixScaleProps = {
   question: SliderMatrixQuestion;
@@ -67,14 +71,22 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
         display: 'flex', width: '100%', marginBottom: '4px', alignItems: 'flex-end',
         padding: '0 16px', boxSizing: 'border-box',
       }}>
-        <div style={{ flex: '0 0 25%', paddingRight: '16px' }} />
+        <div style={{ flex: `0 0 ${MATRIX_ROW_LABEL_WIDTH}`, paddingRight: '16px' }} />
 
         <div style={{ flex: '1', position: 'relative' }}>
           {labels && labels.length > 0 && (
-            <div style={{
-              position: 'relative', display: 'flex', justifyContent: 'space-between',
-              margin: '0 16px', marginBottom: '16px', color: '#111827', fontSize: '14px', fontWeight: 500,
-            }}>
+            <div
+              style={{
+                position: 'relative',
+                display: 'flex',
+                justifyContent: 'space-between',
+                margin: '0 16px',
+                marginBottom: '16px',
+                fontSize: '14px',
+                fontWeight: 500,
+                ...hintLabelStyle(),
+              }}
+            >
               {labels.map((lbl, idx) => (
                 <div key={idx} style={{ width: 0, display: 'flex', justifyContent: 'center' }}>
                   <span style={{ whiteSpace: 'nowrap' }}>{lbl}</span>
@@ -83,10 +95,17 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
             </div>
           )}
 
-          <div style={{
-            position: 'relative', margin: '0 16px', marginBottom: '8px',
-            color: '#4b5563', fontSize: '14px', fontWeight: 400, height: '28px',
-          }}>
+          <div
+            style={{
+              position: 'relative',
+              margin: '0 16px',
+              marginBottom: '8px',
+              fontSize: '14px',
+              fontWeight: 400,
+              height: '28px',
+              ...sliderTickLabelStyle(),
+            }}
+          >
             {tickValues.length > 0 ? (
               tickValues.map((tv, idx) => {
                 const percentage = max !== min ? ((tv.value - min) / (max - min)) * 100 : 0;
@@ -101,11 +120,20 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
                         {tv.label}
                       </div>
                     ) : (
-                      <div style={{
-                        backgroundColor: tv.color, color: 'white', padding: '4px 8px', borderRadius: '4px',
-                        fontWeight: 600, wordBreak: 'break-word', textAlign: 'center', lineHeight: '1.2',
-                        boxShadow: '0 1px 2px rgba(0,0,0,0.1)',
-                      }}>
+                      <div
+                        style={{
+                          backgroundColor: tv.color,
+                          color: 'white',
+                          padding: '4px 8px',
+                          borderRadius: '4px',
+                          fontWeight: 600,
+                          wordBreak: 'break-word',
+                          textAlign: 'center',
+                          lineHeight: '1.2',
+                          boxShadow: '0 1px 2px rgba(0,0,0,0.1)',
+                          minWidth: 'var(--cfm-slider-tick-size, 28px)',
+                        }}
+                      >
                         {tv.label}
                       </div>
                     )}
@@ -151,9 +179,9 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
         return (
           <div key={row.id} style={{
             display: 'flex', width: '100%', alignItems: 'center',
-            backgroundColor: '#f3f4f6', borderRadius: '12px', padding: '16px', boxSizing: 'border-box',
+            backgroundColor: SLIDER_ROW_BAND, borderRadius: '12px', padding: '16px', boxSizing: 'border-box',
           }}>
-            <div style={{ flex: '0 0 25%', paddingRight: '16px', fontSize: '15px', color: '#111827', wordWrap: 'break-word', display: 'flex', alignItems: 'center' }}>
+            <div style={{ flex: `0 0 ${MATRIX_ROW_LABEL_WIDTH}`, paddingRight: '16px', fontSize: '15px', color: '#111827', wordWrap: 'break-word', display: 'flex', alignItems: 'center' }}>
               {row.statementText !== 'Question' && row.statementText !== '' ? (
                 <span dangerouslySetInnerHTML={{ __html: row.statementText }} />
               ) : null}

package/templates/docs/templates/selectionStyles.ts

@@ -8,8 +8,96 @@
  */
 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 — 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))';
+export const mcqSelectedAccentVar = focusRingVar;
+export const mcqSelectedBgVar = 'var(--cfm-mcq-selected-bg, var(--cfm-secondary, #fdf2f8))';
+export const matrixCarouselDotVar = 'var(--cfm-matrix-carousel-dot, #2563eb)';
+
+const unselectedBorder = 'var(--cfm-card-border-color, #e5e5e5)';
+
+function readMcqOptionStyle(): string {
+  if (typeof document === 'undefined') return 'outlined';
+  const root = document.documentElement;
+  return (
+    root.getAttribute('data-cfm-mcq-style') ||
+    getComputedStyle(root).getPropertyValue('--cfm-mcq-option-style').trim() ||
+    'outlined'
+  );
+}
+
+/** MCQ option card — border, background, padding (wizard: --cfm-mcq-*). */
+export function mcqOptionCardStyle(isSelected: boolean): CSSProperties {
+  const optionStyle = readMcqOptionStyle();
+  const base: CSSProperties = {
+    borderRadius: 'var(--cfm-mcq-border-radius, 8px)',
+    border: `2px solid ${isSelected ? focusRingVar : unselectedBorder}`,
+    background: isSelected ? mcqSelectedBgVar : 'var(--cfm-card-bg, #fff)',
+    padding: 'var(--cfm-mcq-card-padding, 16px 20px)',
+    marginBottom: 'var(--cfm-mcq-option-gap, 8px)',
+  };
+
+  if (optionStyle === 'filled') {
+    return {
+      ...base,
+      background: isSelected ? mcqSelectedBgVar : 'var(--cfm-secondary, #f9fafb)',
+    };
+  }
+
+  if (optionStyle === 'minimal') {
+    return {
+      ...base,
+      border: isSelected ? `2px solid ${focusRingVar}` : '2px solid transparent',
+      boxShadow: 'none',
+      background: isSelected ? mcqSelectedBgVar : 'transparent',
+    };
+  }
+
+  return base;
+}
+
+/** MCQ checkbox control indicator. */
+export function mcqCheckboxControlStyle(isSelected: boolean): CSSProperties {
+  return {
+    display: 'flex',
+    height: '20px',
+    width: '20px',
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '4px',
+    border: `1px solid ${isSelected ? focusRingVar : '#9ca3af'}`,
+    backgroundColor: isSelected ? focusRingVar : '#fff',
+    transition: 'all 0.15s',
+  };
+}
+
+/** MCQ radio outer ring. */
+export function mcqRadioOuterStyle(isSelected: boolean): CSSProperties {
+  return {
+    display: 'flex',
+    height: '20px',
+    width: '20px',
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '50%',
+    border: isSelected ? `2px solid ${focusRingVar}` : '1px solid #9ca3af',
+    backgroundColor: isSelected ? cellSelectedVar : '#fff',
+    transition: 'all 0.15s',
+  };
+}
+
+/** MCQ radio inner dot — focus ring color. */
+export function mcqRadioInnerStyle(): CSSProperties {
+  return {
+    height: '10px',
+    width: '10px',
+    borderRadius: '50%',
+    backgroundColor: focusRingVar,
+  };
+}
 
 const unselectedRing = '#d1d5db';
 const unselectedDot = '#d1d5db';

package/templates/docs/templates/surveyUiIcons.tsx

@@ -55,9 +55,9 @@ export function getEmojiForIndex(index: number, total: number): React.ReactNode
 
 export const CsatStarIcons: { filled: React.ReactNode; empty: React.ReactNode } = {
   filled: React.createElement(FaStar as React.ElementType, {
-    style: { color: '#e20074', fontSize: '28px' },
+    style: { color: 'var(--cfm-csat-accent, var(--cfm-primary, #e20074))', fontSize: 'var(--cfm-csat-emoji-size, 28px)' },
   }),
   empty: React.createElement(FaRegStar as React.ElementType, {
-    style: { color: '#d1d5db', fontSize: '28px', stroke: '#d1d5db', strokeWidth: '16px' },
+    style: { color: '#d1d5db', fontSize: 'var(--cfm-csat-emoji-size, 28px)', stroke: '#d1d5db', strokeWidth: '16px' },
   }),
 };

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

package/templates/docs/templates/uiConfig.ts

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

package/templates/preview-harness/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) {
@@ -188,7 +228,11 @@
           el.textContent = patch.previewState.hintMaxText || '';
         });
       }
+      if (patch.previewState.multiStatement !== undefined) {
+        applyMultiStatement(!!patch.previewState.multiStatement);
+      }
     }
+    applyThemeSideEffects();
   }
 
   function handleMessage(event) {