@explorer02/cfm-survey-sdk 0.2.5 → 0.2.6

package/templates/docs/templates/Question.tsx

@@ -101,13 +101,35 @@ export default function Question({
   }, [question, allAnswers, allQuestions, customFieldValues]);
 
   return (
-    <section id={question.id} className="space-y-4 rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
-      <h2 className="text-lg font-medium leading-relaxed text-gray-900">
+    <section
+      id={question.id}
+      className="cfm-question-card space-y-4"
+      style={{
+        background: 'var(--cfm-card-bg, #fff)',
+        borderColor: 'var(--cfm-card-border-color, #e5e7eb)',
+        borderWidth: 1,
+        borderStyle: 'solid',
+        padding: 'var(--cfm-card-padding, 24px)',
+        boxShadow: 'var(--cfm-card-shadow, 0 1px 3px rgba(0,0,0,0.1))',
+        borderRadius: 'var(--cfm-border-radius, 12px)',
+        fontFamily: 'var(--cfm-font-family)',
+      }}
+    >
+      <h2
+        className="text-lg font-medium leading-relaxed"
+        style={{ color: 'var(--cfm-text, #111827)' }}
+      >
         {question.questionNumber != null && (
-          <span className="mr-1 font-semibold">{question.questionNumber}.</span>
+          <span data-cfm-question-number className="mr-1 font-semibold">
+            {question.questionNumber}.
+          </span>
         )}
         <span dangerouslySetInnerHTML={{ __html: displayQuestionText }} />
-        {question.required && <span className="text-red-500 ml-1">*</span>}
+        {question.required && (
+          <span data-cfm-required className="ml-1 text-red-500">
+            *
+          </span>
+        )}
       </h2>
       {displayQuestionDescription && (
         <div
@@ -182,7 +204,14 @@ export default function Question({
                 return (
                   <label
                     key={option.id}
-                    className={`flex items-center gap-4 rounded-lg border py-4 px-5 cursor-pointer transition-all ${isSelected ? 'border-[#e20074] bg-[#fdf2f8]' : 'border-[#e5e5e5] bg-white hover:bg-gray-50/50'}`}
+                    className="flex cursor-pointer items-center gap-4 transition-all"
+                    style={{
+                      borderRadius: 'var(--cfm-mcq-border-radius, 8px)',
+                      border: `2px solid ${isSelected ? 'var(--cfm-mcq-selected-accent, var(--cfm-primary))' : 'var(--cfm-card-border-color, #e5e7eb)'}`,
+                      background: isSelected ? 'var(--cfm-mcq-selected-bg, var(--cfm-secondary))' : 'var(--cfm-card-bg, #fff)',
+                      padding: 'var(--cfm-mcq-card-padding, 12px)',
+                      marginBottom: 'var(--cfm-mcq-option-gap, 8px)',
+                    }}
                   >
                     <input
                       type="checkbox"
@@ -211,7 +240,14 @@ export default function Question({
               return (
                 <label
                   key={option.id}
-                  className={`flex items-center gap-4 rounded-lg border py-4 px-5 cursor-pointer transition-all ${isSelected ? 'border-[#e20074] bg-[#fdf2f8]' : 'border-[#e5e5e5] bg-white hover:bg-gray-50/50'}`}
+                  className="flex cursor-pointer items-center gap-4 transition-all"
+                  style={{
+                    borderRadius: 'var(--cfm-mcq-border-radius, 8px)',
+                    border: `2px solid ${isSelected ? 'var(--cfm-mcq-selected-accent, var(--cfm-primary))' : 'var(--cfm-card-border-color, #e5e7eb)'}`,
+                    background: isSelected ? 'var(--cfm-mcq-selected-bg, var(--cfm-secondary))' : 'var(--cfm-card-bg, #fff)',
+                    padding: 'var(--cfm-mcq-card-padding, 12px)',
+                    marginBottom: 'var(--cfm-mcq-option-gap, 8px)',
+                  }}
                 >
                   <input
                     type="radio"
@@ -245,11 +281,18 @@ export default function Question({
 
       {question.type === QUESTION_TYPE.TEXTFIELD && (
         <textarea
+          data-cfm-textfield
           rows={question.inputVariant === 'long' ? 4 : 1}
           value={(selectedValue as string) ?? ''}
           onChange={e => onSelect(e.target.value)}
           placeholder={question.placeholder || 'Type your response here...'}
-          className="w-full rounded border border-gray-300 p-4 text-sm outline-none focus:border-[#e20074]"
+          className="w-full outline-none"
+          style={{
+            height: question.inputVariant === 'long' ? undefined : 'var(--cfm-input-height, 44px)',
+            borderRadius: 'var(--cfm-input-radius, 8px)',
+            border: '1px solid var(--cfm-input-border, #d1d5db)',
+            padding: 'var(--cfm-input-padding, 12px)',
+          }}
         />
       )}
 

package/templates/docs/templates/SurveyStickyChrome.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Header from '@/components/Header';
 import ProgressBar from '@/components/ProgressBar';
 
@@ -6,17 +8,29 @@ type SurveyStickyChromeProps = {
 };
 
 /**
- * Sticky top chrome: brand header + progress bar.
- * Keeps progress visible while scrolling long pages (e.g. last question below the fold).
+ * Sticky chrome — header and progress are SEPARATE targets for wizard layout toggles.
+ * - showHeader → .cfm-header only
+ * - showProgressBar → [data-cfm-progress] / .cfm-progress only
+ * Do NOT put cfm-header on this wrapper.
  */
 export default function SurveyStickyChrome({ progressPercentage }: SurveyStickyChromeProps) {
   return (
     <div
-      className="sticky top-0 z-30 shadow-[0_2px_8px_rgba(0,0,0,0.06)]"
-      style={{ background: 'var(--cfm-header-bg, #fff)' }}
+      className="cfm-sticky-chrome sticky top-0 z-30"
+      style={{
+        background: 'var(--cfm-header-bg, #fff)',
+        boxShadow: 'var(--cfm-header-shadow, 0 2px 8px rgba(0,0,0,0.06))',
+      }}
     >
       <Header embedded />
-      <div className="mx-auto w-full max-w-4xl px-4 pb-5 pt-4 sm:px-6 lg:px-8">
+      <div
+        className="mx-auto w-full px-4 sm:px-6 lg:px-8"
+        style={{
+          maxWidth: 'var(--cfm-max-width, 48rem)',
+          paddingTop: 'var(--cfm-sticky-pt, 16px)',
+          paddingBottom: 'var(--cfm-sticky-pb, 20px)',
+        }}
+      >
         <ProgressBar progressPercentage={progressPercentage} />
       </div>
     </div>

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

@@ -67,11 +67,35 @@ echo "OK: survey-ui-config.json present"
 
 CHROME_HOOKS=$(grep -rE "data-cfm-(logo|btn-next|survey-title)" src/ components/ app/ 2>/dev/null || true)
 if [ -z "$CHROME_HOOKS" ]; then
-  echo "FAIL: No data-cfm-* chrome hooks found — see wizard-preview-build-guide.md"
+  echo "FAIL: No data-cfm-* chrome hooks found — copy templates/docs/templates/Header.tsx etc.; see wizard-chrome-contract.md"
   exit 1
 fi
 echo "OK: data-cfm-* chrome hooks present"
 
+# Wizard layout toggle targets (each must exist for live preview toggles)
+for hook in "data-cfm-logo" "data-cfm-company" "data-cfm-progress" "cfm-footer" "data-cfm-question-number" "data-cfm-required"; do
+  FOUND=$(grep -rE "$hook" src/ components/ app/ 2>/dev/null || true)
+  if [ -z "$FOUND" ]; then
+    echo "FAIL: Missing wizard hook $hook — see wizard-chrome-contract.md"
+    exit 1
+  fi
+done
+echo "OK: wizard layout + branding hooks present"
+
+PREVIEW_BRIDGE=""
+for candidate in src/lib/previewBridge.ts lib/previewBridge.ts; do
+  if [ -f "$candidate" ]; then PREVIEW_BRIDGE="$candidate"; break; fi
+done
+if [ -z "$PREVIEW_BRIDGE" ]; then
+  echo "FAIL: src/lib/previewBridge.ts missing — copy from templates/previewBridge.ts"
+  exit 1
+fi
+if ! grep -q "layoutFlags" "$PREVIEW_BRIDGE"; then
+  echo "FAIL: previewBridge.ts outdated — re-copy from templates/previewBridge.ts (needs layoutFlags handler)"
+  exit 1
+fi
+echo "OK: previewBridge.ts present with layoutFlags"
+
 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

@@ -122,7 +122,7 @@
         setDisplay('[data-cfm-company]', flags.showCompanyName);
       }
       if (flags.showHeader !== undefined) {
-        setDisplay('.cfm-header, header.cfm-header, .sticky.top-0', flags.showHeader);
+        setDisplay('.cfm-header, header.cfm-header', flags.showHeader);
       }
       if (flags.showFooter !== undefined) {
         setDisplay('.cfm-footer, footer.cfm-footer', flags.showFooter);

package/templates/previewBridge.ts

@@ -1,8 +1,8 @@
 /**
  * Live preview bridge for cfm-sdk customize wizard.
- * Copy to src/lib/previewBridge.ts and import once in layout.tsx.
+ * Copy to src/lib/previewBridge.ts and import once via PreviewBridgeInit in layout.tsx.
  *
- * Supports SNAPSHOT (full state on tab load) and DELTA (rAF-batched partial updates).
+ * Must stay in sync with templates/preview-harness/preview-bridge.inline.js (injected into export-previews HTML).
  */
 export const PREVIEW_BRIDGE_SNAPSHOT = 'CFM_UI_CONFIG_SNAPSHOT';
 export const PREVIEW_BRIDGE_DELTA = 'CFM_UI_CONFIG_DELTA';
@@ -13,11 +13,14 @@ export interface ContentPatch {
   logoUrl?: string | null;
   surveyTitle?: string;
   companyName?: string;
+  browserTabTitle?: string;
   thankYouMessage?: string;
   buttonLabels?: { next?: string; back?: string; submit?: string };
   layoutFlags?: Record<string, boolean | string>;
   footerLinks?: { label: string; url: string }[];
   copyrightText?: string;
+  domAttributes?: Record<string, string>;
+  previewState?: Record<string, unknown>;
 }
 
 interface PreviewBridgePayload {
@@ -48,61 +51,147 @@ function queueCssVars(vars: Record<string, string>): void {
   }
 }
 
-function applyContentPatch(patch: ContentPatch): void {
+function applyCssVarsImmediate(vars: Record<string, string>): void {
   const root = document.documentElement;
+  for (const [key, value] of Object.entries(vars)) {
+    root.style.setProperty(key, value);
+  }
+}
+
+function setDisplay(selector: string, visible: boolean): void {
+  document.querySelectorAll(selector).forEach((el) => {
+    (el as HTMLElement).style.display = visible ? '' : 'none';
+  });
+}
+
+function applyContentPatch(patch: ContentPatch): void {
   if (patch.logoUrl !== undefined) {
-    root.dataset.cfmLogoUrl = patch.logoUrl ?? '';
-    document.querySelectorAll('[data-cfm-logo]').forEach((el) => {
+    document.querySelectorAll('[data-cfm-logo], header img, footer img').forEach((el) => {
       const img = el as HTMLImageElement;
       if (patch.logoUrl) {
         img.src = patch.logoUrl;
         img.style.display = '';
-      } else {
+      } else if (el.hasAttribute('data-cfm-logo')) {
         img.style.display = 'none';
       }
     });
+    document.querySelectorAll('[data-cfm-logo-text]').forEach((el) => {
+      const htmlEl = el as HTMLElement;
+      if (patch.logoUrl) {
+        htmlEl.style.display = 'none';
+      } else {
+        htmlEl.style.display = '';
+        htmlEl.classList.remove('hidden');
+      }
+    });
   }
+
   if (patch.companyName !== undefined) {
     document.querySelectorAll('[data-cfm-company]').forEach((el) => {
       el.textContent = patch.companyName ?? '';
     });
+    document.querySelectorAll('[data-cfm-logo-text]').forEach((el) => {
+      const logoImg = document.querySelector('[data-cfm-logo]') as HTMLImageElement | null;
+      const logoHidden = !logoImg || logoImg.style.display === 'none';
+      if (logoHidden) {
+        el.textContent = patch.companyName ?? el.textContent;
+      }
+    });
   }
+
   if (patch.surveyTitle !== undefined) {
     document.querySelectorAll('[data-cfm-survey-title]').forEach((el) => {
       el.textContent = patch.surveyTitle ?? '';
     });
   }
+
+  if (patch.browserTabTitle) {
+    document.title = patch.browserTabTitle;
+  }
+
   if (patch.thankYouMessage !== undefined) {
     document.querySelectorAll('[data-cfm-thank-you]').forEach((el) => {
       el.textContent = patch.thankYouMessage ?? '';
     });
   }
+
   if (patch.buttonLabels?.next) {
     document.querySelectorAll('[data-cfm-btn-next]').forEach((el) => {
       el.textContent = patch.buttonLabels!.next!;
     });
   }
+
   if (patch.buttonLabels?.back) {
     document.querySelectorAll('[data-cfm-btn-back]').forEach((el) => {
       el.textContent = patch.buttonLabels!.back!;
     });
   }
+
   if (patch.copyrightText !== undefined) {
     document.querySelectorAll('[data-cfm-copyright]').forEach((el) => {
       el.textContent = patch.copyrightText ?? '';
     });
   }
+
   if (patch.footerLinks) {
     const nav = document.querySelector('[data-cfm-footer-links]');
     if (nav) {
       nav.innerHTML = patch.footerLinks
         .map(
           (l) =>
-            `<a href="${l.url}" target="_blank" rel="noopener noreferrer" style="color:var(--cfm-footer-link)">${l.label}</a>`,
+            `<a href="${l.url}" class="cfm-footer-link" target="_blank" rel="noopener noreferrer" style="color:var(--cfm-footer-link)">${l.label}</a>`,
         )
         .join('');
     }
   }
+
+  if (patch.layoutFlags) {
+    const flags = patch.layoutFlags;
+    if (flags.showCompanyName !== undefined) {
+      setDisplay('[data-cfm-company]', Boolean(flags.showCompanyName));
+    }
+    if (flags.showHeader !== undefined) {
+      setDisplay('.cfm-header, header.cfm-header', Boolean(flags.showHeader));
+    }
+    if (flags.showFooter !== undefined) {
+      setDisplay('.cfm-footer, footer.cfm-footer', Boolean(flags.showFooter));
+    }
+    if (flags.showProgressBar !== undefined) {
+      setDisplay('.cfm-progress, [data-cfm-progress]', Boolean(flags.showProgressBar));
+    }
+    if (flags.showLanguageSwitcher !== undefined) {
+      setDisplay('[data-cfm-language]', Boolean(flags.showLanguageSwitcher));
+    }
+    if (flags.showNextButton !== undefined) {
+      setDisplay('[data-cfm-btn-next]', Boolean(flags.showNextButton));
+    }
+    if (flags.showBackButton !== undefined) {
+      setDisplay('[data-cfm-btn-back]', Boolean(flags.showBackButton));
+    }
+    if (flags.showQuestionNumbers !== undefined) {
+      setDisplay('[data-cfm-question-number]', Boolean(flags.showQuestionNumbers));
+    }
+    if (flags.showRequiredAsterisk !== undefined) {
+      setDisplay('[data-cfm-required]', Boolean(flags.showRequiredAsterisk));
+    }
+    if (flags.showFooterLogo !== undefined) {
+      setDisplay('[data-cfm-footer-logo]', Boolean(flags.showFooterLogo));
+    }
+  }
+
+  if (patch.domAttributes) {
+    const root = document.documentElement;
+    for (const [attr, value] of Object.entries(patch.domAttributes)) {
+      root.setAttribute(attr, value);
+    }
+  }
+
+  const placeholder = patch.previewState?.textfieldPlaceholder;
+  if (typeof placeholder === 'string') {
+    document.querySelectorAll('[data-cfm-textfield]').forEach((el) => {
+      el.setAttribute('placeholder', placeholder);
+    });
+  }
 }
 
 function setLiveEditMode(on: boolean): void {
@@ -111,43 +200,47 @@ function setLiveEditMode(on: boolean): void {
   document.documentElement.classList.toggle('cfm-live-edit', on);
 }
 
-export function initPreviewBridge(): () => void {
-  if (typeof window === 'undefined') return () => {};
+function handleMessage(event: MessageEvent<PreviewBridgePayload>): void {
+  const data = event.data;
+  if (!data?.type) return;
+  if (
+    data.type !== PREVIEW_BRIDGE_SNAPSHOT &&
+    data.type !== PREVIEW_BRIDGE_DELTA &&
+    data.type !== PREVIEW_BRIDGE_MESSAGE
+  ) {
+    return;
+  }
 
-  const handler = (event: MessageEvent<PreviewBridgePayload>) => {
-    const data = event.data;
-    if (!data?.type) return;
+  setLiveEditMode(true);
 
-    if (
-      data.type !== PREVIEW_BRIDGE_SNAPSHOT &&
-      data.type !== PREVIEW_BRIDGE_DELTA &&
-      data.type !== PREVIEW_BRIDGE_MESSAGE
-    ) {
-      return;
+  if (data.cssVars) {
+    if (data.type === PREVIEW_BRIDGE_DELTA) {
+      queueCssVars(data.cssVars);
+    } else {
+      applyCssVarsImmediate(data.cssVars);
     }
+  }
 
-    setLiveEditMode(true);
-
-    if (data.cssVars) {
-      if (data.type === PREVIEW_BRIDGE_DELTA) {
-        queueCssVars(data.cssVars);
-      } else {
-        applyCssVarsImmediate(data.cssVars);
-      }
-    }
+  if (data.contentPatch) {
+    applyContentPatch(data.contentPatch);
+  }
+}
 
-    if (data.contentPatch && data.type !== PREVIEW_BRIDGE_DELTA) {
-      applyContentPatch(data.contentPatch);
-    }
-  };
+export function initPreviewBridge(): () => void {
+  if (typeof window === 'undefined') return () => {};
 
-  window.addEventListener('message', handler);
-  return () => window.removeEventListener('message', handler);
-}
+  window.addEventListener('message', handleMessage);
 
-function applyCssVarsImmediate(vars: Record<string, string>): void {
-  const root = document.documentElement;
-  for (const [key, value] of Object.entries(vars)) {
-    root.style.setProperty(key, value);
+  let channel: BroadcastChannel | null = null;
+  try {
+    channel = new BroadcastChannel('cfm-wizard-preview');
+    channel.addEventListener('message', (event) => handleMessage(event as MessageEvent<PreviewBridgePayload>));
+  } catch {
+    /* BroadcastChannel unavailable */
   }
+
+  return () => {
+    window.removeEventListener('message', handleMessage);
+    channel?.close();
+  };
 }

package/templates/wizard-dist/assets/{PreviewMock-AoZdAEPZ.js → PreviewMock-7peNZK-z.js}

@@ -1 +1 @@
-import{u as x,j as e}from"./index-CWKdsJOp.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-DtZhNwPS.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-39FnbtvG.js → TypePanel-BxHnE3cm.js}

@@ -1 +1 @@
-import{u as g,j as e,T as f,S as j,R as u,N as t,C as i,a as M,M as L}from"./index-CWKdsJOp.js";import"./vendor-BwkXDkd3.js";function b({values:o,onPatch:r}){return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Label text color",value:o.columnLabelColor,onChange:a=>r({columnLabelColor:a})}),e.jsx(i,{label:"Label background",value:o.columnLabelBgColor,onChange:a=>r({columnLabelBgColor:a})})]})}function P({values:o,onPatch:r}){return e.jsxs("div",{className:"grid grid-cols-1 gap-3 sm:grid-cols-2",children:[e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Min hint label"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:o.hintMinText,onChange:a=>r({hintMinText:a.target.value})})]}),e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Max hint label"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:o.hintMaxText,onChange:a=>r({hintMaxText:a.target.value})})]}),e.jsx(i,{label:"Hint text color",value:o.hintLabelColor,onChange:a=>r({hintLabelColor:a})}),e.jsx(i,{label:"Hint label background",value:o.hintLabelBgColor,onChange:a=>r({hintLabelBgColor:a})})]})}function p({values:o,onPatch:r,count:a=11}){return e.jsxs("div",{className:"space-y-3",children:[e.jsx(j,{label:"Number label style",value:o.numberLabelMode,onChange:d=>r({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(i,{label:"Monochrome color",value:o.monochromeNumberColor,onChange:d=>r({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(i,{label:`#${c}`,value:o.individualNumberColors[c]??"#9CA3AF",onChange:C=>{const x=[...o.individualNumberColors];x[c]=C,r({individualNumberColors:x})}},c))})]})}function s({title:o,children:r}){return e.jsxs("div",{className:"space-y-3 rounded-xl border border-white/5 bg-slate-950/20 p-4",children:[e.jsx("h4",{className:"text-xs font-semibold uppercase tracking-wider text-slate-400",children:o}),r]})}function B({type:o,activeFormat:r}){const a=g(l=>l.config.questionTypes[o]),d=g(l=>l.updateQuestionType),c=g(l=>l.previewMultiStatement),C=g(l=>l.setPreviewMultiStatement),x=g(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=L.includes(o),T=r.includes("star"),h=r.includes("emoji"),v=r.includes("numbered"),N=r.includes("drag"),w=r.includes("dropdown"),k=r.includes("radio"),m=h||T||v||k;return e.jsxs("div",{className:"space-y-4",children:[S&&e.jsx(f,{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(i,{label:"Border color",value:a.borderColor,onChange:l=>n({borderColor:l})}),e.jsx(i,{label:"Placeholder color",value:a.placeholderColor,onChange:l=>n({placeholderColor:l})})]})}),o==="NPS_SCALE"&&"buttonStyle"in a&&e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"NPS buttons",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",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(i,{label:"Selected fill",value:a.selectedFill,onChange:l=>n({selectedFill:l})}),e.jsx(i,{label:"Track bar",value:a.trackBarColor,onChange:l=>n({trackBarColor:l})}),e.jsx(i,{label:"Track highlight",value:a.trackHighlightColor,onChange:l=>n({trackHighlightColor:l})})]})}),e.jsx(s,{title:"Hint labels",children:e.jsx(P,{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||m)&&e.jsxs(s,{title:`${M.CSAT_MATRIX} — ${r.replace("CSAT_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[h&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>n({emojiSize:l}),min:16,max:40}),m&&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||m)&&e.jsxs(s,{title:`Rating — ${r.replace("RATING_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[h&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>n({emojiSize:l}),min:16,max:40}),m&&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(i,{label:"Track",value:a.trackColor,onChange:l=>n({trackColor:l})}),e.jsx(i,{label:"Thumb",value:a.thumbColor,onChange:l=>n({thumbColor:l})}),e.jsx(i,{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(i,{label:"Border color",value:a.borderColor??a.accentColor,onChange:l=>n({borderColor:l})}),e.jsx(i,{label:"Fill color",value:a.dropzoneFillColor,onChange:l=>n({dropzoneFillColor:l})}),e.jsx(t,{label:"Padding (px)",value:a.dropzonePadding,onChange:l=>n({dropzonePadding:l}),min:12,max:48})]})}),o==="HEATMAP"&&"pinColor"in a&&e.jsx(s,{title:"Heatmap pin",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Pin color",value:a.pinColor,onChange:l=>n({pinColor:l})}),e.jsx(i,{label:"Pin border",value:a.pinBorderColor,onChange:l=>n({pinBorderColor:l})}),e.jsx(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(i,{label:"Item background",value:a.drag.itemBg,onChange:l=>n({drag:{...a.drag,itemBg:l}})}),e.jsx(i,{label:"Drag handle",value:a.drag.dragHandleColor,onChange:l=>n({drag:{...a.drag,dragHandleColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>n({drag:{...a.drag,rankBadgeColor:l}})})]}),w&&e.jsxs(e.Fragment,{children:[e.jsx(i,{label:"Item background",value:a.dropdown.itemBg,onChange:l=>n({dropdown:{...a.dropdown,itemBg:l}})}),e.jsx(i,{label:"Select border",value:a.dropdown.selectBorderColor,onChange:l=>n({dropdown:{...a.dropdown,selectBorderColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.dropdown.rankBadgeColor,onChange:l=>n({dropdown:{...a.dropdown,rankBadgeColor:l}})})]})]})})]})}export{B as TypePanel};
+import{u as g,j as e,T as f,S as j,R as u,N as t,C as i,a as M,M as L}from"./index-DtZhNwPS.js";import"./vendor-BwkXDkd3.js";function b({values:o,onPatch:r}){return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Label text color",value:o.columnLabelColor,onChange:a=>r({columnLabelColor:a})}),e.jsx(i,{label:"Label background",value:o.columnLabelBgColor,onChange:a=>r({columnLabelBgColor:a})})]})}function P({values:o,onPatch:r}){return e.jsxs("div",{className:"grid grid-cols-1 gap-3 sm:grid-cols-2",children:[e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Min hint label"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:o.hintMinText,onChange:a=>r({hintMinText:a.target.value})})]}),e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Max hint label"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:o.hintMaxText,onChange:a=>r({hintMaxText:a.target.value})})]}),e.jsx(i,{label:"Hint text color",value:o.hintLabelColor,onChange:a=>r({hintLabelColor:a})}),e.jsx(i,{label:"Hint label background",value:o.hintLabelBgColor,onChange:a=>r({hintLabelBgColor:a})})]})}function p({values:o,onPatch:r,count:a=11}){return e.jsxs("div",{className:"space-y-3",children:[e.jsx(j,{label:"Number label style",value:o.numberLabelMode,onChange:d=>r({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(i,{label:"Monochrome color",value:o.monochromeNumberColor,onChange:d=>r({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(i,{label:`#${c}`,value:o.individualNumberColors[c]??"#9CA3AF",onChange:C=>{const x=[...o.individualNumberColors];x[c]=C,r({individualNumberColors:x})}},c))})]})}function s({title:o,children:r}){return e.jsxs("div",{className:"space-y-3 rounded-xl border border-white/5 bg-slate-950/20 p-4",children:[e.jsx("h4",{className:"text-xs font-semibold uppercase tracking-wider text-slate-400",children:o}),r]})}function B({type:o,activeFormat:r}){const a=g(l=>l.config.questionTypes[o]),d=g(l=>l.updateQuestionType),c=g(l=>l.previewMultiStatement),C=g(l=>l.setPreviewMultiStatement),x=g(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=L.includes(o),T=r.includes("star"),h=r.includes("emoji"),v=r.includes("numbered"),N=r.includes("drag"),w=r.includes("dropdown"),k=r.includes("radio"),m=h||T||v||k;return e.jsxs("div",{className:"space-y-4",children:[S&&e.jsx(f,{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(i,{label:"Border color",value:a.borderColor,onChange:l=>n({borderColor:l})}),e.jsx(i,{label:"Placeholder color",value:a.placeholderColor,onChange:l=>n({placeholderColor:l})})]})}),o==="NPS_SCALE"&&"buttonStyle"in a&&e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"NPS buttons",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",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(i,{label:"Selected fill",value:a.selectedFill,onChange:l=>n({selectedFill:l})}),e.jsx(i,{label:"Track bar",value:a.trackBarColor,onChange:l=>n({trackBarColor:l})}),e.jsx(i,{label:"Track highlight",value:a.trackHighlightColor,onChange:l=>n({trackHighlightColor:l})})]})}),e.jsx(s,{title:"Hint labels",children:e.jsx(P,{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||m)&&e.jsxs(s,{title:`${M.CSAT_MATRIX} — ${r.replace("CSAT_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[h&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>n({emojiSize:l}),min:16,max:40}),m&&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||m)&&e.jsxs(s,{title:`Rating — ${r.replace("RATING_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[h&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>n({emojiSize:l}),min:16,max:40}),m&&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(i,{label:"Track",value:a.trackColor,onChange:l=>n({trackColor:l})}),e.jsx(i,{label:"Thumb",value:a.thumbColor,onChange:l=>n({thumbColor:l})}),e.jsx(i,{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(i,{label:"Border color",value:a.borderColor??a.accentColor,onChange:l=>n({borderColor:l})}),e.jsx(i,{label:"Fill color",value:a.dropzoneFillColor,onChange:l=>n({dropzoneFillColor:l})}),e.jsx(t,{label:"Padding (px)",value:a.dropzonePadding,onChange:l=>n({dropzonePadding:l}),min:12,max:48})]})}),o==="HEATMAP"&&"pinColor"in a&&e.jsx(s,{title:"Heatmap pin",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Pin color",value:a.pinColor,onChange:l=>n({pinColor:l})}),e.jsx(i,{label:"Pin border",value:a.pinBorderColor,onChange:l=>n({pinBorderColor:l})}),e.jsx(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(i,{label:"Item background",value:a.drag.itemBg,onChange:l=>n({drag:{...a.drag,itemBg:l}})}),e.jsx(i,{label:"Drag handle",value:a.drag.dragHandleColor,onChange:l=>n({drag:{...a.drag,dragHandleColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>n({drag:{...a.drag,rankBadgeColor:l}})})]}),w&&e.jsxs(e.Fragment,{children:[e.jsx(i,{label:"Item background",value:a.dropdown.itemBg,onChange:l=>n({dropdown:{...a.dropdown,itemBg:l}})}),e.jsx(i,{label:"Select border",value:a.dropdown.selectBorderColor,onChange:l=>n({dropdown:{...a.dropdown,selectBorderColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.dropdown.rankBadgeColor,onChange:l=>n({dropdown:{...a.dropdown,rankBadgeColor:l}})})]})]})})]})}export{B as TypePanel};