@explorer02/cfm-survey-sdk 0.3.6 → 0.3.7

package/templates/docs/templates/CsatMatrixScale.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import type { CsatQuestion, RatingMatrixQuestion, MatrixRowAnswers, ScaleColumn } from '@explorer02/cfm-survey-sdk';
 import { getEmojiForIndex, CsatStarIcons } from './surveyUiIcons';
-import { columnSubmitValue, nonNaScaleColumns, anchorLabelPercent } from './surveyUiScaleUtils';
+import { columnSubmitValue, nonNaScaleColumns } from './surveyUiScaleUtils';
 import { CustomSliderTrack } from './CustomSliderTrack';
 import MatrixDropdown from './MatrixDropdown';
 import {
@@ -26,11 +26,25 @@ function anchorLabelStyle(question: CsatMatrixQuestion) {
   return question.type === 'RATING_MATRIX' ? ratingColumnLabelStyle() : csatColumnLabelStyle();
 }
 
-function columnHeaderLabelStyle(question: CsatMatrixQuestion) {
+function columnHeaderLabelStyle(_question: CsatMatrixQuestion) {
+  return { fontSize: '13px', fontWeight: 500, textAlign: 'center' as const, lineHeight: 1.2, color: '#4b5563' };
+}
+
+function anchorLabelPercent(
+  question: CsatMatrixQuestion,
+  i: number,
+  n: number,
+  m: number,
+  isGraphics: boolean,
+): number {
   if (question.type === 'RATING_MATRIX') {
-    return { fontSize: '13px', fontWeight: 500, textAlign: 'center' as const, lineHeight: 1.2, color: '#4b5563' };
+    const firstCenter = (0.5 / m) * 100;
+    const lastCenter = ((m - 0.5) / m) * 100;
+    return n === 1 ? 50 : firstCenter + (i / (n - 1)) * (lastCenter - firstCenter);
   }
-  return { fontSize: '13px', fontWeight: 500, textAlign: 'center' as const, lineHeight: 1.2, ...csatColumnLabelStyle() };
+  const startPercent = isGraphics ? 0 : 0.5 / m;
+  const rangePercent = isGraphics ? 1 : (m - 1) / m;
+  return n === 1 ? 50 : (startPercent + (i / (n - 1)) * rangePercent) * 100;
 }
 
 function GraphicsColumnLabelsRow({
@@ -219,7 +233,7 @@ function CsatMatrixGrid({
           <div style={{ flex: 1, display: 'flex' }}>
             <div style={{ flex: 1, position: 'relative', height: '24px', ...(isGraphics ? { margin: '0 40px' } : {}) }}>
               {labels!.map((label, i) => {
-                const percent = anchorLabelPercent(i, n, m, isGraphics);
+                const percent = anchorLabelPercent(question, i, n, m, isGraphics);
 
                 return (
                   <div key={i} style={{
@@ -360,17 +374,9 @@ function CsatMatrixGrid({
                                 fontSize: '14px', fontWeight: 500,
                                 ...(isSelected
                                   ? scaleCellSelectedStyle(true)
-                                  : {
-                                      border: '1px solid #d1d5db',
-                                      backgroundColor: '#fff',
-                                      color: '#111827',
-                                      ...unselectedOpacityStyle(),
-                                    }),
+                                  : { border: '1px solid #d1d5db', backgroundColor: '#fff', color: '#111827', ...unselectedOpacityStyle() }),
                                 transition: 'all 0.15s',
-                              } : {
-                                padding: '8px',
-                                ...(isSelected ? {} : unselectedOpacityStyle()),
-                              }),
+                              } : { padding: '8px', ...(!isSelected ? unselectedOpacityStyle() : {}) }),
                           }}
                         >
                           {(EmojiNode ?? StarNode ?? (isNumbered ? (displayIdx + 1) : RadioNode)) as React.ReactNode}
@@ -458,7 +464,7 @@ function CsatMatrixCarousel({
           {labels!.map((label, i) => {
             const m = scaleColumns.length;
             const n = labels!.length;
-            const percent = anchorLabelPercent(i, n, m, isGraphics);
+            const percent = anchorLabelPercent(question, i, n, m, isGraphics);
 
             return (
               <div key={i} style={{
@@ -529,19 +535,15 @@ function CsatMatrixCarousel({
                       padding: '6px', transform: isSelected ? 'scale(1.1)' : isHovered ? 'scale(1.25)' : 'scale(1)',
                       ...(isSelected ? { backgroundColor: 'rgba(252, 231, 243, 0.6)', boxShadow: '0 0 0 2px rgba(226, 0, 116, 0.3)', borderRadius: '50%' } : unselectedOpacityStyle()),
                     } : isStar ? {
-                      padding: '4px', transform: isHovered ? 'scale(1.1)' : 'scale(1)', color: isSelected ? cellSelectedVar : focusRingVar,
+                      padding: '4px', transform: isHovered ? 'scale(1.1)' : 'scale(1)',
+                      color: isSelected ? cellSelectedVar : focusRingVar,
                       ...(isSelected ? {} : unselectedOpacityStyle()),
                     } : isNumbered ? {
                       width: '40px', height: '40px', borderRadius: '8px', fontSize: '14px', fontWeight: 500,
                       ...(isSelected
                         ? scaleCellSelectedStyle(true)
-                        : {
-                            border: '1px solid #d1d5db',
-                            backgroundColor: '#fff',
-                            color: '#111827',
-                            ...unselectedOpacityStyle(),
-                          }),
-                    } : { padding: '8px', ...(isSelected ? {} : unselectedOpacityStyle()) }),
+                        : { border: '1px solid #d1d5db', backgroundColor: '#fff', color: '#111827', ...unselectedOpacityStyle() }),
+                    } : { padding: '8px', ...(!isSelected ? unselectedOpacityStyle() : {}) }),
                   }}
                 >
                   {(EmojiNode ?? StarNode ?? (isNumbered ? (displayIdx + 1) : RadioNode)) as React.ReactNode}

package/templates/docs/templates/Header.tsx

@@ -76,20 +76,18 @@ export default function Header({ embedded = false }: HeaderProps) {
             {seedCompany}
           </span>
 
-          {seedCompany ? (
-            <span
-              data-cfm-company
-              className="font-semibold"
-              style={{
-                display: seedShowCompany && hasLogoFile ? undefined : 'none',
-                color: 'var(--cfm-header-company-color, var(--cfm-text))',
-                fontSize: 'var(--cfm-header-company-size, 18px)',
-                fontWeight: 'var(--cfm-header-company-weight, 600)',
-              }}
-            >
-              {seedCompany}
-            </span>
-          ) : null}
+          <span
+            data-cfm-company
+            className="font-semibold"
+            style={{
+              display: seedShowCompany && seedCompany ? '' : 'none',
+              color: 'var(--cfm-header-company-color, var(--cfm-text))',
+              fontSize: 'var(--cfm-header-company-size, 18px)',
+              fontWeight: 'var(--cfm-header-company-weight, 600)',
+            }}
+          >
+            {seedCompany}
+          </span>
         </div>
       </div>
     </header>

package/templates/docs/templates/SliderMatrixScale.tsx

@@ -81,8 +81,7 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
                 display: 'flex',
                 justifyContent: 'space-between',
                 margin: '0 16px',
-                marginBottom: tickValues.length > 0 ? '24px' : '8px',
-                minHeight: '20px',
+                marginBottom: labels && labels.length > 0 ? '24px' : '16px',
                 fontSize: '14px',
                 fontWeight: 500,
               }}
@@ -101,11 +100,11 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
             style={{
               position: 'relative',
               margin: '0 16px',
-              marginTop: labels && labels.length > 0 ? '4px' : '0',
+              marginTop: labels && labels.length > 0 ? '4px' : 0,
               marginBottom: '8px',
               fontSize: '14px',
               fontWeight: 400,
-              height: '32px',
+              height: '28px',
               ...sliderTickLabelStyle(),
             }}
           >

package/templates/docs/templates/surveyUiScaleUtils.ts

@@ -96,20 +96,3 @@ export function columnAccentColor(column: { id: string; label: string }): string
   }
   return undefined;
 }
-
-/** Column-center anchor label positioning (m = option columns, n = anchor labels). */
-export function anchorLabelPercent(
-  index: number,
-  labelCount: number,
-  columnCount: number,
-  isGraphics = false,
-): number {
-  const m = columnCount;
-  const n = labelCount;
-  if (isGraphics) {
-    return n === 1 ? 0 : (index / (n - 1)) * 100;
-  }
-  const startPercent = 0.5 / m;
-  const rangePercent = (m - 1) / m;
-  return n === 1 ? 50 : (startPercent + (index / (n - 1)) * rangePercent) * 100;
-}

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

@@ -76,38 +76,34 @@
     });
   }
 
+  function applyThemeSideEffects() {
+    applyNumberBadgeColors();
+    applyDropzoneStyle();
+  }
+
   function ensureCompanySpan() {
+    if (document.querySelector('[data-cfm-company]')) return;
     var brand = document.querySelector('.cfm-header-brand');
-    if (!brand) return null;
-    var el = brand.querySelector('[data-cfm-company]');
-    if (el) return el;
-    el = document.createElement('span');
-    el.setAttribute('data-cfm-company', '');
-    el.className = 'font-semibold';
-    el.style.color = 'var(--cfm-header-company-color, var(--cfm-text))';
-    el.style.fontSize = 'var(--cfm-header-company-size, 18px)';
-    el.style.fontWeight = 'var(--cfm-header-company-weight, 600)';
-    var logo = brand.querySelector('[data-cfm-logo]');
-    if (logo && logo.parentNode === brand) {
-      if (logo.nextSibling) brand.insertBefore(el, logo.nextSibling);
-      else brand.appendChild(el);
-    } else {
-      brand.appendChild(el);
-    }
-    return el;
+    if (!brand) return;
+    var span = document.createElement('span');
+    span.setAttribute('data-cfm-company', '');
+    span.className = 'font-semibold';
+    brand.appendChild(span);
   }
 
-  function companyNameVisible() {
-    var root = document.documentElement;
-    var attr = root.getAttribute('data-cfm-show-company-name');
+  function showCompanyNameAllowed() {
+    var attr = document.documentElement.getAttribute('data-cfm-show-company-name');
     if (attr === '0') return false;
-    if (attr === '1') return true;
-    return readVar('--cfm-header-show-company', '1') !== '0';
+    return true;
   }
 
-  function applyThemeSideEffects() {
-    applyNumberBadgeColors();
-    applyDropzoneStyle();
+  function updateCompanyVisibility(name) {
+    ensureCompanySpan();
+    var visible = showCompanyNameAllowed() && Boolean(name);
+    document.querySelectorAll('[data-cfm-company]').forEach(function (el) {
+      if (name) el.textContent = name;
+      el.style.display = visible ? '' : 'none';
+    });
   }
 
   function applyContent(patch) {
@@ -134,24 +130,14 @@
       });
       document.querySelectorAll('[data-cfm-company]').forEach(function (el) {
         if (patch.logoUrl) {
-          var show = companyNameVisible() && el.textContent;
-          el.style.display = show ? '' : 'none';
+          ensureCompanySpan();
+          updateCompanyVisibility(el.textContent || '');
         }
       });
     }
     if (patch.companyName !== undefined) {
       var name = patch.companyName || '';
-      if (name && document.querySelectorAll('[data-cfm-company]').length === 0) {
-        ensureCompanySpan();
-      }
-      document.querySelectorAll('[data-cfm-company]').forEach(function (el) {
-        el.textContent = name;
-        var logoImg = document.querySelector('[data-cfm-logo]');
-        var logoVisible =
-          logoImg && logoImg.style.display !== 'none' && logoImg.getAttribute('src');
-        var show = name && logoVisible && companyNameVisible();
-        el.style.display = show ? '' : 'none';
-      });
+      updateCompanyVisibility(name);
       document.querySelectorAll('[data-cfm-logo-text]').forEach(function (el) {
         var logoImg = document.querySelector('[data-cfm-logo]');
         var logoVisible =
@@ -215,13 +201,8 @@
           'data-cfm-show-company-name',
           flags.showCompanyName ? '1' : '0',
         );
-        document.querySelectorAll('[data-cfm-company]').forEach(function (el) {
-          var logoImg = document.querySelector('[data-cfm-logo]');
-          var logoVisible =
-            logoImg && logoImg.style.display !== 'none' && logoImg.getAttribute('src');
-          var show = flags.showCompanyName && el.textContent && logoVisible;
-          el.style.display = show ? '' : 'none';
-        });
+        var companyEl = document.querySelector('[data-cfm-company]');
+        updateCompanyVisibility(companyEl ? companyEl.textContent : patch.companyName || '');
       }
       if (flags.showHeader !== undefined) {
         setDisplay('.cfm-header, header.cfm-header', flags.showHeader);
@@ -242,16 +223,10 @@
         setDisplay('[data-cfm-btn-back]', flags.showBackButton);
       }
       if (flags.showQuestionNumbers !== undefined) {
-        document.documentElement.setAttribute(
-          'data-cfm-show-question-numbers',
-          flags.showQuestionNumbers ? '1' : '0',
-        );
+        setDisplay('[data-cfm-question-number]', flags.showQuestionNumbers);
       }
       if (flags.showRequiredAsterisk !== undefined) {
-        document.documentElement.setAttribute(
-          'data-cfm-show-required',
-          flags.showRequiredAsterisk ? '1' : '0',
-        );
+        setDisplay('[data-cfm-required]', flags.showRequiredAsterisk);
       }
       if (flags.showFooterLogo !== undefined) {
         setDisplay('[data-cfm-footer-logo]', flags.showFooterLogo);

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

@@ -71,14 +71,8 @@ export function PreviewConfigProvider({ children }: { children: ReactNode }) {
       if (!data?.type) return;
       if (data.type !== PREVIEW_BRIDGE_SNAPSHOT && data.type !== PREVIEW_BRIDGE_DELTA) return;
       if (data.contentPatch?.previewState) {
-        setPreviewState((prev) => {
-          const next = { ...prev, ...data.contentPatch.previewState };
-          const changed = (Object.keys(data.contentPatch.previewState) as (keyof PreviewStatePatch)[]).some(
-            (key) => prev[key] !== next[key],
-          );
-          if (changed) setConfigRevision((r) => r + 1);
-          return next;
-        });
+        setPreviewState((prev) => ({ ...prev, ...data.contentPatch.previewState }));
+        setConfigRevision((r) => r + 1);
       }
       if (data.contentPatch?.domAttributes) {
         const root = document.documentElement;

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

@@ -19,6 +19,8 @@ const LIKERT_COLUMNS = [
   { id: 'c5', label: 'Strongly Agree' },
 ];
 
+const MATRIX_ANCHOR_LABELS = LIKERT_COLUMNS.map((c) => c.label);
+
 const MATRIX_ROW_SINGLE = [{ id: 'r1', statementText: 'Statement Item 1' }];
 
 const MATRIX_ROWS_MULTI = [
@@ -210,7 +212,7 @@ export const FIXTURE_CSAT_EMOJI = base({
   gridLayout: 'standard',
   statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
-  scaleAnchorLabels: ['Very unhappy', '', '', '', 'Very happy'],
+  scaleAnchorLabels: [...MATRIX_ANCHOR_LABELS],
 });
 
 export const FIXTURE_CSAT_STAR = base({
@@ -235,7 +237,7 @@ export const FIXTURE_CSAT_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'],
+  scaleAnchorLabels: [MATRIX_ANCHOR_LABELS[0], MATRIX_ANCHOR_LABELS[4]],
 });
 
 export const FIXTURE_CSAT_CAROUSEL = base({
@@ -298,7 +300,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: [...MATRIX_ANCHOR_LABELS],
 });
 
 export const FIXTURE_RATING_SLIDER = base({

package/templates/survey-theme.css

@@ -287,6 +287,10 @@ body {
   border-style: solid;
 }
 
+.cfm-live-edit * {
+  transition: none !important;
+}
+
 html[data-cfm-show-company-name='0'] [data-cfm-company] {
   display: none !important;
 }
@@ -298,7 +302,3 @@ html[data-cfm-show-question-numbers='0'] [data-cfm-question-number] {
 html[data-cfm-show-required='0'] [data-cfm-required] {
   display: none !important;
 }
-
-.cfm-live-edit * {
-  transition: none !important;
-}

package/templates/wizard-dist/assets/{PreviewMock-AeUxzA3b.js → PreviewMock-BwihQcaZ.js}

@@ -1 +1 @@
-import{u as x,j as e}from"./index-Z7mePXvc.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-BDaoM71z.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-B4UpxOhr.js → TypePanel-C-nuhX_H.js}

@@ -1 +1 @@
-import{u as p,j as e,T as R,S as b,R as d,C as i,N as t,a as z,M as A}from"./index-Z7mePXvc.js";import"./vendor-BwkXDkd3.js";function j({values:n,onPatch:r}){return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Label text color",value:n.columnLabelColor,onChange:a=>r({columnLabelColor:a})}),e.jsx(i,{label:"Label background",value:n.columnLabelBgColor,onChange:a=>r({columnLabelBgColor:a})})]})}function N({values:n,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:n.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:n.hintMaxText,onChange:a=>r({hintMaxText:a.target.value})})]}),e.jsx(i,{label:"Hint text color",value:n.hintLabelColor,onChange:a=>r({hintLabelColor:a})}),e.jsx(i,{label:"Hint label background",value:n.hintLabelBgColor,onChange:a=>r({hintLabelBgColor:a})})]})}function T({values:n,onPatch:r,count:a=11}){return e.jsxs("div",{className:"space-y-3",children:[e.jsx(b,{label:"Number label style",value:n.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"}]}),n.numberLabelMode==="monochrome"&&e.jsx(i,{label:"Monochrome color",value:n.monochromeNumberColor,onChange:c=>r({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,h)=>e.jsx(i,{label:`#${h}`,value:n.individualNumberColors[h]??"#9CA3AF",onChange:C=>{const x=[...n.individualNumberColors];x[h]=C,r({individualNumberColors:x})}},h))})]})}function s({title:n,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:n}),r]})}function O({type:n,activeFormat:r}){const a=p(l=>l.config.questionTypes[n]),c=p(l=>l.updateQuestionType),h=p(l=>l.previewMultiStatementByType),C=p(l=>l.setPreviewMultiStatementForType),x=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),k=A.includes(n),y=!!h[n],u=r.includes("star"),g=r.includes("emoji"),M=r.includes("numbered"),v=r.includes("drag"),w=r.includes("dropdown"),f=r.includes("radio"),B=r==="CFM_bipolar",S=r.includes("graphics"),m=g||u||M||f,L=a.optionStyle??a.cardStyle??"outlined",P=a.buttonStyle??"numbered";return e.jsxs("div",{className:"space-y-4",children:[k&&e.jsx(R,{label:"Preview multiple statements",checked:y,onChange:l=>C(n,l)}),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(i,{label:"Hover border",value:a.hoverBorderColor,onChange:l=>o({hoverBorderColor:l})}),L==="filled"&&e.jsx(i,{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(i,{label:"Border color",value:a.borderColor,onChange:l=>o({borderColor:l})}),e.jsx(i,{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(N,{values:a,onPatch:o})}),P==="numbered"&&e.jsx(s,{title:"Number labels",children:e.jsx(T,{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(i,{label:"Track bar",value:a.trackBarColor,onChange:l=>o({trackBarColor:l})}),e.jsx(i,{label:"Track highlight",value:a.trackHighlightColor,onChange:l=>o({trackHighlightColor: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}),B&&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||m||u)&&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=>o({emojiSize:l}),min:16,max:40}),u&&e.jsx(i,{label:"Star color",value:a.accentColor,onChange:l=>o({accentColor:l})}),m&&e.jsx(d,{label:"Unselected opacity",value:Math.round(a.unselectedOpacity*100),onChange:l=>o({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."})]}),e.jsxs(s,{title:"Label items",children:[e.jsx("p",{className:"text-xs text-slate-500",children:"Applies to anchor label pills where the preview already shows them — not numeric column headers."}),e.jsx(j,{values:a,onPatch:o})]}),S&&e.jsx(s,{title:"Graphics track",children:e.jsx(i,{label:"Track color",value:a.graphicsTrackColor,onChange:l=>o({graphicsTrackColor:l})})})]}),n==="RATING_MATRIX"&&"unselectedStarOpacity"in a&&e.jsxs(e.Fragment,{children:[(g||m||u)&&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=>o({emojiSize:l}),min:16,max:40}),u&&e.jsx(i,{label:"Star color",value:a.starColor,onChange:l=>o({starColor:l})}),m&&e.jsx(d,{label:"Unselected opacity",value:Math.round(a.unselectedStarOpacity*100),onChange:l=>o({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 anchor label pills where the preview already shows them — not numeric column headers."}),e.jsx(j,{values:a,onPatch:o})]}),S&&e.jsx(s,{title:"Graphics track",children:e.jsx(i,{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(i,{label:"Track",value:a.trackColor,onChange:l=>o({trackColor:l})}),e.jsx(i,{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(i,{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(N,{values:a,onPatch:o})}),e.jsx(s,{title:"Tick number labels",children:e.jsx(T,{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(i,{label:"Border color",value:a.borderColor??a.accentColor,onChange:l=>o({borderColor:l})}),e.jsx(i,{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(i,{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(i,{label:"Pin color",value:a.pinColor,onChange:l=>o({pinColor:l})}),e.jsx(i,{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(x.x*100),"%, ",Math.round(x.y*100),"%"]})]})}),n==="RANK_ORDER"&&"drag"in a&&e.jsx(s,{title:v?"Drag & drop":w?"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:"Item background",value:a.drag.itemBg,onChange:l=>o({drag:{...a.drag,itemBg:l}})}),e.jsx(i,{label:"Drag handle",value:a.drag.dragHandleColor,onChange:l=>o({drag:{...a.drag,dragHandleColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>o({drag:{...a.drag,rankBadgeColor:l}})})]}),w&&e.jsxs(e.Fragment,{children:[e.jsx(i,{label:"Item background",value:a.dropdown.itemBg,onChange:l=>o({dropdown:{...a.dropdown,itemBg:l}})}),e.jsx(i,{label:"List hover background",value:a.dropdown.itemHoverBg??"#F3F4F6",onChange:l=>o({dropdown:{...a.dropdown,itemHoverBg:l}})}),e.jsx(i,{label:"Select border",value:a.dropdown.selectBorderColor,onChange:l=>o({dropdown:{...a.dropdown,selectBorderColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.dropdown.rankBadgeColor,onChange:l=>o({dropdown:{...a.dropdown,rankBadgeColor:l}})})]})]})})]})}export{O as TypePanel};
+import{u as p,j as e,T as R,S as b,R as d,C as i,N as t,a as z,M as A}from"./index-BDaoM71z.js";import"./vendor-BwkXDkd3.js";function j({values:n,onPatch:r}){return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Label text color",value:n.columnLabelColor,onChange:a=>r({columnLabelColor:a})}),e.jsx(i,{label:"Label background",value:n.columnLabelBgColor,onChange:a=>r({columnLabelBgColor:a})})]})}function N({values:n,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:n.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:n.hintMaxText,onChange:a=>r({hintMaxText:a.target.value})})]}),e.jsx(i,{label:"Hint text color",value:n.hintLabelColor,onChange:a=>r({hintLabelColor:a})}),e.jsx(i,{label:"Hint label background",value:n.hintLabelBgColor,onChange:a=>r({hintLabelBgColor:a})})]})}function T({values:n,onPatch:r,count:a=11}){return e.jsxs("div",{className:"space-y-3",children:[e.jsx(b,{label:"Number label style",value:n.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"}]}),n.numberLabelMode==="monochrome"&&e.jsx(i,{label:"Monochrome color",value:n.monochromeNumberColor,onChange:c=>r({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,h)=>e.jsx(i,{label:`#${h}`,value:n.individualNumberColors[h]??"#9CA3AF",onChange:C=>{const x=[...n.individualNumberColors];x[h]=C,r({individualNumberColors:x})}},h))})]})}function s({title:n,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:n}),r]})}function O({type:n,activeFormat:r}){const a=p(l=>l.config.questionTypes[n]),c=p(l=>l.updateQuestionType),h=p(l=>l.previewMultiStatementByType),C=p(l=>l.setPreviewMultiStatementForType),x=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),k=A.includes(n),y=!!h[n],u=r.includes("star"),g=r.includes("emoji"),M=r.includes("numbered"),v=r.includes("drag"),w=r.includes("dropdown"),f=r.includes("radio"),B=r==="CFM_bipolar",S=r.includes("graphics"),m=g||u||M||f,L=a.optionStyle??a.cardStyle??"outlined",P=a.buttonStyle??"numbered";return e.jsxs("div",{className:"space-y-4",children:[k&&e.jsx(R,{label:"Preview multiple statements",checked:y,onChange:l=>C(n,l)}),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(i,{label:"Hover border",value:a.hoverBorderColor,onChange:l=>o({hoverBorderColor:l})}),L==="filled"&&e.jsx(i,{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(i,{label:"Border color",value:a.borderColor,onChange:l=>o({borderColor:l})}),e.jsx(i,{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(N,{values:a,onPatch:o})}),P==="numbered"&&e.jsx(s,{title:"Number labels",children:e.jsx(T,{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(i,{label:"Track bar",value:a.trackBarColor,onChange:l=>o({trackBarColor:l})}),e.jsx(i,{label:"Track highlight",value:a.trackHighlightColor,onChange:l=>o({trackHighlightColor: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}),B&&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||m||u)&&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=>o({emojiSize:l}),min:16,max:40}),u&&e.jsx(i,{label:"Star color",value:a.accentColor,onChange:l=>o({accentColor:l})}),m&&e.jsx(d,{label:"Unselected opacity",value:Math.round(a.unselectedOpacity*100),onChange:l=>o({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."})]}),e.jsxs(s,{title:"Label items",children:[e.jsx("p",{className:"text-xs text-slate-500",children:"Applies to anchor label pills where the preview already shows them — not numeric column headers."}),e.jsx(j,{values:a,onPatch:o})]}),S&&e.jsx(s,{title:"Graphics track",children:e.jsx(i,{label:"Track color",value:a.graphicsTrackColor,onChange:l=>o({graphicsTrackColor:l})})})]}),n==="RATING_MATRIX"&&"unselectedStarOpacity"in a&&e.jsxs(e.Fragment,{children:[(g||m||u)&&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=>o({emojiSize:l}),min:16,max:40}),u&&e.jsx(i,{label:"Star color",value:a.starColor,onChange:l=>o({starColor:l})}),m&&e.jsx(d,{label:"Unselected opacity",value:Math.round(a.unselectedStarOpacity*100),onChange:l=>o({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 anchor label pills where the preview already shows them — not numeric column headers."}),e.jsx(j,{values:a,onPatch:o})]}),S&&e.jsx(s,{title:"Graphics track",children:e.jsx(i,{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(i,{label:"Track",value:a.trackColor,onChange:l=>o({trackColor:l})}),e.jsx(i,{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(i,{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(N,{values:a,onPatch:o})}),e.jsx(s,{title:"Tick number labels",children:e.jsx(T,{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(i,{label:"Border color",value:a.borderColor??a.accentColor,onChange:l=>o({borderColor:l})}),e.jsx(i,{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(i,{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(i,{label:"Pin color",value:a.pinColor,onChange:l=>o({pinColor:l})}),e.jsx(i,{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(x.x*100),"%, ",Math.round(x.y*100),"%"]})]})}),n==="RANK_ORDER"&&"drag"in a&&e.jsx(s,{title:v?"Drag & drop":w?"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:"Item background",value:a.drag.itemBg,onChange:l=>o({drag:{...a.drag,itemBg:l}})}),e.jsx(i,{label:"Drag handle",value:a.drag.dragHandleColor,onChange:l=>o({drag:{...a.drag,dragHandleColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>o({drag:{...a.drag,rankBadgeColor:l}})})]}),w&&e.jsxs(e.Fragment,{children:[e.jsx(i,{label:"Item background",value:a.dropdown.itemBg,onChange:l=>o({dropdown:{...a.dropdown,itemBg:l}})}),e.jsx(i,{label:"List hover background",value:a.dropdown.itemHoverBg??"#F3F4F6",onChange:l=>o({dropdown:{...a.dropdown,itemHoverBg:l}})}),e.jsx(i,{label:"Select border",value:a.dropdown.selectBorderColor,onChange:l=>o({dropdown:{...a.dropdown,selectBorderColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.dropdown.rankBadgeColor,onChange:l=>o({dropdown:{...a.dropdown,rankBadgeColor:l}})})]})]})})]})}export{O as TypePanel};