@explorer02/cfm-survey-sdk 0.2.9 → 0.3.1

package/templates/docs/templates/CsatMatrixScale.tsx

@@ -1,19 +1,21 @@
 import React, { useState } from 'react';
 import type { CsatQuestion, RatingMatrixQuestion, MatrixRowAnswers, ScaleColumn } from '@explorer02/cfm-survey-sdk';
-import { csatColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
+import { getEmojiForIndex, CsatStarIcons } from './surveyUiIcons';
+import { columnSubmitValue, nonNaScaleColumns } from './surveyUiScaleUtils';
+import { CustomSliderTrack } from './CustomSliderTrack';
+import MatrixDropdown from './MatrixDropdown';
 import {
-  cellSelectedVar,
-  focusRingVar,
-  matrixRadioDotStyle,
   matrixRadioRingStyle,
+  matrixRadioDotStyle,
   scaleCellSelectedStyle,
-  emojiSizeStyle,
   unselectedOpacityStyle,
+  emojiSizeStyle,
+  cellSelectedVar,
+  focusRingVar,
 } from '@/lib/surveyUi/selectionStyles';
-import { getEmojiForIndex, CsatStarIcons } from './surveyUiIcons';
-import { columnSubmitValue, nonNaScaleColumns } from './surveyUiScaleUtils';
-import { CustomSliderTrack } from './CustomSliderTrack';
-import MatrixDropdown from './MatrixDropdown';
+import { csatColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
+
+const MATRIX_ROW_LABEL_WIDTH = 'var(--cfm-matrix-row-width, 180px)';
 
 type CsatMatrixQuestion = CsatQuestion | RatingMatrixQuestion;
 
@@ -36,10 +38,10 @@ function GraphicsColumnLabelsRow({ scaleColumns }: { scaleColumns: ScaleColumn[]
                 textAlign: 'center',
                 fontSize: '12px',
                 fontWeight: 500,
+                color: '#4b5563',
                 lineHeight: 1.2,
                 wordBreak: 'break-word',
                 width: '64px',
-                ...csatColumnLabelStyle(),
               }}
             >
               <span dangerouslySetInnerHTML={{ __html: col.label }} />
@@ -104,10 +106,10 @@ function CsatMatrixVerticalList({
                     onClick={() => onCellSelect(row.id, submitValue)}
                     style={{
                       width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'flex-start',
-                      borderRadius: '8px', border: `1px solid ${isSelected ? focusRingVar : '#d1d5db'}`,
+                      borderRadius: '8px', border: `1px solid ${isSelected ? '#e20074' : '#d1d5db'}`,
                       padding: '14px 18px', cursor: 'pointer', transition: 'all 0.15s',
-                      backgroundColor: isSelected ? 'var(--cfm-mcq-selected-bg)' : '#fff',
-                      color: isSelected ? focusRingVar : '#374151',
+                      backgroundColor: isSelected ? '#fdf2f8' : '#fff',
+                      color: isSelected ? '#e20074' : '#374151',
                       fontWeight: isSelected ? 600 : 400, fontSize: '15px', textAlign: 'left',
                     }}
                   >
@@ -126,9 +128,9 @@ function CsatMatrixVerticalList({
                     key={col.id}
                     style={{
                       display: 'flex', alignItems: 'center', gap: '16px',
-                      borderRadius: '8px', border: `1px solid ${isSelected ? focusRingVar : '#e5e5e5'}`,
+                      borderRadius: '8px', border: `1px solid ${isSelected ? '#e20074' : '#e5e5e5'}`,
                       padding: '16px 20px', cursor: 'pointer', transition: 'all 0.15s',
-                      backgroundColor: isSelected ? 'var(--cfm-mcq-selected-bg)' : '#fff',
+                      backgroundColor: isSelected ? '#fdf2f8' : '#fff',
                     }}
                   >
                     <input type="radio" name={`${question.id}-${row.id}`}
@@ -136,8 +138,13 @@ function CsatMatrixVerticalList({
                       onChange={() => onCellSelect(row.id, submitValue)}
                       style={{ position: 'absolute', width: 0, height: 0, opacity: 0 }}
                     />
-                    <div style={matrixRadioRingStyle(isSelected, '20px')}>
-                      {isSelected && <div style={matrixRadioDotStyle(isSelected, '10px')} />}
+                    <div style={{
+                      display: 'flex', width: '20px', height: '20px', flexShrink: 0,
+                      alignItems: 'center', justifyContent: 'center', borderRadius: '50%',
+                      border: isSelected ? '2px solid #e20074' : '1.5px solid #9ca3af',
+                      backgroundColor: '#fff',
+                    }}>
+                      {isSelected && <div style={{ width: '10px', height: '10px', borderRadius: '50%', backgroundColor: '#e20074' }} />}
                     </div>
                     <span style={{ fontSize: '15px', fontWeight: 500, color: '#111827' }}
                       dangerouslySetInnerHTML={{ __html: col.label }} />
@@ -151,7 +158,7 @@ function CsatMatrixVerticalList({
             <label style={{ display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer', userSelect: 'none' }}>
               <input type="checkbox" checked={selectedValue[row.id] === null}
                 onChange={() => onCellSelect(row.id, selectedValue[row.id] === null ? undefined : null)}
-                style={{ width: '16px', height: '16px', accentColor: focusRingVar, cursor: 'pointer' }} />
+                style={{ width: '16px', height: '16px', accentColor: '#e20074', cursor: 'pointer' }} />
               <span style={{ fontSize: '14px', fontWeight: 500, color: '#4b5563' }}>Not Applicable</span>
             </label>
           )}
@@ -195,7 +202,7 @@ function CsatMatrixGrid({
       {/* Labels row */}
       {showLabels && m > 0 && (
         <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '12px' }}>
-          <div style={{ width: 'var(--cfm-matrix-row-width, 180px)', flexShrink: 0 }} />
+          <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0 }} />
           <div style={{ flex: 1, display: 'flex' }}>
             <div style={{ flex: 1, position: 'relative', height: '24px', ...(isGraphics ? { margin: '0 40px' } : {}) }}>
               {labels!.map((label, i) => {
@@ -209,8 +216,7 @@ function CsatMatrixGrid({
                     left: `${percent}%`,
                     transform: 'translateX(-50%)',
                     textAlign: 'center', fontSize: '13px', fontWeight: 600,
-                    lineHeight: 1.3, whiteSpace: 'nowrap',
-                    ...csatColumnLabelStyle(),
+                    color: '#4b5563', lineHeight: 1.3, whiteSpace: 'nowrap'
                   }}>
                     {label}
                   </div>
@@ -225,7 +231,7 @@ function CsatMatrixGrid({
       {/* Column tick labels for graphics sliders (shown with or without anchor labels) */}
       {isGraphics && m > 0 && (
         <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: showLabels ? '8px' : '16px', minHeight: '24px' }}>
-          <div style={{ width: 'var(--cfm-matrix-row-width, 180px)', flexShrink: 0 }} />
+          <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0 }} />
           <div style={{ flex: 1, display: 'flex' }}>
             <GraphicsColumnLabelsRow scaleColumns={scaleColumns} />
             {hasNotApplicable && (
@@ -238,7 +244,7 @@ function CsatMatrixGrid({
       {/* Column Headers for non-graphics */}
       {!isGraphics && !showLabels && m > 0 && (
         <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '16px', minHeight: '24px' }}>
-          <div style={{ width: 'var(--cfm-matrix-row-width, 180px)', flexShrink: 0 }} />
+          <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0 }} />
           <div style={{ flex: 1, display: 'flex' }}>
             <div style={{ flex: 1, display: 'grid', gridTemplateColumns: `repeat(${scaleColumns.length}, 1fr)` }}>
               {scaleColumns.map(col => (
@@ -264,9 +270,9 @@ function CsatMatrixGrid({
         {statementRows.map((row, rowIdx) => (
           <div key={row.id} style={{
             display: 'flex', alignItems: 'center', borderRadius: '8px',
-            padding: '12px 0', backgroundColor: rowIdx % 2 === 0 ? 'var(--cfm-zebra-row)' : '#fff',
+            padding: '12px 0', backgroundColor: rowIdx % 2 === 0 ? 'rgba(249, 250, 251, 0.8)' : '#fff',
           }}>
-            <div style={{ width: 'var(--cfm-matrix-row-width, 180px)', flexShrink: 0, padding: '0 16px' }}>
+            <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0, padding: '0 16px' }}>
               <span style={{ fontSize: '14px', fontWeight: 500, color: '#111827', lineHeight: 1.4 }}
                 dangerouslySetInnerHTML={{ __html: row.statementText }} />
             </div>
@@ -305,7 +311,7 @@ function CsatMatrixGrid({
 
                   const RadioNode = (
                     <div style={matrixRadioRingStyle(isSelected)}>
-                      {isSelected && <div style={matrixRadioDotStyle(isSelected)} />}
+                      <div style={matrixRadioDotStyle(isSelected)} />
                     </div>
                   );
 
@@ -328,23 +334,22 @@ function CsatMatrixGrid({
                               ...emojiSizeStyle(),
                               transform: isSelected ? 'scale(1.1)' : isHovered ? 'scale(1.25)' : 'scale(1)',
                               ...(isSelected ? {
-                                backgroundColor: 'var(--cfm-mcq-selected-bg)',
-                                boxShadow: `0 0 0 2px ${focusRingVar}`,
+                                outline: `2px solid ${focusRingVar}`,
+                                backgroundColor: cellSelectedVar,
                                 borderRadius: '50%',
-                              } : {}),
+                              } : unselectedOpacityStyle()),
                             } : isStar ? {
                               padding: '4px',
                               transform: isHovered ? 'scale(1.1)' : 'scale(1)',
+                              color: isSelected ? cellSelectedVar : focusRingVar,
                               ...(isSelected ? {} : unselectedOpacityStyle()),
-                              opacity: isSelected ? 1 : isHovered ? 1 : undefined,
                               } : isNumbered ? {
-                                width: 'var(--cfm-csat-cell-size, 40px)', height: 'var(--cfm-csat-cell-size, 40px)', borderRadius: '8px',
+                                width: '40px', height: '40px', borderRadius: '8px',
                                 fontSize: '14px', fontWeight: 500,
-                                border: `1px solid ${isSelected ? focusRingVar : '#d1d5db'}`,
-                                backgroundColor: isSelected ? cellSelectedVar : '#fff',
-                                color: isSelected ? '#fff' : '#111827',
+                                ...(isSelected
+                                  ? scaleCellSelectedStyle(true)
+                                  : { border: '1px solid #d1d5db', backgroundColor: '#fff', color: '#111827' }),
                                 transition: 'all 0.15s',
-                                ...(isSelected ? scaleCellSelectedStyle(true) : {}),
                               } : { padding: '8px' }),
                           }}
                         >
@@ -382,7 +387,7 @@ function CsatMatrixGrid({
                 <label style={{ cursor: 'pointer' }}>
                   <input type="checkbox" checked={selectedValue[row.id] === null}
                     onChange={() => onCellSelect(row.id, selectedValue[row.id] === null ? undefined : null)}
-                    style={{ width: '16px', height: '16px', accentColor: focusRingVar, cursor: 'pointer' }} />
+                    style={{ width: '16px', height: '16px', accentColor: '#e20074', cursor: 'pointer' }} />
                 </label>
               </div>
             )}
@@ -441,8 +446,7 @@ function CsatMatrixCarousel({
               <div key={i} style={{
                 position: 'absolute', left: `${percent}%`, transform: 'translateX(-50%)',
                 textAlign: 'center', fontSize: '13px', fontWeight: 600,
-                lineHeight: 1.3, whiteSpace: 'nowrap',
-                ...csatColumnLabelStyle(),
+                color: '#4b5563', lineHeight: 1.3, whiteSpace: 'nowrap'
               }}>
                 {label}
               </div>
@@ -486,8 +490,13 @@ function CsatMatrixCarousel({
             const EmojiNode = isEmoji ? getEmojiForIndex(displayIdx, scaleColumns.length) : null;
             const StarNode = isStar ? (isSelected ? (CsatStarIcons.filled as any) : (CsatStarIcons.empty as any)) : null;
             const RadioNode = (
-              <div style={matrixRadioRingStyle(isSelected)}>
-                {isSelected && <div style={matrixRadioDotStyle(isSelected)} />}
+              <div style={{
+                display: 'flex', width: '18px', height: '18px',
+                alignItems: 'center', justifyContent: 'center', borderRadius: '50%',
+                margin: '0 auto', border: isSelected ? '2px solid #e20074' : '2px solid #d1d5db',
+                backgroundColor: '#fff',
+              }}>
+                {isSelected && <div style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#e20074' }} />}
               </div>
             );
 
@@ -503,23 +512,19 @@ function CsatMatrixCarousel({
                     transition: 'all 0.15s', border: 'none', backgroundColor: 'transparent',
                     cursor: 'pointer', borderRadius: '6px', pointerEvents: 'none',
                     ...(isEmoji ? {
-                      padding: '6px', ...emojiSizeStyle(),
-                      transform: isSelected ? 'scale(1.1)' : isHovered ? 'scale(1.25)' : 'scale(1)',
-                      ...(isSelected ? { backgroundColor: 'var(--cfm-mcq-selected-bg)', boxShadow: `0 0 0 2px ${focusRingVar}`, borderRadius: '50%' } : {}),
+                      padding: '6px', transform: isSelected ? 'scale(1.1)' : isHovered ? 'scale(1.25)' : 'scale(1)',
+                      ...(isSelected ? { backgroundColor: 'rgba(252, 231, 243, 0.6)', boxShadow: '0 0 0 2px rgba(226, 0, 116, 0.3)', borderRadius: '50%' } : {}),
                     } : isStar ? {
-                      padding: '4px', transform: isHovered ? 'scale(1.1)' : 'scale(1)',
-                      ...(isSelected ? {} : unselectedOpacityStyle()),
-                      opacity: isSelected ? 1 : isHovered ? 1 : undefined,
+                      padding: '4px', transform: isHovered ? 'scale(1.1)' : 'scale(1)', opacity: isSelected ? 1 : isHovered ? 1 : 0.5,
                     } : isNumbered ? {
-                      width: 'var(--cfm-csat-cell-size, 40px)', height: 'var(--cfm-csat-cell-size, 40px)', borderRadius: '8px', fontSize: '14px', fontWeight: 500,
-                      border: `1px solid ${isSelected ? focusRingVar : '#d1d5db'}`, backgroundColor: isSelected ? cellSelectedVar : '#fff', color: isSelected ? '#fff' : '#111827',
-                      ...(isSelected ? scaleCellSelectedStyle(true) : {}),
+                      width: '40px', height: '40px', borderRadius: '8px', fontSize: '14px', fontWeight: 500,
+                      border: `1px solid ${isSelected ? '#e20074' : '#d1d5db'}`, backgroundColor: isSelected ? '#e20074' : '#fff', color: isSelected ? '#fff' : '#111827',
                     } : { padding: '8px' }),
                   }}
                 >
                   {(EmojiNode ?? StarNode ?? (isNumbered ? (displayIdx + 1) : RadioNode)) as React.ReactNode}
                 </button>
-                <span style={{ fontSize: '13px', fontWeight: 500, textAlign: 'center', lineHeight: 1.2, ...csatColumnLabelStyle() }}
+                <span style={{ fontSize: '13px', fontWeight: 500, color: '#4b5563', textAlign: 'center', lineHeight: 1.2 }}
                       dangerouslySetInnerHTML={{ __html: col.label }} />
               </div>
             );
@@ -532,7 +537,7 @@ function CsatMatrixCarousel({
           <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
             <input type="checkbox" checked={selectedValue[row.id] === null}
                    onChange={() => onCellSelect(row.id, selectedValue[row.id] === null ? undefined : null)}
-                   style={{ width: '16px', height: '16px', accentColor: focusRingVar, cursor: 'pointer' }} />
+                   style={{ width: '16px', height: '16px', accentColor: '#e20074', cursor: 'pointer' }} />
             <span style={{ fontSize: '14px', fontWeight: 500, color: '#4b5563' }}>N/A</span>
           </label>
         </div>
@@ -554,7 +559,7 @@ function CsatMatrixCarousel({
             <button key={i} type="button" onClick={() => setActiveCarouselIndex(i)}
                     style={{
                       width: i === activeCarouselIndex ? '20px' : '8px', height: '8px', borderRadius: '4px',
-                      backgroundColor: i === activeCarouselIndex ? cellSelectedVar : '#d1d5db', border: 'none', padding: 0,
+                      backgroundColor: i === activeCarouselIndex ? '#e20074' : '#d1d5db', border: 'none', padding: 0,
                       cursor: 'pointer', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
                     }} />
           ))}
@@ -594,6 +599,7 @@ export function CsatMatrixScale({ question, selectedValue = {}, onSelect }: Csat
   const isStar = displayStyle === 'star';
   const isNumbered = displayStyle === 'numbered';
   const isGraphics = displayStyle === 'graphics';
+  const isStandardRadio = displayStyle === 'standard';
 
   const scaleColumns = nonNaScaleColumns(question.scaleColumns);
 
@@ -612,7 +618,7 @@ export function CsatMatrixScale({ question, selectedValue = {}, onSelect }: Csat
     );
   }
 
-  if (isDropdown || isSelectBox) {
+  if (isDropdown || isSelectBox || (isStandardRadio && question.type !== 'RATING_MATRIX')) {
     return (
       <CsatMatrixVerticalList
         question={question}

package/templates/docs/templates/CustomSliderTrack.tsx

@@ -7,7 +7,6 @@
  */
 
 import React from 'react';
-import { focusRingVar, cellSelectedVar } from '@/lib/surveyUi/selectionStyles';
 import { getEmojiForIndex } from './surveyUiIcons';
 
 type CustomSliderTrackProps = {
@@ -51,8 +50,7 @@ export function CustomSliderTrack({
     ? tooltipLabel.replace(/<[^>]*>/g, '')
     : String(Math.round(value));
 
-  const trackColor = disabled ? 'var(--cfm-slider-tick, #9ca3af)' : 'var(--cfm-slider-track, var(--cfm-primary))';
-  const thumbBorderColor = disabled ? 'var(--cfm-slider-tick, #9ca3af)' : focusRingVar;
+  const themeColor = disabled ? '#9ca3af' : 'var(--cfm-input-focus-ring, var(--cfm-primary))';
 
   return (
     <div
@@ -62,12 +60,12 @@ export function CustomSliderTrack({
     >
       <div style={{
         position: 'absolute', top: '50%', left: 0, right: 0, transform: 'translateY(-50%)',
-        height: '4px', borderRadius: '2px', backgroundColor: 'var(--cfm-slider-tick, #e5e7eb)',
+        height: '4px', borderRadius: '2px', backgroundColor: 'var(--cfm-slider-track, #e5e7eb)',
       }} />
 
       <div style={{
         position: 'absolute', top: '50%', left: 0, width: `${percentage}%`, transform: 'translateY(-50%)',
-        height: '4px', borderRadius: '2px', backgroundColor: trackColor,
+        height: '4px', borderRadius: '2px', backgroundColor: themeColor,
         transition: isDragging ? 'none' : 'width 0.15s ease-in-out',
       }} />
 
@@ -78,7 +76,7 @@ export function CustomSliderTrack({
             key={idx}
             style={{
               position: 'absolute', top: '50%', left: `${tickPct}%`, transform: 'translate(-50%, -50%)',
-              width: '1px', height: '8px', backgroundColor: 'var(--cfm-slider-tick, #d1d5db)', pointerEvents: 'none',
+              width: '1px', height: '8px', backgroundColor: '#d1d5db', pointerEvents: 'none',
             }}
           />
         );
@@ -115,22 +113,15 @@ export function CustomSliderTrack({
       ) : (
         <div style={{
           position: 'absolute', top: '50%', left: `${percentage}%`, transform: 'translate(-50%, -50%)',
-          width: '18px', height: '18px', borderRadius: '50%',
-          border: `2.5px solid ${thumbBorderColor}`,
-          backgroundColor: cellSelectedVar,
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          width: '18px', height: '18px', borderRadius: '50%', backgroundColor: '#ffffff',
+          border: `2.5px solid ${themeColor}`,
           boxShadow: (isHovered || isDragging) && !disabled
-            ? '0 0 0 6px var(--cfm-mcq-selected-bg, rgba(226, 0, 116, 0.2)), 0 1px 3px rgba(0,0,0,0.2)'
+            ? '0 0 0 6px rgba(226, 0, 116, 0.2), 0 1px 3px rgba(0,0,0,0.2)'
             : '0 1px 3px rgba(0,0,0,0.2)',
           pointerEvents: 'none',
           transition: isDragging ? 'none' : 'left 0.15s ease-in-out, box-shadow 0.15s, border-color 0.2s',
           boxSizing: 'border-box',
-        }}>
-          <div style={{
-            width: '33%', height: '33%', borderRadius: '50%',
-            backgroundColor: 'var(--cfm-slider-thumb, var(--cfm-primary))',
-          }} />
-        </div>
+        }} />
       )}
 
       {(isHovered || isDragging) && !disabled && (

package/templates/docs/templates/FileUploadScale.tsx

@@ -8,7 +8,6 @@
 
 import React, { useState, useRef } from 'react';
 import type { FileUploadQuestion } from '@explorer02/cfm-survey-sdk';
-import { focusRingVar } from '@/lib/surveyUi/selectionStyles';
 
 type UploadedFileAnswer = {
   id: string;
@@ -87,15 +86,8 @@ function FileUploadDropzone({
   onDrag: (e: React.DragEvent) => void;
   onDrop: (e: React.DragEvent) => void;
 }) {
-  const dropzoneStyleAttr =
-    typeof document !== 'undefined'
-      ? document.documentElement.getAttribute('data-cfm-dropzone-style') ?? undefined
-      : undefined;
-
   return (
     <div
-      className="cfm-dropzone"
-      {...(dropzoneStyleAttr ? { 'data-cfm-dropzone-style': dropzoneStyleAttr } : {})}
       onDragEnter={onDrag}
       onDragOver={onDrag}
       onDragLeave={onDrag}
@@ -106,10 +98,10 @@ function FileUploadDropzone({
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
-        border: `2px var(--cfm-upload-border-style, dashed) ${isDragActive ? focusRingVar : 'var(--cfm-upload-border-color)'}`,
-        borderRadius: '12px',
-        backgroundColor: isDragActive ? 'var(--cfm-mcq-selected-bg)' : 'var(--cfm-upload-fill)',
-        padding: 'var(--cfm-upload-padding)',
+        border: `2px ${isDragActive ? 'solid' : 'var(--cfm-upload-border-style, dashed)'} var(--cfm-upload-border-color, #d1d5db)`,
+        borderRadius: 'var(--cfm-border-radius, 12px)',
+        backgroundColor: isDragActive ? 'var(--cfm-mcq-selected-bg, #fdf2f8)' : 'var(--cfm-upload-fill, #f9fafb)',
+        padding: 'var(--cfm-upload-padding, 40px 24px)',
         cursor: disabled ? 'not-allowed' : 'pointer',
         opacity: disabled ? 0.6 : 1,
         textAlign: 'center',

package/templates/docs/templates/Header.tsx

@@ -2,7 +2,7 @@
  * Wizard-ready Header — copy to src/components/Header.tsx
  *
  * Brand row: [logo image] [company name] — company sits after logo when both exist.
- * Layout locked: logo left, name after (flex row only).
+ * 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.
@@ -33,30 +33,43 @@ export default function Header({ embedded = false }: HeaderProps) {
       }}
     >
       <div
-        className="cfm-header-inner flex h-full w-full items-center"
+        className="cfm-header-inner grid h-full w-full items-center"
         style={{
+          gridTemplateColumns: '1fr 1fr 1fr',
           padding: `0 var(--cfm-header-padding-x, 40px)`,
         }}
       >
         <div
-          className="cfm-header-brand flex min-w-0 items-center"
+          className="cfm-header-brand flex items-center"
           style={{
+            gridColumn: 'var(--cfm-header-logo-col, 1)',
+            justifySelf: 'var(--cfm-header-logo-justify, start)',
             gap: 'var(--cfm-header-brand-gap, 16px)',
           }}
         >
-          <img
-            data-cfm-logo
-            src={hasLogoFile ? seedLogoSrc! : ''}
-            alt={seedCompany || 'Logo'}
-            className="shrink-0 object-contain"
-            style={{
-              display: hasLogoFile ? '' : 'none',
-              width: 'var(--cfm-header-logo-width, 120px)',
-              height: 'var(--cfm-header-logo-height, 120px)',
-              padding: 'var(--cfm-header-logo-padding, 0px)',
-              background: 'var(--cfm-header-logo-bg, transparent)',
-            }}
-          />
+          {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)',
+                maxHeight: 'calc(var(--cfm-header-height, 120px) - 8px)',
+                padding: 'var(--cfm-header-logo-padding, 10px)',
+                background: 'transparent',
+              }}
+            />
+          ) : (
+            <img
+              data-cfm-logo
+              src=""
+              alt="Logo"
+              className="shrink-0 object-contain"
+              style={{ display: 'none' }}
+            />
+          )}
 
           <span
             data-cfm-logo-text
@@ -71,22 +84,26 @@ export default function Header({ embedded = false }: HeaderProps) {
             {seedCompany}
           </span>
 
-          {seedShowCompany && seedCompany ? (
-            <span
-              data-cfm-company
-              className="truncate font-semibold"
-              style={{
-                display: hasLogoFile ? '' : '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="hidden" aria-hidden />
-          )}
+          <span
+            data-cfm-company
+            className="font-semibold"
+            style={{
+              display:
+                seedShowCompany && (hasLogoFile || seedCompany)
+                  ? hasLogoFile
+                    ? ''
+                    : 'none'
+                  : 'none',
+              marginTop: 'var(--cfm-header-company-margin-top, 0)',
+              marginLeft: 'var(--cfm-header-company-margin-left, 0)',
+              marginRight: 'var(--cfm-header-company-margin-right, 0)',
+              color: 'var(--cfm-header-company-color, var(--cfm-text))',
+              fontSize: 'var(--cfm-header-company-size, 18px)',
+              fontWeight: 'var(--cfm-header-company-weight, 600)',
+            }}
+          >
+            {seedCompany}
+          </span>
         </div>
       </div>
     </header>

package/templates/docs/templates/HeatmapScale.tsx

@@ -29,8 +29,8 @@ function HeatmapSpot({ spot }: { spot: { id: string; x: number; y: number } }) {
         width: 'var(--cfm-heatmap-pin-size, 16px)',
         height: 'var(--cfm-heatmap-pin-size, 16px)',
         transform: 'translate(-50%, -50%)',
-        backgroundColor: 'var(--cfm-heatmap-pin)',
-        border: '2px solid var(--cfm-heatmap-pin-border, white)',
+        backgroundColor: 'var(--cfm-heatmap-pin, #F97316)',
+        border: '2px solid var(--cfm-heatmap-pin-border, #fff)',
         boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
       }}
     />
@@ -63,9 +63,6 @@ export function HeatmapScale({ question, selectedValue = [], onSelect }: Heatmap
     }
 
     onSelect([...spots, createNewSpot(x, y)]);
-    if (typeof window !== 'undefined' && window.parent !== window) {
-      window.parent.postMessage({ type: 'CFM_HEATMAP_PIN', pin: { x, y } }, '*');
-    }
   }
 
   function handleImageLoad() {