@explorer02/cfm-survey-sdk 0.2.8 → 0.2.9

package/templates/docs/templates/HeatmapScale.tsx

@@ -26,11 +26,11 @@ function HeatmapSpot({ spot }: { spot: { id: string; x: number; y: number } }) {
       style={{
         left: `${spot.x * 100}%`,
         top: `${spot.y * 100}%`,
-        width: 16,
-        height: 16,
+        width: 'var(--cfm-heatmap-pin-size, 16px)',
+        height: 'var(--cfm-heatmap-pin-size, 16px)',
         transform: 'translate(-50%, -50%)',
-        backgroundColor: '#F97316',
-        border: '2px solid white',
+        backgroundColor: 'var(--cfm-heatmap-pin)',
+        border: '2px solid var(--cfm-heatmap-pin-border, white)',
         boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
       }}
     />
@@ -63,6 +63,9 @@ export function HeatmapScale({ question, selectedValue = [], onSelect }: Heatmap
     }
 
     onSelect([...spots, createNewSpot(x, y)]);
+    if (typeof window !== 'undefined' && window.parent !== window) {
+      window.parent.postMessage({ type: 'CFM_HEATMAP_PIN', pin: { x, y } }, '*');
+    }
   }
 
   function handleImageLoad() {

package/templates/docs/templates/LikertMatrixScale.tsx

@@ -1,5 +1,12 @@
 import React, { useState } from 'react';
 import type { CfmMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-survey-sdk';
+import { matrixColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
+import {
+  cellSelectedVar,
+  focusRingVar,
+  matrixRadioDotStyle,
+  matrixRadioRingStyle,
+} from '@/lib/surveyUi/selectionStyles';
 import { columnSubmitValue } from './surveyUiScaleUtils';
 import MatrixDropdown from './MatrixDropdown';
 
@@ -111,8 +118,8 @@ function LikertMatrixCarouselLayout({
                 <div style={{
                   display: 'flex', alignItems: 'center', justifyContent: 'center',
                   width: '18px', height: '18px', borderRadius: '4px',
-                  border: selected ? '2px solid #e20074' : '2px solid #d1d5db',
-                  backgroundColor: selected ? '#e20074' : '#fff',
+                  border: selected ? `2px solid ${focusRingVar}` : '2px solid #d1d5db',
+                  backgroundColor: selected ? cellSelectedVar : '#fff',
                   flexShrink: 0, transition: 'all 0.15s'
                 }}>
                   {selected && (
@@ -122,13 +129,8 @@ function LikertMatrixCarouselLayout({
                   )}
                 </div>
               ) : (
-                <div style={{
-                  display: 'flex', width: '18px', height: '18px', flexShrink: 0,
-                  alignItems: 'center', justifyContent: 'center', borderRadius: '50%',
-                  border: selected ? '2px solid #e20074' : '1.5px solid #9ca3af',
-                  backgroundColor: '#fff',
-                }}>
-                  {selected && <div style={{ width: '10px', height: '10px', borderRadius: '50%', backgroundColor: '#e20074' }} />}
+                <div style={matrixRadioRingStyle(selected)}>
+                  {selected && <div style={matrixRadioDotStyle(selected, '10px')} />}
                 </div>
               )}
               <span style={{ fontSize: '15px', fontWeight: 400, color: '#374151', userSelect: 'none' }} dangerouslySetInnerHTML={{ __html: col.label }} />
@@ -206,7 +208,7 @@ function LikertMatrixGridLayout({
       <div style={{ display: 'flex', flexDirection: 'column', marginBottom: '16px' }}>
         {hasLabels && (
           <div style={{ display: 'flex', alignItems: 'flex-end', minHeight: '24px', marginBottom: '8px' }}>
-            <div style={{ flex: '0 0 25%', paddingRight: '16px', boxSizing: 'border-box' }} />
+            <div style={{ flex: `0 0 var(--cfm-matrix-bipolar-width, 25%)`, paddingRight: '16px', boxSizing: 'border-box' }} />
             <div style={{ flex: 1, position: 'relative', height: '20px' }}>
               {labels.map((lbl, idx) => {
                 let leftPos = '50%';
@@ -224,23 +226,23 @@ function LikertMatrixGridLayout({
                 );
               })}
             </div>
-            <div style={{ flex: '0 0 25%', paddingLeft: '16px', boxSizing: 'border-box' }} />
+            <div style={{ flex: `0 0 var(--cfm-matrix-bipolar-width, 25%)`, paddingLeft: '16px', boxSizing: 'border-box' }} />
           </div>
         )}
         {showColumnHeaders && (
           <div style={{ display: 'flex', alignItems: 'flex-end', minHeight: '24px' }}>
-            <div style={{ flex: isBipolar ? '0 0 25%' : '0 0 180px', paddingRight: '16px', boxSizing: 'border-box' }} />
+            <div style={{ flex: isBipolar ? '0 0 var(--cfm-matrix-bipolar-width, 25%)' : '0 0 var(--cfm-matrix-row-width, 180px)', paddingRight: '16px', boxSizing: 'border-box' }} />
             <div style={{ flex: 1, display: 'flex' }}>
               <div style={{ flex: 1, display: 'grid', gridTemplateColumns: `repeat(${gridCols.length}, 1fr)` }}>
                 {gridCols.map((col) => (
                   <div key={col.id} style={{ display: 'flex', justifyContent: 'center', padding: '0 4px' }}>
-                    <span style={{ fontSize: '13px', fontWeight: 500, color: '#4b5563', textAlign: 'center', lineHeight: 1.2 }}
+                    <span style={{ fontSize: '13px', fontWeight: 500, textAlign: 'center', lineHeight: 1.2, ...matrixColumnLabelStyle() }}
                           dangerouslySetInnerHTML={{ __html: transposeTable ? ('statementText' in col ? col.statementText : col.label) : ('label' in col ? col.label : (col as { statementText: string }).statementText) }} />
                   </div>
                 ))}
               </div>
             </div>
-            {isBipolar && <div style={{ flex: '0 0 25%', paddingLeft: '16px', boxSizing: 'border-box' }} />}
+            {isBipolar && <div style={{ flex: `0 0 var(--cfm-matrix-bipolar-width, 25%)`, paddingLeft: '16px', boxSizing: 'border-box' }} />}
           </div>
         )}
       </div>
@@ -258,10 +260,10 @@ function LikertMatrixGridLayout({
               {repeatColumnHeaders && renderHeader()}
               <div style={{
                 display: 'flex', alignItems: 'center', borderRadius: '8px',
-                padding: '12px 0', backgroundColor: !repeatColumnHeaders && rowIdx % 2 === 0 ? 'rgba(249, 250, 251, 0.8)' : '#fff',
+                padding: '12px 0', backgroundColor: !repeatColumnHeaders && rowIdx % 2 === 0 ? 'var(--cfm-zebra-row)' : '#fff',
                 boxSizing: 'border-box'
               }}>
-                <div style={{ flex: isBipolar ? '0 0 25%' : '0 0 180px', padding: '0 16px', boxSizing: 'border-box' }}>
+                <div style={{ flex: isBipolar ? '0 0 var(--cfm-matrix-bipolar-width, 25%)' : '0 0 var(--cfm-matrix-row-width, 180px)', padding: '0 16px', boxSizing: 'border-box' }}>
                   <span style={{ fontSize: '14px', fontWeight: 500, color: '#111827', lineHeight: 1.4, wordWrap: 'break-word', display: 'block' }}
                     dangerouslySetInnerHTML={{ __html: transposeTable ? ('label' in rowItem ? rowItem.label : '') : ('statementText' in rowItem ? rowItem.statementText : '') }} />
                 </div>
@@ -279,32 +281,45 @@ function LikertMatrixGridLayout({
 
                       return (
                         <div key={colItem.id} style={{ display: 'flex', justifyContent: 'center' }}>
-                          <label style={{ 
-                            cursor: isDisabled ? 'not-allowed' : 'pointer', 
-                            opacity: isDisabled ? 0.4 : 1,
-                            padding: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center' 
-                          }}>
-                            <input 
-                              type={isMultiple ? "checkbox" : "radio"} 
-                              checked={selected}
-                              disabled={isDisabled}
-                              onClick={(e) => {
-                                if (!isMultiple && selected) {
-                                  onCellSelect(actualRowId, undefined);
-                                }
-                              }}
-                              onChange={(e) => {
-                                if (isMultiple || !selected) {
-                                  onCellSelect(actualRowId, actualColValue);
-                                }
-                              }}
-                              style={{ 
-                                width: '18px', height: '18px', accentColor: '#e20074', 
-                                cursor: isDisabled ? 'not-allowed' : 'pointer',
-                                ...(isMultiple ? { borderRadius: '4px' } : {})
-                              }} 
-                            />
-                          </label>
+                          <button
+                            type="button"
+                            disabled={isDisabled}
+                            onClick={() => {
+                              if (isDisabled) return;
+                              if (!isMultiple && selected) {
+                                onCellSelect(actualRowId, undefined);
+                              } else {
+                                onCellSelect(actualRowId, actualColValue);
+                              }
+                            }}
+                            style={{
+                              cursor: isDisabled ? 'not-allowed' : 'pointer',
+                              opacity: isDisabled ? 0.4 : 1,
+                              padding: 'var(--cfm-matrix-cell-padding, 8px)',
+                              display: 'flex', alignItems: 'center', justifyContent: 'center',
+                              border: 'none', background: 'transparent',
+                            }}
+                          >
+                            {isMultiple ? (
+                              <div style={{
+                                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                width: '18px', height: '18px', borderRadius: '4px',
+                                border: selected ? `2px solid ${focusRingVar}` : '2px solid #d1d5db',
+                                backgroundColor: selected ? cellSelectedVar : '#fff',
+                                transition: 'all 0.15s',
+                              }}>
+                                {selected && (
+                                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                                    <polyline points="20 6 9 17 4 12" />
+                                  </svg>
+                                )}
+                              </div>
+                            ) : (
+                              <div style={matrixRadioRingStyle(selected)}>
+                                {selected && <div style={matrixRadioDotStyle(selected)} />}
+                              </div>
+                            )}
+                          </button>
                         </div>
                       );
                     })}
@@ -312,7 +327,7 @@ function LikertMatrixGridLayout({
                 </div>
 
                 {isBipolar && (
-                  <div style={{ flex: '0 0 25%', padding: '0 16px', textAlign: 'right', boxSizing: 'border-box' }}>
+                  <div style={{ flex: '0 0 var(--cfm-matrix-bipolar-width, 25%)', 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/MatrixDropdown.tsx

@@ -9,6 +9,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import type { ScaleColumn } from '@explorer02/cfm-survey-sdk';
 import { matrixColumnStoredValue } from '@explorer02/cfm-survey-sdk';
+import { cellSelectedVar, focusRingVar } from '@/lib/surveyUi/selectionStyles';
 
 type MatrixDropdownProps = {
   options: ScaleColumn[];
@@ -72,9 +73,9 @@ export default function MatrixDropdown({
           style={{
             display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '8px',
             width: '100%', padding: '10px 14px', backgroundColor: '#fff',
-            border: `1px solid ${isOpen ? '#e20074' : '#d1d5db'}`, borderRadius: '8px',
+            border: `1px solid ${isOpen ? focusRingVar : '#d1d5db'}`, borderRadius: '8px',
             cursor: 'pointer', transition: 'all 0.2s', minHeight: '44px',
-            boxShadow: isOpen ? '0 0 0 3px rgba(226, 0, 116, 0.1)' : '0 1px 2px rgba(0,0,0,0.05)',
+            boxShadow: isOpen ? '0 0 0 3px var(--cfm-mcq-selected-bg)' : '0 1px 2px rgba(0,0,0,0.05)',
           }}
         >
           {multiValues.length === 0 ? (
@@ -124,9 +125,9 @@ export default function MatrixDropdown({
         style={{
           display: 'flex', alignItems: 'center', justifyContent: 'space-between',
           width: '100%', padding: '14px 16px', backgroundColor: '#fff',
-          border: `1px solid ${isOpen ? '#e20074' : '#d1d5db'}`, borderRadius: '8px',
+          border: `1px solid ${isOpen ? focusRingVar : '#d1d5db'}`, borderRadius: '8px',
           cursor: 'pointer', transition: 'all 0.2s',
-          boxShadow: isOpen ? '0 0 0 3px rgba(226, 0, 116, 0.1)' : '0 1px 2px rgba(0,0,0,0.05)',
+          boxShadow: isOpen ? '0 0 0 3px var(--cfm-mcq-selected-bg)' : '0 1px 2px rgba(0,0,0,0.05)',
         }}
       >
         <span
@@ -165,12 +166,12 @@ export default function MatrixDropdown({
                 key={col.id}
                 style={{
                   padding: '12px 16px', cursor: isDisabled ? 'not-allowed' : 'pointer', transition: 'background-color 0.15s',
-                  backgroundColor: isSelected ? '#fdf2f8' : '#fff',
+                  backgroundColor: isSelected ? 'var(--cfm-mcq-selected-bg)' : '#fff',
                   opacity: isDisabled ? 0.5 : 1,
                   display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px',
                 }}
-                onMouseEnter={e => { if (!isDisabled) e.currentTarget.style.backgroundColor = '#fdf2f8'; }}
-                onMouseLeave={e => { if (!isDisabled) e.currentTarget.style.backgroundColor = isSelected ? '#fdf2f8' : '#fff'; }}
+                onMouseEnter={e => { if (!isDisabled) e.currentTarget.style.backgroundColor = 'var(--cfm-mcq-selected-bg)'; }}
+                onMouseLeave={e => { if (!isDisabled) e.currentTarget.style.backgroundColor = isSelected ? 'var(--cfm-mcq-selected-bg)' : '#fff'; }}
                 onClick={e => {
                   e.preventDefault();
                   if (isDisabled) return;
@@ -187,8 +188,8 @@ export default function MatrixDropdown({
                     <div style={{
                       display: 'flex', alignItems: 'center', justifyContent: 'center',
                       width: '18px', height: '18px', borderRadius: '4px',
-                      border: isSelected ? '2px solid #e20074' : '2px solid #d1d5db',
-                      backgroundColor: isSelected ? '#e20074' : '#fff',
+                      border: isSelected ? `2px solid ${focusRingVar}` : '2px solid #d1d5db',
+                      backgroundColor: isSelected ? cellSelectedVar : '#fff',
                       flexShrink: 0, transition: 'all 0.15s',
                     }}>
                       {isSelected && (
@@ -198,11 +199,11 @@ export default function MatrixDropdown({
                       )}
                     </div>
                   )}
-                  <span style={{ fontSize: '15px', fontWeight: isSelected ? 600 : 400, color: isSelected ? '#e20074' : '#374151', userSelect: 'none' }}
+                  <span style={{ fontSize: '15px', fontWeight: isSelected ? 600 : 400, color: isSelected ? focusRingVar : '#374151', userSelect: 'none' }}
                         dangerouslySetInnerHTML={{ __html: col.label }} />
                 </div>
                 {!multiple && isSelected && (
-                  <svg style={{ width: '18px', height: '18px', color: '#e20074', flexShrink: 0 }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg style={{ width: '18px', height: '18px', color: focusRingVar, flexShrink: 0 }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
                   </svg>
                 )}

package/templates/docs/templates/Question.tsx

@@ -140,29 +140,6 @@ export default function Question({
 
       {question.type === QUESTION_TYPE.NPS_SCALE && (
         <div className="space-y-3">
-          {(question.minLabel || question.midLabel || question.maxLabel) && (
-            <div className="relative w-full h-6 text-xs font-semibold text-gray-500">
-              <span
-                className="absolute left-0 top-0 max-w-[30%] text-left leading-tight"
-                dangerouslySetInnerHTML={{ __html: question.minLabel ?? '' }}
-              />
-              {question.midLabel && (
-                <span
-                  className="absolute top-0 -translate-x-1/2 text-center max-w-[40%] leading-tight"
-                  style={{
-                    left: `${question.midLabelIndex !== undefined && question.options.length > 1
-                      ? (question.midLabelIndex / (question.options.length - 1)) * 100
-                      : 50}%`,
-                  }}
-                  dangerouslySetInnerHTML={{ __html: question.midLabel }}
-                />
-              )}
-              <span
-                className="absolute right-0 top-0 max-w-[30%] text-right leading-tight"
-                dangerouslySetInnerHTML={{ __html: question.maxLabel ?? '' }}
-              />
-            </div>
-          )}
           <RatingScale
             questionId={question.id}
             options={question.options}
@@ -170,6 +147,10 @@ export default function Question({
             onSelect={onSelect}
             variant="nps"
             buttonStyle={question.buttonStyle}
+            minLabel={question.minLabel}
+            midLabel={question.midLabel}
+            maxLabel={question.maxLabel}
+            midLabelIndex={question.midLabelIndex}
           />
         </div>
       )}

package/templates/docs/templates/RankOrderScale.tsx

@@ -25,6 +25,7 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { focusRingVar } from '@/lib/surveyUi/selectionStyles';
 import type {
   RankOrderAnswers,
   RankOrderOption,
@@ -119,11 +120,37 @@ function RankOrderOptionRow({
   rankBadge,
 }: RankOrderOptionRowProps) {
   return (
-    <div className="flex items-center gap-3 rounded-lg border border-[#e5e5e5] bg-white px-4 py-3 transition-colors hover:bg-gray-50/50">
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--cfm-rank-item-gap, 12px)',
+        borderRadius: '8px',
+        border: '1px solid #e5e5e5',
+        backgroundColor: 'var(--cfm-rank-item-bg, #fff)',
+        padding: 'var(--cfm-rank-item-padding, 12px 16px)',
+        transition: 'background-color 0.15s',
+      }}
+      className="hover:bg-gray-50/50"
+    >
       {rankSelect}
       {dragHandle}
       {rankBadge !== undefined && (
-        <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[#fdf2f8] text-sm font-semibold text-[#e20074]">
+        <span
+          style={{
+            display: 'flex',
+            height: '28px',
+            width: '28px',
+            flexShrink: 0,
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '9999px',
+            backgroundColor: 'var(--cfm-rank-badge)',
+            fontSize: '14px',
+            fontWeight: 600,
+            color: '#fff',
+          }}
+        >
           {rankBadge}
         </span>
       )}
@@ -147,7 +174,7 @@ function DropdownRankLayout({
   };
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-3" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--cfm-rank-item-gap, 12px)' }}>
       {question.options.map(option => {
         const currentRank = rankAnswers[option.id];
 
@@ -161,7 +188,19 @@ 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 border-gray-300 bg-white px-2 text-sm outline-none focus:border-[#e20074] focus:ring-1 focus:ring-[#e20074]"
+                style={{
+                  height: '40px',
+                  width: '64px',
+                  flexShrink: 0,
+                  borderRadius: '4px',
+                  border: '1px solid var(--cfm-rank-select-border, #d1d5db)',
+                  backgroundColor: '#fff',
+                  padding: '0 8px',
+                  fontSize: '14px',
+                  outline: 'none',
+                }}
+                onFocus={e => { e.currentTarget.style.borderColor = focusRingVar; }}
+                onBlur={e => { e.currentTarget.style.borderColor = 'var(--cfm-rank-select-border, #d1d5db)'; }}
               >
                 <option value="">-</option>
                 {rankChoices.map(rank => (
@@ -218,7 +257,8 @@ function SortableRankItem({
           <button
             type="button"
             aria-label={`Drag to reorder ${option.optionLabel || option.id}`}
-            className="flex h-10 w-8 shrink-0 cursor-grab items-center justify-center rounded text-gray-500 hover:bg-gray-100 active:cursor-grabbing"
+            className="flex h-10 w-8 shrink-0 cursor-grab items-center justify-center rounded active:cursor-grabbing"
+            style={{ color: 'var(--cfm-rank-handle, #6b7280)' }}
             {...attributes}
             {...listeners}
           >
@@ -316,7 +356,7 @@ function DragDropRankLayout({
   return (
     <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
       <SortableContext items={orderedOptionIds} strategy={verticalListSortingStrategy}>
-        <div className="space-y-3">
+        <div className="space-y-3" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--cfm-rank-item-gap, 12px)' }}>
           {orderedOptionIds.map((optionId, index) => {
             const option = question.options.find(item => item.id === optionId);
             if (!option) {

package/templates/docs/templates/RatingScale.tsx

@@ -6,6 +6,7 @@ import {
   scaleRadioDotStyle,
   scaleCellSelectedStyle,
 } from '@/lib/surveyUi/selectionStyles';
+import { hintLabelStyle } from '@/lib/surveyUi/labelStyles';
 import { getAccentColor, npsValueFromOption, starValueFromOption } from './surveyUiScaleUtils';
 import { getEmojiForIndex } from './surveyUiIcons';
 
@@ -16,6 +17,10 @@ type RatingScaleProps = {
   onSelect: (value: AnswerValue) => void;
   variant?: 'nps' | 'star';
   buttonStyle?: 'standard' | 'numbered' | 'emoji';
+  minLabel?: string;
+  midLabel?: string;
+  maxLabel?: string;
+  midLabelIndex?: number;
 };
 
 function resolveBadgeColor(index: number, value: number): string {
@@ -44,6 +49,10 @@ export default function RatingScale({
   onSelect,
   variant = 'nps',
   buttonStyle = 'numbered',
+  minLabel,
+  midLabel,
+  maxLabel,
+  midLabelIndex,
 }: RatingScaleProps) {
   const resolvedOptions = options.map((option, index) => {
     const value =
@@ -63,9 +72,37 @@ export default function RatingScale({
     gap: 'var(--cfm-nps-cell-gap, 2px)',
   };
 
+  const hintRow = (minLabel || midLabel || maxLabel) ? (
+    <div className="relative mb-3 h-6 w-full text-xs font-semibold">
+      <span
+        className="absolute left-0 top-0 max-w-[30%] text-left leading-tight"
+        style={hintLabelStyle()}
+        dangerouslySetInnerHTML={{ __html: minLabel ?? '' }}
+      />
+      {midLabel && (
+        <span
+          className="absolute top-0 -translate-x-1/2 max-w-[40%] text-center leading-tight"
+          style={{
+            ...hintLabelStyle(),
+            left: `${midLabelIndex !== undefined && columnCount > 1
+              ? (midLabelIndex / (columnCount - 1)) * 100
+              : 50}%`,
+          }}
+          dangerouslySetInnerHTML={{ __html: midLabel }}
+        />
+      )}
+      <span
+        className="absolute right-0 top-0 max-w-[30%] text-right leading-tight"
+        style={hintLabelStyle()}
+        dangerouslySetInnerHTML={{ __html: maxLabel ?? '' }}
+      />
+    </div>
+  ) : null;
+
   if (buttonStyle === 'emoji') {
     return (
       <div role="radiogroup" className="w-full overflow-x-auto" data-cfm-nps-area>
+        {hintRow}
         <div className="min-w-0" style={gridStyle}>
           {resolvedOptions.map((option, index) => {
             const isSelected = selectedValue === option.value;
@@ -90,6 +127,7 @@ export default function RatingScale({
 
   return (
     <div role="radiogroup" className="w-full overflow-x-auto" data-cfm-nps-area>
+      {hintRow}
       <div className="mb-3 min-w-0" style={gridStyle}>
         {resolvedOptions.map((option, index) => {
           const isSelected = selectedValue === option.value;

package/templates/docs/templates/SliderMatrixScale.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import type { SliderMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-survey-sdk';
+import { sliderTickLabelStyle } from '@/lib/surveyUi/labelStyles';
 import { tickColorFromIndex } from './surveyUiScaleUtils';
 import { CustomSliderTrack } from './CustomSliderTrack';
 
@@ -97,7 +98,7 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
                     width: `${sliceWidth}%`, display: 'flex', justifyContent: 'center',
                   }}>
                     {sliderType === 'graphics' ? (
-                      <div style={{ wordBreak: 'break-word', textAlign: 'center', lineHeight: '1.2', fontWeight: 500, color: '#4b5563', fontSize: '13px' }}>
+                      <div style={{ wordBreak: 'break-word', textAlign: 'center', lineHeight: '1.2', fontWeight: 500, fontSize: '13px', ...sliderTickLabelStyle() }}>
                         {tv.label}
                       </div>
                     ) : (
@@ -121,7 +122,7 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
                     position: 'absolute', left: `${percentage}%`, transform: 'translateX(-50%)',
                     width: `${sliceWidth}%`, display: 'flex', justifyContent: 'center',
                   }}>
-                    <span style={{ wordBreak: 'break-word', textAlign: 'center', lineHeight: '1.2' }}>{m}</span>
+                    <span style={{ wordBreak: 'break-word', textAlign: 'center', lineHeight: '1.2', ...sliderTickLabelStyle() }}>{m}</span>
                   </div>
                 );
               })
@@ -151,7 +152,7 @@ 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: 'var(--cfm-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' }}>
               {row.statementText !== 'Question' && row.statementText !== '' ? (

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

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

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

@@ -176,6 +176,16 @@
         el.setAttribute('placeholder', patch.previewState.textfieldPlaceholder || '');
       });
     }
+    if (patch.previewState && patch.previewState.hintMinText !== undefined) {
+      document.querySelectorAll('[data-cfm-hint-min]').forEach(function (el) {
+        el.textContent = patch.previewState.hintMinText || '';
+      });
+    }
+    if (patch.previewState && patch.previewState.hintMaxText !== undefined) {
+      document.querySelectorAll('[data-cfm-hint-max]').forEach(function (el) {
+        el.textContent = patch.previewState.hintMaxText || '';
+      });
+    }
   }
 
   function handleMessage(event) {

package/templates/preview-harness/previewPages.ts

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

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

@@ -65,12 +65,17 @@ function QuestionPreviewInner({ question, initialValue }: QuestionPreviewProps)
       }
     }
 
-    if (previewState.multiStatement && 'statementRows' in q && q.statementRows.length === 1) {
-      const extra = {
-        id: 'r2',
-        statementText: 'Second statement row',
-      };
-      q = { ...q, statementRows: [...q.statementRows, extra] } as typeof q;
+    const matrixTypes = new Set(['CFM_MATRIX', 'CSAT_MATRIX', 'RATING_MATRIX', 'SLIDER_MATRIX']);
+    if ('statementRows' in q && matrixTypes.has(q.type)) {
+      const rows = q.statementRows ?? [];
+      if (previewState.multiStatement) {
+        if (rows.length === 1) {
+          const extra = { id: 'r2', statementText: 'Second statement row' };
+          q = { ...q, statementRows: [...rows, extra] } as typeof q;
+        }
+      } else if (rows.length > 1) {
+        q = { ...q, statementRows: rows.slice(0, 1) } as typeof q;
+      }
     }
 
     if (previewState.rankVariant === 'drag' && q.type === 'RANK_ORDER') {