@explorer02/cfm-survey-sdk 0.4.2 → 0.4.3

package/templates/docs/templates/CsatMatrixScale.tsx

@@ -1,14 +1,15 @@
 import React, { useState } from 'react';
 import type { CsatQuestion, RatingMatrixQuestion, MatrixRowAnswers, ScaleColumn } from '@explorer02/cfm-survey-sdk';
 import { getEmojiForIndex, CsatStarIcons } from './surveyUiIcons';
-import { columnSubmitValue, nonNaScaleColumns, resolveNumberLabelColor } from './surveyUiScaleUtils';
+import { columnSubmitValue, nonNaScaleColumns } from './surveyUiScaleUtils';
 import { CustomSliderTrack } from './CustomSliderTrack';
 import MatrixDropdown from './MatrixDropdown';
 import {
   matrixRadioRingStyle,
   matrixRadioDotStyle,
   matrixRowBackgroundStyle,
-  scaleCellSelectedStyle,
+  matrixNumberedCellStyle,
+  matrixStatementRowsContainerStyle,
   unselectedOpacityStyle,
   emojiSizeStyle,
   cellSelectedVar,
@@ -172,7 +173,7 @@ function CsatMatrixVerticalList({
   const { statementRows, hasNotApplicableOption: hasNotApplicable } = question;
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+    <div style={matrixStatementRowsContainerStyle()}>
       {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 }}>
@@ -359,7 +360,7 @@ function CsatMatrixGrid({
       )}
 
       {/* Grid Rows */}
-      <div>
+      <div style={matrixStatementRowsContainerStyle()}>
         {statementRows.map((row, rowIdx) => (
           <div key={row.id} style={{
             display: 'flex', alignItems: 'center', borderRadius: '8px',
@@ -435,19 +436,7 @@ function CsatMatrixGrid({
                               padding: '4px',
                               transform: isHovered ? 'scale(1.1)' : 'scale(1)',
                               ...(isSelected ? {} : unselectedOpacityStyle()),
-                              } : isNumbered ? {
-                                width: '40px', height: '40px', borderRadius: '8px',
-                                fontSize: '14px', fontWeight: 500,
-                                ...(isSelected
-                                  ? scaleCellSelectedStyle(true)
-                                  : {
-                                      border: '1px solid #d1d5db',
-                                      backgroundColor: resolveNumberLabelColor(displayIdx, '#fff'),
-                                      color: '#fff',
-                                      ...unselectedOpacityStyle(),
-                                    }),
-                                transition: 'all 0.15s',
-                              } : { padding: '8px', ...(!isSelected ? unselectedOpacityStyle() : {}) }),
+                              } : isNumbered ? matrixNumberedCellStyle(displayIdx, isSelected) : { padding: '8px', ...(!isSelected ? unselectedOpacityStyle() : {}) }),
                           }}
                         >
                           {(EmojiNode ?? StarNode ?? (isNumbered ? (displayIdx + 1) : RadioNode)) as React.ReactNode}
@@ -618,17 +607,7 @@ function CsatMatrixCarousel({
                       ...(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,
-                      ...(isSelected
-                        ? scaleCellSelectedStyle(true)
-                        : {
-                            border: '1px solid #d1d5db',
-                            backgroundColor: resolveNumberLabelColor(colIdx, '#fff'),
-                            color: '#fff',
-                            ...unselectedOpacityStyle(),
-                          }),
-                    } : { padding: '8px', ...(!isSelected ? unselectedOpacityStyle() : {}) }),
+                    } : isNumbered ? matrixNumberedCellStyle(displayIdx, isSelected) : { padding: '8px', ...(!isSelected ? unselectedOpacityStyle() : {}) }),
                   }}
                 >
                   {(EmojiNode ?? StarNode ?? (isNumbered ? (displayIdx + 1) : RadioNode)) as React.ReactNode}

package/templates/docs/templates/LikertMatrixScale.tsx

@@ -3,7 +3,7 @@ import type { CfmMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-survey
 import { columnSubmitValue } from './surveyUiScaleUtils';
 import MatrixDropdown from './MatrixDropdown';
 import { matrixColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
-import { focusRingVar, matrixCarouselDotVar, matrixRadioDotStyle, matrixRadioRingStyle, matrixRowBackgroundStyle } from '@/lib/surveyUi/selectionStyles';
+import { focusRingVar, matrixCarouselDotVar, matrixRadioDotStyle, matrixRadioRingStyle, matrixRowBackgroundStyle, matrixStatementRowsContainerStyle } from '@/lib/surveyUi/selectionStyles';
 
 const MATRIX_ROW_LABEL_WIDTH = 'var(--cfm-matrix-row-width, 180px)';
 const BIPOLAR_COL_WIDTH = 'var(--cfm-matrix-bipolar-width, 25%)';
@@ -33,7 +33,7 @@ function LikertMatrixDropdownLayout({
   const { statementRows, scaleColumns } = question;
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+    <div style={matrixStatementRowsContainerStyle()}>
       {statementRows.map(row => (
         <div key={row.id} style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
           <div style={{ fontSize: '15px', fontWeight: 500, color: '#374151' }} dangerouslySetInnerHTML={{ __html: row.statementText }} />
@@ -251,7 +251,10 @@ function LikertMatrixGridLayout({
     <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' }}>
+      <div style={{
+        ...matrixStatementRowsContainerStyle(),
+        gap: repeatColumnHeaders ? '24px' : 'var(--cfm-matrix-statement-row-gap, 0px)',
+      }}>
         {gridRows.map((rowItem, rowIdx) => {
           return (
             <div key={rowItem.id} style={{ display: 'flex', flexDirection: 'column' }}>

package/templates/docs/templates/RatingScale.tsx

@@ -4,7 +4,7 @@ import type { AnswerValue, NpsScalePoint } from '@explorer02/cfm-survey-sdk';
 import {
   scaleRadioRingStyle,
   scaleRadioDotStyle,
-  scaleCellSelectedStyle,
+  npsNumberBadgeStyle,
 } from '@/lib/surveyUi/selectionStyles';
 import {
   getAccentColor,
@@ -101,15 +101,14 @@ export default function RatingScale({
             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"
+                  className={`flex items-center justify-center rounded-[3px] text-[10px] font-bold shadow-sm sm:text-xs${isSelected ? ' selected' : ''}`}
                   style={{
                     width: 'var(--cfm-nps-cell-size, 24px)',
                     height: 'var(--cfm-nps-cell-size, 24px)',
-                    ...(isSelected
-                      ? scaleCellSelectedStyle(true)
-                      : { backgroundColor: option.color }),
+                    ...npsNumberBadgeStyle(option.color, isSelected),
                   }}
                   data-cfm-number-badge={index}
+                  data-cfm-nps-badge
                   title={option.label}
                 >
                   {option.label}

package/templates/docs/templates/SliderMatrixScale.tsx

@@ -10,6 +10,7 @@ import type { SliderMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-sur
 import { tickColorFromIndex } from './surveyUiScaleUtils';
 import { CustomSliderTrack } from './CustomSliderTrack';
 import { hintLabelStyle, sliderTickLabelStyle } from '@/lib/surveyUi/labelStyles';
+import { matrixStatementRowsContainerStyle } from '@/lib/surveyUi/selectionStyles';
 
 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))';
@@ -168,7 +169,7 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
   };
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width: '100%', maxWidth: '100%', minWidth: 0, overflowX: 'auto', boxSizing: 'border-box' }}>
+    <div style={{ ...matrixStatementRowsContainerStyle(), width: '100%', maxWidth: '100%', minWidth: 0, overflowX: 'auto', boxSizing: 'border-box' }}>
       {renderHeaderRow()}
 
       {statementRows.map(row => {

package/templates/docs/templates/selectionStyles.ts

@@ -7,6 +7,7 @@
  *   --cfm-input-focus-ring   = focus ring (outer border + inner dot)
  */
 import type { CSSProperties } from 'react';
+import { resolveNumberLabelColor } from './surveyUiScaleUtils';
 
 /** Terminal hex fallbacks match apps/client — visible before survey-theme.css loads. */
 export const cellSelectedVar = 'var(--cfm-matrix-selected, var(--cfm-primary, #fbe8f3))';
@@ -173,10 +174,67 @@ export function scaleCellSelectedStyle(isSelected: boolean): CSSProperties {
     : {};
 }
 
+/** NPS numbered badge row — React-owned; do not patch via preview bridge DOM hooks. */
+export function npsNumberBadgeStyle(backgroundColor: string, isSelected: boolean): CSSProperties {
+  const base: CSSProperties = {
+    color: '#ffffff',
+    boxSizing: 'border-box',
+  };
+  if (isSelected) {
+    return {
+      ...base,
+      border: `2px solid ${focusRingVar}`,
+      backgroundColor: cellSelectedVar,
+    };
+  }
+  return {
+    ...base,
+    backgroundColor,
+    border: 'none',
+  };
+}
+
+/** CSAT / Rating matrix numbered cell (unselected uses traffic/mono/individual badge colors). */
+export function matrixNumberedCellStyle(index: number, isSelected: boolean): CSSProperties {
+  const base: CSSProperties = {
+    width: '40px',
+    height: '40px',
+    borderRadius: '8px',
+    fontSize: '14px',
+    fontWeight: 500,
+    transition: 'all 0.15s',
+  };
+
+  if (isSelected) {
+    return {
+      ...base,
+      border: `2px solid ${focusRingVar}`,
+      backgroundColor: cellSelectedVar,
+      color: 'var(--cfm-matrix-number-text-color, #ffffff)',
+    };
+  }
+
+  return {
+    ...base,
+    border: '1px solid #d1d5db',
+    backgroundColor: resolveNumberLabelColor(index),
+    color: 'var(--cfm-matrix-number-text-color, #ffffff)',
+    ...unselectedOpacityStyle(),
+  };
+}
+
 export function unselectedOpacityStyle(): CSSProperties {
   return { opacity: 'var(--cfm-csat-unselected-opacity, 0.5)' };
 }
 
+export function matrixStatementRowsContainerStyle(): CSSProperties {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 'var(--cfm-matrix-statement-row-gap, 0px)',
+  };
+}
+
 /** Matrix statement row — zebra when --cfm-matrix-zebra-enabled is 1 (wizard multi-statement preview). */
 export function matrixRowBackgroundStyle(rowIdx: number): CSSProperties {
   let zebraOn = false;

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

@@ -68,6 +68,7 @@ function setDisplay(selector, visible) {
     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.closest('[data-cfm-nps-area]')) return;
       if (el.classList.contains('selected')) return;
       var i = parseInt(el.getAttribute('data-cfm-number-badge'), 10);
       if (isNaN(i)) return;

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

@@ -43,6 +43,7 @@ function resolveLiveNumberLabelColor(index: number): string {
 
 function applyNumberBadgeColors(): void {
   document.querySelectorAll('[data-cfm-number-badge]').forEach((el) => {
+    if (el.closest('[data-cfm-nps-area]')) return;
     if (el.classList.contains('selected')) return;
     const i = parseInt(el.getAttribute('data-cfm-number-badge') ?? '', 10);
     if (Number.isNaN(i)) return;

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

@@ -224,10 +224,32 @@ export function mergePreviewQuestion(
   });
 }
 
-/** Survey page layout — each question reflects its type-tab customization mapping. */
+/** Survey page layout — each embedded question uses its type-tab customization. */
 export function mergeSurveyPageQuestion(
   question: SurveyQuestion,
   previewState: PreviewStatePatch,
 ): SurveyQuestion {
-  return mergePreviewQuestion(question, normalizeSurveyPagePreviewState(previewState));
+  const normalized = normalizeSurveyPagePreviewState(previewState);
+  let state = normalized;
+
+  if (question.type === 'NPS_SCALE') {
+    state = {
+      ...normalized,
+      npsButtonStyle:
+        previewState.npsButtonStyle
+        ?? normalized.npsButtonStyle
+        ?? (question.buttonStyle as string | undefined),
+      hintMinText: previewState.hintMinText ?? normalized.hintMinText,
+      hintMaxText: previewState.hintMaxText ?? normalized.hintMaxText,
+    };
+  } else if (question.type === 'MCQ') {
+    state = {
+      ...normalized,
+      mcqOptionStyle: previewState.mcqOptionStyle ?? normalized.mcqOptionStyle,
+    };
+  } else if (question.type === 'CFM_MATRIX') {
+    state = { ...normalized, multiStatement: true };
+  }
+
+  return mergePreviewQuestion(question, state);
 }

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

@@ -137,3 +137,7 @@ html.cfm-live-edit [data-cfm-nps-area] {
   max-width: 100%;
   overflow-x: auto;
 }
+
+html.cfm-live-edit [data-cfm-nps-area] [data-cfm-nps-badge] {
+  color: #ffffff !important;
+}

package/templates/previewBridge.ts

@@ -297,6 +297,7 @@ function applyThemeSideEffects(): void {
   const mode = readCssVar('--cfm-number-label-mode', 'traffic');
   const mono = readCssVar('--cfm-number-mono-color', '#9ca3af');
   document.querySelectorAll('[data-cfm-number-badge]').forEach((el) => {
+    if (el.closest('[data-cfm-nps-area]')) return;
     if (el.classList.contains('selected')) return;
     const i = parseInt(el.getAttribute('data-cfm-number-badge') ?? '', 10);
     if (Number.isNaN(i)) return;

package/templates/survey-theme.css

@@ -98,10 +98,12 @@
   --cfm-matrix-bipolar-width: 25%;
   --cfm-matrix-carousel-dot: #2563eb;
   --cfm-matrix-cell-padding: 8px;
+  --cfm-matrix-statement-row-gap: 8px;
 
   --cfm-csat-accent: var(--cfm-accent);
   --cfm-csat-emoji-size: 24px;
   --cfm-csat-unselected-opacity: 0.5;
+  --cfm-matrix-number-text-color: #ffffff;
   --cfm-csat-ring-color: var(--cfm-accent);
   --cfm-csat-cell-size: 40px;
 

package/templates/wizard-dist/assets/{PreviewMock-B2SDZ408.js → PreviewMock-DkCiCfU3.js}

@@ -1 +1 @@
-import{u as x,j as e}from"./index-BbqXvrx7.js";import{b as t}from"./vendor-BwkXDkd3.js";function p(d=150){const l=x(r=>r.config),[a,s]=t.useState(l);return t.useEffect(()=>{const r=window.setTimeout(()=>s(l),d);return()=>window.clearTimeout(r)},[l,d]),a}const h=t.memo(function(){const l=p(150),a=x(n=>n.logoPreviewDataUrl),{global:s}=l,{layout:r,colorScheme:o,buttons:c}=s,m=t.useMemo(()=>r.borderStyle==="sharp"?"rounded-none":r.borderStyle==="pill"?"rounded-[32px]":"rounded-2xl",[r.borderStyle]),i=t.useMemo(()=>r.fontStyle==="serif"?"Georgia, serif":r.fontStyle==="system"?"system-ui, sans-serif":"Inter, sans-serif",[r.fontStyle]),u=a??s.logo.url,f=t.useMemo(()=>({backgroundColor:o.background,color:o.text,borderColor:o.secondary,fontFamily:i}),[o,i]);return e.jsxs("div",{className:`overflow-hidden border shadow-md ${m}`,style:f,children:[r.showHeader&&e.jsxs("div",{className:"flex items-center gap-3 border-b px-5 py-4",style:{borderColor:o.secondary},children:[u&&e.jsx("img",{src:u,alt:"Logo",className:"max-h-6 w-auto object-contain",loading:"lazy"}),e.jsx("span",{className:"text-xs font-semibold tracking-wider",children:s.companyName})]}),e.jsxs("div",{className:"space-y-6 p-6",children:[r.showProgressBar&&e.jsxs("div",{className:"space-y-1.5",children:[e.jsxs("div",{className:"flex justify-between text-[10px] font-semibold text-slate-400",children:[e.jsx("span",{children:"Progress"}),e.jsx("span",{children:"35%"})]}),e.jsx("div",{className:"h-1.5 w-full overflow-hidden rounded-full bg-slate-100",children:e.jsx("div",{className:"h-full w-[35%] rounded-full",style:{backgroundColor:o.accent}})})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("h4",{className:"flex items-start gap-1.5 text-sm font-bold leading-snug",children:[r.showQuestionNumbers&&e.jsx("span",{className:"font-medium text-slate-400",children:"Q1."}),e.jsx("span",{children:s.surveyTitle}),r.showRequiredAsterisk&&e.jsx("span",{className:"text-red-500",children:"*"})]}),e.jsx("p",{className:"text-[11px] text-slate-400",children:"How would you rate your overall experience?"}),e.jsx("div",{className:"grid grid-cols-5 gap-2",children:[1,2,3,4,5].map(n=>e.jsx("div",{className:`flex h-9 items-center justify-center border text-xs font-semibold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:n===1?{backgroundColor:o.secondary,borderColor:o.primary,color:o.primary}:{backgroundColor:o.background,borderColor:o.secondary,color:o.text},children:n},n))})]})]}),e.jsxs("div",{className:"flex items-center justify-between border-t bg-slate-50/50 px-6 py-4",children:[r.showBackButton&&e.jsx("span",{className:`border px-3 py-1.5 text-[10px] font-semibold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:{borderColor:o.secondary,color:o.text},children:c.back}),e.jsx("div",{className:"flex-1"}),r.showNextButton&&e.jsx("span",{className:`px-4 py-1.5 text-[10px] font-bold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:{backgroundColor:o.primary,color:o.buttonText},children:c.next})]})]})});export{h as PreviewMock};
+import{u as x,j as e}from"./index-COdmy8Xp.js";import{b as t}from"./vendor-BwkXDkd3.js";function p(d=150){const l=x(r=>r.config),[a,s]=t.useState(l);return t.useEffect(()=>{const r=window.setTimeout(()=>s(l),d);return()=>window.clearTimeout(r)},[l,d]),a}const h=t.memo(function(){const l=p(150),a=x(n=>n.logoPreviewDataUrl),{global:s}=l,{layout:r,colorScheme:o,buttons:c}=s,m=t.useMemo(()=>r.borderStyle==="sharp"?"rounded-none":r.borderStyle==="pill"?"rounded-[32px]":"rounded-2xl",[r.borderStyle]),i=t.useMemo(()=>r.fontStyle==="serif"?"Georgia, serif":r.fontStyle==="system"?"system-ui, sans-serif":"Inter, sans-serif",[r.fontStyle]),u=a??s.logo.url,f=t.useMemo(()=>({backgroundColor:o.background,color:o.text,borderColor:o.secondary,fontFamily:i}),[o,i]);return e.jsxs("div",{className:`overflow-hidden border shadow-md ${m}`,style:f,children:[r.showHeader&&e.jsxs("div",{className:"flex items-center gap-3 border-b px-5 py-4",style:{borderColor:o.secondary},children:[u&&e.jsx("img",{src:u,alt:"Logo",className:"max-h-6 w-auto object-contain",loading:"lazy"}),e.jsx("span",{className:"text-xs font-semibold tracking-wider",children:s.companyName})]}),e.jsxs("div",{className:"space-y-6 p-6",children:[r.showProgressBar&&e.jsxs("div",{className:"space-y-1.5",children:[e.jsxs("div",{className:"flex justify-between text-[10px] font-semibold text-slate-400",children:[e.jsx("span",{children:"Progress"}),e.jsx("span",{children:"35%"})]}),e.jsx("div",{className:"h-1.5 w-full overflow-hidden rounded-full bg-slate-100",children:e.jsx("div",{className:"h-full w-[35%] rounded-full",style:{backgroundColor:o.accent}})})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("h4",{className:"flex items-start gap-1.5 text-sm font-bold leading-snug",children:[r.showQuestionNumbers&&e.jsx("span",{className:"font-medium text-slate-400",children:"Q1."}),e.jsx("span",{children:s.surveyTitle}),r.showRequiredAsterisk&&e.jsx("span",{className:"text-red-500",children:"*"})]}),e.jsx("p",{className:"text-[11px] text-slate-400",children:"How would you rate your overall experience?"}),e.jsx("div",{className:"grid grid-cols-5 gap-2",children:[1,2,3,4,5].map(n=>e.jsx("div",{className:`flex h-9 items-center justify-center border text-xs font-semibold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:n===1?{backgroundColor:o.secondary,borderColor:o.primary,color:o.primary}:{backgroundColor:o.background,borderColor:o.secondary,color:o.text},children:n},n))})]})]}),e.jsxs("div",{className:"flex items-center justify-between border-t bg-slate-50/50 px-6 py-4",children:[r.showBackButton&&e.jsx("span",{className:`border px-3 py-1.5 text-[10px] font-semibold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:{borderColor:o.secondary,color:o.text},children:c.back}),e.jsx("div",{className:"flex-1"}),r.showNextButton&&e.jsx("span",{className:`px-4 py-1.5 text-[10px] font-bold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:{backgroundColor:o.primary,color:o.buttonText},children:c.next})]})]})});export{h as PreviewMock};

package/templates/wizard-dist/assets/TypePanel-CUani1B7.js

@@ -0,0 +1 @@
+import{u as p,j as e,T as P,N as t,S as b,R as d,C as r,a as R,M as z}from"./index-COdmy8Xp.js";import"./vendor-BwkXDkd3.js";function j({values:n,onPatch:i}){return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(r,{label:"Label text color",value:n.columnLabelColor,onChange:a=>i({columnLabelColor:a})}),e.jsx(r,{label:"Label background",value:n.columnLabelBgColor,onChange:a=>i({columnLabelBgColor:a})})]})}function f({values:n,onPatch:i}){return e.jsxs("div",{className:"grid grid-cols-1 gap-3 sm:grid-cols-2",children:[e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Min hint label"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:n.hintMinText,onChange:a=>i({hintMinText:a.target.value})})]}),e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Max hint label"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:n.hintMaxText,onChange:a=>i({hintMaxText:a.target.value})})]}),e.jsx(r,{label:"Hint text color",value:n.hintLabelColor,onChange:a=>i({hintLabelColor:a})}),e.jsx(r,{label:"Hint label background",value:n.hintLabelBgColor,onChange:a=>i({hintLabelBgColor:a})})]})}function B({values:n,onPatch:i,count:a=11}){return e.jsxs("div",{className:"space-y-3",children:[e.jsx(b,{label:"Number label style",value:n.numberLabelMode,onChange:c=>i({numberLabelMode:c}),options:[{value:"traffic",label:"Traffic light (default)"},{value:"monochrome",label:"Monochrome (one color)"},{value:"individual",label:"Individual per number"}]}),n.numberLabelMode==="monochrome"&&e.jsx(r,{label:"Monochrome color",value:n.monochromeNumberColor,onChange:c=>i({monochromeNumberColor:c})}),n.numberLabelMode==="individual"&&e.jsx("div",{className:"grid grid-cols-2 gap-2 sm:grid-cols-3",children:Array.from({length:a},(c,x)=>e.jsx(r,{label:`#${x}`,value:n.individualNumberColors[x]??"#9CA3AF",onChange:C=>{const m=[...n.individualNumberColors];m[x]=C,i({individualNumberColors:m})}},x))})]})}function s({title:n,children:i}){return e.jsxs("div",{className:"space-y-3 rounded-xl border border-white/5 bg-slate-950/20 p-4",children:[e.jsx("h4",{className:"text-xs font-semibold uppercase tracking-wider text-slate-400",children:n}),i]})}function I({type:n,activeFormat:i}){const a=p(l=>l.config.questionTypes[n]),c=p(l=>l.updateQuestionType),x=p(l=>l.previewMultiStatementByType),C=p(l=>l.setPreviewMultiStatementForType),m=p(l=>l.heatmapPreviewPin);if(!a)return e.jsx("p",{className:"text-sm text-slate-500",children:"No configuration available for this type."});const o=l=>c(n,l),v=z.includes(n),S=!!x[n],u=i.includes("star"),g=i.includes("emoji"),h=i.includes("numbered"),w=i.includes("drag"),N=i.includes("dropdown"),T=i.includes("radio"),k=i==="CFM_bipolar",M=i.includes("graphics"),y=a.optionStyle??a.cardStyle??"outlined",L=a.buttonStyle??"numbered";return e.jsxs("div",{className:"space-y-4",children:[v&&e.jsx(P,{label:"Preview multiple statements",checked:S,onChange:l=>C(n,l)}),v&&S&&"statementRowGap"in a&&e.jsx(t,{label:"Statement row gap (px)",value:a.statementRowGap,onChange:l=>o({statementRowGap:l}),min:0,max:48}),n==="MCQ"&&"optionGap"in a&&e.jsx(s,{title:"Option style",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(b,{label:"Option style",value:a.optionStyle??a.cardStyle??"outlined",onChange:l=>o({optionStyle:l}),options:[{value:"outlined",label:"Outlined"},{value:"filled",label:"Filled"},{value:"minimal",label:"Minimal"}]}),e.jsx(d,{label:"Option gap",value:a.optionGap,onChange:l=>o({optionGap:l}),min:0,max:32}),e.jsx(d,{label:"Border radius",value:a.borderRadius,onChange:l=>o({borderRadius:l}),min:0,max:24}),e.jsx(d,{label:"Option padding",value:a.optionPadding??12,onChange:l=>o({optionPadding:l}),min:4,max:24}),e.jsx(r,{label:"Hover border",value:a.hoverBorderColor,onChange:l=>o({hoverBorderColor:l})}),y==="filled"&&e.jsx(r,{label:"Unselected fill color",value:a.filledOptionBg??"#F9FAFB",onChange:l=>o({filledOptionBg:l})})]})}),n==="TEXTFIELD"&&"defaultPlaceholder"in a&&e.jsx(s,{title:"Text input",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Default placeholder"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:a.defaultPlaceholder,onChange:l=>o({defaultPlaceholder:l.target.value})})]}),e.jsx(t,{label:"Input radius (px)",value:a.inputRadius,onChange:l=>o({inputRadius:l}),min:0,max:24}),e.jsx(r,{label:"Border color",value:a.borderColor,onChange:l=>o({borderColor:l})}),e.jsx(r,{label:"Placeholder color",value:a.placeholderColor,onChange:l=>o({placeholderColor:l})}),e.jsx(t,{label:"Input height (px)",value:a.inputHeight,onChange:l=>o({inputHeight:l}),min:32,max:64}),e.jsx(t,{label:"Input padding (px)",value:a.inputPadding,onChange:l=>o({inputPadding:l}),min:8,max:24})]})}),n==="NPS_SCALE"&&"buttonStyle"in a&&e.jsxs(e.Fragment,{children:[e.jsxs(s,{title:"NPS buttons",children:[e.jsx(b,{label:"Button style",value:a.buttonStyle,onChange:l=>o({buttonStyle:l}),options:[{value:"standard",label:"Radio"},{value:"numbered",label:"Numbered badges"}]}),e.jsx("p",{className:"text-xs text-slate-500",children:"Selected cell and focus ring come from Theme → Question card."})]}),e.jsx(s,{title:"Hint labels",children:e.jsx(f,{values:a,onPatch:o})}),L==="numbered"&&e.jsx(s,{title:"Number labels",children:e.jsx(B,{values:a,onPatch:o})}),e.jsx(s,{title:"Track & cells",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(t,{label:"Cell size (px)",value:a.cellSize,onChange:l=>o({cellSize:l}),min:24,max:56}),e.jsx(t,{label:"Cell gap (px)",value:a.cellGap,onChange:l=>o({cellGap:l}),min:0,max:16}),e.jsx(r,{label:"Track bar",value:a.trackBarColor,onChange:l=>o({trackBarColor:l})})]})})]}),n==="CFM_MATRIX"&&"rowLabelWidth"in a&&e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Matrix layout",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(t,{label:"Row label width (px)",value:a.rowLabelWidth,onChange:l=>o({rowLabelWidth:l}),min:120,max:280}),k&&e.jsx(t,{label:"Bipolar column width (%)",value:a.bipolarColumnWidthPercent,onChange:l=>o({bipolarColumnWidthPercent:l}),min:15,max:40}),e.jsx(t,{label:"Cell padding (px)",value:a.cellPadding,onChange:l=>o({cellPadding:l}),min:4,max:24})]})}),e.jsx(s,{title:"Label items",children:e.jsx(j,{values:a,onPatch:o})})]}),n==="CSAT_MATRIX"&&"emojiSize"in a&&e.jsxs(e.Fragment,{children:[(g||u||h)&&e.jsxs(s,{title:`${R.CSAT_MATRIX} — ${i.replace("CSAT_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[g&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>o({emojiSize:l}),min:16,max:40}),u&&e.jsx(r,{label:"Star color",value:a.accentColor,onChange:l=>o({accentColor:l})}),(g||u||h)&&e.jsx(d,{label:"Unselected opacity",value:Math.round(a.unselectedOpacity*100),onChange:l=>o({unselectedOpacity:l/100}),min:10,max:100}),h&&e.jsx(r,{label:"Number text color",value:a.numberedTextColor,onChange:l=>o({numberedTextColor:l})})]}),e.jsx("p",{className:"text-xs text-slate-500",children:"Selected cell color and focus ring come from Theme → Question card."})]}),e.jsxs(s,{title:"Label items",children:[e.jsx("p",{className:"text-xs text-slate-500",children:"Applies to the 5 text labels above options in all formats."}),e.jsx(j,{values:a,onPatch:o})]}),M&&e.jsx(s,{title:"Graphics track",children:e.jsx(r,{label:"Track color",value:a.graphicsTrackColor,onChange:l=>o({graphicsTrackColor:l})})})]}),n==="RATING_MATRIX"&&"unselectedStarOpacity"in a&&e.jsxs(e.Fragment,{children:[(g||u||h||T)&&e.jsxs(s,{title:`Rating — ${i.replace("RATING_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[g&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>o({emojiSize:l}),min:16,max:40}),u&&e.jsx(r,{label:"Star color",value:a.starColor,onChange:l=>o({starColor:l})}),(g||u||h||T)&&e.jsx(d,{label:"Unselected opacity",value:Math.round(a.unselectedStarOpacity*100),onChange:l=>o({unselectedStarOpacity:l/100}),min:10,max:100}),h&&e.jsx(r,{label:"Number text color",value:a.numberedTextColor,onChange:l=>o({numberedTextColor:l})})]}),e.jsx("p",{className:"text-xs text-slate-500",children:"Selected cell color and focus ring come from Theme → Question card."})]}),e.jsxs(s,{title:"Label items",children:[e.jsx("p",{className:"text-xs text-slate-500",children:"Applies to the 5 text anchor labels in all formats."}),e.jsx(j,{values:a,onPatch:o})]}),M&&e.jsx(s,{title:"Graphics track",children:e.jsx(r,{label:"Track color",value:a.graphicsTrackColor,onChange:l=>o({graphicsTrackColor:l})})})]}),n==="SLIDER_MATRIX"&&"trackColor"in a&&e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Slider track",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(r,{label:"Track",value:a.trackColor,onChange:l=>o({trackColor:l})}),e.jsx(r,{label:"Thumb",value:a.thumbColor,onChange:l=>o({thumbColor:l})}),e.jsx(t,{label:"Row label width (px)",value:a.rowLabelWidth,onChange:l=>o({rowLabelWidth:l}),min:120,max:280}),e.jsx(r,{label:"Row band",value:a.rowBandColor,onChange:l=>o({rowBandColor:l})}),e.jsx(t,{label:"Tick badge size (px)",value:a.tickBadgeSize,onChange:l=>o({tickBadgeSize:l}),min:20,max:40})]})}),e.jsx(s,{title:"Anchor hint labels",children:e.jsx(f,{values:a,onPatch:o})}),e.jsx(s,{title:"Tick number labels",children:e.jsx(B,{values:a,onPatch:o,count:11})})]}),n==="FILE_UPLOAD"&&"dropzoneStyle"in a&&e.jsx(s,{title:"Dropzone",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(b,{label:"Dropzone border",value:a.dropzoneStyle,onChange:l=>o({dropzoneStyle:l}),options:[{value:"dashed",label:"Dashed"},{value:"solid",label:"Solid"}]}),e.jsx(r,{label:"Border color",value:a.borderColor??a.accentColor,onChange:l=>o({borderColor:l})}),e.jsx(r,{label:"Fill color",value:a.dropzoneFillColor,onChange:l=>o({dropzoneFillColor:l})}),e.jsx(t,{label:"Padding (px)",value:a.dropzonePadding,onChange:l=>o({dropzonePadding:l}),min:12,max:48})]})}),n==="TEXT_AND_MEDIA"&&"mediaMaxWidth"in a&&e.jsx(s,{title:"Text & media",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(d,{label:"Media max width (%)",value:a.mediaMaxWidth,onChange:l=>o({mediaMaxWidth:l}),min:50,max:100}),e.jsx(d,{label:"Media corner radius",value:a.mediaRadius,onChange:l=>o({mediaRadius:l}),min:0,max:24}),e.jsx(r,{label:"Caption color",value:a.captionColor,onChange:l=>o({captionColor:l})}),e.jsx(t,{label:"Caption size (px)",value:a.captionSize,onChange:l=>o({captionSize:l}),min:10,max:24})]})}),n==="HEATMAP"&&"pinColor"in a&&e.jsx(s,{title:"Heatmap pin",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(r,{label:"Pin color",value:a.pinColor,onChange:l=>o({pinColor:l})}),e.jsx(r,{label:"Pin border",value:a.pinBorderColor,onChange:l=>o({pinBorderColor:l})}),e.jsx(d,{label:"Pin size",value:a.pinSize,onChange:l=>o({pinSize:l}),min:8,max:32}),e.jsx(d,{label:"Overlay opacity",value:Math.round(a.overlayOpacity*100),onChange:l=>o({overlayOpacity:l/100}),min:0,max:80}),e.jsxs("p",{className:"text-xs text-slate-500 sm:col-span-2",children:["Click the heatmap image in the preview to place a pin and see styling update live. Pin preview position: ",Math.round(m.x*100),"%, ",Math.round(m.y*100),"%"]})]})}),n==="RANK_ORDER"&&"drag"in a&&e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"List",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(r,{label:"List bg",value:a.drag.itemBg,onChange:l=>o({drag:{...a.drag,itemBg:l},dropdown:{...a.dropdown,itemBg:l}})}),e.jsx(r,{label:"List hover",value:a.dropdown.itemHoverBg??a.drag.itemHoverBg??"#F3F4F6",onChange:l=>o({drag:{...a.drag,itemHoverBg:l},dropdown:{...a.dropdown,itemHoverBg:l}})})]})}),e.jsx(s,{title:w?"Drag & drop":N?"Dropdown rank":"Rank order",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[w&&e.jsxs(e.Fragment,{children:[e.jsx(r,{label:"Drag handle",value:a.drag.dragHandleColor,onChange:l=>o({drag:{...a.drag,dragHandleColor:l}})}),e.jsx(r,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>o({drag:{...a.drag,rankBadgeColor:l},dropdown:{...a.dropdown,rankBadgeColor:l}})})]}),N&&e.jsxs(e.Fragment,{children:[e.jsx(r,{label:"Select border",value:a.dropdown.selectBorderColor,onChange:l=>o({dropdown:{...a.dropdown,selectBorderColor:l}})}),e.jsx(r,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>o({drag:{...a.drag,rankBadgeColor:l},dropdown:{...a.dropdown,rankBadgeColor:l}})})]})]})})]})]})}export{I as TypePanel};