@explorer02/cfm-survey-sdk 0.3.4 → 0.3.5

package/package.json

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

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

@@ -117,7 +117,6 @@ 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

@@ -16,20 +16,34 @@ import {
   mcqSelectedAccentVar,
   mcqSelectedBgVar,
 } from '@/lib/surveyUi/selectionStyles';
-import { columnLabelPillStyle, csatColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
+import { csatColumnLabelStyle, ratingColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
 
 const MATRIX_ROW_LABEL_WIDTH = 'var(--cfm-matrix-row-width, 180px)';
 
 type CsatMatrixQuestion = CsatQuestion | RatingMatrixQuestion;
 
+function anchorLabelStyle(question: CsatMatrixQuestion) {
+  return question.type === 'RATING_MATRIX' ? ratingColumnLabelStyle() : csatColumnLabelStyle();
+}
+
+function columnHeaderLabelStyle(question: CsatMatrixQuestion) {
+  if (question.type === 'RATING_MATRIX') {
+    return { fontSize: '13px', fontWeight: 500, textAlign: 'center' as const, lineHeight: 1.2, color: '#4b5563' };
+  }
+  return { fontSize: '13px', fontWeight: 500, textAlign: 'center' as const, lineHeight: 1.2, ...csatColumnLabelStyle() };
+}
+
 function GraphicsColumnLabelsRow({
   scaleColumns,
-  pillScope = 'csat' as 'csat' | 'rating',
+  question,
 }: {
   scaleColumns: ScaleColumn[];
-  pillScope?: 'csat' | 'rating';
+  question: CsatMatrixQuestion;
 }) {
   if (scaleColumns.length === 0) return null;
+  const labelStyle = question.type === 'RATING_MATRIX'
+    ? { fontSize: '12px', fontWeight: 500, lineHeight: 1.2, wordBreak: 'break-word' as const, color: '#4b5563' }
+    : { fontSize: '12px', fontWeight: 500, lineHeight: 1.2, wordBreak: 'break-word' as const, ...csatColumnLabelStyle() };
 
   return (
     <div style={{ flex: 1, padding: '0 24px' }}>
@@ -48,10 +62,7 @@ function GraphicsColumnLabelsRow({
                 width: '64px',
               }}
             >
-              <span
-                style={{ fontSize: '12px', fontWeight: 500, ...columnLabelPillStyle(pillScope) }}
-                dangerouslySetInnerHTML={{ __html: col.label }}
-              />
+              <span style={labelStyle} dangerouslySetInnerHTML={{ __html: col.label }} />
             </div>
           );
         })}
@@ -193,21 +204,20 @@ 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 showAnchorLabels = isRating && labels && labels.length > 0;
+  const showLabels = labels && labels.length > 0;
   const m = scaleColumns.length;
   const n = labels?.length || 0;
 
   return (
     <div style={{ width: '100%' }}>
-      {/* RATING anchor labels (max ~5 along scale) */}
-      {showAnchorLabels && m > 0 && (
+      {/* Labels row */}
+      {showLabels && 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: '28px', ...(isGraphics ? { margin: '0 40px' } : {}) }}>
+            <div style={{ flex: 1, position: 'relative', height: '24px', ...(isGraphics ? { margin: '0 40px' } : {}) }}>
               {labels!.map((label, i) => {
                 const startPercent = isGraphics ? 0 : 0.5 / m;
                 const rangePercent = isGraphics ? 1 : (m - 1) / m;
@@ -218,10 +228,11 @@ function CsatMatrixGrid({
                     position: 'absolute',
                     left: `${percent}%`,
                     transform: 'translateX(-50%)',
+                    textAlign: 'center', fontSize: '13px', fontWeight: 600,
+                    lineHeight: 1.3, whiteSpace: 'nowrap',
+                    ...anchorLabelStyle(question),
                   }}>
-                    <span style={{ fontSize: '13px', fontWeight: 600, ...columnLabelPillStyle('rating') }}>
-                      {label}
-                    </span>
+                    {label}
                   </div>
                 );
               })}
@@ -231,12 +242,12 @@ function CsatMatrixGrid({
         </div>
       )}
 
-      {/* Column tick labels for graphics sliders */}
+      {/* Column tick labels for graphics sliders (shown with or without anchor labels) */}
       {isGraphics && m > 0 && (
-        <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: showAnchorLabels ? '8px' : '16px', minHeight: '24px' }}>
+        <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: showLabels ? '8px' : '16px', minHeight: '24px' }}>
           <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0 }} />
           <div style={{ flex: 1, display: 'flex' }}>
-            <GraphicsColumnLabelsRow scaleColumns={scaleColumns} pillScope={isRating ? 'rating' : 'csat'} />
+            <GraphicsColumnLabelsRow scaleColumns={scaleColumns} question={question} />
             {hasNotApplicable && (
               <div style={{ width: '56px', flexShrink: 0 }} />
             )}
@@ -244,8 +255,8 @@ function CsatMatrixGrid({
         </div>
       )}
 
-      {/* Column headers — CSAT always; RATING numeric headers when not graphics */}
-      {!isGraphics && m > 0 && (
+      {/* Column Headers for non-graphics — star format always shows labels above stars */}
+      {!isGraphics && (!showLabels || isStar) && 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' }}>
@@ -253,13 +264,7 @@ function CsatMatrixGrid({
               {scaleColumns.map(col => (
                 <div key={col.id} style={{ display: 'flex', justifyContent: 'center', padding: '0 4px' }}>
                   <span
-                    style={{
-                      fontSize: '13px',
-                      fontWeight: 500,
-                      ...(isRating
-                        ? { color: 'var(--cfm-text, #374151)', textAlign: 'center' as const }
-                        : columnLabelPillStyle('csat')),
-                    }}
+                    style={columnHeaderLabelStyle(question)}
                     dangerouslySetInnerHTML={{ __html: col.label }}
                   />
                 </div>
@@ -303,16 +308,6 @@ 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>
@@ -440,27 +435,20 @@ 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 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)))';
+  
+  const showLabels = labels && labels.length > 0;
 
   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 }} />
       
-      {showAnchorLabels && scaleColumns.length > 0 && (
-        <div style={{ width: '100%', maxWidth: '800px', display: 'flex', position: 'relative', height: '28px', marginBottom: '16px' }}>
+      {showLabels && scaleColumns.length > 0 && (
+        <div style={{ width: '100%', maxWidth: '800px', display: 'flex', position: 'relative', height: '24px', marginBottom: '16px' }}>
           {labels!.map((label, i) => {
             const m = scaleColumns.length;
             const n = labels!.length;
@@ -471,33 +459,20 @@ function CsatMatrixCarousel({
             return (
               <div key={i} style={{
                 position: 'absolute', left: `${percent}%`, transform: 'translateX(-50%)',
-                textAlign: 'center',
+                textAlign: 'center', fontSize: '13px', fontWeight: 600,
+                lineHeight: 1.3, whiteSpace: 'nowrap',
+                ...anchorLabelStyle(question),
               }}>
-                <span style={{ fontSize: '13px', fontWeight: 600, ...columnLabelPillStyle('rating') }}>
-                  {label}
-                </span>
+                {label}
               </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: showAnchorLabels ? '8px' : '16px' }}>
-          <GraphicsColumnLabelsRow scaleColumns={scaleColumns} pillScope={isRating ? 'rating' : 'csat'} />
+        <div style={{ width: '100%', maxWidth: '800px', marginBottom: showLabels ? '8px' : '16px' }}>
+          <GraphicsColumnLabelsRow scaleColumns={scaleColumns} question={question} />
         </div>
       )}
 
@@ -515,8 +490,6 @@ 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>
@@ -563,16 +536,8 @@ function CsatMatrixCarousel({
                 >
                   {(EmojiNode ?? StarNode ?? (isNumbered ? (displayIdx + 1) : RadioNode)) as React.ReactNode}
                 </button>
-                <span
-                  style={{
-                    fontSize: '13px',
-                    fontWeight: 500,
-                    ...(isRating
-                      ? { color: 'var(--cfm-text, #374151)', textAlign: 'center' as const }
-                      : columnLabelPillStyle('csat')),
-                  }}
-                  dangerouslySetInnerHTML={{ __html: col.label }}
-                />
+                <span style={columnHeaderLabelStyle(question)}
+                      dangerouslySetInnerHTML={{ __html: col.label }} />
               </div>
             );
           })}

package/templates/docs/templates/CustomSliderTrack.tsx

@@ -22,8 +22,6 @@ 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;
 };
 
@@ -37,8 +35,6 @@ 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);
@@ -54,7 +50,9 @@ export function CustomSliderTrack({
     ? tooltipLabel.replace(/<[^>]*>/g, '')
     : String(Math.round(value));
 
-  const themeColor = disabled ? '#9ca3af' : thumbVar;
+  const themeColor = disabled
+    ? '#9ca3af'
+    : 'var(--cfm-slider-thumb, var(--cfm-input-focus-ring, var(--cfm-primary)))';
 
   return (
     <div
@@ -64,7 +62,7 @@ export function CustomSliderTrack({
     >
       <div style={{
         position: 'absolute', top: '50%', left: 0, right: 0, transform: 'translateY(-50%)',
-        height: '4px', borderRadius: '2px', backgroundColor: trackVar,
+        height: '4px', borderRadius: '2px', backgroundColor: 'var(--cfm-slider-track, #e5e7eb)',
       }} />
 
       <div style={{

package/templates/docs/templates/Footer.tsx

@@ -1,8 +1,6 @@
 /**
  * Wizard-ready Footer — copy to src/components/Footer.tsx
- *
- * Uses the same logo as Header via getLogoSrc(). Layout, alignment, and spacing
- * are driven entirely by --cfm-footer-* CSS vars from survey-ui-config.
+ * Required: footer.cfm-footer, data-cfm-copyright, data-cfm-footer-links, data-cfm-footer-logo
  */
 'use client';
 
@@ -31,84 +29,56 @@ export default function Footer() {
       }}
     >
       <div
-        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 auto 1fr',
-          gap: 'var(--cfm-footer-inner-gap, 24px)',
-        }}
+        className="cfm-footer-inner mx-auto w-full"
+        style={{ maxWidth: 'var(--cfm-max-width, 48rem)' }}
       >
-        <div
-          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)',
-          }}
-        >
-          {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>
-          ) : (
+        {showLogo ? (
+          <div className="cfm-footer-logo-slot">
             <img
               data-cfm-footer-logo
               data-cfm-logo
-              src=""
+              src={seedLogoSrc!}
               alt=""
-              style={{ display: 'none' }}
+              className="object-contain"
+              style={{
+                width: 'var(--cfm-footer-logo-width, 120px)',
+                height: 'var(--cfm-footer-logo-height, 32px)',
+              }}
             />
-          )}
-          <p
-            data-cfm-copyright
-            className="cfm-footer-copyright m-0 text-xs"
-            style={{ color: 'var(--cfm-footer-text, #9ca3af)' }}
-          >
+          </div>
+        ) : (
+          <img
+            data-cfm-footer-logo
+            data-cfm-logo
+            src=""
+            alt=""
+            style={{ display: 'none' }}
+          />
+        )}
+
+        {seedCopyright ? (
+          <p data-cfm-copyright className="cfm-footer-copyright text-xs">
             {seedCopyright}
           </p>
-        </div>
+        ) : (
+          <p data-cfm-copyright className="cfm-footer-copyright text-xs" style={{ display: 'none' }} />
+        )}
 
-        <nav
-          data-cfm-footer-links
-          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',
-          }}
-        >
-          {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>
+        {seedLinks.length > 0 ? (
+          <nav data-cfm-footer-links className="cfm-footer-links flex flex-wrap gap-x-6 gap-y-2 text-xs">
+            {seedLinks.map((link, i) => (
+              <a
+                key={`${link.label}-${i}`}
+                href={link.url || '#'}
+                className="cfm-footer-link transition-colors hover:opacity-80"
+              >
+                {link.label}
+              </a>
+            ))}
+          </nav>
+        ) : (
+          <nav data-cfm-footer-links className="cfm-footer-links" style={{ display: 'none' }} />
+        )}
       </div>
     </footer>
   );

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,76 @@ 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 />
+          {seedShowCompany && hasLogoFile && seedCompany ? (
+            <span
+              data-cfm-company
+              className="font-semibold"
+              style={{
+                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>