@explorer02/cfm-survey-sdk 0.3.4 → 0.3.6

package/templates/docs/templates/Header.tsx

@@ -1,8 +1,11 @@
 /**
  * Wizard-ready Header — copy to src/components/Header.tsx
  *
- * Logo + company placement driven entirely by --cfm-header-* CSS vars from survey-ui-config.
- * Logo src from getLogoSrc() — never hardcode asset paths.
+ * 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';
 
@@ -16,131 +19,77 @@ const seedCompany = getCompanyName();
 const seedLogoSrc = getLogoSrc({ staticExport: true });
 const seedShowCompany = shouldShowCompanyName();
 
-function LogoSlot() {
-  const hasLogoFile = Boolean(seedLogoSrc);
-  return (
-    <div
-      className="cfm-header-logo-slot shrink-0"
-      style={{
-        width: 'var(--cfm-header-logo-width, 80px)',
-        height: 'var(--cfm-header-logo-height, 80px)',
-        padding: 'var(--cfm-header-logo-padding, 8px)',
-        boxSizing: 'border-box',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      {hasLogoFile ? (
-        <img
-          data-cfm-logo
-          src={seedLogoSrc!}
-          alt={seedCompany || 'Logo'}
-          className="h-full w-full object-contain"
-          style={{ background: 'transparent' }}
-        />
-      ) : (
-        <img data-cfm-logo src="" alt="Logo" className="h-full w-full object-contain" style={{ display: 'none' }} />
-      )}
-    </div>
-  );
-}
-
-function CompanyName({ inBrandRow = false }: { inBrandRow?: boolean }) {
+export default function Header({ embedded = false }: HeaderProps) {
   const hasLogoFile = Boolean(seedLogoSrc);
-  const show =
-    seedShowCompany && (hasLogoFile || seedCompany) && (hasLogoFile || !inBrandRow);
 
-  return (
-    <>
-      <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: show ? (hasLogoFile ? '' : 'none') : 'none',
-          marginTop: 'var(--cfm-header-company-margin-top, 0)',
-          marginLeft: inBrandRow ? 0 : 'var(--cfm-header-company-margin-left, 0)',
-          marginRight: inBrandRow ? 0 : '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)',
-          lineHeight: 1.2,
-        }}
-      >
-        {seedCompany}
-      </span>
-    </>
-  );
-}
-
-export default function Header({ embedded = false }: HeaderProps) {
   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, 140px)',
         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 mx-auto grid h-full w-full items-center"
-        style={{
-          maxWidth: 'var(--cfm-max-width, 48rem)',
-          gridTemplateColumns: '1fr 1fr 1fr',
-          padding:
-            'var(--cfm-header-padding-y, 12px) var(--cfm-header-padding-x, 40px)',
-          boxSizing: 'border-box',
-        }}
+        className="cfm-header-inner mx-auto w-full"
+        style={{ maxWidth: 'var(--cfm-max-width, 48rem)' }}
       >
-        {/* Brand row: logo + company adjacent (left+left or right+right) */}
         <div
-          className="cfm-header-brand-row 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)',
-            display: 'var(--cfm-header-brand-row-display, none)',
-          }}
+          className="cfm-header-brand flex items-center"
+          style={{ gap: 'var(--cfm-header-brand-gap, 16px)' }}
         >
-          <LogoSlot />
-          <CompanyName inBrandRow />
-        </div>
+          {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: 'transparent',
+                boxSizing: 'border-box',
+              }}
+            />
+          ) : (
+            <img
+              data-cfm-logo
+              src=""
+              alt="Logo"
+              className="shrink-0 object-contain"
+              style={{ display: 'none' }}
+            />
+          )}
 
-        {/* Separate slots when company is not adjacent to logo */}
-        <div
-          className="cfm-header-logo-slot-only"
-          style={{
-            gridColumn: 'var(--cfm-header-logo-col, 1)',
-            justifySelf: 'var(--cfm-header-logo-justify, start)',
-            display: 'var(--cfm-header-logo-slot-display, flex)',
-          }}
-        >
-          <LogoSlot />
-        </div>
+          <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>
 
-        <div
-          className="cfm-header-company-slot flex items-center"
-          style={{
-            gridColumn: 'var(--cfm-header-company-col, 2)',
-            justifySelf: 'var(--cfm-header-company-justify, center)',
-            display: 'var(--cfm-header-company-slot-display, flex)',
-          }}
-        >
-          <CompanyName />
+          {seedCompany ? (
+            <span
+              data-cfm-company
+              className="font-semibold"
+              style={{
+                display: seedShowCompany && hasLogoFile ? undefined : '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>
+          ) : null}
         </div>
       </div>
     </header>

package/templates/docs/templates/LikertMatrixScale.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import type { CfmMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-survey-sdk';
 import { columnSubmitValue } from './surveyUiScaleUtils';
 import MatrixDropdown from './MatrixDropdown';
-import { columnLabelPillStyle, matrixColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
+import { matrixColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
 import { focusRingVar, matrixCarouselDotVar, matrixRadioDotStyle, matrixRadioRingStyle, matrixRowBackgroundStyle } from '@/lib/surveyUi/selectionStyles';
 
 const MATRIX_ROW_LABEL_WIDTH = 'var(--cfm-matrix-row-width, 180px)';
@@ -219,7 +219,7 @@ function LikertMatrixGridLayout({
                     position: 'absolute', left: leftPos, transform: 'translateX(-50%)',
                     bottom: 0, display: 'flex', justifyContent: 'center', whiteSpace: 'nowrap'
                   }}>
-                    <span style={{ fontSize: '13px', fontWeight: 600, ...columnLabelPillStyle('matrix') }}>{lbl}</span>
+                    <span style={{ fontSize: '13px', fontWeight: 600, ...matrixColumnLabelStyle() }}>{lbl}</span>
                   </div>
                 );
               })}
@@ -234,7 +234,7 @@ function LikertMatrixGridLayout({
               <div style={{ flex: 1, display: 'grid', gridTemplateColumns: `repeat(${gridCols.length}, 1fr)` }}>
                 {gridCols.map((col) => (
                   <div key={col.id} style={{ display: 'flex', justifyContent: 'center', padding: '0 4px' }}>
-                    <span style={{ fontSize: '13px', fontWeight: 500, ...columnLabelPillStyle('matrix') }}
+                    <span style={{ fontSize: '13px', fontWeight: 500, textAlign: 'center', lineHeight: 1.2, ...matrixColumnLabelStyle() }}
                           dangerouslySetInnerHTML={{ __html: transposeTable ? ('statementText' in col ? col.statementText : col.label) : ('label' in col ? col.label : (col as { statementText: string }).statementText) }} />
                   </div>
                 ))}

package/templates/docs/templates/SliderMatrixScale.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import type { SliderMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-survey-sdk';
 import { tickColorFromIndex } from './surveyUiScaleUtils';
 import { CustomSliderTrack } from './CustomSliderTrack';
-import { columnLabelPillStyle, sliderTickLabelStyle } from '@/lib/surveyUi/labelStyles';
+import { hintLabelStyle, sliderTickLabelStyle } from '@/lib/surveyUi/labelStyles';
 
 const MATRIX_ROW_LABEL_WIDTH = 'var(--cfm-matrix-row-width, 180px)';
 const SLIDER_ROW_BAND = 'var(--cfm-slider-row-band, var(--cfm-row-band, #f3f4f6))';
@@ -81,14 +81,15 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
                 display: 'flex',
                 justifyContent: 'space-between',
                 margin: '0 16px',
-                marginBottom: '16px',
+                marginBottom: tickValues.length > 0 ? '24px' : '8px',
+                minHeight: '20px',
                 fontSize: '14px',
                 fontWeight: 500,
               }}
             >
               {labels.map((lbl, idx) => (
                 <div key={idx} style={{ width: 0, display: 'flex', justifyContent: 'center' }}>
-                  <span style={columnLabelPillStyle('hint')}>
+                  <span style={hintLabelStyle()}>
                     {lbl}
                   </span>
                 </div>
@@ -100,10 +101,11 @@ export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: Sl
             style={{
               position: 'relative',
               margin: '0 16px',
+              marginTop: labels && labels.length > 0 ? '4px' : '0',
               marginBottom: '8px',
               fontSize: '14px',
               fontWeight: 400,
-              height: '28px',
+              height: '32px',
               ...sliderTickLabelStyle(),
             }}
           >

package/templates/docs/templates/labelStyles.ts

@@ -4,55 +4,45 @@
  */
 import type { CSSProperties } from 'react';
 
-export type ColumnLabelScope = 'matrix' | 'csat' | 'rating' | 'hint' | 'sliderTick';
+type LabelPillScope = 'matrix' | 'csat' | 'rating' | 'hint' | 'sliderTick';
 
-const PILL_BASE: CSSProperties = {
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: '4px 10px',
-  borderRadius: 'var(--cfm-border-radius, 6px)',
-  textAlign: 'center',
-  lineHeight: 1.2,
-  whiteSpace: 'nowrap',
-  boxSizing: 'border-box',
+const PILL_SCOPE_VARS: Record<LabelPillScope, { color: string; bg: string }> = {
+  matrix: {
+    color: '--cfm-matrix-column-label-color',
+    bg: '--cfm-matrix-column-label-bg',
+  },
+  csat: {
+    color: '--cfm-csat-column-label-color',
+    bg: '--cfm-csat-column-label-bg',
+  },
+  rating: {
+    color: '--cfm-rating-column-label-color',
+    bg: '--cfm-rating-column-label-bg',
+  },
+  hint: {
+    color: '--cfm-hint-label-color',
+    bg: '--cfm-hint-label-bg',
+  },
+  sliderTick: {
+    color: '--cfm-slider-tick-label-color',
+    bg: '--cfm-slider-tick-label-bg',
+  },
 };
 
-function scopeColorVars(scope: ColumnLabelScope): { color: string; backgroundColor: string } {
-  switch (scope) {
-    case 'matrix':
-      return {
-        color: 'var(--cfm-matrix-column-label-color, #4b5563)',
-        backgroundColor: 'var(--cfm-matrix-column-label-bg, transparent)',
-      };
-    case 'csat':
-      return {
-        color: 'var(--cfm-csat-column-label-color, #4b5563)',
-        backgroundColor: 'var(--cfm-csat-column-label-bg, transparent)',
-      };
-    case 'rating':
-      return {
-        color: 'var(--cfm-rating-column-label-color, var(--cfm-matrix-column-label-color, #4b5563))',
-        backgroundColor: 'var(--cfm-rating-column-label-bg, var(--cfm-matrix-column-label-bg, transparent))',
-      };
-    case 'hint':
-      return {
-        color: 'var(--cfm-hint-label-color, #6b7280)',
-        backgroundColor: 'var(--cfm-hint-label-bg, transparent)',
-      };
-    case 'sliderTick':
-      return {
-        color: 'var(--cfm-slider-tick-label-color, #4b5563)',
-        backgroundColor: 'var(--cfm-slider-tick-label-bg, transparent)',
-      };
-    default:
-      return { color: '#4b5563', backgroundColor: 'transparent' };
-  }
-}
-
-/** Centered pill for column / anchor / tick labels — wizard Label Items customization. */
-export function columnLabelPillStyle(scope: ColumnLabelScope): CSSProperties {
-  return { ...PILL_BASE, ...scopeColorVars(scope) };
+export function columnLabelPillStyle(scope: LabelPillScope): CSSProperties {
+  const vars = PILL_SCOPE_VARS[scope];
+  return {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '4px 10px',
+    borderRadius: 'var(--cfm-border-radius, 6px)',
+    textAlign: 'center',
+    lineHeight: 1.2,
+    whiteSpace: 'nowrap',
+    color: `var(${vars.color}, #4b5563)`,
+    backgroundColor: `var(${vars.bg}, transparent)`,
+  };
 }
 
 export function hintLabelStyle(): CSSProperties {
@@ -60,17 +50,17 @@ export function hintLabelStyle(): CSSProperties {
 }
 
 export function matrixColumnLabelStyle(): CSSProperties {
-  return scopeColorVars('matrix');
+  return columnLabelPillStyle('matrix');
 }
 
 export function csatColumnLabelStyle(): CSSProperties {
-  return scopeColorVars('csat');
+  return columnLabelPillStyle('csat');
 }
 
 export function ratingColumnLabelStyle(): CSSProperties {
-  return scopeColorVars('rating');
+  return columnLabelPillStyle('rating');
 }
 
 export function sliderTickLabelStyle(): CSSProperties {
-  return scopeColorVars('sliderTick');
+  return columnLabelPillStyle('sliderTick');
 }

package/templates/docs/templates/surveyUiScaleUtils.ts

@@ -96,3 +96,20 @@ export function columnAccentColor(column: { id: string; label: string }): string
   }
   return undefined;
 }
+
+/** Column-center anchor label positioning (m = option columns, n = anchor labels). */
+export function anchorLabelPercent(
+  index: number,
+  labelCount: number,
+  columnCount: number,
+  isGraphics = false,
+): number {
+  const m = columnCount;
+  const n = labelCount;
+  if (isGraphics) {
+    return n === 1 ? 0 : (index / (n - 1)) * 100;
+  }
+  const startPercent = 0.5 / m;
+  const rangePercent = (m - 1) / m;
+  return n === 1 ? 50 : (startPercent + (index / (n - 1)) * rangePercent) * 100;
+}

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

@@ -76,6 +76,35 @@
     });
   }
 
+  function ensureCompanySpan() {
+    var brand = document.querySelector('.cfm-header-brand');
+    if (!brand) return null;
+    var el = brand.querySelector('[data-cfm-company]');
+    if (el) return el;
+    el = document.createElement('span');
+    el.setAttribute('data-cfm-company', '');
+    el.className = 'font-semibold';
+    el.style.color = 'var(--cfm-header-company-color, var(--cfm-text))';
+    el.style.fontSize = 'var(--cfm-header-company-size, 18px)';
+    el.style.fontWeight = 'var(--cfm-header-company-weight, 600)';
+    var logo = brand.querySelector('[data-cfm-logo]');
+    if (logo && logo.parentNode === brand) {
+      if (logo.nextSibling) brand.insertBefore(el, logo.nextSibling);
+      else brand.appendChild(el);
+    } else {
+      brand.appendChild(el);
+    }
+    return el;
+  }
+
+  function companyNameVisible() {
+    var root = document.documentElement;
+    var attr = root.getAttribute('data-cfm-show-company-name');
+    if (attr === '0') return false;
+    if (attr === '1') return true;
+    return readVar('--cfm-header-show-company', '1') !== '0';
+  }
+
   function applyThemeSideEffects() {
     applyNumberBadgeColors();
     applyDropzoneStyle();
@@ -105,15 +134,23 @@
       });
       document.querySelectorAll('[data-cfm-company]').forEach(function (el) {
         if (patch.logoUrl) {
-          el.style.display = el.textContent ? '' : 'none';
+          var show = companyNameVisible() && el.textContent;
+          el.style.display = show ? '' : 'none';
         }
       });
     }
     if (patch.companyName !== undefined) {
       var name = patch.companyName || '';
+      if (name && document.querySelectorAll('[data-cfm-company]').length === 0) {
+        ensureCompanySpan();
+      }
       document.querySelectorAll('[data-cfm-company]').forEach(function (el) {
         el.textContent = name;
-        el.style.display = name ? '' : 'none';
+        var logoImg = document.querySelector('[data-cfm-logo]');
+        var logoVisible =
+          logoImg && logoImg.style.display !== 'none' && logoImg.getAttribute('src');
+        var show = name && logoVisible && companyNameVisible();
+        el.style.display = show ? '' : 'none';
       });
       document.querySelectorAll('[data-cfm-logo-text]').forEach(function (el) {
         var logoImg = document.querySelector('[data-cfm-logo]');
@@ -174,7 +211,17 @@
     if (patch.layoutFlags) {
       var flags = patch.layoutFlags;
       if (flags.showCompanyName !== undefined) {
-        setDisplay('[data-cfm-company]', flags.showCompanyName);
+        document.documentElement.setAttribute(
+          'data-cfm-show-company-name',
+          flags.showCompanyName ? '1' : '0',
+        );
+        document.querySelectorAll('[data-cfm-company]').forEach(function (el) {
+          var logoImg = document.querySelector('[data-cfm-logo]');
+          var logoVisible =
+            logoImg && logoImg.style.display !== 'none' && logoImg.getAttribute('src');
+          var show = flags.showCompanyName && el.textContent && logoVisible;
+          el.style.display = show ? '' : 'none';
+        });
       }
       if (flags.showHeader !== undefined) {
         setDisplay('.cfm-header, header.cfm-header', flags.showHeader);
@@ -195,10 +242,16 @@
         setDisplay('[data-cfm-btn-back]', flags.showBackButton);
       }
       if (flags.showQuestionNumbers !== undefined) {
-        setDisplay('[data-cfm-question-number]', flags.showQuestionNumbers);
+        document.documentElement.setAttribute(
+          'data-cfm-show-question-numbers',
+          flags.showQuestionNumbers ? '1' : '0',
+        );
       }
       if (flags.showRequiredAsterisk !== undefined) {
-        setDisplay('[data-cfm-required]', flags.showRequiredAsterisk);
+        document.documentElement.setAttribute(
+          'data-cfm-show-required',
+          flags.showRequiredAsterisk ? '1' : '0',
+        );
       }
       if (flags.showFooterLogo !== undefined) {
         setDisplay('[data-cfm-footer-logo]', flags.showFooterLogo);

package/templates/preview-harness/vite-app/src/PreviewConfigContext.tsx

@@ -71,7 +71,14 @@ export function PreviewConfigProvider({ children }: { children: ReactNode }) {
       if (!data?.type) return;
       if (data.type !== PREVIEW_BRIDGE_SNAPSHOT && data.type !== PREVIEW_BRIDGE_DELTA) return;
       if (data.contentPatch?.previewState) {
-        setPreviewState((prev) => ({ ...prev, ...data.contentPatch.previewState }));
+        setPreviewState((prev) => {
+          const next = { ...prev, ...data.contentPatch.previewState };
+          const changed = (Object.keys(data.contentPatch.previewState) as (keyof PreviewStatePatch)[]).some(
+            (key) => prev[key] !== next[key],
+          );
+          if (changed) setConfigRevision((r) => r + 1);
+          return next;
+        });
       }
       if (data.contentPatch?.domAttributes) {
         const root = document.documentElement;
@@ -85,7 +92,6 @@ export function PreviewConfigProvider({ children }: { children: ReactNode }) {
           root.style.setProperty(key, value as string);
         }
       }
-      setConfigRevision((r) => r + 1);
       applyThemeSideEffects();
     };
 

package/templates/preview-harness/vite-app/src/fixtures/questions.ts

@@ -209,7 +209,8 @@ export const FIXTURE_CSAT_EMOJI = base({
   displayStyle: 'emoji',
   gridLayout: 'standard',
   statementRows: MATRIX_ROW_SINGLE,
-  scaleColumns: LIKERT_COLUMNS,
+  scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+  scaleAnchorLabels: ['Very unhappy', '', '', '', 'Very happy'],
 });
 
 export const FIXTURE_CSAT_STAR = base({
@@ -217,7 +218,7 @@ export const FIXTURE_CSAT_STAR = base({
   displayStyle: 'star',
   gridLayout: 'standard',
   statementRows: MATRIX_ROW_SINGLE,
-  scaleColumns: LIKERT_COLUMNS,
+  scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
 });
 
 export const FIXTURE_CSAT_NUMBERED = base({
@@ -225,7 +226,7 @@ export const FIXTURE_CSAT_NUMBERED = base({
   displayStyle: 'numbered',
   gridLayout: 'standard',
   statementRows: MATRIX_ROWS_MULTI,
-  scaleColumns: LIKERT_COLUMNS,
+  scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
 });
 
 export const FIXTURE_CSAT_GRAPHICS = base({
@@ -233,7 +234,8 @@ export const FIXTURE_CSAT_GRAPHICS = base({
   displayStyle: 'graphics',
   gridLayout: 'standard',
   statementRows: MATRIX_ROW_SINGLE,
-  scaleColumns: LIKERT_COLUMNS,
+  scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
+  scaleAnchorLabels: ['Label 1', 'Label 2'],
 });
 
 export const FIXTURE_CSAT_CAROUSEL = base({
@@ -241,7 +243,7 @@ export const FIXTURE_CSAT_CAROUSEL = base({
   displayStyle: 'star',
   gridLayout: 'carousel',
   statementRows: [{ id: 'r1', statementText: 'Overall experience' }],
-  scaleColumns: LIKERT_COLUMNS,
+  scaleColumns: Array.from({ length: 5 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
 });
 
 export const FIXTURE_CSAT_DROPDOWN = base({
@@ -257,22 +259,13 @@ export const FIXTURE_CSAT_DROPDOWN = base({
   ],
 });
 
-const RATING_ANCHOR_LABELS = [
-  'Strongly Disagree',
-  'Disagree',
-  'Neutral',
-  'Agree',
-  'Strongly Agree',
-];
-
 export const FIXTURE_RATING_STAR = base({
   type: 'RATING_MATRIX',
   displayStyle: 'star',
   gridLayout: 'standard',
   showColumnHeaders: true,
   statementRows: MATRIX_ROWS_MULTI,
-  scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
-  scaleAnchorLabels: RATING_ANCHOR_LABELS,
+  scaleColumns: LIKERT_COLUMNS,
 });
 
 export const FIXTURE_RATING_NUMBERED = base({
@@ -281,7 +274,6 @@ export const FIXTURE_RATING_NUMBERED = base({
   gridLayout: 'standard',
   statementRows: MATRIX_ROWS_MULTI,
   scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
-  scaleAnchorLabels: RATING_ANCHOR_LABELS,
 });
 
 export const FIXTURE_RATING_RADIO = base({
@@ -298,7 +290,6 @@ export const FIXTURE_RATING_EMOJI = base({
   gridLayout: 'standard',
   statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
-  scaleAnchorLabels: RATING_ANCHOR_LABELS,
 });
 
 export const FIXTURE_RATING_GRAPHICS = base({
@@ -307,7 +298,7 @@ export const FIXTURE_RATING_GRAPHICS = base({
   gridLayout: 'standard',
   statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: Array.from({ length: 10 }, (_, i) => ({ id: `c${i}`, label: String(i + 1) })),
-  scaleAnchorLabels: RATING_ANCHOR_LABELS,
+  scaleAnchorLabels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
 });
 
 export const FIXTURE_RATING_SLIDER = base({