@explorer02/cfm-survey-sdk 0.3.2 → 0.3.4

package/package.json

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

package/templates/docs/00-integration/component-checklist.md

@@ -117,6 +117,7 @@ Read: [`wizard-chrome-contract.md`](wizard-chrome-contract.md), [`agent-executio
 - [ ] Draft `./survey-ui-config.json` synced with mockup branding
 - [ ] `previewBridge.ts` + `PreviewBridgeInit` in root layout
 - [ ] Header/Footer/ProgressBar/SurveyPage use `var(--cfm-*)` — no hardcoded brand hex for wizard-controlled tokens
+- [ ] **Footer logo:** `Footer.tsx` must call `getLogoSrc()` (same `global.logo.fileName` as header) — never hardcode `./logo.svg` or a separate footer upload path
 - [ ] `data-cfm-logo` / `data-cfm-logo-text`, `data-cfm-company`, `data-cfm-survey-title`, `data-cfm-btn-next`, `data-cfm-btn-back`, `data-cfm-thank-you` on chrome
 - [ ] **Layout toggles:** `data-cfm-progress`, `data-cfm-question-number`, `data-cfm-required`, `cfm-footer`, `cfm-header` — see [`wizard-chrome-contract.md`](wizard-chrome-contract.md)
 - [ ] Per-type scale vars per `wizard-question-type-styling.md` for **all 11 types** (wizard exports all; survey inventory may be smaller)

package/templates/docs/templates/CsatMatrixScale.tsx

@@ -7,6 +7,7 @@ import MatrixDropdown from './MatrixDropdown';
 import {
   matrixRadioRingStyle,
   matrixRadioDotStyle,
+  matrixRowBackgroundStyle,
   scaleCellSelectedStyle,
   unselectedOpacityStyle,
   emojiSizeStyle,
@@ -15,13 +16,19 @@ import {
   mcqSelectedAccentVar,
   mcqSelectedBgVar,
 } from '@/lib/surveyUi/selectionStyles';
-import { csatColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
+import { columnLabelPillStyle, csatColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
 
 const MATRIX_ROW_LABEL_WIDTH = 'var(--cfm-matrix-row-width, 180px)';
 
 type CsatMatrixQuestion = CsatQuestion | RatingMatrixQuestion;
 
-function GraphicsColumnLabelsRow({ scaleColumns }: { scaleColumns: ScaleColumn[] }) {
+function GraphicsColumnLabelsRow({
+  scaleColumns,
+  pillScope = 'csat' as 'csat' | 'rating',
+}: {
+  scaleColumns: ScaleColumn[];
+  pillScope?: 'csat' | 'rating';
+}) {
   if (scaleColumns.length === 0) return null;
 
   return (
@@ -38,15 +45,13 @@ function GraphicsColumnLabelsRow({ scaleColumns }: { scaleColumns: ScaleColumn[]
                 transform: 'translateX(-50%)',
                 bottom: 0,
                 textAlign: 'center',
-                fontSize: '12px',
-                fontWeight: 500,
-                color: '#4b5563',
-                lineHeight: 1.2,
-                wordBreak: 'break-word',
                 width: '64px',
               }}
             >
-              <span dangerouslySetInnerHTML={{ __html: col.label }} />
+              <span
+                style={{ fontSize: '12px', fontWeight: 500, ...columnLabelPillStyle(pillScope) }}
+                dangerouslySetInnerHTML={{ __html: col.label }}
+              />
             </div>
           );
         })}
@@ -188,20 +193,21 @@ function CsatMatrixGrid({
   isGraphics
 }: GridProps) {
   const { statementRows, scaleAnchorLabels: labels, hasNotApplicableOption: hasNotApplicable, reverseScaleOrder } = question;
+  const isRating = question.type === 'RATING_MATRIX';
   const [hoveredCell, setHoveredCell] = useState<string | null>(null);
 
-  const showLabels = labels && labels.length > 0;
+  const showAnchorLabels = isRating && labels && labels.length > 0;
   const m = scaleColumns.length;
   const n = labels?.length || 0;
 
   return (
     <div style={{ width: '100%' }}>
-      {/* Labels row */}
-      {showLabels && m > 0 && (
+      {/* RATING anchor labels (max ~5 along scale) */}
+      {showAnchorLabels && m > 0 && (
         <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '12px' }}>
           <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' } : {}) }}>
+            <div style={{ flex: 1, position: 'relative', height: '28px', ...(isGraphics ? { margin: '0 40px' } : {}) }}>
               {labels!.map((label, i) => {
                 const startPercent = isGraphics ? 0 : 0.5 / m;
                 const rangePercent = isGraphics ? 1 : (m - 1) / m;
@@ -212,10 +218,10 @@ function CsatMatrixGrid({
                     position: 'absolute',
                     left: `${percent}%`,
                     transform: 'translateX(-50%)',
-                    textAlign: 'center', fontSize: '13px', fontWeight: 600,
-                    color: '#4b5563', lineHeight: 1.3, whiteSpace: 'nowrap'
                   }}>
-                    {label}
+                    <span style={{ fontSize: '13px', fontWeight: 600, ...columnLabelPillStyle('rating') }}>
+                      {label}
+                    </span>
                   </div>
                 );
               })}
@@ -225,12 +231,12 @@ function CsatMatrixGrid({
         </div>
       )}
 
-      {/* Column tick labels for graphics sliders (shown with or without anchor labels) */}
+      {/* Column tick labels for graphics sliders */}
       {isGraphics && m > 0 && (
-        <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: showLabels ? '8px' : '16px', minHeight: '24px' }}>
+        <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: showAnchorLabels ? '8px' : '16px', minHeight: '24px' }}>
           <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0 }} />
           <div style={{ flex: 1, display: 'flex' }}>
-            <GraphicsColumnLabelsRow scaleColumns={scaleColumns} />
+            <GraphicsColumnLabelsRow scaleColumns={scaleColumns} pillScope={isRating ? 'rating' : 'csat'} />
             {hasNotApplicable && (
               <div style={{ width: '56px', flexShrink: 0 }} />
             )}
@@ -238,8 +244,8 @@ function CsatMatrixGrid({
         </div>
       )}
 
-      {/* Column Headers for non-graphics */}
-      {!isGraphics && !showLabels && m > 0 && (
+      {/* Column headers — CSAT always; RATING numeric headers when not graphics */}
+      {!isGraphics && m > 0 && (
         <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '16px', minHeight: '24px' }}>
           <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0 }} />
           <div style={{ flex: 1, display: 'flex' }}>
@@ -247,7 +253,13 @@ function CsatMatrixGrid({
               {scaleColumns.map(col => (
                 <div key={col.id} style={{ display: 'flex', justifyContent: 'center', padding: '0 4px' }}>
                   <span
-                    style={{ fontSize: '13px', fontWeight: 500, textAlign: 'center', lineHeight: 1.2, ...csatColumnLabelStyle() }}
+                    style={{
+                      fontSize: '13px',
+                      fontWeight: 500,
+                      ...(isRating
+                        ? { color: 'var(--cfm-text, #374151)', textAlign: 'center' as const }
+                        : columnLabelPillStyle('csat')),
+                    }}
                     dangerouslySetInnerHTML={{ __html: col.label }}
                   />
                 </div>
@@ -267,7 +279,7 @@ function CsatMatrixGrid({
         {statementRows.map((row, rowIdx) => (
           <div key={row.id} style={{
             display: 'flex', alignItems: 'center', borderRadius: '8px',
-            padding: '12px 0', backgroundColor: rowIdx % 2 === 0 ? 'rgba(249, 250, 251, 0.8)' : '#fff',
+            padding: '12px 0', ...matrixRowBackgroundStyle(rowIdx),
           }}>
             <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0, padding: '0 16px' }}>
               <span style={{ fontSize: '14px', fontWeight: 500, color: '#111827', lineHeight: 1.4 }}
@@ -291,6 +303,16 @@ function CsatMatrixGrid({
                   ticks={scaleColumns.length}
                   tickLabels={scaleColumns.map(col => col.label)}
                   reverseScaleOrder={reverseScaleOrder}
+                  trackVar={
+                    isRating
+                      ? 'var(--cfm-rating-track, var(--cfm-slider-track, #e5e7eb))'
+                      : 'var(--cfm-csat-track, var(--cfm-slider-track, #e5e7eb))'
+                  }
+                  thumbVar={
+                    isRating
+                      ? 'var(--cfm-rating-thumb, var(--cfm-slider-thumb, var(--cfm-primary)))'
+                      : 'var(--cfm-csat-thumb, var(--cfm-slider-thumb, var(--cfm-primary)))'
+                  }
                   onChange={v => onCellSelect(row.id, columnSubmitValue(scaleColumns[v]))}
                 />
               </div>
@@ -418,20 +440,27 @@ function CsatMatrixCarousel({
   isGraphics
 }: CarouselProps) {
   const { statementRows, scaleAnchorLabels: labels, hasNotApplicableOption: hasNotApplicable, reverseScaleOrder } = question;
+  const isRating = question.type === 'RATING_MATRIX';
   const [activeCarouselIndex, setActiveCarouselIndex] = useState(0);
   const [hoveredCell, setHoveredCell] = useState<string | null>(null);
 
   const row = statementRows[activeCarouselIndex];
   if (!row) return null;
-  
-  const showLabels = labels && labels.length > 0;
+
+  const showAnchorLabels = isRating && labels && labels.length > 0;
+  const trackVar = isRating
+    ? 'var(--cfm-rating-track, var(--cfm-slider-track, #e5e7eb))'
+    : 'var(--cfm-csat-track, var(--cfm-slider-track, #e5e7eb))';
+  const thumbVar = isRating
+    ? 'var(--cfm-rating-thumb, var(--cfm-slider-thumb, var(--cfm-primary)))'
+    : 'var(--cfm-csat-thumb, var(--cfm-slider-thumb, var(--cfm-primary)))';
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', backgroundColor: '#fff', borderRadius: '12px', border: '1px solid #e5e5e5', padding: '32px', boxShadow: '0 4px 6px -1px rgba(0,0,0,0.05)', width: '100%', boxSizing: 'border-box' }}>
       <h3 style={{ fontSize: '18px', fontWeight: 500, color: '#111827', marginBottom: '32px', textAlign: 'center' }} dangerouslySetInnerHTML={{ __html: row.statementText }} />
       
-      {showLabels && scaleColumns.length > 0 && (
-        <div style={{ width: '100%', maxWidth: '800px', display: 'flex', position: 'relative', height: '24px', marginBottom: '16px' }}>
+      {showAnchorLabels && scaleColumns.length > 0 && (
+        <div style={{ width: '100%', maxWidth: '800px', display: 'flex', position: 'relative', height: '28px', marginBottom: '16px' }}>
           {labels!.map((label, i) => {
             const m = scaleColumns.length;
             const n = labels!.length;
@@ -442,19 +471,33 @@ function CsatMatrixCarousel({
             return (
               <div key={i} style={{
                 position: 'absolute', left: `${percent}%`, transform: 'translateX(-50%)',
-                textAlign: 'center', fontSize: '13px', fontWeight: 600,
-                color: '#4b5563', lineHeight: 1.3, whiteSpace: 'nowrap'
+                textAlign: 'center',
               }}>
-                {label}
+                <span style={{ fontSize: '13px', fontWeight: 600, ...columnLabelPillStyle('rating') }}>
+                  {label}
+                </span>
               </div>
             );
           })}
         </div>
       )}
 
+      {!isGraphics && !isRating && scaleColumns.length > 0 && (
+        <div style={{ width: '100%', maxWidth: '800px', display: 'grid', gridTemplateColumns: `repeat(${scaleColumns.length}, 1fr)`, gap: '8px', marginBottom: '16px' }}>
+          {scaleColumns.map(col => (
+            <div key={col.id} style={{ display: 'flex', justifyContent: 'center' }}>
+              <span
+                style={{ fontSize: '13px', fontWeight: 500, ...columnLabelPillStyle('csat') }}
+                dangerouslySetInnerHTML={{ __html: col.label }}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+
       {isGraphics && scaleColumns.length > 0 && (
-        <div style={{ width: '100%', maxWidth: '800px', marginBottom: showLabels ? '8px' : '16px' }}>
-          <GraphicsColumnLabelsRow scaleColumns={scaleColumns} />
+        <div style={{ width: '100%', maxWidth: '800px', marginBottom: showAnchorLabels ? '8px' : '16px' }}>
+          <GraphicsColumnLabelsRow scaleColumns={scaleColumns} pillScope={isRating ? 'rating' : 'csat'} />
         </div>
       )}
 
@@ -472,6 +515,8 @@ function CsatMatrixCarousel({
             sliderType="graphics" ticks={scaleColumns.length}
             tickLabels={scaleColumns.map(col => col.label)}
             reverseScaleOrder={reverseScaleOrder}
+            trackVar={trackVar}
+            thumbVar={thumbVar}
             onChange={v => onCellSelect(row.id, columnSubmitValue(scaleColumns[v]))}
           />
         </div>
@@ -518,8 +563,16 @@ function CsatMatrixCarousel({
                 >
                   {(EmojiNode ?? StarNode ?? (isNumbered ? (displayIdx + 1) : RadioNode)) as React.ReactNode}
                 </button>
-                <span style={{ fontSize: '13px', fontWeight: 500, color: '#4b5563', textAlign: 'center', lineHeight: 1.2 }}
-                      dangerouslySetInnerHTML={{ __html: col.label }} />
+                <span
+                  style={{
+                    fontSize: '13px',
+                    fontWeight: 500,
+                    ...(isRating
+                      ? { color: 'var(--cfm-text, #374151)', textAlign: 'center' as const }
+                      : columnLabelPillStyle('csat')),
+                  }}
+                  dangerouslySetInnerHTML={{ __html: col.label }}
+                />
               </div>
             );
           })}

package/templates/docs/templates/CustomSliderTrack.tsx

@@ -22,6 +22,8 @@ type CustomSliderTrackProps = {
   /** Pass scaleColumns.map(c => c.label) for visible column labels under slider */
   tickLabels?: string[];
   reverseScaleOrder?: boolean;
+  trackVar?: string;
+  thumbVar?: string;
   onChange: (v: number) => void;
 };
 
@@ -35,6 +37,8 @@ export function CustomSliderTrack({
   ticks,
   tickLabels,
   reverseScaleOrder,
+  trackVar = 'var(--cfm-slider-track, #e5e7eb)',
+  thumbVar = 'var(--cfm-slider-thumb, var(--cfm-input-focus-ring, var(--cfm-primary)))',
   onChange,
 }: CustomSliderTrackProps) {
   const [isHovered, setIsHovered] = React.useState(false);
@@ -50,9 +54,7 @@ export function CustomSliderTrack({
     ? tooltipLabel.replace(/<[^>]*>/g, '')
     : String(Math.round(value));
 
-  const themeColor = disabled
-    ? '#9ca3af'
-    : 'var(--cfm-slider-thumb, var(--cfm-input-focus-ring, var(--cfm-primary)))';
+  const themeColor = disabled ? '#9ca3af' : thumbVar;
 
   return (
     <div
@@ -62,7 +64,7 @@ export function CustomSliderTrack({
     >
       <div style={{
         position: 'absolute', top: '50%', left: 0, right: 0, transform: 'translateY(-50%)',
-        height: '4px', borderRadius: '2px', backgroundColor: 'var(--cfm-slider-track, #e5e7eb)',
+        height: '4px', borderRadius: '2px', backgroundColor: trackVar,
       }} />
 
       <div style={{

package/templates/docs/templates/Footer.tsx

@@ -1,10 +1,26 @@
 /**
  * Wizard-ready Footer — copy to src/components/Footer.tsx
- * Required: footer.cfm-footer, data-cfm-copyright, data-cfm-footer-links, data-cfm-footer-logo
+ *
+ * Uses the same logo as Header via getLogoSrc(). Layout, alignment, and spacing
+ * are driven entirely by --cfm-footer-* CSS vars from survey-ui-config.
  */
 'use client';
 
+import {
+  getFooterCopyright,
+  getFooterLinks,
+  getLayoutFlags,
+  getLogoSrc,
+} from '@/lib/uiConfig';
+
+const seedLogoSrc = getLogoSrc({ staticExport: true });
+const seedCopyright = getFooterCopyright();
+const seedLinks = getFooterLinks();
+const { showFooterLogo } = getLayoutFlags();
+
 export default function Footer() {
+  const showLogo = showFooterLogo && Boolean(seedLogoSrc);
+
   return (
     <footer
       className="cfm-footer w-full"
@@ -15,56 +31,83 @@ export default function Footer() {
       }}
     >
       <div
-        className="cfm-footer-inner mx-auto grid w-full max-w-4xl items-end gap-6"
+        className="cfm-footer-inner mx-auto w-full items-end"
         style={{
+          maxWidth: 'var(--cfm-max-width, 48rem)',
           display: 'var(--cfm-footer-inner-display, grid)',
           flexDirection: 'var(--cfm-footer-inner-direction, row)' as React.CSSProperties['flexDirection'],
-          gridTemplateColumns: '1fr 1fr 1fr',
+          gridTemplateColumns: '1fr auto 1fr',
+          gap: 'var(--cfm-footer-inner-gap, 24px)',
         }}
       >
         <div
-          className="space-y-3"
+          className="cfm-footer-logo-column"
           style={{
             gridColumn: 'var(--cfm-footer-logo-col, 1)',
             justifySelf: 'var(--cfm-footer-logo-justify, start)',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'var(--cfm-footer-logo-justify, start)',
+            gap: 'var(--cfm-footer-logo-copyright-gap, 12px)',
           }}
         >
-          <img
-            data-cfm-footer-logo
-            data-cfm-logo
-            src="./logo.svg"
-            alt=""
-            style={{
-              display: 'none',
-              width: 'var(--cfm-footer-logo-width, 120px)',
-              height: 'var(--cfm-footer-logo-height, 32px)',
-              objectFit: 'contain',
-            }}
-          />
+          {showLogo ? (
+            <div
+              className="cfm-footer-logo-slot"
+              style={{
+                width: 'var(--cfm-footer-logo-width, 120px)',
+                height: 'var(--cfm-footer-logo-height, 32px)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'var(--cfm-footer-logo-justify, start)',
+              }}
+            >
+              <img
+                data-cfm-footer-logo
+                data-cfm-logo
+                src={seedLogoSrc!}
+                alt=""
+                className="h-full w-full object-contain"
+              />
+            </div>
+          ) : (
+            <img
+              data-cfm-footer-logo
+              data-cfm-logo
+              src=""
+              alt=""
+              style={{ display: 'none' }}
+            />
+          )}
           <p
             data-cfm-copyright
-            className="text-xs"
+            className="cfm-footer-copyright m-0 text-xs"
             style={{ color: 'var(--cfm-footer-text, #9ca3af)' }}
           >
-            © Company
+            {seedCopyright}
           </p>
         </div>
 
         <nav
           data-cfm-footer-links
-          className="flex flex-wrap gap-x-6 gap-y-2 text-xs"
+          className="cfm-footer-links flex flex-wrap text-xs"
           style={{
             gridColumn: 'var(--cfm-footer-links-col, 3)',
             justifySelf: 'var(--cfm-footer-links-justify, end)',
+            gap: 'var(--cfm-footer-inner-gap, 24px)',
+            alignSelf: 'end',
           }}
         >
-          <a
-            href="#"
-            className="transition-colors hover:opacity-80"
-            style={{ color: 'var(--cfm-footer-link, #9ca3af)' }}
-          >
-            Privacy
-          </a>
+          {seedLinks.map((link, i) => (
+            <a
+              key={`${link.label}-${i}`}
+              href={link.url || '#'}
+              className="cfm-footer-link transition-colors hover:opacity-80"
+              style={{ color: 'var(--cfm-footer-link, #9ca3af)' }}
+            >
+              {link.label}
+            </a>
+          ))}
         </nav>
       </div>
     </footer>

package/templates/docs/templates/Header.tsx

@@ -1,11 +1,8 @@
 /**
  * Wizard-ready Header — copy to src/components/Header.tsx
  *
- * Brand row: [logo image] [company name] — company sits after logo when both exist.
- * When no logo file: text fallback via data-cfm-logo-text (company name or empty).
- *
- * After wizard save, logo src MUST come from survey-ui-config.json global.logo.fileName
- * via uiConfig.ts — never hardcode telekom-logo.svg or change fileName manually.
+ * Logo + company placement driven entirely by --cfm-header-* CSS vars from survey-ui-config.
+ * Logo src from getLogoSrc() — never hardcode asset paths.
  */
 'use client';
 
@@ -19,91 +16,131 @@ const seedCompany = getCompanyName();
 const seedLogoSrc = getLogoSrc({ staticExport: true });
 const seedShowCompany = shouldShowCompanyName();
 
-export default function Header({ embedded = false }: HeaderProps) {
+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 }) {
+  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, 120px)',
+        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 grid h-full w-full items-center"
+        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: `0 var(--cfm-header-padding-x, 40px)`,
+          padding:
+            'var(--cfm-header-padding-y, 12px) var(--cfm-header-padding-x, 40px)',
+          boxSizing: 'border-box',
         }}
       >
+        {/* Brand row: logo + company adjacent (left+left or right+right) */}
         <div
-          className="cfm-header-brand flex items-center"
+          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)',
           }}
         >
-          {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' }}
-            />
-          )}
+          <LogoSlot />
+          <CompanyName inBrandRow />
+        </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>
+        {/* 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-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
+          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 />
         </div>
       </div>
     </header>