@explorer02/cfm-survey-sdk 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer02/cfm-survey-sdk",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/templates/docs/templates/CsatMatrixScale.tsx

@@ -16,14 +16,34 @@ import {
   mcqSelectedAccentVar,
   mcqSelectedBgVar,
 } from '@/lib/surveyUi/selectionStyles';
-import { csatColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
+import { csatColumnLabelStyle, ratingColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
 
 const MATRIX_ROW_LABEL_WIDTH = 'var(--cfm-matrix-row-width, 180px)';
 
 type CsatMatrixQuestion = CsatQuestion | RatingMatrixQuestion;
 
-function GraphicsColumnLabelsRow({ scaleColumns }: { scaleColumns: ScaleColumn[] }) {
+function anchorLabelStyle(question: CsatMatrixQuestion) {
+  return question.type === 'RATING_MATRIX' ? ratingColumnLabelStyle() : csatColumnLabelStyle();
+}
+
+function columnHeaderLabelStyle(question: CsatMatrixQuestion) {
+  if (question.type === 'RATING_MATRIX') {
+    return { fontSize: '13px', fontWeight: 500, textAlign: 'center' as const, lineHeight: 1.2, color: '#4b5563' };
+  }
+  return { fontSize: '13px', fontWeight: 500, textAlign: 'center' as const, lineHeight: 1.2, ...csatColumnLabelStyle() };
+}
+
+function GraphicsColumnLabelsRow({
+  scaleColumns,
+  question,
+}: {
+  scaleColumns: ScaleColumn[];
+  question: CsatMatrixQuestion;
+}) {
   if (scaleColumns.length === 0) return null;
+  const labelStyle = question.type === 'RATING_MATRIX'
+    ? { fontSize: '12px', fontWeight: 500, lineHeight: 1.2, wordBreak: 'break-word' as const, color: '#4b5563' }
+    : { fontSize: '12px', fontWeight: 500, lineHeight: 1.2, wordBreak: 'break-word' as const, ...csatColumnLabelStyle() };
 
   return (
     <div style={{ flex: 1, padding: '0 24px' }}>
@@ -39,15 +59,10 @@ function GraphicsColumnLabelsRow({ scaleColumns }: { scaleColumns: ScaleColumn[]
                 transform: 'translateX(-50%)',
                 bottom: 0,
                 textAlign: 'center',
-                fontSize: '12px',
-                fontWeight: 500,
-                color: '#4b5563',
-                lineHeight: 1.2,
-                wordBreak: 'break-word',
                 width: '64px',
               }}
             >
-              <span dangerouslySetInnerHTML={{ __html: col.label }} />
+              <span style={labelStyle} dangerouslySetInnerHTML={{ __html: col.label }} />
             </div>
           );
         })}
@@ -214,7 +229,8 @@ function CsatMatrixGrid({
                     left: `${percent}%`,
                     transform: 'translateX(-50%)',
                     textAlign: 'center', fontSize: '13px', fontWeight: 600,
-                    color: '#4b5563', lineHeight: 1.3, whiteSpace: 'nowrap'
+                    lineHeight: 1.3, whiteSpace: 'nowrap',
+                    ...anchorLabelStyle(question),
                   }}>
                     {label}
                   </div>
@@ -231,7 +247,7 @@ function CsatMatrixGrid({
         <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: showLabels ? '8px' : '16px', minHeight: '24px' }}>
           <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0 }} />
           <div style={{ flex: 1, display: 'flex' }}>
-            <GraphicsColumnLabelsRow scaleColumns={scaleColumns} />
+            <GraphicsColumnLabelsRow scaleColumns={scaleColumns} question={question} />
             {hasNotApplicable && (
               <div style={{ width: '56px', flexShrink: 0 }} />
             )}
@@ -248,7 +264,7 @@ function CsatMatrixGrid({
               {scaleColumns.map(col => (
                 <div key={col.id} style={{ display: 'flex', justifyContent: 'center', padding: '0 4px' }}>
                   <span
-                    style={{ fontSize: '13px', fontWeight: 500, textAlign: 'center', lineHeight: 1.2, ...csatColumnLabelStyle() }}
+                    style={columnHeaderLabelStyle(question)}
                     dangerouslySetInnerHTML={{ __html: col.label }}
                   />
                 </div>
@@ -444,7 +460,8 @@ function CsatMatrixCarousel({
               <div key={i} style={{
                 position: 'absolute', left: `${percent}%`, transform: 'translateX(-50%)',
                 textAlign: 'center', fontSize: '13px', fontWeight: 600,
-                color: '#4b5563', lineHeight: 1.3, whiteSpace: 'nowrap'
+                lineHeight: 1.3, whiteSpace: 'nowrap',
+                ...anchorLabelStyle(question),
               }}>
                 {label}
               </div>
@@ -455,7 +472,7 @@ function CsatMatrixCarousel({
 
       {isGraphics && scaleColumns.length > 0 && (
         <div style={{ width: '100%', maxWidth: '800px', marginBottom: showLabels ? '8px' : '16px' }}>
-          <GraphicsColumnLabelsRow scaleColumns={scaleColumns} />
+          <GraphicsColumnLabelsRow scaleColumns={scaleColumns} question={question} />
         </div>
       )}
 
@@ -519,7 +536,7 @@ function CsatMatrixCarousel({
                 >
                   {(EmojiNode ?? StarNode ?? (isNumbered ? (displayIdx + 1) : RadioNode)) as React.ReactNode}
                 </button>
-                <span style={{ fontSize: '13px', fontWeight: 500, color: '#4b5563', textAlign: 'center', lineHeight: 1.2 }}
+                <span style={columnHeaderLabelStyle(question)}
                       dangerouslySetInnerHTML={{ __html: col.label }} />
               </div>
             );

package/templates/docs/templates/Footer.tsx

@@ -4,7 +4,21 @@
  */
 'use client';
 
+import {
+  getFooterCopyright,
+  getFooterLinks,
+  getLayoutFlags,
+  getLogoSrc,
+} from '@/lib/uiConfig';
+
+const seedLogoSrc = getLogoSrc({ staticExport: true });
+const seedCopyright = getFooterCopyright();
+const seedLinks = getFooterLinks();
+const { showFooterLogo } = getLayoutFlags();
+
 export default function Footer() {
+  const showLogo = showFooterLogo && Boolean(seedLogoSrc);
+
   return (
     <footer
       className="cfm-footer w-full"
@@ -15,57 +29,56 @@ export default function Footer() {
       }}
     >
       <div
-        className="cfm-footer-inner mx-auto grid w-full max-w-4xl items-end gap-6"
-        style={{
-          display: 'var(--cfm-footer-inner-display, grid)',
-          flexDirection: 'var(--cfm-footer-inner-direction, row)' as React.CSSProperties['flexDirection'],
-          gridTemplateColumns: '1fr 1fr 1fr',
-        }}
+        className="cfm-footer-inner mx-auto w-full"
+        style={{ maxWidth: 'var(--cfm-max-width, 48rem)' }}
       >
-        <div
-          className="space-y-3"
-          style={{
-            gridColumn: 'var(--cfm-footer-logo-col, 1)',
-            justifySelf: 'var(--cfm-footer-logo-justify, start)',
-          }}
-        >
+        {showLogo ? (
+          <div className="cfm-footer-logo-slot">
+            <img
+              data-cfm-footer-logo
+              data-cfm-logo
+              src={seedLogoSrc!}
+              alt=""
+              className="object-contain"
+              style={{
+                width: 'var(--cfm-footer-logo-width, 120px)',
+                height: 'var(--cfm-footer-logo-height, 32px)',
+              }}
+            />
+          </div>
+        ) : (
           <img
             data-cfm-footer-logo
             data-cfm-logo
-            src="./logo.svg"
+            src=""
             alt=""
-            style={{
-              display: 'none',
-              width: 'var(--cfm-footer-logo-width, 120px)',
-              height: 'var(--cfm-footer-logo-height, 32px)',
-              objectFit: 'contain',
-            }}
+            style={{ display: 'none' }}
           />
-          <p
-            data-cfm-copyright
-            className="text-xs"
-            style={{ color: 'var(--cfm-footer-text, #9ca3af)' }}
-          >
-            © Company
+        )}
+
+        {seedCopyright ? (
+          <p data-cfm-copyright className="cfm-footer-copyright text-xs">
+            {seedCopyright}
           </p>
-        </div>
+        ) : (
+          <p data-cfm-copyright className="cfm-footer-copyright text-xs" style={{ display: 'none' }} />
+        )}
 
-        <nav
-          data-cfm-footer-links
-          className="flex flex-wrap gap-x-6 gap-y-2 text-xs"
-          style={{
-            gridColumn: 'var(--cfm-footer-links-col, 3)',
-            justifySelf: 'var(--cfm-footer-links-justify, end)',
-          }}
-        >
-          <a
-            href="#"
-            className="transition-colors hover:opacity-80"
-            style={{ color: 'var(--cfm-footer-link, #9ca3af)' }}
-          >
-            Privacy
-          </a>
-        </nav>
+        {seedLinks.length > 0 ? (
+          <nav data-cfm-footer-links className="cfm-footer-links flex flex-wrap gap-x-6 gap-y-2 text-xs">
+            {seedLinks.map((link, i) => (
+              <a
+                key={`${link.label}-${i}`}
+                href={link.url || '#'}
+                className="cfm-footer-link transition-colors hover:opacity-80"
+              >
+                {link.label}
+              </a>
+            ))}
+          </nav>
+        ) : (
+          <nav data-cfm-footer-links className="cfm-footer-links" style={{ display: 'none' }} />
+        )}
       </div>
     </footer>
   );

package/templates/docs/templates/Header.tsx

@@ -26,26 +26,18 @@ export default function Header({ embedded = false }: HeaderProps) {
     <header
       className={`cfm-header relative w-full ${embedded ? '' : 'z-10 shadow-[0_2px_8px_rgba(0,0,0,0.06)]'}`}
       style={{
-        height: 'var(--cfm-header-height, 120px)',
         background: 'var(--cfm-header-bg, #fff)',
         borderBottom: '1px solid var(--cfm-header-border, #e5e7eb)',
         boxShadow: embedded ? undefined : 'var(--cfm-header-shadow, 0 2px 8px rgba(0,0,0,0.06))',
       }}
     >
       <div
-        className="cfm-header-inner grid h-full w-full items-center"
-        style={{
-          gridTemplateColumns: '1fr 1fr 1fr',
-          padding: `0 var(--cfm-header-padding-x, 40px)`,
-        }}
+        className="cfm-header-inner mx-auto w-full"
+        style={{ maxWidth: 'var(--cfm-max-width, 48rem)' }}
       >
         <div
           className="cfm-header-brand flex items-center"
-          style={{
-            gridColumn: 'var(--cfm-header-logo-col, 1)',
-            justifySelf: 'var(--cfm-header-logo-justify, start)',
-            gap: 'var(--cfm-header-brand-gap, 16px)',
-          }}
+          style={{ gap: 'var(--cfm-header-brand-gap, 16px)' }}
         >
           {hasLogoFile ? (
             <img
@@ -56,9 +48,9 @@ export default function Header({ embedded = false }: HeaderProps) {
               style={{
                 width: 'var(--cfm-header-logo-width, 120px)',
                 height: 'var(--cfm-header-logo-height, 120px)',
-                maxHeight: 'calc(var(--cfm-header-height, 120px) - 8px)',
                 padding: 'var(--cfm-header-logo-padding, 10px)',
                 background: 'transparent',
+                boxSizing: 'border-box',
               }}
             />
           ) : (
@@ -84,26 +76,19 @@ export default function Header({ embedded = false }: HeaderProps) {
             {seedCompany}
           </span>
 
-          <span
-            data-cfm-company
-            className="font-semibold"
-            style={{
-              display:
-                seedShowCompany && (hasLogoFile || seedCompany)
-                  ? hasLogoFile
-                    ? ''
-                    : 'none'
-                  : 'none',
-              marginTop: 'var(--cfm-header-company-margin-top, 0)',
-              marginLeft: 'var(--cfm-header-company-margin-left, 0)',
-              marginRight: 'var(--cfm-header-company-margin-right, 0)',
-              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>
+          {seedShowCompany && hasLogoFile && seedCompany ? (
+            <span
+              data-cfm-company
+              className="font-semibold"
+              style={{
+                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}
         </div>
       </div>
     </header>

package/templates/docs/templates/LikertMatrixScale.tsx

@@ -219,7 +219,7 @@ function LikertMatrixGridLayout({
                     position: 'absolute', left: leftPos, transform: 'translateX(-50%)',
                     bottom: 0, display: 'flex', justifyContent: 'center', whiteSpace: 'nowrap'
                   }}>
-                    <span style={{ fontSize: '13px', fontWeight: 600, color: '#111827' }}>{lbl}</span>
+                    <span style={{ fontSize: '13px', fontWeight: 600, ...matrixColumnLabelStyle() }}>{lbl}</span>
                   </div>
                 );
               })}
@@ -259,7 +259,7 @@ function LikertMatrixGridLayout({
               <div style={{
                 display: 'flex', alignItems: 'center', borderRadius: '8px',
                 padding: 'var(--cfm-matrix-cell-padding, 12px) 0',
-                ...(!repeatColumnHeaders ? matrixRowBackgroundStyle(rowIdx) : { backgroundColor: '#fff' }),
+                ...matrixRowBackgroundStyle(rowIdx),
                 boxSizing: 'border-box',
               }}>
                 <div style={{ flex: isBipolar ? `0 0 ${BIPOLAR_COL_WIDTH}` : `0 0 ${MATRIX_ROW_LABEL_WIDTH}`, padding: '0 16px', boxSizing: 'border-box' }}>

package/templates/docs/templates/SliderMatrixScale.tsx

@@ -88,9 +88,7 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
             >
               {labels.map((lbl, idx) => (
                 <div key={idx} style={{ width: 0, display: 'flex', justifyContent: 'center' }}>
-                  <span
-                    style={{ ...hintLabelStyle(), padding: '2px 8px', borderRadius: '4px', whiteSpace: 'nowrap' }}
-                  >
+                  <span style={hintLabelStyle()}>
                     {lbl}
                   </span>
                 </div>

package/templates/docs/templates/labelStyles.ts

@@ -4,30 +4,63 @@
  */
 import type { CSSProperties } from 'react';
 
-export function hintLabelStyle(): CSSProperties {
+type LabelPillScope = 'matrix' | 'csat' | 'rating' | 'hint' | 'sliderTick';
+
+const PILL_SCOPE_VARS: Record<LabelPillScope, { color: string; bg: string }> = {
+  matrix: {
+    color: '--cfm-matrix-column-label-color',
+    bg: '--cfm-matrix-column-label-bg',
+  },
+  csat: {
+    color: '--cfm-csat-column-label-color',
+    bg: '--cfm-csat-column-label-bg',
+  },
+  rating: {
+    color: '--cfm-rating-column-label-color',
+    bg: '--cfm-rating-column-label-bg',
+  },
+  hint: {
+    color: '--cfm-hint-label-color',
+    bg: '--cfm-hint-label-bg',
+  },
+  sliderTick: {
+    color: '--cfm-slider-tick-label-color',
+    bg: '--cfm-slider-tick-label-bg',
+  },
+};
+
+export function columnLabelPillStyle(scope: LabelPillScope): CSSProperties {
+  const vars = PILL_SCOPE_VARS[scope];
   return {
-    color: 'var(--cfm-hint-label-color, #6b7280)',
-    backgroundColor: 'var(--cfm-hint-label-bg, transparent)',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '4px 10px',
+    borderRadius: 'var(--cfm-border-radius, 6px)',
+    textAlign: 'center',
+    lineHeight: 1.2,
+    whiteSpace: 'nowrap',
+    color: `var(${vars.color}, #4b5563)`,
+    backgroundColor: `var(${vars.bg}, transparent)`,
   };
 }
 
+export function hintLabelStyle(): CSSProperties {
+  return columnLabelPillStyle('hint');
+}
+
 export function matrixColumnLabelStyle(): CSSProperties {
-  return {
-    color: 'var(--cfm-matrix-column-label-color, #4b5563)',
-    backgroundColor: 'var(--cfm-matrix-column-label-bg, transparent)',
-  };
+  return columnLabelPillStyle('matrix');
 }
 
 export function csatColumnLabelStyle(): CSSProperties {
-  return {
-    color: 'var(--cfm-csat-column-label-color, #4b5563)',
-    backgroundColor: 'var(--cfm-csat-column-label-bg, transparent)',
-  };
+  return columnLabelPillStyle('csat');
+}
+
+export function ratingColumnLabelStyle(): CSSProperties {
+  return columnLabelPillStyle('rating');
 }
 
 export function sliderTickLabelStyle(): CSSProperties {
-  return {
-    color: 'var(--cfm-slider-tick-label-color, #4b5563)',
-    backgroundColor: 'var(--cfm-slider-tick-label-bg, transparent)',
-  };
+  return columnLabelPillStyle('sliderTick');
 }

package/templates/docs/templates/surveyUiIcons.tsx

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

package/templates/survey-theme.css

@@ -25,10 +25,7 @@
   --cfm-header-company-weight: 600;
   --cfm-header-border: #e5e7eb;
   --cfm-header-padding-x: 40px;
-  --cfm-header-logo-col: 1;
-  --cfm-header-logo-justify: start;
-  --cfm-header-company-col: 1;
-  --cfm-header-company-justify: start;
+  --cfm-header-padding-y: 12px;
   --cfm-header-brand-gap: 16px;
   --cfm-header-company-margin-top: 0;
   --cfm-header-company-margin-left: 0;
@@ -42,6 +39,7 @@
   --cfm-footer-logo-height: 32px;
   --cfm-footer-padding-y: 24px;
   --cfm-footer-padding-x: 40px;
+  --cfm-footer-logo-copyright-gap: 12px;
   --cfm-footer-inner-display: grid;
   --cfm-footer-inner-direction: row;
   --cfm-footer-inner-align: end;
@@ -186,38 +184,21 @@ 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);
   padding-right: var(--cfm-header-padding-x);
-  padding-top: 12px;
-  padding-bottom: 12px;
+  padding-top: var(--cfm-header-padding-y, 12px);
+  padding-bottom: var(--cfm-header-padding-y, 12px);
   min-height: var(--cfm-header-height);
   box-sizing: border-box;
 }
 
-.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-company-slot {
-  grid-column: var(--cfm-header-company-col, 1);
-  grid-row: 1;
-  justify-self: var(--cfm-header-company-justify, start);
-  align-self: center;
-  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;
+.cfm-header-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--cfm-header-brand-gap, 16px);
 }
 
 .cfm-footer-inner {
@@ -236,7 +217,7 @@ body {
   justify-self: start;
   align-self: end;
   color: var(--cfm-footer-text);
-  margin: 0;
+  margin: var(--cfm-footer-logo-copyright-gap, 12px) 0 0;
 }
 
 .cfm-footer-logo-slot {

package/templates/wizard-dist/assets/{PreviewMock-_9SsNLwC.js → PreviewMock-CD4Euaen.js}

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

@@ -0,0 +1 @@
+import{u as m,j as e,T as R,S as C,R as d,C as i,N as t,a as z,M as A}from"./index-DWWkuRUU.js";import"./vendor-BwkXDkd3.js";function b({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 k({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 j({values:n,onPatch:r,count:a=11}){return e.jsxs("div",{className:"space-y-3",children:[e.jsx(C,{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:v=>{const u=[...n.individualNumberColors];u[h]=v,r({individualNumberColors:u})}},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=m(l=>l.config.questionTypes[n]),c=m(l=>l.updateQuestionType),h=m(l=>l.previewMultiStatementByType),v=m(l=>l.setPreviewMultiStatementForType),u=m(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),f=A.includes(n),y=!!h[n],x=r.includes("star"),g=r.includes("emoji"),T=r.includes("numbered"),w=r.includes("drag"),S=r.includes("dropdown"),M=r.includes("radio"),B=r==="CFM_bipolar",N=r.includes("graphics"),p=g||x||T||M,P=a.optionStyle??a.cardStyle??"outlined",L=a.buttonStyle??"numbered";return e.jsxs("div",{className:"space-y-4",children:[f&&e.jsx(R,{label:"Preview multiple statements",checked:y,onChange:l=>v(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(C,{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})}),P==="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(C,{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(k,{values:a,onPatch:o})}),L==="numbered"&&e.jsx(s,{title:"Number labels",children:e.jsx(j,{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(b,{values:a,onPatch:o})})]}),n==="CSAT_MATRIX"&&"emojiSize"in a&&e.jsxs(e.Fragment,{children:[(g||p||x)&&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}),x&&e.jsx(i,{label:"Star color",value:a.accentColor,onChange:l=>o({accentColor:l})}),p&&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 column header labels in the preview layout for this format."}),e.jsx(b,{values:a,onPatch:o})]}),N&&e.jsx(s,{title:"Graphics track",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Track color",value:a.graphicsTrackColor,onChange:l=>o({graphicsTrackColor:l})}),e.jsx(i,{label:"Thumb color",value:a.graphicsThumbColor,onChange:l=>o({graphicsThumbColor:l})})]})}),T&&e.jsx(s,{title:"Number labels",children:e.jsx(j,{values:a,onPatch:o,count:10})})]}),n==="RATING_MATRIX"&&"unselectedStarOpacity"in a&&e.jsxs(e.Fragment,{children:[(g||p||x)&&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}),x&&e.jsx(i,{label:"Star color",value:a.starColor,onChange:l=>o({starColor:l})}),p&&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(b,{values:a,onPatch:o})]}),N&&e.jsx(s,{title:"Graphics track",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Track color",value:a.graphicsTrackColor,onChange:l=>o({graphicsTrackColor:l})}),e.jsx(i,{label:"Thumb color",value:a.graphicsThumbColor,onChange:l=>o({graphicsThumbColor:l})})]})}),T&&e.jsx(s,{title:"Number labels",children:e.jsx(j,{values:a,onPatch:o,count:10})})]}),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(k,{values:a,onPatch:o})}),e.jsx(s,{title:"Tick label items",children:e.jsx(b,{values:a,onPatch:o})}),e.jsx(s,{title:"Tick number labels",children:e.jsx(j,{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(C,{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(u.x*100),"%, ",Math.round(u.y*100),"%"]})]})}),n==="RANK_ORDER"&&"drag"in a&&e.jsx(s,{title:w?"Drag & drop":S?"Dropdown rank":"Rank order",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[w&&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}})})]}),S&&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};