@explorer02/cfm-survey-sdk 0.2.7 → 0.2.9

package/templates/docs/templates/RatingScale.tsx

@@ -6,6 +6,7 @@ import {
   scaleRadioDotStyle,
   scaleCellSelectedStyle,
 } from '@/lib/surveyUi/selectionStyles';
+import { hintLabelStyle } from '@/lib/surveyUi/labelStyles';
 import { getAccentColor, npsValueFromOption, starValueFromOption } from './surveyUiScaleUtils';
 import { getEmojiForIndex } from './surveyUiIcons';
 
@@ -16,6 +17,10 @@ type RatingScaleProps = {
   onSelect: (value: AnswerValue) => void;
   variant?: 'nps' | 'star';
   buttonStyle?: 'standard' | 'numbered' | 'emoji';
+  minLabel?: string;
+  midLabel?: string;
+  maxLabel?: string;
+  midLabelIndex?: number;
 };
 
 function resolveBadgeColor(index: number, value: number): string {
@@ -44,6 +49,10 @@ export default function RatingScale({
   onSelect,
   variant = 'nps',
   buttonStyle = 'numbered',
+  minLabel,
+  midLabel,
+  maxLabel,
+  midLabelIndex,
 }: RatingScaleProps) {
   const resolvedOptions = options.map((option, index) => {
     const value =
@@ -63,9 +72,37 @@ export default function RatingScale({
     gap: 'var(--cfm-nps-cell-gap, 2px)',
   };
 
+  const hintRow = (minLabel || midLabel || maxLabel) ? (
+    <div className="relative mb-3 h-6 w-full text-xs font-semibold">
+      <span
+        className="absolute left-0 top-0 max-w-[30%] text-left leading-tight"
+        style={hintLabelStyle()}
+        dangerouslySetInnerHTML={{ __html: minLabel ?? '' }}
+      />
+      {midLabel && (
+        <span
+          className="absolute top-0 -translate-x-1/2 max-w-[40%] text-center leading-tight"
+          style={{
+            ...hintLabelStyle(),
+            left: `${midLabelIndex !== undefined && columnCount > 1
+              ? (midLabelIndex / (columnCount - 1)) * 100
+              : 50}%`,
+          }}
+          dangerouslySetInnerHTML={{ __html: midLabel }}
+        />
+      )}
+      <span
+        className="absolute right-0 top-0 max-w-[30%] text-right leading-tight"
+        style={hintLabelStyle()}
+        dangerouslySetInnerHTML={{ __html: maxLabel ?? '' }}
+      />
+    </div>
+  ) : null;
+
   if (buttonStyle === 'emoji') {
     return (
       <div role="radiogroup" className="w-full overflow-x-auto" data-cfm-nps-area>
+        {hintRow}
         <div className="min-w-0" style={gridStyle}>
           {resolvedOptions.map((option, index) => {
             const isSelected = selectedValue === option.value;
@@ -90,6 +127,7 @@ export default function RatingScale({
 
   return (
     <div role="radiogroup" className="w-full overflow-x-auto" data-cfm-nps-area>
+      {hintRow}
       <div className="mb-3 min-w-0" style={gridStyle}>
         {resolvedOptions.map((option, index) => {
           const isSelected = selectedValue === option.value;

package/templates/docs/templates/SliderMatrixScale.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import type { SliderMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-survey-sdk';
+import { sliderTickLabelStyle } from '@/lib/surveyUi/labelStyles';
 import { tickColorFromIndex } from './surveyUiScaleUtils';
 import { CustomSliderTrack } from './CustomSliderTrack';
 
@@ -97,7 +98,7 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
                     width: `${sliceWidth}%`, display: 'flex', justifyContent: 'center',
                   }}>
                     {sliderType === 'graphics' ? (
-                      <div style={{ wordBreak: 'break-word', textAlign: 'center', lineHeight: '1.2', fontWeight: 500, color: '#4b5563', fontSize: '13px' }}>
+                      <div style={{ wordBreak: 'break-word', textAlign: 'center', lineHeight: '1.2', fontWeight: 500, fontSize: '13px', ...sliderTickLabelStyle() }}>
                         {tv.label}
                       </div>
                     ) : (
@@ -121,7 +122,7 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
                     position: 'absolute', left: `${percentage}%`, transform: 'translateX(-50%)',
                     width: `${sliceWidth}%`, display: 'flex', justifyContent: 'center',
                   }}>
-                    <span style={{ wordBreak: 'break-word', textAlign: 'center', lineHeight: '1.2' }}>{m}</span>
+                    <span style={{ wordBreak: 'break-word', textAlign: 'center', lineHeight: '1.2', ...sliderTickLabelStyle() }}>{m}</span>
                   </div>
                 );
               })
@@ -151,7 +152,7 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
         return (
           <div key={row.id} style={{
             display: 'flex', width: '100%', alignItems: 'center',
-            backgroundColor: '#f3f4f6', borderRadius: '12px', padding: '16px', boxSizing: 'border-box',
+            backgroundColor: 'var(--cfm-slider-row-band)', borderRadius: '12px', padding: '16px', boxSizing: 'border-box',
           }}>
             <div style={{ flex: '0 0 25%', paddingRight: '16px', fontSize: '15px', color: '#111827', wordWrap: 'break-word', display: 'flex', alignItems: 'center' }}>
               {row.statementText !== 'Question' && row.statementText !== '' ? (

package/templates/docs/templates/verify-agent-build.sh

@@ -102,6 +102,23 @@ if ! grep -q "layoutFlags" "$PREVIEW_BRIDGE"; then
 fi
 echo "OK: previewBridge.ts present with layoutFlags"
 
+# Scale templates must consume wizard CSS vars (not only RatingScale)
+SCALE_CFM_COUNT=0
+for candidate in src/components/LikertMatrixScale.tsx components/LikertMatrixScale.tsx app/components/LikertMatrixScale.tsx; do
+  if [ -f "$candidate" ] && grep -q -- '--cfm-' "$candidate"; then SCALE_CFM_COUNT=1; break; fi
+done
+if [ "$SCALE_CFM_COUNT" -eq 0 ]; then
+  echo "WARN: LikertMatrixScale.tsx missing --cfm-* vars — copy from docs/templates"
+fi
+
+SCALE_CSAT_COUNT=0
+for candidate in src/components/CsatMatrixScale.tsx components/CsatMatrixScale.tsx app/components/CsatMatrixScale.tsx; do
+  if [ -f "$candidate" ] && grep -q -- '--cfm-' "$candidate"; then SCALE_CSAT_COUNT=1; break; fi
+done
+if [ "$SCALE_CSAT_COUNT" -eq 0 ]; then
+  echo "WARN: CsatMatrixScale.tsx missing --cfm-* vars — copy from docs/templates"
+fi
+
 REQUIRED_TYPES=(MCQ TEXTFIELD NPS_SCALE CFM_MATRIX CSAT_MATRIX RATING_MATRIX SLIDER_MATRIX FILE_UPLOAD TEXT_AND_MEDIA HEATMAP RANK_ORDER)
 QUESTION_FILE=""
 for candidate in src/components/Question.tsx components/Question.tsx app/components/Question.tsx; do

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

@@ -176,6 +176,16 @@
         el.setAttribute('placeholder', patch.previewState.textfieldPlaceholder || '');
       });
     }
+    if (patch.previewState && patch.previewState.hintMinText !== undefined) {
+      document.querySelectorAll('[data-cfm-hint-min]').forEach(function (el) {
+        el.textContent = patch.previewState.hintMinText || '';
+      });
+    }
+    if (patch.previewState && patch.previewState.hintMaxText !== undefined) {
+      document.querySelectorAll('[data-cfm-hint-max]').forEach(function (el) {
+        el.textContent = patch.previewState.hintMaxText || '';
+      });
+    }
   }
 
   function handleMessage(event) {

package/templates/preview-harness/previewPages.ts

@@ -3,8 +3,9 @@ export type PreviewPageDef = { key: string; title: string; body: string };
 
 const sharedStyles = `
   .cfm-header { height:var(--cfm-header-height); background:var(--cfm-header-bg); border-bottom:1px solid var(--cfm-header-border); display:flex; align-items:center; padding:0 var(--cfm-header-padding-x); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
-  .cfm-header-logo { width:var(--cfm-header-logo-width); height:var(--cfm-header-logo-height); object-fit:contain; padding:var(--cfm-header-logo-padding); background:var(--cfm-primary); }
-  .cfm-header-company { font-size:var(--cfm-header-company-size); font-weight:var(--cfm-header-company-weight); color:var(--cfm-header-company-color); margin-left:16px; }
+  .cfm-header-brand { display:flex; align-items:center; gap:var(--cfm-header-brand-gap,16px); }
+  .cfm-header-logo { width:var(--cfm-header-logo-width); height:var(--cfm-header-logo-height); object-fit:contain; padding:var(--cfm-header-logo-padding); background:var(--cfm-header-logo-bg,transparent); }
+  .cfm-header-company { font-size:var(--cfm-header-company-size); font-weight:var(--cfm-header-company-weight); color:var(--cfm-header-company-color); }
   .cfm-footer { background:var(--cfm-footer-bg); color:var(--cfm-footer-text); padding:var(--cfm-footer-padding-y) var(--cfm-footer-padding-x); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end; }
   .cfm-footer-links { display:flex; gap:24px; flex-wrap:wrap; }
   .cfm-footer-links a { color:var(--cfm-footer-link); text-decoration:none; font-size:12px; }
@@ -28,7 +29,7 @@ const sharedStyles = `
   .cfm-slider-track { height:8px; background:var(--cfm-slider-track); border-radius:4px; position:relative; margin:24px 0; }
   .cfm-slider-thumb { width:20px; height:20px; background:var(--cfm-slider-thumb); border-radius:50%; position:absolute; top:-6px; left:60%; }
   .cfm-tick { width:var(--cfm-slider-tick-size); height:var(--cfm-slider-tick-size); background:var(--cfm-slider-tick); border-radius:4px; font-size:11px; display:flex; align-items:center; justify-content:center; color:white; }
-  .cfm-dropzone { border:2px dashed var(--cfm-upload-accent); border-radius:var(--cfm-border-radius); padding:var(--cfm-upload-padding); text-align:center; color:var(--cfm-text); }
+  .cfm-dropzone { border:2px dashed var(--cfm-upload-border-color); border-radius:var(--cfm-border-radius); padding:var(--cfm-upload-padding); background:var(--cfm-upload-fill); text-align:center; color:var(--cfm-text); }
   .cfm-input { width:100%; height:var(--cfm-input-height); border:1px solid var(--cfm-input-border); border-radius:var(--cfm-input-radius); padding:0 var(--cfm-input-padding); font-family:inherit; }
   .cfm-input:focus { outline:2px solid var(--cfm-input-focus-ring); }
   .cfm-rank-item { background:var(--cfm-rank-item-bg); padding:var(--cfm-rank-item-padding); margin-bottom:var(--cfm-rank-item-gap); border-radius:var(--cfm-border-radius); display:flex; align-items:center; gap:12px; }
@@ -59,10 +60,7 @@ export const PREVIEW_PAGE_DEFS: PreviewPageDef[] = [
   {
     key: 'header',
     title: 'Header',
-    body: `<header class="cfm-header">
-      <img data-cfm-logo class="cfm-header-logo" src="" alt="Logo" style="display:none" />
-      <span data-cfm-company class="cfm-header-company">Company Name</span>
-    </header>`,
+    body: `<header class="cfm-header"><div class="cfm-header-brand"><img data-cfm-logo class="cfm-header-logo" src="" alt="Logo" style="display:none" /><span data-cfm-company class="cfm-header-company"></span></div></header>`,
   },
   {
     key: 'footer',

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

@@ -65,12 +65,17 @@ function QuestionPreviewInner({ question, initialValue }: QuestionPreviewProps)
       }
     }
 
-    if (previewState.multiStatement && 'statementRows' in q && q.statementRows.length === 1) {
-      const extra = {
-        id: 'r2',
-        statementText: 'Second statement row',
-      };
-      q = { ...q, statementRows: [...q.statementRows, extra] } as typeof q;
+    const matrixTypes = new Set(['CFM_MATRIX', 'CSAT_MATRIX', 'RATING_MATRIX', 'SLIDER_MATRIX']);
+    if ('statementRows' in q && matrixTypes.has(q.type)) {
+      const rows = q.statementRows ?? [];
+      if (previewState.multiStatement) {
+        if (rows.length === 1) {
+          const extra = { id: 'r2', statementText: 'Second statement row' };
+          q = { ...q, statementRows: [...rows, extra] } as typeof q;
+        }
+      } else if (rows.length > 1) {
+        q = { ...q, statementRows: rows.slice(0, 1) } as typeof q;
+      }
     }
 
     if (previewState.rankVariant === 'drag' && q.type === 'RANK_ORDER') {

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

@@ -11,11 +11,6 @@ const base = (partial: Partial<SurveyQuestion> & { type: SurveyQuestion['type']
     ...partial,
   }) as SurveyQuestion;
 
-const MATRIX_ROWS_MULTI = [
-  { id: 'r1', statementText: 'The product is easy to use' },
-  { id: 'r2', statementText: 'Support was helpful' },
-];
-
 export const FIXTURE_INTRO: SpecialPage = {
   id: 'preview-intro',
   header: 'Welcome to our survey',
@@ -99,7 +94,7 @@ export const FIXTURE_TEXT_LONG = base({
 
 export const FIXTURE_CFM_LIKERT = base({
   type: 'CFM_MATRIX',
-  statementRows: MATRIX_ROWS_MULTI,
+  statementRows: [{ id: 'r1', statementText: 'The product is easy to use' }],
   scaleColumns: [
     { id: 'c1', label: 'Strongly disagree' },
     { id: 'c2', label: 'Disagree' },
@@ -232,10 +227,7 @@ export const FIXTURE_RATING_SLIDER = base({
 
 export const FIXTURE_SLIDER = base({
   type: 'SLIDER_MATRIX',
-  statementRows: [
-    { id: 'r1', statementText: 'Ease of use', min: 0, max: 10, step: 1 },
-    { id: 'r2', statementText: 'Speed', min: 0, max: 10, step: 1 },
-  ],
+  statementRows: [{ id: 'r1', statementText: 'Ease of use', min: 0, max: 10, step: 1 }],
   scaleAnchorLabels: ['Not at all', 'Extremely'],
   ticks: {
     count: 11,

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

@@ -75,15 +75,20 @@ html.cfm-live-edit .max-w-4xl {
   max-width: var(--cfm-max-width, 48rem) !important;
 }
 
-html.cfm-live-edit .cfm-header-inner {
-  flex-direction: var(--cfm-header-flex-direction, column) !important;
-  justify-content: var(--cfm-header-justify, flex-start) !important;
-  align-items: var(--cfm-header-brand-align, flex-start) !important;
+html.cfm-live-edit .cfm-header-brand {
+  display: flex !important;
+  align-items: center !important;
+  gap: var(--cfm-header-brand-gap, 16px) !important;
+}
+
+html.cfm-live-edit [data-cfm-logo] {
+  background: var(--cfm-header-logo-bg, transparent) !important;
+  object-fit: contain !important;
 }
 
 html.cfm-live-edit [data-cfm-company] {
-  margin-top: var(--cfm-header-company-margin-top, 8px) !important;
-  margin-left: var(--cfm-header-company-margin-left, 0) !important;
+  margin-top: 0 !important;
+  margin-left: 0 !important;
 }
 
 html.cfm-live-edit .cfm-footer-inner {

package/templates/previewBridge.ts

@@ -204,6 +204,19 @@ function applyContentPatch(patch: ContentPatch): void {
       el.setAttribute('placeholder', placeholder);
     });
   }
+
+  const hintMin = patch.previewState?.hintMinText;
+  if (typeof hintMin === 'string') {
+    document.querySelectorAll('[data-cfm-hint-min]').forEach((el) => {
+      el.textContent = hintMin;
+    });
+  }
+  const hintMax = patch.previewState?.hintMaxText;
+  if (typeof hintMax === 'string') {
+    document.querySelectorAll('[data-cfm-hint-max]').forEach((el) => {
+      el.textContent = hintMax;
+    });
+  }
 }
 
 function setLiveEditMode(on: boolean): void {

package/templates/survey-theme.css

@@ -18,7 +18,8 @@
   --cfm-header-height: 120px;
   --cfm-header-logo-width: 120px;
   --cfm-header-logo-height: 120px;
-  --cfm-header-logo-padding: 10px;
+  --cfm-header-logo-padding: 0px;
+  --cfm-header-logo-bg: transparent;
   --cfm-header-bg: #ffffff;
   --cfm-header-company-color: #1a1f36;
   --cfm-header-company-size: 18px;
@@ -181,8 +182,7 @@ body {
 }
 
 .cfm-header-inner {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  display: flex;
   align-items: center;
   gap: var(--cfm-header-brand-gap, 16px);
   padding-left: var(--cfm-header-padding-x);
@@ -191,27 +191,27 @@ body {
   padding-bottom: 12px;
   min-height: var(--cfm-header-height);
   box-sizing: border-box;
+  width: 100%;
 }
 
-.cfm-header-logo-slot {
-  grid-column: var(--cfm-header-logo-col, 1);
-  grid-row: 1;
-  justify-self: var(--cfm-header-logo-justify, start);
-  width: var(--cfm-header-logo-width);
-  height: var(--cfm-header-logo-height);
+.cfm-header-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--cfm-header-brand-gap, 16px);
+  min-width: 0;
 }
 
-.cfm-header-company-slot {
-  grid-column: var(--cfm-header-company-col, 1);
-  grid-row: 1;
-  justify-self: var(--cfm-header-company-justify, start);
-  align-self: center;
+.cfm-header-brand [data-cfm-logo],
+.cfm-header-logo-slot [data-cfm-logo] {
+  background: var(--cfm-header-logo-bg, transparent);
+  object-fit: contain;
+}
+
+.cfm-header-company-slot,
+[data-cfm-company] {
   color: var(--cfm-header-company-color);
   font-size: var(--cfm-header-company-size);
   font-weight: var(--cfm-header-company-weight);
-  margin-top: var(--cfm-header-company-margin-top, 0);
-  margin-left: var(--cfm-header-company-margin-left, 0);
-  margin-right: var(--cfm-header-company-margin-right, 0);
   line-height: 1.2;
 }
 

package/templates/wizard-dist/assets/{PreviewMock-tTMvwuEy.js → PreviewMock-CysRws9G.js}

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

@@ -0,0 +1 @@
+import{u as m,j as e,T as M,S as j,R as u,N as t,C as r,a as L,M as P}from"./index-DIuc7AU2.js";import"./vendor-BwkXDkd3.js";function b({values:o,onPatch:i}){return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(r,{label:"Label text color",value:o.columnLabelColor,onChange:a=>i({columnLabelColor:a})}),e.jsx(r,{label:"Label background",value:o.columnLabelBgColor,onChange:a=>i({columnLabelBgColor:a})})]})}function k({values:o,onPatch:i}){return e.jsxs("div",{className:"grid grid-cols-1 gap-3 sm:grid-cols-2",children:[e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Min hint label"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:o.hintMinText,onChange:a=>i({hintMinText:a.target.value})})]}),e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Max hint label"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:o.hintMaxText,onChange:a=>i({hintMaxText:a.target.value})})]}),e.jsx(r,{label:"Hint text color",value:o.hintLabelColor,onChange:a=>i({hintLabelColor:a})}),e.jsx(r,{label:"Hint label background",value:o.hintLabelBgColor,onChange:a=>i({hintLabelBgColor:a})})]})}function p({values:o,onPatch:i,count:a=11}){return e.jsxs("div",{className:"space-y-3",children:[e.jsx(j,{label:"Number label style",value:o.numberLabelMode,onChange:d=>i({numberLabelMode:d}),options:[{value:"traffic",label:"Traffic light (default)"},{value:"monochrome",label:"Monochrome (one color)"},{value:"individual",label:"Individual per number"}]}),o.numberLabelMode==="monochrome"&&e.jsx(r,{label:"Monochrome color",value:o.monochromeNumberColor,onChange:d=>i({monochromeNumberColor:d})}),o.numberLabelMode==="individual"&&e.jsx("div",{className:"grid grid-cols-2 gap-2 sm:grid-cols-3",children:Array.from({length:a},(d,c)=>e.jsx(r,{label:`#${c}`,value:o.individualNumberColors[c]??"#9CA3AF",onChange:C=>{const x=[...o.individualNumberColors];x[c]=C,i({individualNumberColors:x})}},c))})]})}function s({title:o,children:i}){return e.jsxs("div",{className:"space-y-3 rounded-xl border border-white/5 bg-slate-950/20 p-4",children:[e.jsx("h4",{className:"text-xs font-semibold uppercase tracking-wider text-slate-400",children:o}),i]})}function B({type:o,activeFormat:i}){const a=m(l=>l.config.questionTypes[o]),d=m(l=>l.updateQuestionType),c=m(l=>l.previewMultiStatement),C=m(l=>l.setPreviewMultiStatement),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=>d(o,l),S=P.includes(o),T=i.includes("star"),h=i.includes("emoji"),v=i.includes("numbered"),N=i.includes("drag"),w=i.includes("dropdown"),f=i.includes("radio"),g=h||T||v||f;return e.jsxs("div",{className:"space-y-4",children:[S&&e.jsx(M,{label:"Preview multiple statements",checked:c,onChange:C}),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(j,{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(u,{label:"Option gap",value:a.optionGap,onChange:l=>n({optionGap:l}),min:0,max:32}),e.jsx(u,{label:"Border radius",value:a.borderRadius,onChange:l=>n({borderRadius:l}),min:0,max:24}),e.jsx(u,{label:"Option padding",value:a.optionPadding??12,onChange:l=>n({optionPadding:l}),min:4,max:24})]})}),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(r,{label:"Border color",value:a.borderColor,onChange:l=>n({borderColor:l})}),e.jsx(r,{label:"Placeholder color",value:a.placeholderColor,onChange:l=>n({placeholderColor:l})})]})}),o==="NPS_SCALE"&&"buttonStyle"in a&&e.jsxs(e.Fragment,{children:[e.jsxs(s,{title:"NPS buttons",children:[e.jsx(j,{label:"Button style",value:a.buttonStyle,onChange:l=>n({buttonStyle:l}),options:[{value:"standard",label:"Radio"},{value:"numbered",label:"Numbered badges"},{value:"pill",label:"Pill"}]}),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})}),e.jsx(s,{title:"Number labels",children:e.jsx(p,{values:a,onPatch:n})})]}),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}),e.jsx(t,{label:"Bipolar column width (%)",value:a.bipolarColumnWidthPercent,onChange:l=>n({bipolarColumnWidthPercent:l}),min:15,max:40})]})}),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:[(h||g)&&e.jsxs(s,{title:`${L.CSAT_MATRIX} — ${i.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}),g&&e.jsx(u,{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.jsx(s,{title:"Label items",children:e.jsx(b,{values:a,onPatch:n})}),v&&e.jsx(s,{title:"Number labels",children:e.jsx(p,{values:a,onPatch:n,count:10})})]}),o==="RATING_MATRIX"&&"unselectedStarOpacity"in a&&e.jsxs(e.Fragment,{children:[(h||g)&&e.jsxs(s,{title:`Rating — ${i.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}),g&&e.jsx(u,{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.jsx(s,{title:"Label items",children:e.jsx(b,{values:a,onPatch:n})}),v&&e.jsx(s,{title:"Number labels",children:e.jsx(p,{values:a,onPatch:n,count:10})})]}),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(r,{label:"Track",value:a.trackColor,onChange:l=>n({trackColor:l})}),e.jsx(r,{label:"Thumb",value:a.thumbColor,onChange:l=>n({thumbColor:l})}),e.jsx(r,{label:"Tick",value:a.tickColor,onChange:l=>n({tickColor:l})}),e.jsx(t,{label:"Row label width (px)",value:a.rowLabelWidth,onChange:l=>n({rowLabelWidth:l}),min:120,max:280})]})}),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(p,{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(j,{label:"Dropzone border",value:a.dropzoneStyle,onChange:l=>n({dropzoneStyle:l}),options:[{value:"dashed",label:"Dashed"},{value:"solid",label:"Solid"}]}),e.jsx(r,{label:"Border color",value:a.borderColor??a.accentColor,onChange:l=>n({borderColor:l})}),e.jsx(r,{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==="HEATMAP"&&"pinColor"in a&&e.jsx(s,{title:"Heatmap pin",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(r,{label:"Pin color",value:a.pinColor,onChange:l=>n({pinColor:l})}),e.jsx(r,{label:"Pin border",value:a.pinBorderColor,onChange:l=>n({pinBorderColor:l})}),e.jsx(u,{label:"Pin size",value:a.pinSize,onChange:l=>n({pinSize:l}),min:8,max:32}),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(r,{label:"Item background",value:a.drag.itemBg,onChange:l=>n({drag:{...a.drag,itemBg:l}})}),e.jsx(r,{label:"Drag handle",value:a.drag.dragHandleColor,onChange:l=>n({drag:{...a.drag,dragHandleColor:l}})}),e.jsx(r,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>n({drag:{...a.drag,rankBadgeColor:l}})})]}),w&&e.jsxs(e.Fragment,{children:[e.jsx(r,{label:"Item background",value:a.dropdown.itemBg,onChange:l=>n({dropdown:{...a.dropdown,itemBg:l}})}),e.jsx(r,{label:"Select border",value:a.dropdown.selectBorderColor,onChange:l=>n({dropdown:{...a.dropdown,selectBorderColor:l}})}),e.jsx(r,{label:"Rank badge",value:a.dropdown.rankBadgeColor,onChange:l=>n({dropdown:{...a.dropdown,rankBadgeColor:l}})})]})]})})]})}export{B as TypePanel};