@explorer02/cfm-survey-sdk 0.2.3 → 0.2.4

package/templates/docs/templates/CsatMatrixScale.tsx

@@ -0,0 +1,637 @@
+import React, { useState } from 'react';
+import type { CsatQuestion, RatingMatrixQuestion, MatrixRowAnswers, ScaleColumn } from '@explorer02/cfm-survey-sdk';
+import { getEmojiForIndex, CsatStarIcons } from './surveyUiIcons';
+import { columnSubmitValue, nonNaScaleColumns } from './surveyUiScaleUtils';
+import { CustomSliderTrack } from './CustomSliderTrack';
+import MatrixDropdown from './MatrixDropdown';
+
+type CsatMatrixQuestion = CsatQuestion | RatingMatrixQuestion;
+
+function GraphicsColumnLabelsRow({ scaleColumns }: { scaleColumns: ScaleColumn[] }) {
+  if (scaleColumns.length === 0) return null;
+
+  return (
+    <div style={{ flex: 1, padding: '0 24px' }}>
+      <div style={{ position: 'relative', margin: '0 16px', height: '16px' }}>
+        {scaleColumns.map((col, i) => {
+          const percent = scaleColumns.length === 1 ? 0 : (i / (scaleColumns.length - 1)) * 100;
+          return (
+            <div
+              key={col.id}
+              style={{
+                position: 'absolute',
+                left: `${percent}%`,
+                transform: 'translateX(-50%)',
+                bottom: 0,
+                textAlign: 'center',
+                fontSize: '12px',
+                fontWeight: 500,
+                color: '#4b5563',
+                lineHeight: 1.2,
+                wordBreak: 'break-word',
+                width: '64px',
+              }}
+            >
+              <span dangerouslySetInnerHTML={{ __html: col.label }} />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+type CsatMatrixScaleProps = {
+  question: CsatQuestion | RatingMatrixQuestion;
+  selectedValue?: MatrixRowAnswers;
+  onSelect: (value: MatrixRowAnswers) => void;
+};
+
+// ── SUB-COMPONENT: Vertical Layout (Dropdown, Selectbox, Radio list) ────────
+type VerticalListProps = {
+  question: CsatMatrixQuestion;
+  scaleColumns: ScaleColumn[];
+  selectedValue: MatrixRowAnswers;
+  onCellSelect: (rowId: string, colValue: any) => void;
+  isDropdown: boolean;
+  isSelectBox: boolean;
+};
+
+function CsatMatrixVerticalList({
+  question,
+  scaleColumns,
+  selectedValue,
+  onCellSelect,
+  isDropdown,
+  isSelectBox
+}: VerticalListProps) {
+  const { statementRows, hasNotApplicableOption: hasNotApplicable } = question;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+      {statementRows.map(row => (
+        <div key={row.id} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+          <h3 style={{ fontSize: '15px', fontWeight: 500, color: '#111827', lineHeight: 1.6, margin: 0 }}>
+            <span dangerouslySetInnerHTML={{ __html: row.statementText }} />
+          </h3>
+
+          {isDropdown ? (
+            <MatrixDropdown
+              value={selectedValue[row.id]}
+              options={scaleColumns}
+              onChange={(val) => onCellSelect(row.id, val)}
+              placeholder="Select..."
+            />
+          ) : isSelectBox ? (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+              {scaleColumns.map(col => {
+                const submitValue = columnSubmitValue(col);
+                const isSelected = selectedValue[row.id] === submitValue;
+                return (
+                  <button
+                    key={col.id}
+                    type="button"
+                    onClick={() => onCellSelect(row.id, submitValue)}
+                    style={{
+                      width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'flex-start',
+                      borderRadius: '8px', border: `1px solid ${isSelected ? '#e20074' : '#d1d5db'}`,
+                      padding: '14px 18px', cursor: 'pointer', transition: 'all 0.15s',
+                      backgroundColor: isSelected ? '#fdf2f8' : '#fff',
+                      color: isSelected ? '#e20074' : '#374151',
+                      fontWeight: isSelected ? 600 : 400, fontSize: '15px', textAlign: 'left',
+                    }}
+                  >
+                    <span dangerouslySetInnerHTML={{ __html: col.label }} />
+                  </button>
+                );
+              })}
+            </div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+              {scaleColumns.map(col => {
+                const submitValue = columnSubmitValue(col);
+                const isSelected = selectedValue[row.id] === submitValue;
+                return (
+                  <label
+                    key={col.id}
+                    style={{
+                      display: 'flex', alignItems: 'center', gap: '16px',
+                      borderRadius: '8px', border: `1px solid ${isSelected ? '#e20074' : '#e5e5e5'}`,
+                      padding: '16px 20px', cursor: 'pointer', transition: 'all 0.15s',
+                      backgroundColor: isSelected ? '#fdf2f8' : '#fff',
+                    }}
+                  >
+                    <input type="radio" name={`${question.id}-${row.id}`}
+                      value={submitValue === null ? '' : submitValue} checked={isSelected}
+                      onChange={() => onCellSelect(row.id, submitValue)}
+                      style={{ position: 'absolute', width: 0, height: 0, opacity: 0 }}
+                    />
+                    <div style={{
+                      display: 'flex', width: '20px', height: '20px', flexShrink: 0,
+                      alignItems: 'center', justifyContent: 'center', borderRadius: '50%',
+                      border: isSelected ? '2px solid #e20074' : '1.5px solid #9ca3af',
+                      backgroundColor: '#fff',
+                    }}>
+                      {isSelected && <div style={{ width: '10px', height: '10px', borderRadius: '50%', backgroundColor: '#e20074' }} />}
+                    </div>
+                    <span style={{ fontSize: '15px', fontWeight: 500, color: '#111827' }}
+                      dangerouslySetInnerHTML={{ __html: col.label }} />
+                  </label>
+                );
+              })}
+            </div>
+          )}
+
+          {hasNotApplicable && (
+            <label style={{ display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer', userSelect: 'none' }}>
+              <input type="checkbox" checked={selectedValue[row.id] === null}
+                onChange={() => onCellSelect(row.id, selectedValue[row.id] === null ? undefined : null)}
+                style={{ width: '16px', height: '16px', accentColor: '#e20074', cursor: 'pointer' }} />
+              <span style={{ fontSize: '14px', fontWeight: 500, color: '#4b5563' }}>Not Applicable</span>
+            </label>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── SUB-COMPONENT: Grid Layout (Visual choices: emojis, stars, numbers, slider) ─
+type GridProps = {
+  question: CsatMatrixQuestion;
+  scaleColumns: ScaleColumn[];
+  selectedValue: MatrixRowAnswers;
+  onCellSelect: (rowId: string, colValue: any) => void;
+  isEmoji: boolean;
+  isStar: boolean;
+  isNumbered: boolean;
+  isGraphics: boolean;
+};
+
+function CsatMatrixGrid({
+  question,
+  scaleColumns,
+  selectedValue,
+  onCellSelect,
+  isEmoji,
+  isStar,
+  isNumbered,
+  isGraphics
+}: GridProps) {
+  const { statementRows, scaleAnchorLabels: labels, hasNotApplicableOption: hasNotApplicable, reverseScaleOrder } = question;
+  const [hoveredCell, setHoveredCell] = useState<string | null>(null);
+
+  const showLabels = labels && labels.length > 0;
+  const m = scaleColumns.length;
+  const n = labels?.length || 0;
+
+  return (
+    <div style={{ width: '100%' }}>
+      {/* Labels row */}
+      {showLabels && m > 0 && (
+        <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '12px' }}>
+          <div style={{ width: '180px', flexShrink: 0 }} />
+          <div style={{ flex: 1, display: 'flex' }}>
+            <div style={{ flex: 1, position: 'relative', height: '24px', ...(isGraphics ? { margin: '0 40px' } : {}) }}>
+              {labels!.map((label, i) => {
+                const startPercent = isGraphics ? 0 : 0.5 / m;
+                const rangePercent = isGraphics ? 1 : (m - 1) / m;
+                const percent = n === 1 ? 50 : (startPercent + (i / (n - 1)) * rangePercent) * 100;
+
+                return (
+                  <div key={i} style={{
+                    position: 'absolute',
+                    left: `${percent}%`,
+                    transform: 'translateX(-50%)',
+                    textAlign: 'center', fontSize: '13px', fontWeight: 600,
+                    color: '#4b5563', lineHeight: 1.3, whiteSpace: 'nowrap'
+                  }}>
+                    {label}
+                  </div>
+                );
+              })}
+            </div>
+            {hasNotApplicable && <div style={{ width: '56px', flexShrink: 0 }} />}
+          </div>
+        </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' }}>
+          <div style={{ width: '180px', flexShrink: 0 }} />
+          <div style={{ flex: 1, display: 'flex' }}>
+            <GraphicsColumnLabelsRow scaleColumns={scaleColumns} />
+            {hasNotApplicable && (
+              <div style={{ width: '56px', flexShrink: 0 }} />
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Column Headers for non-graphics */}
+      {!isGraphics && !showLabels && m > 0 && (
+        <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '16px', minHeight: '24px' }}>
+          <div style={{ width: '180px', flexShrink: 0 }} />
+          <div style={{ flex: 1, display: 'flex' }}>
+            <div style={{ flex: 1, display: 'grid', gridTemplateColumns: `repeat(${scaleColumns.length}, 1fr)` }}>
+              {scaleColumns.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 }}
+                    dangerouslySetInnerHTML={{ __html: col.label }}
+                  />
+                </div>
+              ))}
+            </div>
+            {hasNotApplicable && (
+              <div style={{ width: '56px', flexShrink: 0, textAlign: 'center', fontSize: '11px', fontWeight: 600, color: '#6b7280', textTransform: 'uppercase', display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
+                N/A
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Grid Rows */}
+      <div>
+        {statementRows.map((row, rowIdx) => (
+          <div key={row.id} style={{
+            display: 'flex', alignItems: 'center', borderRadius: '8px',
+            padding: '12px 0', backgroundColor: rowIdx % 2 === 0 ? 'rgba(249, 250, 251, 0.8)' : '#fff',
+          }}>
+            <div style={{ width: '180px', flexShrink: 0, padding: '0 16px' }}>
+              <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' }}>
+                <CustomSliderTrack
+                  min={0}
+                  max={scaleColumns.length - 1}
+                  htmlStep={1}
+                  value={
+                    selectedValue[row.id] !== undefined && selectedValue[row.id] !== null
+                      ? scaleColumns.findIndex(c => columnSubmitValue(c) === selectedValue[row.id])
+                      : (reverseScaleOrder ? scaleColumns.length - 1 : 0)
+                  }
+                  disabled={selectedValue[row.id] === null}
+                  hasSelectedValue={selectedValue[row.id] !== undefined && selectedValue[row.id] !== null}
+                  sliderType="graphics"
+                  ticks={scaleColumns.length}
+                  tickLabels={scaleColumns.map(col => col.label)}
+                  reverseScaleOrder={reverseScaleOrder}
+                  onChange={v => onCellSelect(row.id, columnSubmitValue(scaleColumns[v]))}
+                />
+              </div>
+            ) : (
+              <div style={{ flex: 1, display: 'grid', alignItems: 'center', gridTemplateColumns: `repeat(${scaleColumns.length}, 1fr)` }}>
+                {scaleColumns.map((col, colIdx) => {
+                  const submitValue = columnSubmitValue(col);
+                  const isSelected = selectedValue[row.id] === submitValue;
+                  const cellKey = `${row.id}-${col.id}`;
+                  const isHovered = hoveredCell === cellKey;
+                  const displayIdx = reverseScaleOrder ? scaleColumns.length - 1 - colIdx : colIdx;
+
+                  const EmojiNode = isEmoji ? getEmojiForIndex(displayIdx, scaleColumns.length) : null;
+                  const StarNode = isStar ? (isSelected ? (CsatStarIcons.filled as any) : (CsatStarIcons.empty as any)) : null;
+
+                  const RadioNode = (
+                    <div style={{
+                      display: 'flex', width: '18px', height: '18px',
+                      alignItems: 'center', justifyContent: 'center', borderRadius: '50%',
+                      margin: '0 auto', border: isSelected ? '2px solid #e20074' : '2px solid #d1d5db',
+                      backgroundColor: '#fff',
+                    }}>
+                      {isSelected && <div style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#e20074' }} />}
+                    </div>
+                  );
+
+                  return (
+                    <div key={col.id} style={{ display: 'flex', justifyContent: 'center' }}>
+                      <div
+                        style={{ position: 'relative' }}
+                        onMouseEnter={() => setHoveredCell(cellKey)}
+                        onMouseLeave={() => setHoveredCell(null)}
+                      >
+                        <button
+                          type="button"
+                          onClick={() => onCellSelect(row.id, submitValue)}
+                          style={{
+                            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+                            transition: 'all 0.15s', border: 'none', backgroundColor: 'transparent',
+                            cursor: 'pointer', borderRadius: '6px',
+                            ...(isEmoji ? {
+                              padding: '6px',
+                              transform: isSelected ? 'scale(1.1)' : isHovered ? 'scale(1.25)' : 'scale(1)',
+                              ...(isSelected ? {
+                                backgroundColor: 'rgba(252, 231, 243, 0.6)',
+                                boxShadow: '0 0 0 2px rgba(226, 0, 116, 0.3)',
+                                borderRadius: '50%',
+                              } : {}),
+                            } : isStar ? {
+                              padding: '4px',
+                              transform: isHovered ? 'scale(1.1)' : 'scale(1)',
+                              opacity: isSelected ? 1 : isHovered ? 1 : 0.5,
+                              } : isNumbered ? {
+                                width: '40px', height: '40px', borderRadius: '8px',
+                                fontSize: '14px', fontWeight: 500,
+                                border: `1px solid ${isSelected ? '#e20074' : '#d1d5db'}`,
+                                backgroundColor: isSelected ? '#e20074' : '#fff',
+                                color: isSelected ? '#fff' : '#111827',
+                                transition: 'all 0.15s',
+                              } : { padding: '8px' }),
+                          }}
+                        >
+                          {(EmojiNode ?? StarNode ?? (isNumbered ? (displayIdx + 1) : RadioNode)) as React.ReactNode}
+                        </button>
+
+                        {isHovered && (
+                          <div style={{
+                            position: 'absolute', bottom: '100%', left: '50%',
+                            transform: 'translateX(-50%)', marginBottom: '8px',
+                            whiteSpace: 'nowrap', borderRadius: '6px',
+                            backgroundColor: '#1f2937', padding: '5px 10px',
+                            fontSize: '12px', fontWeight: 500, color: '#fff',
+                            boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+                            zIndex: 50, pointerEvents: 'none',
+                          }}>
+                            {col.label}
+                            <div style={{
+                              position: 'absolute', top: '100%', left: '50%',
+                              transform: 'translateX(-50%)',
+                              borderWidth: '5px', borderStyle: 'solid',
+                              borderColor: '#1f2937 transparent transparent transparent',
+                            }} />
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+
+            {hasNotApplicable && (
+              <div style={{ width: '56px', flexShrink: 0, display: 'flex', justifyContent: 'center' }}>
+                <label style={{ cursor: 'pointer' }}>
+                  <input type="checkbox" checked={selectedValue[row.id] === null}
+                    onChange={() => onCellSelect(row.id, selectedValue[row.id] === null ? undefined : null)}
+                    style={{ width: '16px', height: '16px', accentColor: '#e20074', cursor: 'pointer' }} />
+                </label>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ── SUB-COMPONENT: Carousel Layout ─────────────────────────────────────────
+type CarouselProps = {
+  question: CsatMatrixQuestion;
+  scaleColumns: ScaleColumn[];
+  selectedValue: MatrixRowAnswers;
+  onCellSelect: (rowId: string, colValue: any) => void;
+  isEmoji: boolean;
+  isStar: boolean;
+  isNumbered: boolean;
+  isGraphics: boolean;
+};
+
+function CsatMatrixCarousel({
+  question,
+  scaleColumns,
+  selectedValue,
+  onCellSelect,
+  isEmoji,
+  isStar,
+  isNumbered,
+  isGraphics
+}: CarouselProps) {
+  const { statementRows, scaleAnchorLabels: labels, hasNotApplicableOption: hasNotApplicable, reverseScaleOrder } = question;
+  const [activeCarouselIndex, setActiveCarouselIndex] = useState(0);
+  const [hoveredCell, setHoveredCell] = useState<string | null>(null);
+
+  const row = statementRows[activeCarouselIndex];
+  if (!row) return null;
+  
+  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' }}>
+      <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' }}>
+          {labels!.map((label, i) => {
+            const m = scaleColumns.length;
+            const n = labels!.length;
+            const startPercent = isGraphics ? 0 : 0.5 / m;
+            const rangePercent = isGraphics ? 1 : (m - 1) / m;
+            const percent = n === 1 ? 50 : (startPercent + (i / (n - 1)) * rangePercent) * 100;
+
+            return (
+              <div key={i} style={{
+                position: 'absolute', left: `${percent}%`, transform: 'translateX(-50%)',
+                textAlign: 'center', fontSize: '13px', fontWeight: 600,
+                color: '#4b5563', lineHeight: 1.3, whiteSpace: 'nowrap'
+              }}>
+                {label}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {isGraphics && scaleColumns.length > 0 && (
+        <div style={{ width: '100%', maxWidth: '800px', marginBottom: showLabels ? '8px' : '16px' }}>
+          <GraphicsColumnLabelsRow scaleColumns={scaleColumns} />
+        </div>
+      )}
+
+      {isGraphics ? (
+        <div style={{ width: '100%', maxWidth: '800px', marginBottom: '40px', padding: '0 24px' }}>
+           <CustomSliderTrack
+            min={0} max={scaleColumns.length - 1} htmlStep={1}
+            value={
+              selectedValue[row.id] !== undefined && selectedValue[row.id] !== null
+                ? scaleColumns.findIndex(c => columnSubmitValue(c) === selectedValue[row.id])
+                : (reverseScaleOrder ? scaleColumns.length - 1 : 0)
+            }
+            disabled={selectedValue[row.id] === null}
+            hasSelectedValue={selectedValue[row.id] !== undefined && selectedValue[row.id] !== null}
+            sliderType="graphics" ticks={scaleColumns.length}
+            tickLabels={scaleColumns.map(col => col.label)}
+            reverseScaleOrder={reverseScaleOrder}
+            onChange={v => onCellSelect(row.id, columnSubmitValue(scaleColumns[v]))}
+          />
+        </div>
+      ) : (
+        <div style={{ display: 'grid', gridTemplateColumns: `repeat(auto-fit, minmax(120px, 1fr))`, gap: '20px 32px', width: '100%', maxWidth: '800px', marginBottom: '40px', justifyContent: 'center' }}>
+          {scaleColumns.map((col, colIdx) => {
+            const submitValue = columnSubmitValue(col);
+            const isSelected = selectedValue[row.id] === submitValue;
+            const cellKey = `${row.id}-${col.id}`;
+            const isHovered = hoveredCell === cellKey;
+            const displayIdx = reverseScaleOrder ? scaleColumns.length - 1 - colIdx : colIdx;
+
+            const EmojiNode = isEmoji ? getEmojiForIndex(displayIdx, scaleColumns.length) : null;
+            const StarNode = isStar ? (isSelected ? (CsatStarIcons.filled as any) : (CsatStarIcons.empty as any)) : null;
+            const RadioNode = (
+              <div style={{
+                display: 'flex', width: '18px', height: '18px',
+                alignItems: 'center', justifyContent: 'center', borderRadius: '50%',
+                margin: '0 auto', border: isSelected ? '2px solid #e20074' : '2px solid #d1d5db',
+                backgroundColor: '#fff',
+              }}>
+                {isSelected && <div style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#e20074' }} />}
+              </div>
+            );
+
+            return (
+              <div key={col.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px', cursor: 'pointer' }}
+                   onClick={() => onCellSelect(row.id, submitValue)}
+                   onMouseEnter={() => setHoveredCell(cellKey)}
+                   onMouseLeave={() => setHoveredCell(null)}>
+                <button
+                  type="button"
+                  style={{
+                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+                    transition: 'all 0.15s', border: 'none', backgroundColor: 'transparent',
+                    cursor: 'pointer', borderRadius: '6px', pointerEvents: 'none',
+                    ...(isEmoji ? {
+                      padding: '6px', transform: isSelected ? 'scale(1.1)' : isHovered ? 'scale(1.25)' : 'scale(1)',
+                      ...(isSelected ? { backgroundColor: 'rgba(252, 231, 243, 0.6)', boxShadow: '0 0 0 2px rgba(226, 0, 116, 0.3)', borderRadius: '50%' } : {}),
+                    } : isStar ? {
+                      padding: '4px', transform: isHovered ? 'scale(1.1)' : 'scale(1)', opacity: isSelected ? 1 : isHovered ? 1 : 0.5,
+                    } : isNumbered ? {
+                      width: '40px', height: '40px', borderRadius: '8px', fontSize: '14px', fontWeight: 500,
+                      border: `1px solid ${isSelected ? '#e20074' : '#d1d5db'}`, backgroundColor: isSelected ? '#e20074' : '#fff', color: isSelected ? '#fff' : '#111827',
+                    } : { padding: '8px' }),
+                  }}
+                >
+                  {(EmojiNode ?? StarNode ?? (isNumbered ? (displayIdx + 1) : RadioNode)) as React.ReactNode}
+                </button>
+                <span style={{ fontSize: '13px', fontWeight: 500, color: '#4b5563', textAlign: 'center', lineHeight: 1.2 }}
+                      dangerouslySetInnerHTML={{ __html: col.label }} />
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {hasNotApplicable && (
+        <div style={{ marginBottom: '32px' }}>
+          <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
+            <input type="checkbox" checked={selectedValue[row.id] === null}
+                   onChange={() => onCellSelect(row.id, selectedValue[row.id] === null ? undefined : null)}
+                   style={{ width: '16px', height: '16px', accentColor: '#e20074', cursor: 'pointer' }} />
+            <span style={{ fontSize: '14px', fontWeight: 500, color: '#4b5563' }}>N/A</span>
+          </label>
+        </div>
+      )}
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+        <button type="button" onClick={() => setActiveCarouselIndex(Math.max(0, activeCarouselIndex - 1))}
+                disabled={activeCarouselIndex === 0}
+                style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center', width: '32px', height: '32px',
+                  borderRadius: '50%', backgroundColor: 'transparent', border: 'none',
+                  cursor: activeCarouselIndex === 0 ? 'not-allowed' : 'pointer', opacity: activeCarouselIndex === 0 ? 0.3 : 1, transition: 'opacity 0.2s'
+                }}>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6b7280" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6" /></svg>
+        </button>
+        
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          {statementRows.map((_, i) => (
+            <button key={i} type="button" onClick={() => setActiveCarouselIndex(i)}
+                    style={{
+                      width: i === activeCarouselIndex ? '20px' : '8px', height: '8px', borderRadius: '4px',
+                      backgroundColor: i === activeCarouselIndex ? '#e20074' : '#d1d5db', border: 'none', padding: 0,
+                      cursor: 'pointer', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
+                    }} />
+          ))}
+        </div>
+
+        <button type="button" onClick={() => setActiveCarouselIndex(Math.min(statementRows.length - 1, activeCarouselIndex + 1))}
+                disabled={activeCarouselIndex === statementRows.length - 1}
+                style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center', width: '32px', height: '32px',
+                  borderRadius: '50%', backgroundColor: 'transparent', border: 'none',
+                  cursor: activeCarouselIndex === statementRows.length - 1 ? 'not-allowed' : 'pointer', opacity: activeCarouselIndex === statementRows.length - 1 ? 0.3 : 1, transition: 'opacity 0.2s'
+                }}>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6b7280" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6" /></svg>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ── ORCHESTRATOR COMPONENT: CsatMatrixScale ──────────────────────────────────
+export function CsatMatrixScale({ question, selectedValue = {}, onSelect }: CsatMatrixScaleProps) {
+  const { displayStyle, gridLayout } = question;
+
+  const handleCellSelect = (rowId: string, colValue: string | number | null | undefined) => {
+    if (colValue === undefined) {
+      const next = { ...selectedValue };
+      delete next[rowId];
+      onSelect(next);
+    } else {
+      onSelect({ ...selectedValue, [rowId]: colValue });
+    }
+  };
+
+  const isDropdown = displayStyle === 'dropdown';
+  const isSelectBox = displayStyle === 'selectbox';
+  const isEmoji = displayStyle === 'emoji';
+  const isStar = displayStyle === 'star';
+  const isNumbered = displayStyle === 'numbered';
+  const isGraphics = displayStyle === 'graphics';
+  const isStandardRadio = displayStyle === 'standard';
+
+  const scaleColumns = nonNaScaleColumns(question.scaleColumns);
+
+  if (gridLayout === 'carousel') {
+    return (
+      <CsatMatrixCarousel
+        question={question}
+        scaleColumns={scaleColumns}
+        selectedValue={selectedValue}
+        onCellSelect={handleCellSelect}
+        isEmoji={isEmoji}
+        isStar={isStar}
+        isNumbered={isNumbered}
+        isGraphics={isGraphics}
+      />
+    );
+  }
+
+  if (isDropdown || isSelectBox || isStandardRadio) {
+    return (
+      <CsatMatrixVerticalList
+        question={question}
+        scaleColumns={scaleColumns}
+        selectedValue={selectedValue}
+        onCellSelect={handleCellSelect}
+        isDropdown={isDropdown}
+        isSelectBox={isSelectBox}
+      />
+    );
+  }
+
+  return (
+    <CsatMatrixGrid
+      question={question}
+      scaleColumns={scaleColumns}
+      selectedValue={selectedValue}
+      onCellSelect={handleCellSelect}
+      isEmoji={isEmoji}
+      isStar={isStar}
+      isNumbered={isNumbered}
+      isGraphics={isGraphics}
+    />
+  );
+}