@explorer02/cfm-survey-sdk 0.2.5 → 0.2.7

package/templates/docs/index.md

@@ -29,7 +29,9 @@ templates/docs/
 ├── 00-integration/
 │   ├── agent-operating-contract.md ← Anti-hallucination — read FIRST
 │   ├── agent-execution-flow.md   ← Pipeline, client questions, wizard-ready build
+│   ├── wizard-customization-catalog.md  ← All wizard controls × types × formats
 │   ├── wizard-preview-build-guide.md
+│   ├── wizard-post-customize-build.md  ← Phase 6c — all formats + build gate
 │   ├── wizard-question-type-styling.md
 │   └── …
 ├── 01-components/                ← Wiring blueprints (per type from MANIFEST)
@@ -77,10 +79,10 @@ Full step-by-step: [`agent-execution-flow.md`](00-integration/agent-execution-fl
 | **2** Instance ID | Get JWT | `useSurveySDK.md` — **ask client** |
 | **3** SDK contract | Hook + logic | `client-integration-guide.md`, `question-type-sdk-matrix.md`, logic docs |
 | **4** Plan | Inventory + copy dispatcher | `component-checklist.md`, per-type MANIFEST docs, `implementation_plan.md` |
-| **5** Build | Wizard-ready UI | `constraints.md`, `wizard-preview-build-guide.md`, `wizard-question-type-styling.md`, `03-ui-specs/*` |
+| **5** Build | Wizard-ready UI | `wizard-customization-catalog.md`, `wizard-chrome-contract.md`, `wizard-preview-build-guide.md`, `wizard-question-type-styling.md`, `03-ui-specs/*` |
 | **6** Verify | Build + dev server | `verify-agent-build.sh` — **ask wizard** |
 | **6b** Wizard | Optional customize | **`npx cfm-sdk customize`** (default) — EC2 `customize-ui` only if client on another device |
-| **6c** Apply | Sync final config | `apply-ui-config.md` |
+| **6c** Apply | Sync final config | `wizard-post-customize-build.md`, `apply-ui-config.md` |
 | **7** Deploy | Production | **ask deploy** — `aws-deploy.md` or Vercel |
 
 **Auto-proceed:** Phase 4 → 5 and Phase 5 → 6 without waiting for approval.
@@ -101,7 +103,7 @@ Every agent build includes these even if the client later skips the wizard:
 | Scale components | `templates/*Scale*.tsx` etc. | `src/components/` per inventory |
 | Draft config | agent-written | `./survey-ui-config.json` |
 
-**Chrome:** `data-cfm-logo` / `data-cfm-logo-text`, `data-cfm-company`, `data-cfm-btn-next`, `data-cfm-btn-back`, `data-cfm-survey-title`, `data-cfm-thank-you` — see `wizard-preview-build-guide.md`.
+**Chrome:** copy `templates/docs/templates/Header.tsx` etc. — see `wizard-chrome-contract.md` for full hook list.
 
 **Selection pattern:** focus ring = outer border + inner dot; cell selected = annulus fill — see `wizard-question-type-styling.md`.
 
@@ -135,7 +137,7 @@ npx cfm-sdk customize   # DEFAULT — opens localhost:4200, WAITS until client s
 
 **Phase 6b:** Client on same machine → `customize` writes `survey-ui-config.json` directly. Remote client → `customize-ui` + EC2 link (see `wizard-troubleshooting.md`). Apply per `apply-ui-config.md`.
 
-**Phase 6c:** Apply from `survey-ui-config.final.json` per [`wizard-config-handoff.md`](00-integration/wizard-config-handoff.md) + [`apply-ui-config.md`](00-integration/apply-ui-config.md) — **every** diff path. Then:
+**Phase 6c:** Apply from `survey-ui-config.json` (local) or `.final.json` (EC2) per [`wizard-post-customize-build.md`](00-integration/wizard-post-customize-build.md) — all question types/formats + chrome — then [`apply-ui-config.md`](00-integration/apply-ui-config.md) for path tables. Then:
 
 ```bash
 npx cfm-sdk confirm-ui-config
@@ -152,9 +154,9 @@ Re-run verify script + build.
 | **Always first** | `agent-operating-contract.md`, `agent-execution-flow.md`, `mockup-ui-extraction.md`, `index.md`, `client-integration-guide.md`, `constraints.md` |
 | Phase 3 contract | `question-type-sdk-matrix.md`, `useSurveySDK.md`, logic/navigation docs |
 | Phase 4 plan | `mockup-ui-extraction.md`, `placeholders-and-custom-fields-wiring.md`, `component-checklist.md`, per-type `03-ui-specs/*` |
-| Wizard build | `wizard-preview-build-guide.md`, `wizard-question-type-styling.md` |
+| Wizard build | `wizard-customization-catalog.md`, `wizard-preview-build-guide.md`, `wizard-question-type-styling.md` |
 | Wizard run | `wizard-config-handoff.md`, `ui-customization-wizard.md`, `wizard-api.md`, `wizard-troubleshooting.md` |
-| After wizard (apply all paths) | `apply-ui-config.md` |
+| After wizard (apply all paths) | `wizard-post-customize-build.md`, `apply-ui-config.md` |
 | Deploy | `aws-deploy.md` (§ Logos & local assets), `setup.md#nextjs-aws-static-export` |
 | Config audit | `02-reference/config-field-index.md` |
 
@@ -170,4 +172,5 @@ Re-run verify script + build.
 | Hint labels | `--cfm-hint-label-*` | NPS min/max anchors |
 | Number labels | `--cfm-number-*` | Traffic-light badges (unselected only) |
 
-Full per-type table: [`wizard-question-type-styling.md`](00-integration/wizard-question-type-styling.md).
+Full per-type table: [`wizard-question-type-styling.md`](00-integration/wizard-question-type-styling.md).  
+Complete wizard control index (all formats): [`wizard-customization-catalog.md`](00-integration/wizard-customization-catalog.md).

package/templates/docs/templates/Footer.tsx

@@ -0,0 +1,72 @@
+/**
+ * Wizard-ready Footer — copy to src/components/Footer.tsx
+ * Required: footer.cfm-footer, data-cfm-copyright, data-cfm-footer-links, data-cfm-footer-logo
+ */
+'use client';
+
+export default function Footer() {
+  return (
+    <footer
+      className="cfm-footer w-full"
+      style={{
+        background: 'var(--cfm-footer-bg, #262626)',
+        color: 'var(--cfm-footer-text, #9ca3af)',
+        padding: 'var(--cfm-footer-padding-y, 24px) var(--cfm-footer-padding-x, 40px)',
+      }}
+    >
+      <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',
+        }}
+      >
+        <div
+          className="space-y-3"
+          style={{
+            gridColumn: 'var(--cfm-footer-logo-col, 1)',
+            justifySelf: 'var(--cfm-footer-logo-justify, start)',
+          }}
+        >
+          <img
+            data-cfm-footer-logo
+            data-cfm-logo
+            src="./logo.svg"
+            alt=""
+            style={{
+              display: 'none',
+              width: 'var(--cfm-footer-logo-width, 120px)',
+              height: 'var(--cfm-footer-logo-height, 32px)',
+              objectFit: 'contain',
+            }}
+          />
+          <p
+            data-cfm-copyright
+            className="text-xs"
+            style={{ color: 'var(--cfm-footer-text, #9ca3af)' }}
+          >
+            © Company
+          </p>
+        </div>
+
+        <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>
+      </div>
+    </footer>
+  );
+}

package/templates/docs/templates/Header.tsx

@@ -0,0 +1,110 @@
+/**
+ * Wizard-ready Header — copy to src/components/Header.tsx
+ *
+ * Brand row: [logo image] [company name] — company sits after logo when both exist.
+ * When no logo file: text fallback via data-cfm-logo-text (company name or empty).
+ *
+ * After wizard save, logo src MUST come from survey-ui-config.json global.logo.fileName
+ * via uiConfig.ts — never hardcode telekom-logo.svg or change fileName manually.
+ */
+'use client';
+
+import { getCompanyName, getLogoSrc, shouldShowCompanyName } from '@/lib/uiConfig';
+
+type HeaderProps = {
+  embedded?: boolean;
+};
+
+const seedCompany = getCompanyName();
+const seedLogoSrc = getLogoSrc({ staticExport: true });
+const seedShowCompany = shouldShowCompanyName();
+
+export default function Header({ embedded = false }: HeaderProps) {
+  const hasLogoFile = Boolean(seedLogoSrc);
+
+  return (
+    <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)`,
+        }}
+      >
+        <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)',
+          }}
+        >
+          {hasLogoFile ? (
+            <img
+              data-cfm-logo
+              src={seedLogoSrc!}
+              alt={seedCompany || 'Logo'}
+              className="shrink-0 object-contain"
+              style={{
+                width: 'var(--cfm-header-logo-width, 120px)',
+                height: 'var(--cfm-header-logo-height, 120px)',
+                padding: 'var(--cfm-header-logo-padding, 10px)',
+                background: 'var(--cfm-primary)',
+              }}
+            />
+          ) : (
+            <img
+              data-cfm-logo
+              src=""
+              alt="Logo"
+              className="shrink-0 object-contain"
+              style={{ display: 'none' }}
+            />
+          )}
+
+          <span
+            data-cfm-logo-text
+            className="font-semibold"
+            style={{
+              display: hasLogoFile ? 'none' : seedCompany ? '' : 'none',
+              color: 'var(--cfm-header-company-color, var(--cfm-text))',
+              fontSize: 'var(--cfm-header-company-size, 18px)',
+              fontWeight: 'var(--cfm-header-company-weight, 600)',
+            }}
+          >
+            {seedCompany}
+          </span>
+
+          <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>
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/docs/templates/LanguageSelector.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import type { SurveyLanguage } from '@explorer02/cfm-survey-sdk';
+
+type LanguageSelectorProps = {
+  languages: SurveyLanguage[];
+  selectedLanguage: string;
+  onChange: (language: string) => void;
+};
+
+/** Wizard toggle showLanguageSwitcher targets [data-cfm-language] */
+export default function LanguageSelector({
+  languages,
+  selectedLanguage,
+  onChange,
+}: LanguageSelectorProps) {
+  if (languages.length <= 1) return null;
+
+  return (
+    <div data-cfm-language className="mb-6 flex justify-end">
+      <select
+        value={selectedLanguage}
+        onChange={(e) => onChange(e.target.value)}
+        className="rounded border px-3 py-1.5 text-sm outline-none"
+        style={{
+          background: 'var(--cfm-language-bg, #fff)',
+          color: 'var(--cfm-language-text, #2563eb)',
+          borderColor: 'var(--cfm-language-border, #2563eb)',
+          borderRadius: 'var(--cfm-border-radius, 8px)',
+        }}
+      >
+        {languages.map((lang) => (
+          <option key={lang.code} value={lang.code}>
+            {lang.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

package/templates/docs/templates/PreviewBridgeInit.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { useEffect } from 'react';
+import { initPreviewBridge } from '@/lib/previewBridge';
+
+/** Mount once in root layout — enables localhost dev preview with npx cfm-sdk customize */
+export function PreviewBridgeInit() {
+  useEffect(() => {
+    const cleanup = initPreviewBridge();
+    return cleanup;
+  }, []);
+  return null;
+}

package/templates/docs/templates/ProgressBar.tsx

@@ -0,0 +1,33 @@
+/**
+ * Wizard-ready ProgressBar — copy to src/components/ProgressBar.tsx
+ * Required: data-cfm-progress + class cfm-progress (separate from header toggle)
+ */
+'use client';
+
+type ProgressBarProps = {
+  progressPercentage: number;
+};
+
+export default function ProgressBar({ progressPercentage }: ProgressBarProps) {
+  const width = Math.min(100, Math.max(0, progressPercentage));
+
+  return (
+    <div data-cfm-progress className="cfm-progress w-full">
+      <div
+        className="w-full overflow-hidden rounded-full"
+        style={{
+          height: 'var(--cfm-progress-height, 12px)',
+          background: 'var(--cfm-progress-track, #e5e7eb)',
+        }}
+      >
+        <div
+          className="h-full rounded-full transition-all duration-300 ease-out"
+          style={{
+            width: `${width}%`,
+            background: 'var(--cfm-progress-fill, var(--cfm-primary))',
+          }}
+        />
+      </div>
+    </div>
+  );
+}

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,19 @@ 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)',
+            color: 'var(--cfm-text)',
+          }}
         />
       )}
 

package/templates/docs/templates/RatingScale.tsx

@@ -1,4 +1,11 @@
+'use client';
+
 import type { AnswerValue, NpsScalePoint } from '@explorer02/cfm-survey-sdk';
+import {
+  scaleRadioRingStyle,
+  scaleRadioDotStyle,
+  scaleCellSelectedStyle,
+} from '@/lib/surveyUi/selectionStyles';
 import { getAccentColor, npsValueFromOption, starValueFromOption } from './surveyUiScaleUtils';
 import { getEmojiForIndex } from './surveyUiIcons';
 
@@ -11,6 +18,25 @@ type RatingScaleProps = {
   buttonStyle?: 'standard' | 'numbered' | 'emoji';
 };
 
+function resolveBadgeColor(index: number, value: number): string {
+  const mode = getComputedStyle(document.documentElement)
+    .getPropertyValue('--cfm-number-label-mode')
+    .trim();
+  if (mode === 'monochrome') {
+    return (
+      getComputedStyle(document.documentElement).getPropertyValue('--cfm-number-mono-color').trim() ||
+      'var(--cfm-primary)'
+    );
+  }
+  if (mode === 'individual') {
+    return (
+      getComputedStyle(document.documentElement).getPropertyValue(`--cfm-number-color-${index}`).trim() ||
+      getAccentColor(value)
+    );
+  }
+  return getAccentColor(value);
+}
+
 export default function RatingScale({
   questionId,
   options,
@@ -24,46 +50,33 @@ export default function RatingScale({
       variant === 'star'
         ? starValueFromOption(option, index)
         : npsValueFromOption(option as NpsScalePoint, index);
+    const numericValue = typeof value === 'number' ? value : index;
     const color =
-      variant === 'nps' && typeof value === 'number' ? getAccentColor(value) : '#e20074';
-    return {
-      id: option.id,
-      label: option.optionLabel,
-      value,
-      color,
-    };
+      variant === 'nps' ? resolveBadgeColor(index, numericValue) : 'var(--cfm-primary)';
+    return { id: option.id, label: option.optionLabel, value, color };
   });
 
   const columnCount = resolvedOptions.length;
   const gridStyle = {
     display: 'grid' as const,
     gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
-    gap: '2px',
+    gap: 'var(--cfm-nps-cell-gap, 2px)',
   };
 
   if (buttonStyle === 'emoji') {
     return (
-      <div role="radiogroup" className="w-full overflow-x-auto">
+      <div role="radiogroup" className="w-full overflow-x-auto" data-cfm-nps-area>
         <div className="min-w-0" style={gridStyle}>
           {resolvedOptions.map((option, index) => {
             const isSelected = selectedValue === option.value;
             return (
-              <label
-                key={`${questionId}-${option.value}`}
-                title={option.label}
-                className="flex cursor-pointer justify-center"
-              >
-                <input
-                  type="radio"
-                  name={questionId}
-                  checked={isSelected}
-                  onChange={() => onSelect(option.value)}
-                  className="sr-only"
-                />
+              <label key={`${questionId}-${option.value}`} title={option.label} className="flex cursor-pointer justify-center">
+                <input type="radio" name={questionId} checked={isSelected} onChange={() => onSelect(option.value)} className="sr-only" />
                 <div
-                  className={`flex h-10 w-10 sm:h-12 sm:w-12 items-center justify-center rounded-lg border-2 text-2xl transition-all ${
-                    isSelected ? 'border-[#e20074] bg-[#fdf2f8] shadow-md' : 'border-transparent'
-                  }`}
+                  style={{
+                    ...scaleRadioRingStyle(isSelected, { pill: false, size: 'var(--cfm-csat-emoji-size, 48px)' }),
+                    fontSize: 'var(--cfm-csat-emoji-size, 24px)',
+                  }}
                 >
                   {getEmojiForIndex(index, columnCount)}
                 </div>
@@ -76,48 +89,42 @@ export default function RatingScale({
   }
 
   return (
-    <div role="radiogroup" className="w-full overflow-x-auto">
+    <div role="radiogroup" className="w-full overflow-x-auto" data-cfm-nps-area>
       <div className="mb-3 min-w-0" style={gridStyle}>
-        {resolvedOptions.map(option => (
-          <div key={`${questionId}-badge-${option.value}`} className="flex justify-center">
-            <div
-              className="flex h-5 w-5 sm:h-6 sm:w-6 items-center justify-center rounded-[3px] text-[10px] sm:text-xs font-bold text-white shadow-sm"
-              style={{ backgroundColor: option.color }}
-              title={option.label}
-            >
-              {option.label}
+        {resolvedOptions.map((option, index) => {
+          const isSelected = selectedValue === option.value;
+          return (
+            <div key={`${questionId}-badge-${option.value}`} className="flex justify-center">
+              <div
+                className="flex items-center justify-center rounded-[3px] text-[10px] font-bold text-white shadow-sm sm:text-xs"
+                style={{
+                  width: 'var(--cfm-nps-cell-size, 24px)',
+                  height: 'var(--cfm-nps-cell-size, 24px)',
+                  ...(isSelected
+                    ? scaleCellSelectedStyle(true)
+                    : { backgroundColor: option.color }),
+                }}
+                title={option.label}
+              >
+                {option.label}
+              </div>
             </div>
-          </div>
-        ))}
+          );
+        })}
       </div>
 
-      <div className="relative w-full rounded-md bg-[#f2f2f2] px-1 py-2">
+      <div
+        className="relative w-full rounded-md px-1 py-2"
+        style={{ background: 'var(--cfm-nps-track-bar, #f2f2f2)' }}
+      >
         <div className="min-w-0" style={gridStyle}>
-          {resolvedOptions.map(option => {
+          {resolvedOptions.map((option) => {
             const isSelected = selectedValue === option.value;
             return (
-              <label
-                key={`${questionId}-${option.value}`}
-                title={option.label}
-                className="flex cursor-pointer justify-center"
-              >
-                <input
-                  type="radio"
-                  name={questionId}
-                  checked={isSelected}
-                  onChange={() => onSelect(option.value)}
-                  className="sr-only"
-                />
-                <div
-                  className={`flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-full border-2 transition-all ${
-                    isSelected ? 'border-[#e20074] bg-[#fbe8f3]' : 'border-transparent bg-white'
-                  }`}
-                >
-                  <div
-                    className={`h-3 w-3 sm:h-4 sm:w-4 rounded-full ${
-                      isSelected ? 'bg-[#e20074]' : 'bg-gray-300'
-                    }`}
-                  />
+              <label key={`${questionId}-${option.value}`} title={option.label} className="flex cursor-pointer justify-center">
+                <input type="radio" name={questionId} checked={isSelected} onChange={() => onSelect(option.value)} className="sr-only" />
+                <div style={scaleRadioRingStyle(isSelected, { size: 'var(--cfm-nps-cell-size, 40px)' })}>
+                  <div style={scaleRadioDotStyle(isSelected)} />
                 </div>
               </label>
             );

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>