@explorer02/cfm-survey-sdk 0.3.2 → 0.3.4

package/templates/docs/templates/LikertMatrixScale.tsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import type { CfmMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-survey-sdk';
 import { columnSubmitValue } from './surveyUiScaleUtils';
 import MatrixDropdown from './MatrixDropdown';
-import { matrixColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
-import { focusRingVar, matrixCarouselDotVar, matrixRadioDotStyle, matrixRadioRingStyle } from '@/lib/surveyUi/selectionStyles';
+import { columnLabelPillStyle, matrixColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
+import { focusRingVar, matrixCarouselDotVar, matrixRadioDotStyle, matrixRadioRingStyle, matrixRowBackgroundStyle } 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%)';
@@ -219,7 +219,7 @@ function LikertMatrixGridLayout({
                     position: 'absolute', left: leftPos, transform: 'translateX(-50%)',
                     bottom: 0, display: 'flex', justifyContent: 'center', whiteSpace: 'nowrap'
                   }}>
-                    <span style={{ fontSize: '13px', fontWeight: 600, color: '#111827' }}>{lbl}</span>
+                    <span style={{ fontSize: '13px', fontWeight: 600, ...columnLabelPillStyle('matrix') }}>{lbl}</span>
                   </div>
                 );
               })}
@@ -234,7 +234,7 @@ function LikertMatrixGridLayout({
               <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, textAlign: 'center', lineHeight: 1.2, ...matrixColumnLabelStyle() }}
+                    <span style={{ fontSize: '13px', fontWeight: 500, ...columnLabelPillStyle('matrix') }}
                           dangerouslySetInnerHTML={{ __html: transposeTable ? ('statementText' in col ? col.statementText : col.label) : ('label' in col ? col.label : (col as { statementText: string }).statementText) }} />
                   </div>
                 ))}
@@ -258,8 +258,9 @@ function LikertMatrixGridLayout({
               {repeatColumnHeaders && renderHeader()}
               <div style={{
                 display: 'flex', alignItems: 'center', borderRadius: '8px',
-                padding: 'var(--cfm-matrix-cell-padding, 12px) 0', backgroundColor: !repeatColumnHeaders && rowIdx % 2 === 0 ? 'var(--cfm-zebra-row, rgba(249, 250, 251, 0.8))' : '#fff',
-                boxSizing: 'border-box'
+                padding: 'var(--cfm-matrix-cell-padding, 12px) 0',
+                ...matrixRowBackgroundStyle(rowIdx),
+                boxSizing: 'border-box',
               }}>
                 <div style={{ flex: isBipolar ? `0 0 ${BIPOLAR_COL_WIDTH}` : `0 0 ${MATRIX_ROW_LABEL_WIDTH}`, padding: '0 16px', boxSizing: 'border-box' }}>
                   <span style={{ fontSize: '14px', fontWeight: 500, color: '#111827', lineHeight: 1.4, wordWrap: 'break-word', display: 'block' }}

package/templates/docs/templates/Question.tsx

@@ -121,6 +121,7 @@ export default function Question({
         boxShadow: 'var(--cfm-card-shadow, 0 1px 3px rgba(0,0,0,0.1))',
         borderRadius: 'var(--cfm-border-radius, 12px)',
         fontFamily: 'var(--cfm-font-family)',
+        marginBottom: 'var(--cfm-card-gap, 32px)',
       }}
     >
       <h2
@@ -149,15 +150,19 @@ 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" style={hintLabelStyle()}>
+            <div className="relative w-full min-h-[24px] text-xs font-semibold">
               <span
                 className="absolute left-0 top-0 max-w-[30%] text-left leading-tight"
+                style={{ ...hintLabelStyle(), padding: '2px 6px', borderRadius: '4px' }}
                 dangerouslySetInnerHTML={{ __html: question.minLabel ?? '' }}
               />
               {question.midLabel && (
                 <span
                   className="absolute top-0 -translate-x-1/2 text-center max-w-[40%] leading-tight"
                   style={{
+                    ...hintLabelStyle(),
+                    padding: '2px 6px',
+                    borderRadius: '4px',
                     left: `${question.midLabelIndex !== undefined && question.options.length > 1
                       ? (question.midLabelIndex / (question.options.length - 1)) * 100
                       : 50}%`,
@@ -167,6 +172,7 @@ export default function Question({
               )}
               <span
                 className="absolute right-0 top-0 max-w-[30%] text-right leading-tight"
+                style={{ ...hintLabelStyle(), padding: '2px 6px', borderRadius: '4px' }}
                 dangerouslySetInnerHTML={{ __html: question.maxLabel ?? '' }}
               />
             </div>

package/templates/docs/templates/RankOrderScale.tsx

@@ -121,12 +121,19 @@ function RankOrderOptionRow({
 }: RankOrderOptionRowProps) {
   return (
     <div
-      className="flex items-center gap-3 rounded-lg border border-[#e5e5e5] transition-colors hover:bg-gray-50/50"
+      className="flex items-center gap-3 rounded-lg border border-[#e5e5e5] transition-colors"
       style={{
         backgroundColor: 'var(--cfm-rank-item-bg, #fff)',
         padding: 'var(--cfm-rank-item-padding, 12px 16px)',
         marginBottom: 'var(--cfm-rank-item-gap, 12px)',
       }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.backgroundColor =
+          'var(--cfm-rank-dropdown-hover-bg, var(--cfm-rank-item-bg, #f9fafb))';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.backgroundColor = 'var(--cfm-rank-item-bg, #fff)';
+      }}
     >
       {rankSelect}
       {dragHandle}

package/templates/docs/templates/RatingScale.tsx

@@ -112,7 +112,7 @@ export default function RatingScale({
     <div role="radiogroup" className="w-full overflow-x-auto" data-cfm-nps-area>
       {showNumberBadges && (
         <div className="mb-3 min-w-0" style={gridStyle}>
-          {resolvedOptions.map((option) => {
+          {resolvedOptions.map((option, index) => {
             const isSelected = isScaleAnswerSelected(selectedValue, option.value);
             return (
               <div key={`${questionId}-badge-${option.value}`} className="flex justify-center">
@@ -125,6 +125,7 @@ export default function RatingScale({
                       ? scaleCellSelectedStyle(true)
                       : { backgroundColor: option.color }),
                   }}
+                  data-cfm-number-badge={index}
                   title={option.label}
                 >
                   {option.label}

package/templates/docs/templates/SliderMatrixScale.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import type { SliderMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-survey-sdk';
 import { tickColorFromIndex } from './surveyUiScaleUtils';
 import { CustomSliderTrack } from './CustomSliderTrack';
-import { hintLabelStyle, sliderTickLabelStyle } from '@/lib/surveyUi/labelStyles';
+import { columnLabelPillStyle, sliderTickLabelStyle } from '@/lib/surveyUi/labelStyles';
 
 const MATRIX_ROW_LABEL_WIDTH = 'var(--cfm-matrix-row-width, 180px)';
 const SLIDER_ROW_BAND = 'var(--cfm-slider-row-band, var(--cfm-row-band, #f3f4f6))';
@@ -84,12 +84,13 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
                 marginBottom: '16px',
                 fontSize: '14px',
                 fontWeight: 500,
-                ...hintLabelStyle(),
               }}
             >
               {labels.map((lbl, idx) => (
                 <div key={idx} style={{ width: 0, display: 'flex', justifyContent: 'center' }}>
-                  <span style={{ whiteSpace: 'nowrap' }}>{lbl}</span>
+                  <span style={columnLabelPillStyle('hint')}>
+                    {lbl}
+                  </span>
                 </div>
               ))}
             </div>
@@ -180,6 +181,7 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
           <div key={row.id} style={{
             display: 'flex', width: '100%', alignItems: 'center',
             backgroundColor: SLIDER_ROW_BAND, borderRadius: '12px', padding: '16px', boxSizing: 'border-box',
+            borderBottom: '1px solid var(--cfm-card-border-color, #e5e7eb)',
           }}>
             <div style={{ flex: `0 0 ${MATRIX_ROW_LABEL_WIDTH}`, paddingRight: '16px', fontSize: '15px', color: '#111827', wordWrap: 'break-word', display: 'flex', alignItems: 'center' }}>
               {row.statementText !== 'Question' && row.statementText !== '' ? (

package/templates/docs/templates/labelStyles.ts

@@ -4,30 +4,73 @@
  */
 import type { CSSProperties } from 'react';
 
+export type ColumnLabelScope = 'matrix' | 'csat' | 'rating' | 'hint' | 'sliderTick';
+
+const PILL_BASE: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '4px 10px',
+  borderRadius: 'var(--cfm-border-radius, 6px)',
+  textAlign: 'center',
+  lineHeight: 1.2,
+  whiteSpace: 'nowrap',
+  boxSizing: 'border-box',
+};
+
+function scopeColorVars(scope: ColumnLabelScope): { color: string; backgroundColor: string } {
+  switch (scope) {
+    case 'matrix':
+      return {
+        color: 'var(--cfm-matrix-column-label-color, #4b5563)',
+        backgroundColor: 'var(--cfm-matrix-column-label-bg, transparent)',
+      };
+    case 'csat':
+      return {
+        color: 'var(--cfm-csat-column-label-color, #4b5563)',
+        backgroundColor: 'var(--cfm-csat-column-label-bg, transparent)',
+      };
+    case 'rating':
+      return {
+        color: 'var(--cfm-rating-column-label-color, var(--cfm-matrix-column-label-color, #4b5563))',
+        backgroundColor: 'var(--cfm-rating-column-label-bg, var(--cfm-matrix-column-label-bg, transparent))',
+      };
+    case 'hint':
+      return {
+        color: 'var(--cfm-hint-label-color, #6b7280)',
+        backgroundColor: 'var(--cfm-hint-label-bg, transparent)',
+      };
+    case 'sliderTick':
+      return {
+        color: 'var(--cfm-slider-tick-label-color, #4b5563)',
+        backgroundColor: 'var(--cfm-slider-tick-label-bg, transparent)',
+      };
+    default:
+      return { color: '#4b5563', backgroundColor: 'transparent' };
+  }
+}
+
+/** Centered pill for column / anchor / tick labels — wizard Label Items customization. */
+export function columnLabelPillStyle(scope: ColumnLabelScope): CSSProperties {
+  return { ...PILL_BASE, ...scopeColorVars(scope) };
+}
+
 export function hintLabelStyle(): CSSProperties {
-  return {
-    color: 'var(--cfm-hint-label-color, #6b7280)',
-    backgroundColor: 'var(--cfm-hint-label-bg, transparent)',
-  };
+  return columnLabelPillStyle('hint');
 }
 
 export function matrixColumnLabelStyle(): CSSProperties {
-  return {
-    color: 'var(--cfm-matrix-column-label-color, #4b5563)',
-    backgroundColor: 'var(--cfm-matrix-column-label-bg, transparent)',
-  };
+  return scopeColorVars('matrix');
 }
 
 export function csatColumnLabelStyle(): CSSProperties {
-  return {
-    color: 'var(--cfm-csat-column-label-color, #4b5563)',
-    backgroundColor: 'var(--cfm-csat-column-label-bg, transparent)',
-  };
+  return scopeColorVars('csat');
+}
+
+export function ratingColumnLabelStyle(): CSSProperties {
+  return scopeColorVars('rating');
 }
 
 export function sliderTickLabelStyle(): CSSProperties {
-  return {
-    color: 'var(--cfm-slider-tick-label-color, #4b5563)',
-    backgroundColor: 'var(--cfm-slider-tick-label-bg, transparent)',
-  };
+  return scopeColorVars('sliderTick');
 }

package/templates/docs/templates/selectionStyles.ts

@@ -41,7 +41,7 @@ export function mcqOptionCardStyle(isSelected: boolean): CSSProperties {
   if (optionStyle === 'filled') {
     return {
       ...base,
-      background: isSelected ? mcqSelectedBgVar : 'var(--cfm-secondary, #f9fafb)',
+      background: isSelected ? mcqSelectedBgVar : 'var(--cfm-mcq-filled-bg, var(--cfm-secondary, #f9fafb))',
     };
   }
 
@@ -177,6 +177,21 @@ export function unselectedOpacityStyle(): CSSProperties {
   return { opacity: 'var(--cfm-csat-unselected-opacity, 0.5)' };
 }
 
+/** Matrix statement row — zebra when --cfm-matrix-zebra-enabled is 1 (wizard multi-statement preview). */
+export function matrixRowBackgroundStyle(rowIdx: number): CSSProperties {
+  let zebraOn = false;
+  if (typeof document !== 'undefined') {
+    zebraOn =
+      getComputedStyle(document.documentElement).getPropertyValue('--cfm-matrix-zebra-enabled').trim() ===
+      '1';
+  }
+  const useZebra = zebraOn && rowIdx % 2 === 0;
+  return {
+    backgroundColor: useZebra ? 'var(--cfm-zebra-row, rgba(249, 250, 251, 0.8))' : '#fff',
+    borderBottom: '1px solid var(--cfm-card-border-color, #e5e7eb)',
+  };
+}
+
 export function emojiSizeStyle(): CSSProperties {
   return {
     fontSize: 'var(--cfm-csat-emoji-size, 28px)',

package/templates/docs/templates/surveyUiIcons.tsx

@@ -31,7 +31,7 @@ for (let i = 0; i < 11; i++) {
   const Icon = FACE_ICONS[i];
   CsatEmojiSet[i + 1] = React.createElement(Icon as React.ElementType, {
     className: 'transition-transform',
-    style: { color: EMOJI_COLORS[i], fontSize: '28px' },
+    style: { color: EMOJI_COLORS[i], fontSize: 'var(--cfm-csat-emoji-size, 28px)' },
   });
 }
 

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

@@ -16,16 +16,54 @@ export type PreviewStatePatch = {
 export const PREVIEW_BRIDGE_SNAPSHOT = 'CFM_UI_CONFIG_SNAPSHOT';
 export const PREVIEW_BRIDGE_DELTA = 'CFM_UI_CONFIG_DELTA';
 
+const TRAFFIC = [
+  '#ef4444', '#f97316', '#eab308', '#84cc16', '#22c55e', '#14b8a6',
+  '#06b6d4', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7',
+];
+
+function readVar(name: string, fallback: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+
+function applyNumberBadgeColors(): void {
+  const mode = readVar('--cfm-number-label-mode', 'traffic');
+  const mono = readVar('--cfm-number-mono-color', '#9ca3af');
+  document.querySelectorAll('[data-cfm-number-badge]').forEach((el) => {
+    if (el.classList.contains('selected')) return;
+    const i = parseInt(el.getAttribute('data-cfm-number-badge') ?? '', 10);
+    if (Number.isNaN(i)) return;
+    let bg = TRAFFIC[i] ?? '#9ca3af';
+    if (mode === 'monochrome') bg = mono;
+    if (mode === 'individual') bg = readVar(`--cfm-number-color-${i}`, '#9ca3af');
+    (el as HTMLElement).style.backgroundColor = bg;
+  });
+}
+
+function applyDropzoneStyle(): void {
+  const style = readVar('--cfm-upload-border-style', 'dashed');
+  document.querySelectorAll('[data-cfm-dropzone], .cfm-dropzone').forEach((el) => {
+    (el as HTMLElement).style.borderStyle = style;
+  });
+}
+
+function applyThemeSideEffects(): void {
+  applyNumberBadgeColors();
+  applyDropzoneStyle();
+}
+
 type PreviewConfigContextValue = {
   previewState: PreviewStatePatch;
+  configRevision: number;
 };
 
 const PreviewConfigContext = createContext<PreviewConfigContextValue>({
   previewState: {},
+  configRevision: 0,
 });
 
 export function PreviewConfigProvider({ children }: { children: ReactNode }) {
   const [previewState, setPreviewState] = useState<PreviewStatePatch>({});
+  const [configRevision, setConfigRevision] = useState(0);
 
   useEffect(() => {
     const handler = (event: MessageEvent) => {
@@ -47,6 +85,8 @@ export function PreviewConfigProvider({ children }: { children: ReactNode }) {
           root.style.setProperty(key, value as string);
         }
       }
+      setConfigRevision((r) => r + 1);
+      applyThemeSideEffects();
     };
 
     window.addEventListener('message', handler);
@@ -63,7 +103,7 @@ export function PreviewConfigProvider({ children }: { children: ReactNode }) {
   }, []);
 
   return (
-    <PreviewConfigContext.Provider value={{ previewState }}>
+    <PreviewConfigContext.Provider value={{ previewState, configRevision }}>
       {children}
     </PreviewConfigContext.Provider>
   );

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

@@ -48,7 +48,7 @@ function applyMatrixRowCount<T extends SurveyQuestion & { statementRows?: { id:
 }
 
 function QuestionPreviewInner({ question, initialValue }: QuestionPreviewProps) {
-  const { previewState } = usePreviewConfig();
+  const { previewState, configRevision } = usePreviewConfig();
   const [value, setValue] = useState<AnswerValue | undefined>(initialValue);
 
   const mergedQuestion = useMemo(() => {
@@ -143,6 +143,7 @@ function QuestionPreviewInner({ question, initialValue }: QuestionPreviewProps)
       data-cfm-question-area
     >
       <Question
+        key={configRevision}
         question={mergedQuestion}
         selectedValue={heatmapInitial ?? value}
         allAnswers={{}}

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

@@ -4,7 +4,7 @@ import SurveyStickyChrome from '@/components/SurveyStickyChrome';
 import LanguageSelector from '@/components/LanguageSelector';
 import Question from '@/components/Question';
 import Footer from '@/components/Footer';
-import { PreviewConfigProvider } from './PreviewConfigContext';
+import { PreviewConfigProvider, usePreviewConfig } from './PreviewConfigContext';
 import {
   FIXTURE_SURVEY_PAGE_MCQ,
   FIXTURE_SURVEY_PAGE_NPS,
@@ -12,6 +12,7 @@ import {
 } from './fixtures/questions';
 
 function SurveyPagePreviewInner() {
+  const { configRevision } = usePreviewConfig();
   const [lang, setLang] = useState('en');
   const [mcqAnswer, setMcqAnswer] = useState<AnswerValue>('a');
   const [npsAnswer, setNpsAnswer] = useState<AnswerValue>(8);
@@ -42,7 +43,7 @@ function SurveyPagePreviewInner() {
           onChange={setLang}
         />
 
-        <div className="space-y-8">
+        <div className="space-y-8" key={configRevision}>
           <Question
             question={FIXTURE_SURVEY_PAGE_MCQ}
             selectedValue={mcqAnswer}

package/templates/preview-harness/vite-app/src/fixtures/questions.ts

@@ -209,8 +209,7 @@ export const FIXTURE_CSAT_EMOJI = base({
   displayStyle: 'emoji',
   gridLayout: 'standard',
   statementRows: MATRIX_ROW_SINGLE,
-  scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
-  scaleAnchorLabels: ['Very unhappy', '', '', '', 'Very happy'],
+  scaleColumns: LIKERT_COLUMNS,
 });
 
 export const FIXTURE_CSAT_STAR = base({
@@ -218,7 +217,7 @@ export const FIXTURE_CSAT_STAR = base({
   displayStyle: 'star',
   gridLayout: 'standard',
   statementRows: MATRIX_ROW_SINGLE,
-  scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+  scaleColumns: LIKERT_COLUMNS,
 });
 
 export const FIXTURE_CSAT_NUMBERED = base({
@@ -226,7 +225,7 @@ export const FIXTURE_CSAT_NUMBERED = base({
   displayStyle: 'numbered',
   gridLayout: 'standard',
   statementRows: MATRIX_ROWS_MULTI,
-  scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+  scaleColumns: LIKERT_COLUMNS,
 });
 
 export const FIXTURE_CSAT_GRAPHICS = base({
@@ -234,8 +233,7 @@ export const FIXTURE_CSAT_GRAPHICS = base({
   displayStyle: 'graphics',
   gridLayout: 'standard',
   statementRows: MATRIX_ROW_SINGLE,
-  scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
-  scaleAnchorLabels: ['Label 1', 'Label 2'],
+  scaleColumns: LIKERT_COLUMNS,
 });
 
 export const FIXTURE_CSAT_CAROUSEL = base({
@@ -243,7 +241,7 @@ export const FIXTURE_CSAT_CAROUSEL = base({
   displayStyle: 'star',
   gridLayout: 'carousel',
   statementRows: [{ id: 'r1', statementText: 'Overall experience' }],
-  scaleColumns: Array.from({ length: 5 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+  scaleColumns: LIKERT_COLUMNS,
 });
 
 export const FIXTURE_CSAT_DROPDOWN = base({
@@ -259,13 +257,22 @@ export const FIXTURE_CSAT_DROPDOWN = base({
   ],
 });
 
+const RATING_ANCHOR_LABELS = [
+  'Strongly Disagree',
+  'Disagree',
+  'Neutral',
+  'Agree',
+  'Strongly Agree',
+];
+
 export const FIXTURE_RATING_STAR = base({
   type: 'RATING_MATRIX',
   displayStyle: 'star',
   gridLayout: 'standard',
   showColumnHeaders: true,
   statementRows: MATRIX_ROWS_MULTI,
-  scaleColumns: LIKERT_COLUMNS,
+  scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+  scaleAnchorLabels: RATING_ANCHOR_LABELS,
 });
 
 export const FIXTURE_RATING_NUMBERED = base({
@@ -274,6 +281,7 @@ export const FIXTURE_RATING_NUMBERED = base({
   gridLayout: 'standard',
   statementRows: MATRIX_ROWS_MULTI,
   scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+  scaleAnchorLabels: RATING_ANCHOR_LABELS,
 });
 
 export const FIXTURE_RATING_RADIO = base({
@@ -290,6 +298,7 @@ export const FIXTURE_RATING_EMOJI = base({
   gridLayout: 'standard',
   statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+  scaleAnchorLabels: RATING_ANCHOR_LABELS,
 });
 
 export const FIXTURE_RATING_GRAPHICS = base({
@@ -298,7 +307,7 @@ export const FIXTURE_RATING_GRAPHICS = base({
   gridLayout: 'standard',
   statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
-  scaleAnchorLabels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
+  scaleAnchorLabels: RATING_ANCHOR_LABELS,
 });
 
 export const FIXTURE_RATING_SLIDER = base({

package/templates/survey-theme.css

@@ -25,6 +25,10 @@
   --cfm-header-company-weight: 600;
   --cfm-header-border: #e5e7eb;
   --cfm-header-padding-x: 40px;
+  --cfm-header-padding-y: 12px;
+  --cfm-header-brand-row-display: none;
+  --cfm-header-logo-slot-display: flex;
+  --cfm-header-company-slot-display: flex;
   --cfm-header-logo-col: 1;
   --cfm-header-logo-justify: start;
   --cfm-header-company-col: 1;
@@ -42,6 +46,8 @@
   --cfm-footer-logo-height: 32px;
   --cfm-footer-padding-y: 24px;
   --cfm-footer-padding-x: 40px;
+  --cfm-footer-logo-copyright-gap: 12px;
+  --cfm-footer-inner-gap: 24px;
   --cfm-footer-inner-display: grid;
   --cfm-footer-inner-direction: row;
   --cfm-footer-inner-align: end;
@@ -104,10 +110,16 @@
   --cfm-csat-unselected-opacity: 0.5;
   --cfm-csat-ring-color: var(--cfm-accent);
   --cfm-csat-cell-size: 40px;
+  --cfm-csat-track: var(--cfm-accent);
+  --cfm-csat-thumb: var(--cfm-primary);
 
   --cfm-star-color: #f59e0b;
   --cfm-badge-color: var(--cfm-primary);
   --cfm-star-unselected-opacity: 0.5;
+  --cfm-rating-column-label-color: #4b5563;
+  --cfm-rating-column-label-bg: transparent;
+  --cfm-rating-track: var(--cfm-accent);
+  --cfm-rating-thumb: var(--cfm-primary);
 
   --cfm-slider-track: var(--cfm-accent);
   --cfm-slider-thumb: var(--cfm-primary);
@@ -192,8 +204,8 @@ body {
   gap: var(--cfm-header-brand-gap, 16px);
   padding-left: var(--cfm-header-padding-x);
   padding-right: var(--cfm-header-padding-x);
-  padding-top: 12px;
-  padding-bottom: 12px;
+  padding-top: var(--cfm-header-padding-y, 12px);
+  padding-bottom: var(--cfm-header-padding-y, 12px);
   min-height: var(--cfm-header-height);
   box-sizing: border-box;
 }

package/templates/wizard-dist/assets/{PreviewMock-DbbLpHdF.js → PreviewMock-CC1UlWe-.js}

@@ -1 +1 @@
-import{u as x,j as e}from"./index-CY7WMJ93.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-Blpq4QjK.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-DISCXm0z.js

@@ -0,0 +1 @@
+import{u as m,j as e,T as R,S as C,R as d,C as i,N as t,a as z,M as A}from"./index-Blpq4QjK.js";import"./vendor-BwkXDkd3.js";function b({values:o,onPatch:r}){return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Label text color",value:o.columnLabelColor,onChange:a=>r({columnLabelColor:a})}),e.jsx(i,{label:"Label background",value:o.columnLabelBgColor,onChange:a=>r({columnLabelBgColor:a})})]})}function k({values:o,onPatch:r}){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:o.hintMinText,onChange:a=>r({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:o.hintMaxText,onChange:a=>r({hintMaxText:a.target.value})})]}),e.jsx(i,{label:"Hint text color",value:o.hintLabelColor,onChange:a=>r({hintLabelColor:a})}),e.jsx(i,{label:"Hint label background",value:o.hintLabelBgColor,onChange:a=>r({hintLabelBgColor:a})})]})}function j({values:o,onPatch:r,count:a=11}){return e.jsxs("div",{className:"space-y-3",children:[e.jsx(C,{label:"Number label style",value:o.numberLabelMode,onChange:c=>r({numberLabelMode:c}),options:[{value:"traffic",label:"Traffic light (default)"},{value:"monochrome",label:"Monochrome (one color)"},{value:"individual",label:"Individual per number"}]}),o.numberLabelMode==="monochrome"&&e.jsx(i,{label:"Monochrome color",value:o.monochromeNumberColor,onChange:c=>r({monochromeNumberColor:c})}),o.numberLabelMode==="individual"&&e.jsx("div",{className:"grid grid-cols-2 gap-2 sm:grid-cols-3",children:Array.from({length:a},(c,u)=>e.jsx(i,{label:`#${u}`,value:o.individualNumberColors[u]??"#9CA3AF",onChange:v=>{const x=[...o.individualNumberColors];x[u]=v,r({individualNumberColors:x})}},u))})]})}function s({title:o,children:r}){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:o}),r]})}function O({type:o,activeFormat:r}){const a=m(l=>l.config.questionTypes[o]),c=m(l=>l.updateQuestionType),u=m(l=>l.previewMultiStatementByType),v=m(l=>l.setPreviewMultiStatementForType),x=m(l=>l.heatmapPreviewPin);if(!a)return e.jsx("p",{className:"text-sm text-slate-500",children:"No configuration available for this type."});const n=l=>c(o,l),M=A.includes(o),y=!!u[o],h=r.includes("star"),g=r.includes("emoji"),S=r.includes("numbered"),N=r.includes("drag"),w=r.includes("dropdown"),f=r.includes("radio"),T=r.includes("graphics"),B=r==="CFM_bipolar",p=g||h||S||f,P=a.optionStyle??a.cardStyle??"outlined",L=a.buttonStyle??"numbered";return e.jsxs("div",{className:"space-y-4",children:[M&&e.jsx(R,{label:"Preview multiple statements",checked:y,onChange:l=>v(o,l)}),o==="MCQ"&&"optionGap"in a&&e.jsx(s,{title:"Option style",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(C,{label:"Option style",value:a.optionStyle??a.cardStyle??"outlined",onChange:l=>n({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=>n({optionGap:l}),min:0,max:32}),e.jsx(d,{label:"Border radius",value:a.borderRadius,onChange:l=>n({borderRadius:l}),min:0,max:24}),e.jsx(d,{label:"Option padding",value:a.optionPadding??12,onChange:l=>n({optionPadding:l}),min:4,max:24}),e.jsx(i,{label:"Hover border",value:a.hoverBorderColor,onChange:l=>n({hoverBorderColor:l})}),P==="filled"&&e.jsx(i,{label:"Unselected fill color",value:a.filledOptionBg??"#F9FAFB",onChange:l=>n({filledOptionBg:l})})]})}),o==="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=>n({defaultPlaceholder:l.target.value})})]}),e.jsx(t,{label:"Input radius (px)",value:a.inputRadius,onChange:l=>n({inputRadius:l}),min:0,max:24}),e.jsx(i,{label:"Border color",value:a.borderColor,onChange:l=>n({borderColor:l})}),e.jsx(i,{label:"Placeholder color",value:a.placeholderColor,onChange:l=>n({placeholderColor:l})}),e.jsx(t,{label:"Input height (px)",value:a.inputHeight,onChange:l=>n({inputHeight:l}),min:32,max:64}),e.jsx(t,{label:"Input padding (px)",value:a.inputPadding,onChange:l=>n({inputPadding:l}),min:8,max:24})]})}),o==="NPS_SCALE"&&"buttonStyle"in a&&e.jsxs(e.Fragment,{children:[e.jsxs(s,{title:"NPS buttons",children:[e.jsx(C,{label:"Button style",value:a.buttonStyle,onChange:l=>n({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(k,{values:a,onPatch:n})}),L==="numbered"&&e.jsx(s,{title:"Number labels",children:e.jsx(j,{values:a,onPatch:n})}),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=>n({cellSize:l}),min:24,max:56}),e.jsx(t,{label:"Cell gap (px)",value:a.cellGap,onChange:l=>n({cellGap:l}),min:0,max:16}),e.jsx(i,{label:"Track bar",value:a.trackBarColor,onChange:l=>n({trackBarColor:l})}),e.jsx(i,{label:"Track highlight",value:a.trackHighlightColor,onChange:l=>n({trackHighlightColor:l})})]})})]}),o==="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=>n({rowLabelWidth:l}),min:120,max:280}),B&&e.jsx(t,{label:"Bipolar column width (%)",value:a.bipolarColumnWidthPercent,onChange:l=>n({bipolarColumnWidthPercent:l}),min:15,max:40}),e.jsx(t,{label:"Cell padding (px)",value:a.cellPadding,onChange:l=>n({cellPadding:l}),min:4,max:24})]})}),e.jsx(s,{title:"Label items",children:e.jsx(b,{values:a,onPatch:n})})]}),o==="CSAT_MATRIX"&&"emojiSize"in a&&e.jsxs(e.Fragment,{children:[(g||p||h)&&e.jsxs(s,{title:`${z.CSAT_MATRIX} — ${r.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=>n({emojiSize:l}),min:16,max:40}),h&&e.jsx(i,{label:"Star color",value:a.accentColor,onChange:l=>n({accentColor:l})}),p&&e.jsx(d,{label:"Unselected opacity",value:Math.round(a.unselectedOpacity*100),onChange:l=>n({unselectedOpacity:l/100}),min:10,max:100})]}),e.jsx("p",{className:"text-xs text-slate-500",children:"Selected cell color and focus ring come from Theme → Question card. Column labels appear above stars in the star format preview."})]}),T&&e.jsx(s,{title:"CSAT graphics track",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Track",value:a.trackColor,onChange:l=>n({trackColor:l})}),e.jsx(i,{label:"Thumb",value:a.thumbColor,onChange:l=>n({thumbColor:l})})]})}),e.jsx(s,{title:"Label items",children:e.jsx(b,{values:a,onPatch:n})}),S&&e.jsx(s,{title:"Number labels",children:e.jsx(j,{values:a,onPatch:n,count:10})})]}),o==="RATING_MATRIX"&&"unselectedStarOpacity"in a&&e.jsxs(e.Fragment,{children:[(g||p||h)&&e.jsxs(s,{title:`Rating — ${r.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=>n({emojiSize:l}),min:16,max:40}),h&&e.jsx(i,{label:"Star color",value:a.starColor,onChange:l=>n({starColor:l})}),p&&e.jsx(d,{label:"Unselected opacity",value:Math.round(a.unselectedStarOpacity*100),onChange:l=>n({unselectedStarOpacity:l/100}),min:10,max:100})]}),e.jsx("p",{className:"text-xs text-slate-500",children:"Selected cell color and focus ring come from Theme → Question card."})]}),T&&e.jsx(s,{title:"Rating graphics track",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Track",value:a.trackColor,onChange:l=>n({trackColor:l})}),e.jsx(i,{label:"Thumb",value:a.thumbColor,onChange:l=>n({thumbColor:l})})]})}),e.jsxs(s,{title:"Label items",children:[e.jsx("p",{className:"text-xs text-slate-500",children:"Label items styles the anchor label pills (max 5), not column numbers."}),e.jsx(b,{values:a,onPatch:n})]}),S&&e.jsx(s,{title:"Number labels",children:e.jsx(j,{values:a,onPatch:n,count:10})})]}),o==="SLIDER_MATRIX"&&"tickColor"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(i,{label:"Track",value:a.trackColor,onChange:l=>n({trackColor:l})}),e.jsx(i,{label:"Thumb",value:a.thumbColor,onChange:l=>n({thumbColor:l})}),e.jsx(t,{label:"Row label width (px)",value:a.rowLabelWidth,onChange:l=>n({rowLabelWidth:l}),min:120,max:280}),e.jsx(i,{label:"Row band",value:a.rowBandColor,onChange:l=>n({rowBandColor:l})}),e.jsx(t,{label:"Tick badge size (px)",value:a.tickBadgeSize,onChange:l=>n({tickBadgeSize:l}),min:20,max:40})]})}),e.jsx(s,{title:"Anchor hint labels",children:e.jsx(k,{values:a,onPatch:n})}),e.jsx(s,{title:"Tick label items",children:e.jsx(b,{values:a,onPatch:n})}),e.jsx(s,{title:"Tick number labels",children:e.jsx(j,{values:a,onPatch:n,count:11})})]}),o==="FILE_UPLOAD"&&"dropzoneStyle"in a&&e.jsx(s,{title:"Dropzone",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(C,{label:"Dropzone border",value:a.dropzoneStyle,onChange:l=>n({dropzoneStyle:l}),options:[{value:"dashed",label:"Dashed"},{value:"solid",label:"Solid"}]}),e.jsx(i,{label:"Border color",value:a.borderColor??a.accentColor,onChange:l=>n({borderColor:l})}),e.jsx(i,{label:"Fill color",value:a.dropzoneFillColor,onChange:l=>n({dropzoneFillColor:l})}),e.jsx(t,{label:"Padding (px)",value:a.dropzonePadding,onChange:l=>n({dropzonePadding:l}),min:12,max:48})]})}),o==="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=>n({mediaMaxWidth:l}),min:50,max:100}),e.jsx(d,{label:"Media corner radius",value:a.mediaRadius,onChange:l=>n({mediaRadius:l}),min:0,max:24}),e.jsx(i,{label:"Caption color",value:a.captionColor,onChange:l=>n({captionColor:l})}),e.jsx(t,{label:"Caption size (px)",value:a.captionSize,onChange:l=>n({captionSize:l}),min:10,max:24})]})}),o==="HEATMAP"&&"pinColor"in a&&e.jsx(s,{title:"Heatmap pin",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Pin color",value:a.pinColor,onChange:l=>n({pinColor:l})}),e.jsx(i,{label:"Pin border",value:a.pinBorderColor,onChange:l=>n({pinBorderColor:l})}),e.jsx(d,{label:"Pin size",value:a.pinSize,onChange:l=>n({pinSize:l}),min:8,max:32}),e.jsx(d,{label:"Overlay opacity",value:Math.round(a.overlayOpacity*100),onChange:l=>n({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(x.x*100),"%, ",Math.round(x.y*100),"%"]})]})}),o==="RANK_ORDER"&&"drag"in a&&e.jsx(s,{title:N?"Drag & drop":w?"Dropdown rank":"Rank order",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[N&&e.jsxs(e.Fragment,{children:[e.jsx(i,{label:"Item background",value:a.drag.itemBg,onChange:l=>n({drag:{...a.drag,itemBg:l}})}),e.jsx(i,{label:"Drag handle",value:a.drag.dragHandleColor,onChange:l=>n({drag:{...a.drag,dragHandleColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>n({drag:{...a.drag,rankBadgeColor:l}})})]}),w&&e.jsxs(e.Fragment,{children:[e.jsx(i,{label:"Item background",value:a.dropdown.itemBg,onChange:l=>n({dropdown:{...a.dropdown,itemBg:l}})}),e.jsx(i,{label:"List hover background",value:a.dropdown.itemHoverBg??"#F3F4F6",onChange:l=>n({dropdown:{...a.dropdown,itemHoverBg:l}})}),e.jsx(i,{label:"Select border",value:a.dropdown.selectBorderColor,onChange:l=>n({dropdown:{...a.dropdown,selectBorderColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.dropdown.rankBadgeColor,onChange:l=>n({dropdown:{...a.dropdown,rankBadgeColor:l}})})]})]})})]})}export{O as TypePanel};