@explorer02/cfm-survey-sdk 0.3.0 → 0.3.1

package/package.json

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

package/templates/docs/00-integration/client-lib-folder.md

@@ -81,6 +81,7 @@ Exports used by portable scale templates:
 | `tickColorFromIndex(index, total)` | SLIDER_MATRIX header tick badge colors |
 | `matrixColumnStoredValue(col)` | Matrix answer storage — column `id` or `null` for N/A |
 | `npsValueFromOption` / `starValueFromOption` | NPS badge numeric values |
+| `isScaleAnswerSelected` | NPS/star `checked` state — loose number compare |
 | `nonNaScaleColumns` | Filter N/A column from scale columns |
 
 Prefer SDK `matrixColumnStoredValue` when importing from package; template re-exports the same contract for co-located components.

package/templates/docs/00-integration/wizard-chrome-contract.md

@@ -22,7 +22,8 @@ Pipeline: [`wizard-preview-build-guide.md`](wizard-preview-build-guide.md) · [`
 | Scale selection colors not updating | Import `selectionStyles.ts`; use `var(--cfm-matrix-selected)` / `var(--cfm-input-focus-ring)` |
 | Company name not showing after logo | Copy `Header.tsx` template — brand row is `[logo][data-cfm-company]` in one flex container |
 | Company shows when empty | Bridge clears `[data-cfm-company]` when `companyName` is `""` — do not hardcode "Company Name" as visible default |
-| NPS colors / rings not updating | Copy `RatingScale.tsx` + `selectionStyles.ts` — no hardcoded `#e20074` |
+| NPS clicks do nothing / no visible selection before wizard | Copy latest `RatingScale.tsx` + `selectionStyles.ts` + `surveyUiScaleUtils.ts`; use `isScaleAnswerSelected()`; radio track row must use `label` + `onChange` → `onSelect(number)` — see `03-ui-specs/01-rating.md` |
+| NPS colors / rings not updating | Copy `RatingScale.tsx` + `selectionStyles.ts` — hex fallbacks in `selectionStyles.ts` for pre-theme builds |
 | Text placeholder color not updating | `data-cfm-textfield` + `--cfm-input-placeholder` in CSS / `::placeholder` rule |
 | Matrix 2nd row toggle | Harness adds row via `previewMultiStatement` — `LikertMatrixScale` must render all `statementRows` from props |
 | Blank page after deploy | **Never** reference `UI_CONFIG` without import — use `src/lib/uiConfig.ts` |

package/templates/docs/00-integration/wizard-preview-build-guide.md

@@ -50,6 +50,23 @@ If components use **hardcoded** colors (`bg-[#e20074]`) with no `var(--cfm-*)` h
 
 **Default for production wizard:** agent components. Use templates-only for SDK smoke tests, not client delivery.
 
+### Wizard static preview vs production survey
+
+During `npx cfm-sdk customize`, the right panel loads **SDK static HTML** from `preview-harness/previewPages.js` — not your React tree. Layout matches the original survey-page mock; **customization** is driven by `--cfm-*` CSS vars + `preview-bridge.inline.js`.
+
+| Wizard control | Static preview (iframe) | Production survey (after Phase 6c) |
+|----------------|-------------------------|-------------------------------------|
+| NPS hints + number labels | Hint text + badge colors via bridge | Copy `RatingScale.tsx` + `Question.tsx` hint row |
+| Matrix multi-row toggle | Shows/hides `[data-cfm-matrix-row-extra]` | `LikertMatrixScale` maps all `statementRows` |
+| Matrix row width + label items | `--cfm-matrix-row-width`, column label vars | `LikertMatrixScale` + `labelStyles.ts` |
+| CSAT/Rating star/numbered/radio | Theme focus ring + cell selected on mock cells | `CsatMatrixScale.tsx` + `selectionStyles.ts` |
+| Slider track + tick labels | `--cfm-slider-*` on static slider mock | `SliderMatrixScale` + `CustomSliderTrack` |
+| File upload dropzone | `--cfm-upload-*` on `.cfm-dropzone` | `FileUploadScale.tsx` |
+| Rank / heatmap | `--cfm-rank-*` / `--cfm-heatmap-pin-*` | `RankOrderScale.tsx` / `HeatmapScale.tsx` |
+| Logo size slider | `--cfm-header-logo-width/height` + `max-height` in header | `Header.tsx` via `uiConfig.ts` |
+
+**Rule:** If a wizard control updates the static preview but not localhost dev, the agent has not copied the matching template from `docs/templates/` — see [`wizard-chrome-contract.md`](wizard-chrome-contract.md).
+
 ---
 
 ## Required project artifacts (Phase 5)

package/templates/docs/01-components/03-rating-scale.md

@@ -21,9 +21,14 @@ Render a horizontal sequence of numbered badges with traffic-light colors (NPS 0
 ## UI/UX Rules (CRITICAL)
 
 1. **Shape**: Square badges with rounded corners — not full circles
-2. **Unselected State**: Dim unselected when any item selected (`opacity-30`)
-3. **Selected State**: `border-2 border-[#e20074] shadow-md scale-105`
-4. **Tooltips**: `title={option.label}` on every badge
+2. **Interactive row**: Only the **radio track row** accepts clicks (`label` + hidden `input type="radio"`)
+3. **Selection compare**: Use `isScaleAnswerSelected(selectedValue, optionValue)` — store/compare **numbers**, not option ids
+4. **Unselected State**: Gray ring (`#d1d5db`) + white fill on track row
+5. **Selected State**: Focus ring `#e20074` (or `--cfm-input-focus-ring`) + annulus `#fbe8f3` (or `--cfm-matrix-selected`) + filled dot
+6. **Tooltips**: `title={option.label}` on every clickable cell
+7. **`buttonStyle: 'standard'`**: Radio track only — omit numbered badge row
+
+Reference implementation: [`apps/client/src/components/RatingScale.tsx`](../../../../apps/client/src/components/RatingScale.tsx)
 
 ## SDK Integration Checklist (agent)
 

package/templates/docs/02-reference/value-derivation.md

@@ -39,6 +39,8 @@ function npsValueFromOption(option: NpsScalePoint, index: number): number {
 
 NPS questions use `question.type === 'NPS_SCALE'`. Store a **number** in `SurveyAnswers`. Badge colors: traffic-light table keyed by numeric value (0–10).
 
+Compare selection with `isScaleAnswerSelected(selectedValue, npsValueFromOption(option, index))` — do not compare to `option.id`.
+
 ## MCQ
 
 - Selected answer: **`option.id`** (string), not a separate `optionValue` field

package/templates/docs/03-ui-specs/01-rating.md

@@ -31,11 +31,22 @@ When `reverseScaleOrder === true`, map visual index `i` to stored index `options
 ## Answer Mutation
 
 ```typescript
+import { isScaleAnswerSelected, npsValueFromOption } from '@/lib/surveyUiScaleUtils';
+
 const value = npsValueFromOption(option, index);
-onSelect(value) // number
+onSelect(value); // number — never option.id
 // → onAction CHANGE { questionId, answerValue: number }
+
+// Compare stored answer to option value (handles string/number drift):
+const isSelected = isScaleAnswerSelected(selectedValue, value);
 ```
 
+**Selection row (required):** Only the **radio track row** is interactive — use `<label>` + hidden `<input type="radio">` + `onChange={() => onSelect(option.value)}`. Mirror [`apps/client/src/components/RatingScale.tsx`](../../../../apps/client/src/components/RatingScale.tsx) (reference monorepo).
+
+**Pre-customization defaults:** Copy `selectionStyles.ts` with `#e20074` / `#fbe8f3` hex fallbacks so selected rings are visible before `survey-theme.css` loads. Import `survey-theme.css` in `globals.css` for full wizard tokens.
+
+**`buttonStyle`:** `standard` = radio track only (no numbered badge row). `numbered` = badge row + track. `emoji` = emoji cells.
+
 See [`02-reference/value-derivation.md`](../02-reference/value-derivation.md).
 
 ## Agent Checklist
@@ -59,6 +70,9 @@ See [`02-reference/value-derivation.md`](../02-reference/value-derivation.md).
 ### Wizard checklist
 
 - [ ] `selectionStyles.ts` imported in `RatingScale.tsx`
+- [ ] `isScaleAnswerSelected()` used for `checked` state — not raw `===` on `selectedValue`
+- [ ] Radio track: `label` + `sr-only` radio + `onChange` → `onSelect(number)` (see client `RatingScale.tsx`)
 - [ ] Selected radio: outer border + dot = focus ring; annulus = cell selected
 - [ ] Selected numbered badge: border = focus ring, fill = cell selected, text white
 - [ ] Unselected badges keep traffic-light / per-number `--cfm-number-*` colors
+- [ ] `buttonStyle: 'standard'` hides badge row; track row remains clickable

package/templates/docs/templates/Header.tsx

@@ -56,6 +56,7 @@ 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',
               }}

package/templates/docs/templates/RatingScale.tsx

@@ -6,7 +6,12 @@ import {
   scaleRadioDotStyle,
   scaleCellSelectedStyle,
 } from '@/lib/surveyUi/selectionStyles';
-import { getAccentColor, npsValueFromOption, starValueFromOption } from './surveyUiScaleUtils';
+import {
+  getAccentColor,
+  isScaleAnswerSelected,
+  npsValueFromOption,
+  starValueFromOption,
+} from './surveyUiScaleUtils';
 import { getEmojiForIndex } from './surveyUiIcons';
 
 type RatingScaleProps = {
@@ -19,18 +24,18 @@ type RatingScaleProps = {
 };
 
 function resolveBadgeColor(index: number, value: number): string {
-  const mode = getComputedStyle(document.documentElement)
-    .getPropertyValue('--cfm-number-label-mode')
-    .trim();
+  if (typeof document === 'undefined') return getAccentColor(value);
+
+  const root = document.documentElement;
+  const mode = getComputedStyle(root).getPropertyValue('--cfm-number-label-mode').trim();
   if (mode === 'monochrome') {
     return (
-      getComputedStyle(document.documentElement).getPropertyValue('--cfm-number-mono-color').trim() ||
-      'var(--cfm-primary)'
+      getComputedStyle(root).getPropertyValue('--cfm-number-mono-color').trim() || getAccentColor(value)
     );
   }
   if (mode === 'individual') {
     return (
-      getComputedStyle(document.documentElement).getPropertyValue(`--cfm-number-color-${index}`).trim() ||
+      getComputedStyle(root).getPropertyValue(`--cfm-number-color-${index}`).trim() ||
       getAccentColor(value)
     );
   }
@@ -52,7 +57,7 @@ export default function RatingScale({
         : npsValueFromOption(option as NpsScalePoint, index);
     const numericValue = typeof value === 'number' ? value : index;
     const color =
-      variant === 'nps' ? resolveBadgeColor(index, numericValue) : 'var(--cfm-primary)';
+      variant === 'nps' ? resolveBadgeColor(index, numericValue) : 'var(--cfm-primary, #e20074)';
     return { id: option.id, label: option.optionLabel, value, color };
   });
 
@@ -62,19 +67,33 @@ export default function RatingScale({
     gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
     gap: 'var(--cfm-nps-cell-gap, 2px)',
   };
+  const showNumberBadges = buttonStyle !== 'standard';
 
   if (buttonStyle === 'emoji') {
     return (
       <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;
+            const isSelected = isScaleAnswerSelected(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
                   style={{
-                    ...scaleRadioRingStyle(isSelected, { pill: false, size: 'var(--cfm-csat-emoji-size, 48px)' }),
+                    ...scaleRadioRingStyle(isSelected, {
+                      pill: false,
+                      size: 'var(--cfm-csat-emoji-size, 48px)',
+                    }),
                     fontSize: 'var(--cfm-csat-emoji-size, 24px)',
                   }}
                 >
@@ -90,28 +109,30 @@ export default function RatingScale({
 
   return (
     <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, 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}
+      {showNumberBadges && (
+        <div className="mb-3 min-w-0" style={gridStyle}>
+          {resolvedOptions.map((option) => {
+            const isSelected = isScaleAnswerSelected(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>
+      )}
 
       <div
         className="relative w-full rounded-md px-1 py-2"
@@ -119,11 +140,26 @@ export default function RatingScale({
       >
         <div className="min-w-0" style={gridStyle}>
           {resolvedOptions.map((option) => {
-            const isSelected = selectedValue === option.value;
+            const isSelected = isScaleAnswerSelected(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 style={scaleRadioRingStyle(isSelected, { size: 'var(--cfm-nps-cell-size, 40px)' })}>
+              <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 items-center justify-center rounded-full border-2 transition-all"
+                  style={scaleRadioRingStyle(isSelected, {
+                    size: 'var(--cfm-nps-cell-size, 40px)',
+                  })}
+                >
                   <div style={scaleRadioDotStyle(isSelected)} />
                 </div>
               </label>

package/templates/docs/templates/selectionStyles.ts

@@ -8,8 +8,9 @@
  */
 import type { CSSProperties } from 'react';
 
-export const cellSelectedVar = 'var(--cfm-matrix-selected, var(--cfm-primary))';
-export const focusRingVar = 'var(--cfm-input-focus-ring, var(--cfm-primary))';
+/** Terminal hex fallbacks match apps/client RatingScale — visible before survey-theme.css loads. */
+export const cellSelectedVar = 'var(--cfm-matrix-selected, var(--cfm-primary, #fbe8f3))';
+export const focusRingVar = 'var(--cfm-input-focus-ring, var(--cfm-primary, #e20074))';
 
 const unselectedRing = '#d1d5db';
 const unselectedDot = '#d1d5db';

package/templates/docs/templates/surveyUiScaleUtils.ts

@@ -1,7 +1,7 @@
 /**
  * Portable scale utilities — copy to src/lib/surveyUiScaleUtils.ts or co-locate with components.
  */
-import type { NpsScalePoint, ScaleColumn } from '@explorer02/cfm-survey-sdk';
+import type { AnswerValue, NpsScalePoint, ScaleColumn } from '@explorer02/cfm-survey-sdk';
 
 export const SCALE_COLORS: readonly string[] = [
   '#e2001a', '#e4251b', '#ec610a', '#f18b00', '#f7b200', '#fcd900',
@@ -32,6 +32,20 @@ export function npsValueFromOption(option: NpsScalePoint, index: number): number
   return Number.isFinite(numeric) && option.optionLabel.trim() !== '' ? numeric : index;
 }
 
+/** Loose match for NPS/star stored answers (number) vs derived option values. */
+export function isScaleAnswerSelected(
+  selectedValue: AnswerValue | undefined,
+  optionValue: number,
+): boolean {
+  if (selectedValue === undefined || selectedValue === null) return false;
+  if (typeof selectedValue === 'number') return selectedValue === optionValue;
+  if (typeof selectedValue === 'string') {
+    const parsed = Number(selectedValue);
+    return Number.isFinite(parsed) && parsed === optionValue;
+  }
+  return false;
+}
+
 /** Matches SDK matrixColumnStoredValue — scale-matrix answers store column ids. */
 export function matrixColumnStoredValue(column: { id: string; label: string }): string | null {
   return column.id === 'na' ? null : column.id;

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

@@ -17,6 +17,7 @@
         delete pending[k];
       }
     }
+    applyThemeSideEffects();
   }
 
   function queue(vars) {
@@ -33,6 +34,7 @@
         root.style.setProperty(k, vars[k]);
       }
     }
+    applyThemeSideEffects();
   }
 
   function setDisplay(selector, visible) {
@@ -41,6 +43,44 @@
     });
   }
 
+  var TRAFFIC = ['#ef4444', '#f97316', '#eab308', '#84cc16', '#22c55e', '#14b8a6', '#06b6d4', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7'];
+
+  function readVar(name, fallback) {
+    return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+  }
+
+  function applyNumberBadgeColors() {
+    var mode = readVar('--cfm-number-label-mode', 'traffic');
+    var mono = readVar('--cfm-number-mono-color', '#9ca3af');
+    document.querySelectorAll('[data-cfm-number-badge]').forEach(function (el) {
+      if (el.classList.contains('selected')) return;
+      var i = parseInt(el.getAttribute('data-cfm-number-badge'), 10);
+      if (isNaN(i)) return;
+      var bg = TRAFFIC[i] || '#9ca3af';
+      if (mode === 'monochrome') bg = mono;
+      if (mode === 'individual') bg = readVar('--cfm-number-color-' + i, '#9ca3af');
+      el.style.backgroundColor = bg;
+    });
+  }
+
+  function applyMultiStatement(show) {
+    document.querySelectorAll('[data-cfm-matrix-row-extra]').forEach(function (el) {
+      el.style.display = show ? '' : 'none';
+    });
+  }
+
+  function applyDropzoneStyle() {
+    var style = readVar('--cfm-upload-border-style', 'dashed');
+    document.querySelectorAll('[data-cfm-dropzone], .cfm-dropzone').forEach(function (el) {
+      el.style.borderStyle = style;
+    });
+  }
+
+  function applyThemeSideEffects() {
+    applyNumberBadgeColors();
+    applyDropzoneStyle();
+  }
+
   function applyContent(patch) {
     if (!patch) return;
     if (patch.logoUrl !== undefined) {
@@ -188,7 +228,11 @@
           el.textContent = patch.previewState.hintMaxText || '';
         });
       }
+      if (patch.previewState.multiStatement !== undefined) {
+        applyMultiStatement(!!patch.previewState.multiStatement);
+      }
     }
+    applyThemeSideEffects();
   }
 
   function handleMessage(event) {

package/templates/preview-harness/previewPages.js

@@ -1,8 +1,9 @@
 'use strict';
 
+/** Static wizard preview pages — layout matches previewPages.ts; tokens via --cfm-* + preview-bridge. */
 const sharedStyles = `
   .cfm-header { height:var(--cfm-header-height); background:var(--cfm-header-bg); border-bottom:1px solid var(--cfm-header-border); display:flex; align-items:center; padding:0 var(--cfm-header-padding-x); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
-  .cfm-header-logo { width:var(--cfm-header-logo-width); height:var(--cfm-header-logo-height); object-fit:contain; padding:var(--cfm-header-logo-padding); background:transparent; }
+  .cfm-header-logo { width:var(--cfm-header-logo-width); height:var(--cfm-header-logo-height); max-height:calc(var(--cfm-header-height, 120px) - 8px); object-fit:contain; padding:var(--cfm-header-logo-padding); background:transparent; }
   .cfm-header-company { font-size:var(--cfm-header-company-size); font-weight:var(--cfm-header-company-weight); color:var(--cfm-header-company-color); margin-left:16px; }
   .cfm-footer { background:var(--cfm-footer-bg); color:var(--cfm-footer-text); padding:var(--cfm-footer-padding-y) var(--cfm-footer-padding-x); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end; }
   .cfm-footer-links { display:flex; gap:24px; flex-wrap:wrap; }
@@ -11,90 +12,117 @@ const sharedStyles = `
   .cfm-progress-fill { height:100%; width:45%; background:var(--cfm-progress-fill); border-radius:999px; }
   .cfm-mcq-option { border:2px solid #e5e7eb; border-radius:var(--cfm-mcq-border-radius); padding:var(--cfm-mcq-card-padding); margin-bottom:var(--cfm-mcq-option-gap); display:flex; align-items:center; gap:8px; }
   .cfm-mcq-option.selected { border-color:var(--cfm-mcq-selected-accent); background:var(--cfm-mcq-selected-bg); }
-  .cfm-nps-row { display:flex; gap:var(--cfm-nps-cell-gap); flex-wrap:wrap; }
-  .cfm-nps-cell { width:var(--cfm-nps-cell-size); height:var(--cfm-nps-cell-size); border-radius:var(--cfm-border-radius); background:var(--cfm-nps-track-bar,#f2f2f2); display:flex; align-items:center; justify-content:center; font-size:14px; box-sizing:border-box; }
-  .cfm-nps-cell.selected { border:2px solid var(--cfm-input-focus-ring); background:var(--cfm-matrix-selected); color:#fff; }
   .cfm-hint-row { display:flex; justify-content:space-between; font-size:12px; font-weight:600; margin-bottom:8px; }
   .cfm-hint-min, .cfm-hint-max { color:var(--cfm-hint-label-color,#6b7280); background:var(--cfm-hint-label-bg,transparent); padding:2px 4px; border-radius:4px; }
-  .cfm-matrix-col-header { font-size:13px; font-weight:500; text-align:center; color:var(--cfm-csat-column-label-color,var(--cfm-matrix-column-label-color,#4b5563)); background:var(--cfm-csat-column-label-bg,var(--cfm-matrix-column-label-bg,transparent)); padding:2px 6px; border-radius:4px; }
+  .cfm-nps-badges { display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); gap:var(--cfm-nps-cell-gap,2px); margin-bottom:8px; }
+  .cfm-nps-badge { width:var(--cfm-nps-cell-size,24px); height:var(--cfm-nps-cell-size,24px); margin:0 auto; border-radius:3px; font-size:10px; font-weight:700; color:#fff; display:flex; align-items:center; justify-content:center; box-sizing:border-box; }
+  .cfm-nps-badge.selected { border:2px solid var(--cfm-input-focus-ring); background:var(--cfm-matrix-selected); }
+  .cfm-nps-track { background:var(--cfm-nps-track-bar,#f2f2f2); border-radius:6px; padding:8px 4px; }
+  .cfm-nps-row { display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); gap:var(--cfm-nps-cell-gap,2px); }
+  .cfm-nps-radio { width:var(--cfm-nps-cell-size,32px); height:var(--cfm-nps-cell-size,32px); margin:0 auto; border-radius:50%; border:2px solid #d1d5db; background:#fff; box-sizing:border-box; display:flex; align-items:center; justify-content:center; }
+  .cfm-nps-radio.selected { border-color:var(--cfm-input-focus-ring); background:var(--cfm-matrix-selected); }
+  .cfm-nps-radio.selected::after { content:''; width:33%; height:33%; border-radius:50%; background:var(--cfm-input-focus-ring); }
   .cfm-matrix-row { display:flex; align-items:center; padding:8px 0; background:var(--cfm-row-band); margin-bottom:4px; }
-  .cfm-matrix-label { width:var(--cfm-matrix-row-width); flex-shrink:0; padding:0 16px; font-size:14px; font-weight:500; }
-  .cfm-matrix-cells { display:flex; gap:8px; flex:1; justify-content:center; }
+  .cfm-matrix-label { width:var(--cfm-matrix-row-width,180px); flex-shrink:0; padding:0 16px; font-size:14px; font-weight:500; box-sizing:border-box; }
+  .cfm-matrix-cells { display:flex; gap:8px; flex:1; justify-content:center; align-items:center; }
+  .cfm-matrix-col-label { font-size:13px; font-weight:500; text-align:center; color:var(--cfm-csat-column-label-color,var(--cfm-matrix-column-label-color,#4b5563)); background:var(--cfm-csat-column-label-bg,var(--cfm-matrix-column-label-bg,transparent)); padding:2px 6px; border-radius:4px; }
   .cfm-matrix-cell { width:var(--cfm-csat-cell-size,18px); height:var(--cfm-csat-cell-size,18px); border-radius:50%; border:2px solid #d1d5db; box-sizing:border-box; }
   .cfm-matrix-cell.selected { border-color:var(--cfm-input-focus-ring); background:var(--cfm-matrix-selected); }
-  .cfm-emoji { font-size:var(--cfm-csat-emoji-size); opacity:var(--cfm-csat-unselected-opacity); }
-  .cfm-emoji.selected { opacity:1; outline:2px solid var(--cfm-input-focus-ring); border-radius:8px; background:var(--cfm-matrix-selected); }
-  .cfm-star { color:var(--cfm-input-focus-ring); font-size:var(--cfm-csat-emoji-size,24px); opacity:var(--cfm-csat-unselected-opacity); }
+  .cfm-emoji { font-size:var(--cfm-csat-emoji-size,28px); opacity:var(--cfm-csat-unselected-opacity,0.5); line-height:1; }
+  .cfm-emoji.selected { opacity:1; outline:2px solid var(--cfm-input-focus-ring); border-radius:8px; }
+  .cfm-star { color:var(--cfm-input-focus-ring); font-size:var(--cfm-csat-emoji-size,24px); opacity:var(--cfm-csat-unselected-opacity,0.5); }
   .cfm-star.selected { opacity:1; color:var(--cfm-matrix-selected); }
-  .cfm-badge { width:40px; height:40px; border-radius:8px; background:var(--cfm-number-color-0,#9ca3af); color:white; display:flex; align-items:center; justify-content:center; font-weight:600; border:1px solid #d1d5db; box-sizing:border-box; }
+  .cfm-badge { width:40px; height:40px; border-radius:8px; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; border:1px solid #d1d5db; box-sizing:border-box; }
   .cfm-badge.selected { border:2px solid var(--cfm-input-focus-ring); background:var(--cfm-matrix-selected); color:#fff; }
-  .cfm-slider-track { height:8px; background:var(--cfm-slider-track); border-radius:4px; position:relative; margin:24px 0; }
-  .cfm-slider-thumb { width:20px; height:20px; background:var(--cfm-slider-thumb); border-radius:50%; position:absolute; top:-6px; left:60%; }
-  .cfm-tick { width:var(--cfm-slider-tick-size); height:var(--cfm-slider-tick-size); background:var(--cfm-slider-tick); border-radius:4px; font-size:11px; display:flex; align-items:center; justify-content:center; color:white; }
-  .cfm-dropzone { border-width:2px; border-style:var(--cfm-upload-border-style,dashed); border-color:var(--cfm-upload-border-color,#d1d5db); border-radius:var(--cfm-border-radius); padding:var(--cfm-upload-padding,24px); background:var(--cfm-upload-fill,#f9fafb); text-align:center; color:var(--cfm-text); }
+  .cfm-slider-track { height:8px; background:var(--cfm-slider-track,#e5e7eb); border-radius:4px; position:relative; margin:24px 0; }
+  .cfm-slider-thumb { width:20px; height:20px; background:var(--cfm-slider-thumb,var(--cfm-input-focus-ring)); border-radius:50%; position:absolute; top:-6px; left:60%; border:2px solid var(--cfm-input-focus-ring); box-sizing:border-box; }
+  .cfm-tick { min-width:var(--cfm-slider-tick-size,24px); height:var(--cfm-slider-tick-size,24px); background:var(--cfm-slider-tick,#6b7280); border-radius:4px; font-size:11px; display:flex; align-items:center; justify-content:center; color:#fff; padding:0 4px; }
+  .cfm-slider-tick-label { font-size:12px; font-weight:500; color:var(--cfm-slider-tick-label-color,#4b5563); background:var(--cfm-slider-tick-label-bg,transparent); padding:2px 4px; border-radius:4px; }
+  .cfm-dropzone { border-width:2px; border-style:var(--cfm-upload-border-style,dashed); border-color:var(--cfm-upload-border-color,#d1d5db); border-radius:var(--cfm-border-radius,12px); padding:var(--cfm-upload-padding,24px); background:var(--cfm-upload-fill,#f9fafb); text-align:center; color:var(--cfm-text); }
   .cfm-input { width:100%; height:var(--cfm-input-height); border:1px solid var(--cfm-input-border); border-radius:var(--cfm-input-radius); padding:0 var(--cfm-input-padding); font-family:inherit; box-sizing:border-box; }
-  .cfm-rank-item { background:var(--cfm-rank-item-bg); padding:var(--cfm-rank-item-padding); margin-bottom:var(--cfm-rank-item-gap); border-radius:var(--cfm-border-radius); display:flex; align-items:center; gap:12px; }
-  .cfm-rank-badge { background:var(--cfm-rank-badge); color:white; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; }
-  .cfm-handle { color:var(--cfm-rank-handle); cursor:grab; }
-  .cfm-pin { width:var(--cfm-heatmap-pin-size); height:var(--cfm-heatmap-pin-size); background:var(--cfm-heatmap-pin); border:2px solid var(--cfm-heatmap-pin-border,#fff); border-radius:50%; position:absolute; }
+  .cfm-input:focus { outline:2px solid var(--cfm-input-focus-ring); }
+  .cfm-rank-item { background:var(--cfm-rank-item-bg,#fff); padding:var(--cfm-rank-item-padding,12px 16px); margin-bottom:var(--cfm-rank-item-gap,8px); border-radius:var(--cfm-border-radius,8px); display:flex; align-items:center; gap:12px; }
+  .cfm-rank-badge { background:var(--cfm-rank-badge,var(--cfm-primary)); color:#fff; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
+  .cfm-handle { color:var(--cfm-rank-handle,#9ca3af); cursor:grab; }
+  .cfm-rank-select { border-color:var(--cfm-rank-select-border,#d1d5db) !important; }
+  .cfm-pin { width:var(--cfm-heatmap-pin-size,16px); height:var(--cfm-heatmap-pin-size,16px); background:var(--cfm-heatmap-pin,#f97316); border:2px solid var(--cfm-heatmap-pin-border,#fff); border-radius:50%; position:absolute; box-sizing:border-box; }
   .cfm-media { max-width:var(--cfm-media-max-width); border-radius:var(--cfm-media-radius); background:#e5e7eb; height:200px; display:flex; align-items:center; justify-content:center; }
   .cfm-btn-primary { background:var(--cfm-primary); color:var(--cfm-button-text); border:none; border-radius:var(--cfm-border-radius); padding:10px 20px; }
   .cfm-btn-back { background:transparent; color:var(--cfm-primary); border:1px solid var(--cfm-primary); border-radius:var(--cfm-border-radius); padding:10px 20px; }
 `;
 
+const TRAFFIC = ['#ef4444', '#f97316', '#eab308', '#84cc16', '#22c55e', '#14b8a6', '#06b6d4', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7'];
+
 function cells(n) {
   return Array.from({ length: n }, (_, i) =>
     `<div class="cfm-matrix-cell${i === 2 ? ' selected' : ''}"></div>`,
   ).join('');
 }
 
-function matrixColHeaders(n) {
-  return `<div class="cfm-matrix-row" style="background:transparent;margin-bottom:8px"><div class="cfm-matrix-label"></div><div class="cfm-matrix-cells">${Array.from({ length: n }, (_, i) => `<span class="cfm-matrix-col-header">${i + 1}</span>`).join('')}</div></div>`;
+function colLabels(n) {
+  return Array.from({ length: n }, (_, i) => `<span class="cfm-matrix-col-label">${i + 1}</span>`).join('');
+}
+
+function matrixPreview(label, mode) {
+  if (mode === 'emoji') {
+    return `<div class="cfm-matrix-row"><div class="cfm-matrix-label">${label}</div><div class="cfm-matrix-cells"><span class="cfm-emoji">😞</span><span class="cfm-emoji selected">🙂</span><span class="cfm-emoji">😊</span></div></div>`;
+  }
+  return `<div class="cfm-matrix-row" style="background:transparent;margin-bottom:4px"><div class="cfm-matrix-label"></div><div class="cfm-matrix-cells">${colLabels(5)}</div></div>
+<div class="cfm-matrix-row"><div class="cfm-matrix-label">${label}</div><div class="cfm-matrix-cells">${cells(5)}</div></div>`;
 }
 
-function matrixPreview(label) {
-  return `${matrixColHeaders(5)}<div class="cfm-matrix-row"><div class="cfm-matrix-label">${label}</div><div class="cfm-matrix-cells">${cells(5)}</div></div>`;
+function npsPreview() {
+  const badges = Array.from({ length: 11 }, (_, i) =>
+    `<div class="cfm-nps-badge${i === 8 ? ' selected' : ''}" data-cfm-number-badge="${i}">${i}</div>`,
+  ).join('');
+  const radios = Array.from({ length: 11 }, (_, i) =>
+    `<div class="cfm-nps-radio${i === 8 ? ' selected' : ''}"></div>`,
+  ).join('');
+  return `<p style="font-weight:600;margin-bottom:8px">How likely are you to recommend us?</p>
+<div class="cfm-hint-row"><span class="cfm-hint-min" data-cfm-hint-min>Not likely</span><span class="cfm-hint-max" data-cfm-hint-max>Very likely</span></div>
+<div class="cfm-nps-badges">${badges}</div>
+<div class="cfm-nps-track"><div class="cfm-nps-row">${radios}</div></div>`;
 }
 
 const npsCells = Array.from({ length: 11 }, (_, i) =>
-  `<div class="cfm-nps-cell${i === 8 ? ' selected' : ''}">${i}</div>`,
+  `<div class="cfm-nps-radio${i === 8 ? ' selected' : ''}"></div>`,
 ).join('');
 
 const PREVIEW_PAGE_DEFS = [
   { key: 'header', title: 'Header', body: `<header class="cfm-header"><img data-cfm-logo class="cfm-header-logo" src="" alt="Logo" style="display:none" /><span data-cfm-company class="cfm-header-company">Company Name</span></header>` },
   { key: 'footer', title: 'Footer', body: `<footer class="cfm-footer"><div><img data-cfm-logo style="width:var(--cfm-footer-logo-width);height:var(--cfm-footer-logo-height);object-fit:contain;display:none" src="" alt="" /><p data-cfm-copyright style="font-size:12px;margin-top:8px">© Company</p></div><nav data-cfm-footer-links class="cfm-footer-links"></nav></footer>` },
   { key: 'chrome', title: 'Chrome', body: `<header class="cfm-header"><img data-cfm-logo class="cfm-header-logo" src="" alt="" style="display:none" /><span data-cfm-company class="cfm-header-company">Company</span></header><div class="cfm-progress"><div class="cfm-progress-fill"></div></div><p data-cfm-survey-title style="font-size:20px;font-weight:var(--cfm-heading-weight);margin:16px 0">Survey Title</p><div style="display:flex;gap:12px;margin-top:24px"><button data-cfm-btn-back class="cfm-btn-back">Back</button><button data-cfm-btn-next class="cfm-btn-primary">Next</button></div>` },
-  { key: 'survey_page', title: 'Survey Page', body: `<header class="cfm-header"><img data-cfm-logo class="cfm-header-logo" src="" alt="" style="display:none" /><span data-cfm-company class="cfm-header-company">Company</span></header><div data-cfm-progress class="cfm-progress"><div class="cfm-progress-fill" style="width:35%"></div></div><div data-cfm-language style="text-align:right;margin:16px 0"><select class="cfm-input" style="width:auto"><option>English</option></select></div><p style="font-weight:600"><span data-cfm-question-number>1.</span> Sample question <span data-cfm-required style="color:red">*</span></p><div class="cfm-mcq-option selected"><span>◉</span> Option A</div><p style="font-weight:600;margin-top:24px"><span data-cfm-question-number>2.</span> NPS question</p><div class="cfm-nps-row">${npsCells}</div><div style="display:flex;gap:12px;margin-top:24px"><button data-cfm-btn-back class="cfm-btn-back">Back</button><button data-cfm-btn-next class="cfm-btn-primary">Next</button></div><footer class="cfm-footer" style="margin-top:32px"><p data-cfm-copyright>© Company</p><nav data-cfm-footer-links class="cfm-footer-links"></nav></footer>` },
-  { key: 'intro', title: 'Intro', body: `<h1 data-cfm-survey-title style="font-size:28px;font-weight:var(--cfm-heading-weight)">Welcome</h1><p style="margin:16px 0;color:#6b7280">Please share your feedback.</p><button class="cfm-btn-primary">Start Survey</button>` },
+  { key: 'survey_page', title: 'Survey Page', body: `<header class="cfm-header"><img data-cfm-logo class="cfm-header-logo" src="" alt="" style="display:none" /><span data-cfm-company class="cfm-header-company">Company</span></header><div data-cfm-progress class="cfm-progress"><div class="cfm-progress-fill" style="width:35%"></div></div><div data-cfm-language style="text-align:right;margin:16px 0"><select class="cfm-input" style="width:auto"><option>English</option><option>Deutsch</option></select></div><p style="font-weight:600"><span data-cfm-question-number>1.</span> Sample question <span data-cfm-required style="color:red">*</span></p><div class="cfm-mcq-option selected"><span>◉</span> Option A</div><p style="font-weight:600;margin-top:24px"><span data-cfm-question-number>2.</span> NPS question</p><div class="cfm-nps-track"><div class="cfm-nps-row">${npsCells}</div></div><div style="display:flex;gap:12px;margin-top:24px"><button data-cfm-btn-back class="cfm-btn-back">Back</button><button data-cfm-btn-next class="cfm-btn-primary">Next</button></div><footer class="cfm-footer" style="margin-top:32px"><p data-cfm-copyright>© Company</p><nav data-cfm-footer-links class="cfm-footer-links"></nav></footer>` },
+  { key: 'intro', title: 'Intro', body: `<h1 data-cfm-survey-title style="font-size:28px;font-weight:var(--cfm-heading-weight)">Welcome</h1><p style="margin:16px 0;color:#6b7280">Please take a few minutes to share your feedback.</p><button class="cfm-btn-primary">Start Survey</button>` },
   { key: 'end', title: 'End', body: `<h1 style="font-size:28px;font-weight:var(--cfm-heading-weight)">Thank you!</h1><p data-cfm-thank-you style="margin:16px 0">Thank you for your feedback.</p>` },
-  { key: 'MCQ_single', title: 'MCQ Single', body: `<p style="font-weight:600;margin-bottom:16px">1. Select one option</p><div data-cfm-mcq-style="outlined"><div class="cfm-mcq-option selected"><span>◉</span> Option A</div><div class="cfm-mcq-option"><span>○</span> Option B</div></div>` },
+  { key: 'MCQ_single', title: 'MCQ Single', body: `<p style="font-weight:600;margin-bottom:16px">1. Select one option</p><div data-cfm-mcq-style="outlined"><div class="cfm-mcq-option selected"><span>◉</span> Option A</div><div class="cfm-mcq-option"><span>○</span> Option B</div><div class="cfm-mcq-option"><span>○</span> Option C</div></div>` },
   { key: 'MCQ_multiple', title: 'MCQ Multiple', body: `<p style="font-weight:600;margin-bottom:16px">Select all that apply</p><div class="cfm-mcq-option selected"><span>☑</span> Option A</div><div class="cfm-mcq-option"><span>☐</span> Option B</div>` },
-  { key: 'TEXTFIELD_short', title: 'Text Short', body: `<p style="font-weight:600;margin-bottom:8px">Your name</p><input class="cfm-input" placeholder="Type here..." />` },
-  { key: 'TEXTFIELD_long', title: 'Text Long', body: `<p style="font-weight:600;margin-bottom:8px">Comments</p><textarea class="cfm-input" style="height:120px;padding:12px" placeholder="Type your response..."></textarea>` },
-  { key: 'NPS_SCALE', title: 'NPS', body: `<p style="font-weight:600;margin-bottom:8px">How likely are you to recommend us?</p><div class="cfm-hint-row"><span class="cfm-hint-min" data-cfm-hint-min>Not likely</span><span class="cfm-hint-max" data-cfm-hint-max>Very likely</span></div><div class="cfm-nps-row">${npsCells}</div>` },
-  { key: 'CFM_likert', title: 'CFM Likert', body: matrixPreview('Statement item 1') },
-  { key: 'CFM_bipolar', title: 'CFM Bipolar', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width)">Left</div><div class="cfm-matrix-cells">${cells(5)}</div><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width);text-align:right">Right</div></div>` },
-  { key: 'CFM_transpose', title: 'CFM Transpose', body: matrixPreview('Scale item (transposed)') },
-  { key: 'CFM_carousel', title: 'CFM Carousel', body: `${matrixPreview('Row 1 of 3')}<div style="text-align:center;margin-top:12px"><span style="color:var(--cfm-matrix-carousel-dot)">●</span> ○ ○</div>` },
-  { key: 'CFM_dropdown', title: 'CFM Dropdown', body: `<div class="cfm-matrix-label">Statement 1</div><select class="cfm-input" style="margin-top:8px"><option>Select...</option></select>` },
-  { key: 'CSAT_emoji', title: 'CSAT Emoji', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">How satisfied?</div><div class="cfm-matrix-cells"><span class="cfm-emoji selected">😞</span><span class="cfm-emoji">🙂</span><span class="cfm-emoji">😊</span></div></div>` },
-  { key: 'CSAT_star', title: 'CSAT Star', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Rate us</div><div class="cfm-matrix-cells"><span class="cfm-star selected">★</span><span class="cfm-star selected">★</span><span class="cfm-star">★</span></div></div>` },
-  { key: 'CSAT_numbered', title: 'CSAT Numbered', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Score</div><div class="cfm-matrix-cells"><div class="cfm-badge">1</div><div class="cfm-badge selected">2</div><div class="cfm-badge">3</div></div></div>` },
+  { key: 'TEXTFIELD_short', title: 'Text Short', body: `<p style="font-weight:600;margin-bottom:8px">Your name</p><input class="cfm-input" data-cfm-textfield placeholder="Type here..." />` },
+  { key: 'TEXTFIELD_long', title: 'Text Long', body: `<p style="font-weight:600;margin-bottom:8px">Comments</p><textarea class="cfm-input" data-cfm-textfield style="height:120px;padding:12px" placeholder="Type your response..."></textarea>` },
+  { key: 'NPS_SCALE', title: 'NPS', body: npsPreview() },
+  { key: 'CFM_likert', title: 'CFM Likert', body: `${matrixPreview('Statement item 1', 'radio')}<div class="cfm-matrix-row" data-cfm-matrix-row-extra style="display:none"><div class="cfm-matrix-label">Statement item 2</div><div class="cfm-matrix-cells">${cells(5)}</div></div>` },
+  { key: 'CFM_bipolar', title: 'CFM Bipolar', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width,25%)">Left statement</div><div class="cfm-matrix-cells">${cells(5)}</div><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width,25%);text-align:right">Right statement</div></div>` },
+  { key: 'CFM_transpose', title: 'CFM Transpose', body: matrixPreview('Scale item (transposed row)', 'radio') },
+  { key: 'CFM_carousel', title: 'CFM Carousel', body: `${matrixPreview('Row 1 of 3', 'radio')}<div style="text-align:center;margin-top:12px"><span style="color:var(--cfm-matrix-selected)">●</span> ○ ○</div>` },
+  { key: 'CFM_dropdown', title: 'CFM Dropdown', body: `<div class="cfm-matrix-label" style="width:100%;margin-bottom:8px">Statement 1</div><select class="cfm-input"><option>Select...</option><option>Col 1</option><option>Col 2</option></select>` },
+  { key: 'CSAT_emoji', title: 'CSAT Emoji', body: `<div class="cfm-matrix-row" style="background:transparent;margin-bottom:4px"><div class="cfm-matrix-label"></div><div class="cfm-matrix-cells">${colLabels(5)}</div></div><div class="cfm-matrix-row"><div class="cfm-matrix-label">How satisfied?</div><div class="cfm-matrix-cells"><span class="cfm-emoji selected">😞</span><span class="cfm-emoji">😐</span><span class="cfm-emoji">🙂</span><span class="cfm-emoji">😊</span><span class="cfm-emoji">🤩</span></div></div>` },
+  { key: 'CSAT_star', title: 'CSAT Star', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Rate us</div><div class="cfm-matrix-cells"><span class="cfm-star selected">★</span><span class="cfm-star selected">★</span><span class="cfm-star">★</span><span class="cfm-star">★</span><span class="cfm-star">★</span></div></div>` },
+  { key: 'CSAT_numbered', title: 'CSAT Numbered', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Score</div><div class="cfm-matrix-cells">${[1,2,3,4,5].map((n,i)=>`<div class="cfm-badge${i===2?' selected':''}" data-cfm-number-badge="${i}">${n}</div>`).join('')}</div></div>` },
   { key: 'CSAT_graphics', title: 'CSAT Graphics', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Slider row</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>` },
-  { key: 'CSAT_carousel', title: 'CSAT Carousel', body: `${matrixPreview('Carousel row')}<div style="text-align:center"><span style="color:var(--cfm-csat-accent)">●</span> ○</div>` },
+  { key: 'CSAT_carousel', title: 'CSAT Carousel', body: `${matrixPreview('Carousel row', 'emoji')}<div style="text-align:center"><span style="color:var(--cfm-matrix-selected)">●</span> ○</div>` },
   { key: 'CSAT_dropdown', title: 'CSAT Dropdown', body: `<div class="cfm-matrix-label">Statement</div><select class="cfm-input" style="margin-top:8px"><option>Choose rating...</option></select>` },
-  { key: 'RATING_star', title: 'Rating Star', body: `<div class="cfm-matrix-cells" style="justify-content:flex-start;padding:16px"><span class="cfm-star selected">★</span><span class="cfm-star selected">★</span><span class="cfm-star">★</span></div>` },
-  { key: 'RATING_numbered', title: 'Rating Numbered', body: `<div class="cfm-matrix-cells" style="padding:16px"><div class="cfm-badge">1</div><div class="cfm-badge">2</div><div class="cfm-badge">3</div></div>` },
-  { key: 'RATING_radio', title: 'Rating Radio', body: matrixPreview('Recommend to a friend') },
+  { key: 'RATING_star', title: 'Rating Star', body: `<div class="cfm-matrix-cells" style="justify-content:flex-start;padding:16px"><span class="cfm-star selected">★</span><span class="cfm-star selected">★</span><span class="cfm-star">★</span><span class="cfm-star">★</span><span class="cfm-star">★</span></div>` },
+  { key: 'RATING_numbered', title: 'Rating Numbered', body: `<div class="cfm-matrix-cells" style="padding:16px">${[1,2,3,4,5].map((n,i)=>`<div class="cfm-badge${i===1?' selected':''}" data-cfm-number-badge="${i}">${n}</div>`).join('')}</div>` },
+  { key: 'RATING_radio', title: 'Rating Radio', body: matrixPreview('Recommend to a friend', 'radio') },
   { key: 'RATING_emoji', title: 'Rating Emoji', body: `<div class="cfm-matrix-cells" style="padding:16px"><span class="cfm-emoji">🙂</span><span class="cfm-emoji selected">😊</span><span class="cfm-emoji">🤩</span></div>` },
   { key: 'RATING_graphics', title: 'Rating Graphics', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Experience</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>` },
   { key: 'RATING_slider', title: 'Rating Slider', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Rate on slider</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>` },
-  { key: 'SLIDER_matrix', title: 'Slider Matrix', body: `<div class="cfm-matrix-row" style="background:transparent;margin-bottom:4px"><div class="cfm-matrix-label"></div><div style="flex:1;padding:0 16px;display:flex;justify-content:space-between"><span class="cfm-matrix-col-header">Low</span><span class="cfm-matrix-col-header">High</span></div></div><div class="cfm-matrix-row"><div class="cfm-matrix-label">Statement 1</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div><div style="display:flex;justify-content:space-between;margin-top:8px"><span class="cfm-tick">0</span><span class="cfm-tick">5</span><span class="cfm-tick">10</span></div></div></div>` },
-  { key: 'FILE_UPLOAD', title: 'File Upload', body: `<div data-cfm-dropzone-style="dashed" class="cfm-dropzone">Drop files here or click to upload</div>` },
-  { key: 'TEXT_AND_MEDIA', title: 'Text & Media', body: `<div class="cfm-media">Media preview</div>` },
-  { key: 'HEATMAP', title: 'Heatmap', body: `<div style="position:relative;background:#e5e7eb;height:240px;border-radius:var(--cfm-border-radius)"><div class="cfm-pin" style="top:40%;left:55%"></div></div>` },
+  { key: 'SLIDER_matrix', title: 'Slider Matrix', body: `<div style="display:flex;gap:4px;margin-bottom:16px;padding-left:var(--cfm-matrix-row-width,180px)">${[0,1,2,3,4,5].map((n,i)=>`<div class="cfm-tick" data-cfm-number-badge="${i}">${n}</div>`).join('')}</div><div style="display:flex;gap:8px;margin-bottom:8px;padding-left:var(--cfm-matrix-row-width,180px)"><span class="cfm-slider-tick-label">Low</span><span class="cfm-slider-tick-label" style="margin-left:auto">High</span></div><div class="cfm-matrix-row"><div class="cfm-matrix-label">Statement 1</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div><div class="cfm-matrix-row" data-cfm-matrix-row-extra style="display:none"><div class="cfm-matrix-label">Statement 2</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb" style="left:30%"></div></div></div></div>` },
+  { key: 'FILE_UPLOAD', title: 'File Upload', body: `<div class="cfm-dropzone" data-cfm-dropzone>Drop files here or click to upload</div>` },
+  { key: 'TEXT_AND_MEDIA', title: 'Text & Media', body: `<div class="cfm-media">Media preview</div><p style="font-size:var(--cfm-media-caption-size,12px);color:var(--cfm-media-caption-color,#6b7280);margin-top:8px">Caption text</p>` },
+  { key: 'HEATMAP', title: 'Heatmap', body: `<div style="position:relative;background:#e5e7eb;height:240px;border-radius:var(--cfm-border-radius)"><div class="cfm-pin" style="top:40%;left:55%"></div><div class="cfm-pin" style="top:60%;left:30%"></div></div>` },
   { key: 'RANK_drag', title: 'Rank Drag', body: `<div class="cfm-rank-item"><span class="cfm-handle">⠿</span><span class="cfm-rank-badge">1</span> Item A</div><div class="cfm-rank-item"><span class="cfm-handle">⠿</span><span class="cfm-rank-badge">2</span> Item B</div>` },
-  { key: 'RANK_dropdown', title: 'Rank Dropdown', body: `<div style="display:flex;align-items:center;gap:12px"><span>Item A</span><select class="cfm-input" style="width:80px"><option>1</option></select></div>` },
+  { key: 'RANK_dropdown', title: 'Rank Dropdown', body: `<div class="cfm-rank-item"><span>Item A</span><select class="cfm-input cfm-rank-select" style="width:80px;margin-left:auto"><option>1</option><option>2</option></select></div>` },
 ];
 
 function buildPreviewHtml(def, inlineCss, inlineJs) {
@@ -113,4 +141,4 @@ function buildPreviewHtml(def, inlineCss, inlineJs) {
 </html>`;
 }
 
-module.exports = { PREVIEW_PAGE_DEFS, buildPreviewHtml, sharedStyles, PREVIEW_KEYS: PREVIEW_PAGE_DEFS.map((d) => d.key) };
+module.exports = { PREVIEW_PAGE_DEFS, buildPreviewHtml, sharedStyles, PREVIEW_KEYS: PREVIEW_PAGE_DEFS.map((d) => d.key), TRAFFIC };

package/templates/previewBridge.ts

@@ -42,6 +42,7 @@ function flushCssVars(): void {
     }
     delete pendingVars[key];
   }
+  applyThemeSideEffects();
 }
 
 function queueCssVars(vars: Record<string, string>): void {
@@ -56,6 +57,7 @@ function applyCssVarsImmediate(vars: Record<string, string>): void {
   for (const [key, value] of Object.entries(vars)) {
     root.style.setProperty(key, value);
   }
+  applyThemeSideEffects();
 }
 
 function setDisplay(selector: string, visible: boolean): void {
@@ -217,6 +219,37 @@ function applyContentPatch(patch: ContentPatch): void {
       (el as HTMLElement).textContent = hintMax;
     });
   }
+  if (patch.previewState?.multiStatement !== undefined) {
+    const show = Boolean(patch.previewState.multiStatement);
+    document.querySelectorAll('[data-cfm-matrix-row-extra]').forEach((el) => {
+      (el as HTMLElement).style.display = show ? '' : 'none';
+    });
+  }
+  applyThemeSideEffects();
+}
+
+const TRAFFIC_BADGE = ['#ef4444', '#f97316', '#eab308', '#84cc16', '#22c55e', '#14b8a6', '#06b6d4', '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7'];
+
+function readCssVar(name: string, fallback: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+}
+
+function applyThemeSideEffects(): void {
+  const mode = readCssVar('--cfm-number-label-mode', 'traffic');
+  const mono = readCssVar('--cfm-number-mono-color', '#9ca3af');
+  document.querySelectorAll('[data-cfm-number-badge]').forEach((el) => {
+    if (el.classList.contains('selected')) return;
+    const i = parseInt(el.getAttribute('data-cfm-number-badge') ?? '', 10);
+    if (Number.isNaN(i)) return;
+    let bg = TRAFFIC_BADGE[i] ?? '#9ca3af';
+    if (mode === 'monochrome') bg = mono;
+    if (mode === 'individual') bg = readCssVar(`--cfm-number-color-${i}`, '#9ca3af');
+    (el as HTMLElement).style.backgroundColor = bg;
+  });
+  const dropStyle = readCssVar('--cfm-upload-border-style', 'dashed');
+  document.querySelectorAll('[data-cfm-dropzone], .cfm-dropzone').forEach((el) => {
+    (el as HTMLElement).style.borderStyle = dropStyle;
+  });
 }
 
 function setLiveEditMode(on: boolean): void {