@explorer02/cfm-survey-sdk 0.2.2 → 0.2.4

package/templates/docs/templates/surveyUiIcons.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import React from 'react';
+import {
+  FaFaceAngry,
+  FaFaceSadTear,
+  FaFaceFrown,
+  FaFaceFrownOpen,
+  FaFaceMeh,
+  FaFaceSmile,
+  FaFaceSmileBeam,
+  FaFaceGrin,
+  FaFaceGrinWide,
+  FaFaceGrinStars,
+  FaStar,
+} from 'react-icons/fa6';
+import { FaRegStar } from 'react-icons/fa';
+
+const EMOJI_COLORS = [
+  '#dc2626', '#e04832', '#ea580c', '#f59e0b', '#eab308',
+  '#a3a323', '#84cc16', '#65a30d', '#22c55e', '#16a34a', '#059669',
+] as const;
+
+const FACE_ICONS = [
+  FaFaceAngry, FaFaceSadTear, FaFaceFrown, FaFaceFrownOpen, FaFaceMeh, FaFaceMeh,
+  FaFaceSmile, FaFaceSmileBeam, FaFaceGrin, FaFaceGrinWide, FaFaceGrinStars,
+] as const;
+
+const CsatEmojiSet: Record<number, React.ReactNode> = {};
+for (let i = 0; i < 11; i++) {
+  const Icon = FACE_ICONS[i];
+  CsatEmojiSet[i + 1] = React.createElement(Icon as React.ElementType, {
+    className: 'transition-transform',
+    style: { color: EMOJI_COLORS[i], fontSize: '28px' },
+  });
+}
+
+const EMOJI_SCALES: Record<number, number[]> = {
+  3: [3, 6, 8],
+  4: [3, 4, 7, 9],
+  5: [3, 4, 6, 7, 9],
+  6: [3, 4, 6, 7, 9, 11],
+};
+
+export function getEmojiForIndex(index: number, total: number): React.ReactNode {
+  if (total <= 1) return CsatEmojiSet[6];
+  if (EMOJI_SCALES[total]) {
+    const key = EMOJI_SCALES[total][index];
+    if (key) return CsatEmojiSet[key];
+  }
+  const percent = index / (total - 1);
+  const key = Math.min(11, Math.max(1, Math.round(percent * 10) + 1));
+  return CsatEmojiSet[key];
+}
+
+export const CsatStarIcons: { filled: React.ReactNode; empty: React.ReactNode } = {
+  filled: React.createElement(FaStar as React.ElementType, {
+    style: { color: '#e20074', fontSize: '28px' },
+  }),
+  empty: React.createElement(FaRegStar as React.ElementType, {
+    style: { color: '#d1d5db', fontSize: '28px', stroke: '#d1d5db', strokeWidth: '16px' },
+  }),
+};

package/templates/docs/templates/surveyUiScaleUtils.ts

@@ -0,0 +1,51 @@
+/**
+ * Portable scale utilities — copy to src/lib/surveyUiScaleUtils.ts or co-locate with components.
+ */
+import type { NpsScalePoint, ScaleColumn } from '@explorer02/cfm-survey-sdk';
+
+export const SCALE_COLORS: readonly string[] = [
+  '#e2001a', '#e4251b', '#ec610a', '#f18b00', '#f7b200', '#fcd900',
+  '#d2dc00', '#9fca00', '#6bb300', '#339a00', '#008000',
+] as const;
+
+export function getAccentColor(value: number): string {
+  return SCALE_COLORS[value] ?? '#e20074';
+}
+
+export function tickColorFromIndex(index: number, total: number): string {
+  if (total <= 1) return '#e20074';
+  const hue = Math.round((index / (total - 1)) * 120);
+  return `hsl(${hue}, 90%, 40%)`;
+}
+
+export function nonNaScaleColumns(columns: ScaleColumn[]): ScaleColumn[] {
+  return columns.filter(col => col.id !== 'na');
+}
+
+export function starValueFromOption(option: NpsScalePoint, index: number): number {
+  const numeric = Number(option.optionLabel);
+  return Number.isFinite(numeric) && option.optionLabel.trim() !== '' ? numeric : index;
+}
+
+export function npsValueFromOption(option: NpsScalePoint, index: number): number {
+  const numeric = Number(option.optionLabel);
+  return Number.isFinite(numeric) && option.optionLabel.trim() !== '' ? numeric : index;
+}
+
+/** 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;
+}
+
+/** @deprecated Use matrixColumnStoredValue */
+export function columnSubmitValue(column: { id: string; label: string }): string | null {
+  return matrixColumnStoredValue(column);
+}
+
+export function columnAccentColor(column: { id: string; label: string }): string | undefined {
+  const numeric = Number(column.label);
+  if (Number.isFinite(numeric) && column.label.trim() !== '') {
+    return getAccentColor(numeric);
+  }
+  return undefined;
+}

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

@@ -20,6 +20,58 @@ if [ -n "$INTERNAL_IMPORTS" ]; then
 fi
 echo "OK: No internal SDK imports"
 
+# Wizard-ready artifacts (Phase 5 — mandatory)
+THEME_CSS=""
+for candidate in src/styles/survey-theme.css styles/survey-theme.css app/globals.css; do
+  if [ -f "$candidate" ] && grep -q "cfm-" "$candidate" 2>/dev/null; then
+    THEME_CSS="$candidate"
+    break
+  fi
+done
+if [ -z "$THEME_CSS" ]; then
+  for candidate in src/styles/survey-theme.css styles/survey-theme.css; do
+    if [ -f "$candidate" ]; then THEME_CSS="$candidate"; break; fi
+  done
+fi
+if [ -z "$THEME_CSS" ]; then
+  echo "FAIL: src/styles/survey-theme.css missing — copy from docs/templates/survey-theme.css"
+  exit 1
+fi
+echo "OK: survey-theme.css present ($THEME_CSS)"
+
+SEL_STYLES=""
+for candidate in src/lib/surveyUi/selectionStyles.ts lib/surveyUi/selectionStyles.ts; do
+  if [ -f "$candidate" ]; then SEL_STYLES="$candidate"; break; fi
+done
+if [ -z "$SEL_STYLES" ]; then
+  echo "FAIL: selectionStyles.ts missing — copy from docs/templates/selectionStyles.ts"
+  exit 1
+fi
+echo "OK: selectionStyles.ts present ($SEL_STYLES)"
+
+LBL_STYLES=""
+for candidate in src/lib/surveyUi/labelStyles.ts lib/surveyUi/labelStyles.ts; do
+  if [ -f "$candidate" ]; then LBL_STYLES="$candidate"; break; fi
+done
+if [ -z "$LBL_STYLES" ]; then
+  echo "FAIL: labelStyles.ts missing — copy from docs/templates/labelStyles.ts"
+  exit 1
+fi
+echo "OK: labelStyles.ts present ($LBL_STYLES)"
+
+if [ ! -f "./survey-ui-config.json" ]; then
+  echo "FAIL: ./survey-ui-config.json missing — draft config required for wizard seed"
+  exit 1
+fi
+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"
+  exit 1
+fi
+echo "OK: data-cfm-* chrome hooks present"
+
 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
@@ -46,6 +98,105 @@ else
     exit 1
   fi
   echo "OK: All 11 question.type branches present"
+
+  if grep -q "RANK_ORDER" "$QUESTION_FILE" || grep -q "RankOrderScale" "$QUESTION_FILE"; then
+    RANK_FILE=""
+    for candidate in src/components/RankOrderScale.tsx components/RankOrderScale.tsx app/components/RankOrderScale.tsx; do
+      if [ -f "$candidate" ]; then RANK_FILE="$candidate"; break; fi
+    done
+    if [ -z "$RANK_FILE" ]; then
+      echo "FAIL: RankOrderScale.tsx required when RANK_ORDER is wired in Question.tsx"
+      exit 1
+    fi
+    echo "OK: RankOrderScale.tsx exists ($RANK_FILE)"
+    if ! grep -q "@dnd-kit/core" package.json 2>/dev/null; then
+      echo "FAIL: @dnd-kit/core missing from package.json (required for RANK_ORDER)"
+      exit 1
+    fi
+    echo "OK: @dnd-kit in package.json"
+    if ! grep -q "getVisibleRankOrderOptionsForAnswers" "$QUESTION_FILE"; then
+      echo "WARN: getVisibleRankOrderOptionsForAnswers not found in Question.tsx"
+    fi
+  fi
+
+  if grep -q "FILE_UPLOAD" "$QUESTION_FILE" || grep -q "FileUploadScale" "$QUESTION_FILE"; then
+    UPLOAD_FILE=""
+    for candidate in src/components/FileUploadScale.tsx components/FileUploadScale.tsx app/components/FileUploadScale.tsx; do
+      if [ -f "$candidate" ]; then UPLOAD_FILE="$candidate"; break; fi
+    done
+    if [ -z "$UPLOAD_FILE" ]; then
+      echo "FAIL: FileUploadScale.tsx required when FILE_UPLOAD is wired"
+      exit 1
+    fi
+    echo "OK: FileUploadScale.tsx exists ($UPLOAD_FILE)"
+  fi
+
+  require_scale_file() {
+    local type_pattern="$1"
+    local scale_name="$2"
+    if grep -q "$type_pattern" "$QUESTION_FILE" || grep -q "$scale_name" "$QUESTION_FILE"; then
+      local SCALE_FILE=""
+      for candidate in "src/components/${scale_name}.tsx" "components/${scale_name}.tsx" "app/components/${scale_name}.tsx"; do
+        if [ -f "$candidate" ]; then SCALE_FILE="$candidate"; break; fi
+      done
+      if [ -z "$SCALE_FILE" ]; then
+        echo "FAIL: ${scale_name}.tsx required when ${type_pattern} is wired in Question.tsx"
+        exit 1
+      fi
+      echo "OK: ${scale_name}.tsx exists ($SCALE_FILE)"
+    fi
+  }
+
+  require_scale_file "SLIDER_MATRIX" "SliderMatrixScale"
+  require_scale_file "NPS_SCALE" "RatingScale"
+  require_scale_file "CFM_MATRIX" "LikertMatrixScale"
+  require_scale_file "CSAT_MATRIX" "CsatMatrixScale"
+  require_scale_file "RATING_MATRIX" "CsatMatrixScale"
+  require_scale_file "HEATMAP" "HeatmapScale"
+
+  if grep -qE "SLIDER_MATRIX|displayStyle.*graphics|RATING_MATRIX" "$QUESTION_FILE" 2>/dev/null; then
+    TRACK_FILE=""
+    for candidate in src/components/CustomSliderTrack.tsx components/CustomSliderTrack.tsx app/components/CustomSliderTrack.tsx; do
+      if [ -f "$candidate" ]; then TRACK_FILE="$candidate"; break; fi
+    done
+    if [ -z "$TRACK_FILE" ]; then
+      echo "FAIL: CustomSliderTrack.tsx required for SLIDER_MATRIX or graphics matrix"
+      exit 1
+    fi
+    echo "OK: CustomSliderTrack.tsx exists ($TRACK_FILE)"
+  fi
+
+  if grep -q "getVisibleMcqOptionsForAnswers\|getVisibleMatrixItemsForAnswers" "$QUESTION_FILE"; then
+    if ! grep -q "customFieldValues" "$QUESTION_FILE"; then
+      echo "WARN: Question.tsx uses visibility helpers but may not pass customFieldValues 4th arg"
+    else
+      echo "OK: Question.tsx references customFieldValues for visibility helpers"
+    fi
+  fi
+fi
+
+SURVEY_PAGE=""
+for candidate in src/components/SurveyPage.tsx components/SurveyPage.tsx app/components/SurveyPage.tsx; do
+  if [ -f "$candidate" ]; then SURVEY_PAGE="$candidate"; break; fi
+done
+
+if [ -n "$SURVEY_PAGE" ]; then
+  if grep -q "customFieldValues" "$SURVEY_PAGE" || grep -q "CUSTOM_FIELD_VALUES" "$SURVEY_PAGE"; then
+    echo "OK: SurveyPage wires customFieldValues or CUSTOM_FIELD_VALUES"
+    if grep -q "CUSTOM_FIELD_VALUES" "$SURVEY_PAGE"; then
+      LIB_FILE=""
+      for candidate in src/lib/customFieldValues.ts lib/customFieldValues.ts; do
+        if [ -f "$candidate" ]; then LIB_FILE="$candidate"; break; fi
+      done
+      if [ -z "$LIB_FILE" ]; then
+        echo "WARN: SurveyPage imports CUSTOM_FIELD_VALUES but src/lib/customFieldValues.ts not found"
+      else
+        echo "OK: customFieldValues lib file exists ($LIB_FILE)"
+      fi
+    fi
+  else
+    echo "WARN: SurveyPage found but no customFieldValues wiring — required when survey uses CUSTOM_FIELD logic"
+  fi
 fi
 
 echo "Running npm run build..."

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

@@ -0,0 +1,201 @@
+(function () {
+  var SNAPSHOT = 'CFM_UI_CONFIG_SNAPSHOT';
+  var DELTA = 'CFM_UI_CONFIG_DELTA';
+  var LEGACY = 'CFM_UI_CONFIG';
+  var rafId = null;
+  var pending = {};
+  var liveEdit = false;
+
+  function flush() {
+    rafId = null;
+    var root = document.documentElement;
+    for (var k in pending) {
+      if (Object.prototype.hasOwnProperty.call(pending, k)) {
+        if (root.style.getPropertyValue(k) !== pending[k]) {
+          root.style.setProperty(k, pending[k]);
+        }
+        delete pending[k];
+      }
+    }
+  }
+
+  function queue(vars) {
+    for (var k in vars) {
+      if (Object.prototype.hasOwnProperty.call(vars, k)) pending[k] = vars[k];
+    }
+    if (rafId == null) rafId = requestAnimationFrame(flush);
+  }
+
+  function applyImmediate(vars) {
+    var root = document.documentElement;
+    for (var k in vars) {
+      if (Object.prototype.hasOwnProperty.call(vars, k)) {
+        root.style.setProperty(k, vars[k]);
+      }
+    }
+  }
+
+  function setDisplay(selector, visible) {
+    document.querySelectorAll(selector).forEach(function (el) {
+      el.style.display = visible ? '' : 'none';
+    });
+  }
+
+  function applyContent(patch) {
+    if (!patch) return;
+    if (patch.logoUrl !== undefined) {
+      document.querySelectorAll('[data-cfm-logo], header img, footer img').forEach(function (el) {
+        var img = el;
+        if (patch.logoUrl) {
+          img.src = patch.logoUrl;
+          img.style.display = '';
+        } else if (el.hasAttribute('data-cfm-logo')) {
+          img.style.display = 'none';
+        }
+      });
+      document.querySelectorAll('[data-cfm-logo-text]').forEach(function (el) {
+        if (patch.logoUrl) {
+          el.style.display = 'none';
+        } else {
+          el.style.display = '';
+          el.classList.remove('hidden');
+        }
+      });
+    }
+    if (patch.companyName !== undefined) {
+      document.querySelectorAll('[data-cfm-company]').forEach(function (el) {
+        el.textContent = patch.companyName || '';
+      });
+      document.querySelectorAll('[data-cfm-logo-text]').forEach(function (el) {
+        var logoImg = document.querySelector('[data-cfm-logo]');
+        var 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(function (el) {
+        el.textContent = patch.surveyTitle || '';
+      });
+    }
+    if (patch.browserTabTitle !== undefined && patch.browserTabTitle) {
+      document.title = patch.browserTabTitle;
+    }
+    if (patch.thankYouMessage !== undefined) {
+      document.querySelectorAll('[data-cfm-thank-you]').forEach(function (el) {
+        el.textContent = patch.thankYouMessage || '';
+      });
+    }
+    if (patch.buttonLabels && patch.buttonLabels.next) {
+      document.querySelectorAll('[data-cfm-btn-next]').forEach(function (el) {
+        el.textContent = patch.buttonLabels.next;
+      });
+    }
+    if (patch.buttonLabels && patch.buttonLabels.back) {
+      document.querySelectorAll('[data-cfm-btn-back]').forEach(function (el) {
+        el.textContent = patch.buttonLabels.back;
+      });
+    }
+    if (patch.copyrightText !== undefined) {
+      document.querySelectorAll('[data-cfm-copyright]').forEach(function (el) {
+        el.textContent = patch.copyrightText || '';
+      });
+    }
+    if (patch.footerLinks) {
+      var nav = document.querySelector('[data-cfm-footer-links]');
+      if (nav) {
+        nav.innerHTML = patch.footerLinks
+          .map(function (l) {
+            return (
+              '<a href="' +
+              l.url +
+              '" class="cfm-footer-link" target="_blank" rel="noopener noreferrer">' +
+              l.label +
+              '</a>'
+            );
+          })
+          .join('');
+      }
+    }
+    if (patch.layoutFlags) {
+      var flags = patch.layoutFlags;
+      if (flags.showCompanyName !== undefined) {
+        setDisplay('[data-cfm-company]', flags.showCompanyName);
+      }
+      if (flags.showHeader !== undefined) {
+        setDisplay('.cfm-header, header.cfm-header, .sticky.top-0', flags.showHeader);
+      }
+      if (flags.showFooter !== undefined) {
+        setDisplay('.cfm-footer, footer.cfm-footer', flags.showFooter);
+      }
+      if (flags.showProgressBar !== undefined) {
+        setDisplay('.cfm-progress, [data-cfm-progress]', flags.showProgressBar);
+      }
+      if (flags.showLanguageSwitcher !== undefined) {
+        setDisplay('[data-cfm-language]', flags.showLanguageSwitcher);
+      }
+      if (flags.showNextButton !== undefined) {
+        setDisplay('[data-cfm-btn-next]', flags.showNextButton);
+      }
+      if (flags.showBackButton !== undefined) {
+        setDisplay('[data-cfm-btn-back]', flags.showBackButton);
+      }
+      if (flags.showQuestionNumbers !== undefined) {
+        setDisplay('[data-cfm-question-number]', flags.showQuestionNumbers);
+      }
+      if (flags.showRequiredAsterisk !== undefined) {
+        setDisplay('[data-cfm-required]', flags.showRequiredAsterisk);
+      }
+      if (flags.showFooterLogo !== undefined) {
+        setDisplay('[data-cfm-footer-logo]', flags.showFooterLogo);
+      }
+    }
+    if (patch.domAttributes) {
+      var root = document.documentElement;
+      for (var attr in patch.domAttributes) {
+        if (Object.prototype.hasOwnProperty.call(patch.domAttributes, attr)) {
+          root.setAttribute(attr, patch.domAttributes[attr]);
+        }
+      }
+    }
+    if (patch.previewState && patch.previewState.textfieldPlaceholder !== undefined) {
+      document.querySelectorAll('[data-cfm-textfield]').forEach(function (el) {
+        el.setAttribute('placeholder', patch.previewState.textfieldPlaceholder || '');
+      });
+    }
+  }
+
+  function handleMessage(event) {
+    var data = event.data;
+    if (!data || !data.type) return;
+    if (data.type !== SNAPSHOT && data.type !== DELTA && data.type !== LEGACY) return;
+
+    if (!liveEdit) {
+      liveEdit = true;
+      document.documentElement.classList.add('cfm-live-edit');
+    }
+
+    if (data.cssVars) {
+      if (data.type === DELTA) queue(data.cssVars);
+      else applyImmediate(data.cssVars);
+    }
+
+    if (data.contentPatch) {
+      applyContent(data.contentPatch);
+    }
+
+    if (data.type === LEGACY && data.cssVars) {
+      applyImmediate(data.cssVars);
+    }
+  }
+
+  window.addEventListener('message', handleMessage);
+
+  try {
+    var channel = new BroadcastChannel('cfm-wizard-preview');
+    channel.addEventListener('message', function (event) {
+      handleMessage(event);
+    });
+  } catch (e) {
+    /* BroadcastChannel unavailable */
+  }
+})();

package/templates/preview-harness/previewPages.js

@@ -0,0 +1,108 @@
+'use strict';
+
+const sharedStyles = `
+  .cfm-header { height:var(--cfm-header-height); background:var(--cfm-header-bg); border-bottom:1px solid var(--cfm-header-border); display:flex; align-items:center; padding:0 var(--cfm-header-padding-x); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
+  .cfm-header-logo { width:var(--cfm-header-logo-width); height:var(--cfm-header-logo-height); object-fit:contain; padding:var(--cfm-header-logo-padding); background:var(--cfm-primary); }
+  .cfm-header-company { font-size:var(--cfm-header-company-size); font-weight:var(--cfm-header-company-weight); color:var(--cfm-header-company-color); margin-left:16px; }
+  .cfm-footer { background:var(--cfm-footer-bg); color:var(--cfm-footer-text); padding:var(--cfm-footer-padding-y) var(--cfm-footer-padding-x); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end; }
+  .cfm-footer-links { display:flex; gap:24px; flex-wrap:wrap; }
+  .cfm-footer-links a { color:var(--cfm-footer-link); text-decoration:none; font-size:12px; }
+  .cfm-progress { height:var(--cfm-progress-height); background:var(--cfm-progress-track); border-radius:999px; overflow:hidden; margin:var(--cfm-sticky-pt) 0 var(--cfm-sticky-pb); }
+  .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); display:flex; align-items:center; justify-content:center; font-size:14px; }
+  .cfm-nps-cell.selected { background:var(--cfm-nps-selected-fill); border:2px solid var(--cfm-accent); }
+  .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-cell { width:var(--cfm-csat-cell-size); height:var(--cfm-csat-cell-size); border-radius:50%; border:2px solid #d1d5db; }
+  .cfm-matrix-cell.selected { border-color:var(--cfm-csat-ring-color); background:var(--cfm-selected-bg); }
+  .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-csat-ring-color); border-radius:8px; }
+  .cfm-star { color:var(--cfm-star-color); font-size:24px; opacity:var(--cfm-star-unselected-opacity); }
+  .cfm-star.selected { opacity:1; }
+  .cfm-badge { width:40px; height:40px; border-radius:8px; background:var(--cfm-badge-color); color:white; display:flex; align-items:center; justify-content:center; font-weight:600; }
+  .cfm-slider-track { height:8px; background:var(--cfm-slider-track); border-radius:4px; position:relative; margin:24px 0; }
+  .cfm-slider-thumb { width:20px; height:20px; background:var(--cfm-slider-thumb); border-radius:50%; position:absolute; top:-6px; left:60%; }
+  .cfm-tick { width:var(--cfm-slider-tick-size); height:var(--cfm-slider-tick-size); background:var(--cfm-slider-tick); border-radius:4px; font-size:11px; display:flex; align-items:center; justify-content:center; color:white; }
+  .cfm-dropzone { border:2px dashed var(--cfm-upload-accent); border-radius:var(--cfm-border-radius); padding:var(--cfm-upload-padding); text-align:center; color:var(--cfm-text); }
+  .cfm-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 white; border-radius:50%; position:absolute; }
+  .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; }
+`;
+
+function cells(n) {
+  return Array.from({ length: n }, (_, i) =>
+    `<div class="cfm-matrix-cell${i === 2 ? ' selected' : ''}"></div>`,
+  ).join('');
+}
+
+function matrixPreview(label) {
+  return `<div class="cfm-matrix-row"><div class="cfm-matrix-label">${label}</div><div class="cfm-matrix-cells">${cells(5)}</div></div>`;
+}
+
+const npsCells = Array.from({ length: 11 }, (_, i) =>
+  `<div class="cfm-nps-cell${i === 8 ? ' selected' : ''}">${i}</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: '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_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-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">2</div><div class="cfm-badge">3</div></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_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_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"><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>` },
+  { 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: '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>` },
+];
+
+function buildPreviewHtml(def, inlineCss, inlineJs) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${def.title} — CFM Preview</title>
+  <style>${inlineCss}\n${sharedStyles}</style>
+</head>
+<body>
+  <div class="cfm-preview-root">${def.body}</div>
+  <script>${inlineJs}</script>
+</body>
+</html>`;
+}
+
+module.exports = { PREVIEW_PAGE_DEFS, buildPreviewHtml, sharedStyles, PREVIEW_KEYS: PREVIEW_PAGE_DEFS.map((d) => d.key) };