@explorer02/cfm-survey-sdk 0.3.8 → 0.4.0

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

@@ -0,0 +1,173 @@
+import type { SurveyQuestion } from '@explorer02/cfm-survey-sdk';
+import type { PreviewStatePatch } from './PreviewConfigContext';
+import {
+  BIPOLAR_ROWS_MULTI,
+  BIPOLAR_ROWS_SINGLE,
+  MATRIX_ROWS_MULTI,
+  MATRIX_ROW_SINGLE,
+  SLIDER_ROWS_MULTI,
+  SLIDER_ROWS_SINGLE,
+} from './fixtures/questions';
+
+function mapNpsButtonStyle(style: string | undefined): SurveyQuestion['buttonStyle'] {
+  if (style === 'numbered' || style === 'pill' || style === 'emoji' || style === 'standard') {
+    return style;
+  }
+  return 'numbered';
+}
+
+/** Survey page always shows multi-row matrix for zebra styling. */
+export function normalizeSurveyPagePreviewState(previewState: PreviewStatePatch): PreviewStatePatch {
+  return {
+    ...previewState,
+    activePreviewKey: 'survey_page',
+    multiStatement: true,
+  };
+}
+
+type MatrixRowCapable = SurveyQuestion & {
+  statementRows?: { id: string; statementText: string; oppositeStatementText?: string }[];
+  statementLayout?: string;
+};
+
+const MULTI_STATEMENT_MATRIX_TYPES = new Set([
+  'CFM_MATRIX',
+  'CSAT_MATRIX',
+  'RATING_MATRIX',
+  'SLIDER_MATRIX',
+]);
+
+export function applyMatrixRowCount<T extends MatrixRowCapable>(
+  q: T,
+  multiStatement: boolean | undefined,
+  options?: { preserveSurveyPageRows?: boolean },
+): T {
+  if (!MULTI_STATEMENT_MATRIX_TYPES.has(q.type)) return q;
+  if (!('statementRows' in q) || !Array.isArray(q.statementRows)) return q;
+
+  const isBipolar = q.type === 'CFM_MATRIX' && q.statementLayout === 'bipolar';
+  const isSlider = q.type === 'SLIDER_MATRIX';
+
+  if (options?.preserveSurveyPageRows && q.statementRows.length >= 2) return q;
+
+  if (multiStatement === true) {
+    if (isBipolar) {
+      return { ...q, statementRows: BIPOLAR_ROWS_MULTI } as T;
+    }
+    if (isSlider) {
+      return { ...q, statementRows: SLIDER_ROWS_MULTI } as T;
+    }
+    if (q.statementRows.length >= 3) return q;
+    return { ...q, statementRows: MATRIX_ROWS_MULTI } as T;
+  }
+
+  if (multiStatement === false) {
+    if (isBipolar) {
+      return { ...q, statementRows: BIPOLAR_ROWS_SINGLE } as T;
+    }
+    if (isSlider) {
+      return { ...q, statementRows: SLIDER_ROWS_SINGLE } as T;
+    }
+    return { ...q, statementRows: [...MATRIX_ROW_SINGLE] } as T;
+  }
+
+  // Before bridge snapshot — keep fixture row count (single-row fixtures stay single).
+  return q;
+}
+
+function applyCfmMatrixLayout(
+  q: SurveyQuestion & {
+    statementLayout?: string;
+    gridLayout?: string;
+    transposeTable?: boolean;
+    showColumnHeaders?: boolean;
+  },
+  previewKey: string,
+): SurveyQuestion {
+  if (previewKey === 'survey_page' || previewKey === 'CFM_likert' || !previewKey.startsWith('CFM_')) {
+    return {
+      ...q,
+      statementLayout: 'likert',
+      gridLayout: 'standard',
+      transposeTable: false,
+      showColumnHeaders: true,
+    } as SurveyQuestion;
+  }
+  if (previewKey === 'CFM_bipolar') {
+    return {
+      ...q,
+      statementLayout: 'bipolar',
+      showColumnHeaders: false,
+      gridLayout: 'standard',
+      transposeTable: false,
+    } as SurveyQuestion;
+  }
+  if (previewKey === 'CFM_transpose') {
+    return { ...q, statementLayout: 'likert', transposeTable: true, gridLayout: 'standard' } as SurveyQuestion;
+  }
+  if (previewKey === 'CFM_carousel') {
+    return { ...q, statementLayout: 'likert', gridLayout: 'carousel', transposeTable: false } as SurveyQuestion;
+  }
+  if (previewKey === 'CFM_dropdown') {
+    return { ...q, statementLayout: 'likert', gridLayout: 'dropdown', transposeTable: false } as SurveyQuestion;
+  }
+  return { ...q, statementLayout: 'likert', gridLayout: 'standard', transposeTable: false } as SurveyQuestion;
+}
+
+/** Apply wizard bridge previewState onto a fixture question. */
+export function mergePreviewQuestion(
+  question: SurveyQuestion,
+  previewState: PreviewStatePatch,
+): SurveyQuestion {
+  let q = { ...question } as SurveyQuestion;
+  const previewKey = previewState.activePreviewKey ?? '';
+  const isSurveyPage = previewKey === 'survey_page';
+
+  if (previewState.textfieldPlaceholder && q.type === 'TEXTFIELD') {
+    q = { ...q, placeholder: previewState.textfieldPlaceholder };
+  }
+
+  if (q.type === 'NPS_SCALE') {
+    q = {
+      ...q,
+      buttonStyle: mapNpsButtonStyle(previewState.npsButtonStyle ?? q.buttonStyle ?? 'numbered'),
+      minLabel: previewState.hintMinText ?? q.minLabel,
+      maxLabel: previewState.hintMaxText ?? q.maxLabel,
+    };
+  } else if (previewState.hintMinText !== undefined || previewState.hintMaxText !== undefined) {
+    if (q.type === 'SLIDER_MATRIX') {
+      q = {
+        ...q,
+        scaleAnchorLabels: [
+          previewState.hintMinText ?? q.scaleAnchorLabels?.[0] ?? '',
+          previewState.hintMaxText ?? q.scaleAnchorLabels?.[1] ?? '',
+        ],
+      };
+    }
+  }
+
+  if (q.type === 'CFM_MATRIX') {
+    q = applyCfmMatrixLayout(q, isSurveyPage ? 'survey_page' : previewKey);
+  }
+
+  if (q.type === 'RANK_ORDER') {
+    if (previewState.rankVariant === 'drag' || previewKey === 'RANK_drag') {
+      q = { ...q, interactionMode: 'dragAndDrop', optionDisplay: 'textAndImage' };
+    }
+    if (previewState.rankVariant === 'dropdown' || previewKey === 'RANK_dropdown') {
+      q = { ...q, interactionMode: 'dropdown', optionDisplay: 'textAndImage' };
+    }
+  }
+
+  return applyMatrixRowCount(q, previewState.multiStatement, {
+    preserveSurveyPageRows: isSurveyPage,
+  });
+}
+
+/** Survey page layout — each question reflects its type-tab customization mapping. */
+export function mergeSurveyPageQuestion(
+  question: SurveyQuestion,
+  previewState: PreviewStatePatch,
+): SurveyQuestion {
+  return mergePreviewQuestion(question, normalizeSurveyPagePreviewState(previewState));
+}

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

@@ -106,3 +106,25 @@ html.cfm-live-edit input[data-cfm-textfield]::placeholder {
   color: var(--cfm-input-placeholder, #9ca3af) !important;
   opacity: 1;
 }
+
+/* Keep every question-type preview inside the wizard iframe without horizontal bleed */
+html.cfm-live-edit,
+html.cfm-live-edit body,
+html.cfm-live-edit #root {
+  max-width: 100%;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+
+html.cfm-live-edit [data-cfm-question-area],
+html.cfm-live-edit .cfm-question-card {
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  box-sizing: border-box;
+}
+
+html.cfm-live-edit [data-cfm-nps-area] {
+  max-width: 100%;
+  overflow-x: auto;
+}

package/templates/previewBridge.ts

@@ -43,6 +43,8 @@ function flushCssVars(): void {
     delete pendingVars[key];
   }
   applyThemeSideEffects();
+  syncCompanyNameVisibility();
+  syncQuestionChromeVisibility();
 }
 
 function queueCssVars(vars: Record<string, string>): void {
@@ -58,6 +60,8 @@ function applyCssVarsImmediate(vars: Record<string, string>): void {
     root.style.setProperty(key, value);
   }
   applyThemeSideEffects();
+  syncCompanyNameVisibility();
+  syncQuestionChromeVisibility();
 }
 
 function setDisplay(selector: string, visible: boolean): void {
@@ -66,6 +70,58 @@ function setDisplay(selector: string, visible: boolean): void {
   });
 }
 
+function readCssVar(name: string, fallback: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+
+function isHeaderLogoVisible(): boolean {
+  const logoImg = document.querySelector(
+    'header [data-cfm-logo], .cfm-header [data-cfm-logo]',
+  ) as HTMLImageElement | null;
+  return Boolean(
+    logoImg &&
+      logoImg.style.display !== 'none' &&
+      Boolean(logoImg.getAttribute('src')),
+  );
+}
+
+/** Keep [data-cfm-company] beside logo when toggle, name, and logo are all present. */
+function syncCompanyNameVisibility(layoutShowCompany?: boolean): void {
+  const showFromCss = readCssVar('--cfm-header-show-company', '1') !== '0';
+  const showToggle =
+    layoutShowCompany !== undefined ? Boolean(layoutShowCompany) : showFromCss;
+
+  document.querySelectorAll('[data-cfm-company]').forEach((el) => {
+    const htmlEl = el as HTMLElement;
+    const hasName = Boolean(htmlEl.textContent?.trim());
+    const show = showToggle && hasName && isHeaderLogoVisible();
+    htmlEl.style.display = show ? '' : 'none';
+  });
+}
+
+function syncQuestionChromeVisibility(
+  layoutShowNumbers?: boolean,
+  layoutShowRequired?: boolean,
+): void {
+  const showNumbers =
+    layoutShowNumbers !== undefined
+      ? Boolean(layoutShowNumbers)
+      : readCssVar('--cfm-show-question-numbers', '1') !== '0';
+  const showRequired =
+    layoutShowRequired !== undefined
+      ? Boolean(layoutShowRequired)
+      : readCssVar('--cfm-show-required-asterisk', '1') !== '0';
+
+  document.querySelectorAll('[data-cfm-question-number]').forEach((el) => {
+    const htmlEl = el as HTMLElement;
+    const hasNumber = Boolean(htmlEl.textContent?.trim());
+    htmlEl.style.display = showNumbers && hasNumber ? '' : 'none';
+  });
+  document.querySelectorAll('[data-cfm-required]').forEach((el) => {
+    (el as HTMLElement).style.display = showRequired ? '' : 'none';
+  });
+}
+
 function applyContentPatch(patch: ContentPatch): void {
   if (patch.logoUrl !== undefined) {
     document.querySelectorAll('[data-cfm-logo], header img, footer img').forEach((el) => {
@@ -88,19 +144,12 @@ function applyContentPatch(patch: ContentPatch): void {
         htmlEl.classList.remove('hidden');
       }
     });
-    document.querySelectorAll('[data-cfm-company]').forEach((el) => {
-      const htmlEl = el as HTMLElement;
-      if (patch.logoUrl) {
-        htmlEl.style.display = htmlEl.textContent?.trim() ? '' : 'none';
-      }
-    });
   }
 
   if (patch.companyName !== undefined) {
     const name = patch.companyName ?? '';
     document.querySelectorAll('[data-cfm-company]').forEach((el) => {
       (el as HTMLElement).textContent = name;
-      (el as HTMLElement).style.display = name ? '' : 'none';
     });
     document.querySelectorAll('[data-cfm-logo-text]').forEach((el) => {
       const logoImg = document.querySelector('[data-cfm-logo]') as HTMLImageElement | null;
@@ -163,7 +212,7 @@ function applyContentPatch(patch: ContentPatch): void {
   if (patch.layoutFlags) {
     const flags = patch.layoutFlags;
     if (flags.showCompanyName !== undefined) {
-      setDisplay('[data-cfm-company]', Boolean(flags.showCompanyName));
+      syncCompanyNameVisibility(Boolean(flags.showCompanyName));
     }
     if (flags.showHeader !== undefined) {
       setDisplay('.cfm-header, header.cfm-header', Boolean(flags.showHeader));
@@ -184,10 +233,10 @@ function applyContentPatch(patch: ContentPatch): void {
       setDisplay('[data-cfm-btn-back]', Boolean(flags.showBackButton));
     }
     if (flags.showQuestionNumbers !== undefined) {
-      setDisplay('[data-cfm-question-number]', Boolean(flags.showQuestionNumbers));
+      syncQuestionChromeVisibility(Boolean(flags.showQuestionNumbers), undefined);
     }
     if (flags.showRequiredAsterisk !== undefined) {
-      setDisplay('[data-cfm-required]', Boolean(flags.showRequiredAsterisk));
+      syncQuestionChromeVisibility(undefined, Boolean(flags.showRequiredAsterisk));
     }
     if (flags.showFooterLogo !== undefined) {
       setDisplay('[data-cfm-footer-logo]', Boolean(flags.showFooterLogo));
@@ -225,15 +274,13 @@ function applyContentPatch(patch: ContentPatch): void {
       (el as HTMLElement).style.display = show ? '' : 'none';
     });
   }
+  syncCompanyNameVisibility();
+  syncQuestionChromeVisibility();
   applyThemeSideEffects();
 }
 
 const TRAFFIC_BADGE = ['#ef4444', '#f97316', '#eab308', '#84cc16', '#22c55e', '#14b8a6', '#06b6d4', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7'];
 
-function readCssVar(name: string, fallback: string): string {
-  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
-}
-
 function applyThemeSideEffects(): void {
   const mode = readCssVar('--cfm-number-label-mode', 'traffic');
   const mono = readCssVar('--cfm-number-mono-color', '#9ca3af');

package/templates/survey-theme.css

@@ -14,6 +14,8 @@
   --cfm-font-family: Inter, sans-serif;
   --cfm-heading-weight: 700;
   --cfm-motion-duration: 200ms;
+  --cfm-show-question-numbers: 1;
+  --cfm-show-required-asterisk: 1;
 
   --cfm-header-height: 120px;
   --cfm-header-logo-width: 120px;
@@ -37,7 +39,7 @@
   --cfm-footer-link-hover: #ffffff;
   --cfm-footer-logo-width: 120px;
   --cfm-footer-logo-height: 32px;
-  --cfm-footer-padding-y: 24px;
+  --cfm-footer-padding-y: 21px;
   --cfm-footer-padding-x: 40px;
   --cfm-footer-logo-copyright-gap: 12px;
   --cfm-footer-inner-display: grid;
@@ -126,6 +128,7 @@
   --cfm-heatmap-pin-size: 12px;
 
   --cfm-rank-item-bg: #ffffff;
+  --cfm-rank-dropdown-hover-bg: #f3f4f6;
   --cfm-rank-badge-bg: var(--cfm-mcq-selected-bg);
   --cfm-rank-badge-text: var(--cfm-mcq-selected-accent);
   --cfm-rank-badge: var(--cfm-primary);

package/templates/wizard-dist/assets/{PreviewMock-CS4WqhDB.js → PreviewMock-BlOAvUCN.js}

@@ -1 +1 @@
-import{u as x,j as e}from"./index-hjm-fxWO.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-2Bi_7Fdh.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-DcbMaw1b.js

@@ -0,0 +1 @@
+import{u as m,j as e,T as P,S as b,R as d,C as i,N as t,a as R,M as z}from"./index-2Bi_7Fdh.js";import"./vendor-BwkXDkd3.js";function C({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 w({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 M({values:o,onPatch:r,count:a=11}){return e.jsxs("div",{className:"space-y-3",children:[e.jsx(b,{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,x)=>e.jsx(i,{label:`#${x}`,value:o.individualNumberColors[x]??"#9CA3AF",onChange:j=>{const g=[...o.individualNumberColors];g[x]=j,r({individualNumberColors:g})}},x))})]})}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 I({type:o,activeFormat:r}){const a=m(l=>l.config.questionTypes[o]),c=m(l=>l.updateQuestionType),x=m(l=>l.previewMultiStatementByType),j=m(l=>l.setPreviewMultiStatementForType),g=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),f=z.includes(o),y=!!x[o],u=r.includes("star"),h=r.includes("emoji"),p=r.includes("numbered"),v=r.includes("drag"),S=r.includes("dropdown"),N=r.includes("radio"),B=r==="CFM_bipolar",T=r.includes("graphics"),k=a.optionStyle??a.cardStyle??"outlined",L=a.buttonStyle??"numbered";return e.jsxs("div",{className:"space-y-4",children:[f&&e.jsx(P,{label:"Preview multiple statements",checked:y,onChange:l=>j(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(b,{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})}),k==="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(b,{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(w,{values:a,onPatch:n})}),L==="numbered"&&e.jsx(s,{title:"Number labels",children:e.jsx(M,{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})})]})})]}),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(C,{values:a,onPatch:n})})]}),o==="CSAT_MATRIX"&&"emojiSize"in a&&e.jsxs(e.Fragment,{children:[(h||u||p)&&e.jsxs(s,{title:`${R.CSAT_MATRIX} — ${r.replace("CSAT_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[h&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>n({emojiSize:l}),min:16,max:40}),u&&e.jsx(i,{label:"Star color",value:a.accentColor,onChange:l=>n({accentColor:l})}),(h||u||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."})]}),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(C,{values:a,onPatch:n})]}),T&&e.jsx(s,{title:"Graphics track",children:e.jsx(i,{label:"Track color",value:a.graphicsTrackColor,onChange:l=>n({graphicsTrackColor:l})})})]}),o==="RATING_MATRIX"&&"unselectedStarOpacity"in a&&e.jsxs(e.Fragment,{children:[(h||u||p||N)&&e.jsxs(s,{title:`Rating — ${r.replace("RATING_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[h&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>n({emojiSize:l}),min:16,max:40}),u&&e.jsx(i,{label:"Star color",value:a.starColor,onChange:l=>n({starColor:l})}),(h||u||p||N)&&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."})]}),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(C,{values:a,onPatch:n})]}),T&&e.jsx(s,{title:"Graphics track",children:e.jsx(i,{label:"Track color",value:a.graphicsTrackColor,onChange:l=>n({graphicsTrackColor:l})})})]}),o==="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(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(w,{values:a,onPatch:n})}),e.jsx(s,{title:"Tick number labels",children:e.jsx(M,{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(b,{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(g.x*100),"%, ",Math.round(g.y*100),"%"]})]})}),o==="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(i,{label:"List bg",value:a.drag.itemBg,onChange:l=>n({drag:{...a.drag,itemBg:l},dropdown:{...a.dropdown,itemBg:l}})}),e.jsx(i,{label:"List hover",value:a.dropdown.itemHoverBg??a.drag.itemHoverBg??"#F3F4F6",onChange:l=>n({drag:{...a.drag,itemHoverBg:l},dropdown:{...a.dropdown,itemHoverBg:l}})})]})}),e.jsx(s,{title:v?"Drag & drop":S?"Dropdown rank":"Rank order",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[v&&e.jsxs(e.Fragment,{children:[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}})})]}),S&&e.jsx(i,{label:"Select border",value:a.dropdown.selectBorderColor,onChange:l=>n({dropdown:{...a.dropdown,selectBorderColor:l}})})]})})]})]})}export{I as TypePanel};