@explorer02/cfm-survey-sdk 0.3.4 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer02/cfm-survey-sdk",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import type { CsatQuestion, RatingMatrixQuestion, MatrixRowAnswers, ScaleColumn } from '@explorer02/cfm-survey-sdk';
 import { getEmojiForIndex, CsatStarIcons } from './surveyUiIcons';
-import { columnSubmitValue, nonNaScaleColumns } from './surveyUiScaleUtils';
+import { columnSubmitValue, nonNaScaleColumns, anchorLabelPercent } from './surveyUiScaleUtils';
 import { CustomSliderTrack } from './CustomSliderTrack';
 import MatrixDropdown from './MatrixDropdown';
 import {
@@ -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,35 +204,33 @@ 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;
-                const percent = n === 1 ? 50 : (startPercent + (i / (n - 1)) * rangePercent) * 100;
+                const percent = anchorLabelPercent(i, n, m, isGraphics);
 
                 return (
                   <div key={i} style={{
                     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 +240,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 +253,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 +262,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 +306,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>
@@ -367,9 +360,17 @@ function CsatMatrixGrid({
                                 fontSize: '14px', fontWeight: 500,
                                 ...(isSelected
                                   ? scaleCellSelectedStyle(true)
-                                  : { border: '1px solid #d1d5db', backgroundColor: '#fff', color: '#111827' }),
+                                  : {
+                                      border: '1px solid #d1d5db',
+                                      backgroundColor: '#fff',
+                                      color: '#111827',
+                                      ...unselectedOpacityStyle(),
+                                    }),
                                 transition: 'all 0.15s',
-                              } : { padding: '8px' }),
+                              } : {
+                                padding: '8px',
+                                ...(isSelected ? {} : unselectedOpacityStyle()),
+                              }),
                           }}
                         >
                           {(EmojiNode ?? StarNode ?? (isNumbered ? (displayIdx + 1) : RadioNode)) as React.ReactNode}
@@ -440,64 +441,42 @@ 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;
-            const startPercent = isGraphics ? 0 : 0.5 / m;
-            const rangePercent = isGraphics ? 1 : (m - 1) / m;
-            const percent = n === 1 ? 50 : (startPercent + (i / (n - 1)) * rangePercent) * 100;
+            const percent = anchorLabelPercent(i, n, m, isGraphics);
 
             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 +494,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>
@@ -550,29 +527,27 @@ function CsatMatrixCarousel({
                     cursor: 'pointer', borderRadius: '6px', pointerEvents: 'none',
                     ...(isEmoji ? {
                       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%' } : {}),
+                      ...(isSelected ? { backgroundColor: 'rgba(252, 231, 243, 0.6)', boxShadow: '0 0 0 2px rgba(226, 0, 116, 0.3)', borderRadius: '50%' } : unselectedOpacityStyle()),
                     } : isStar ? {
-                      padding: '4px', transform: isHovered ? 'scale(1.1)' : 'scale(1)', opacity: isSelected ? 1 : isHovered ? 1 : 0.5,
+                      padding: '4px', transform: isHovered ? 'scale(1.1)' : 'scale(1)', color: isSelected ? cellSelectedVar : focusRingVar,
+                      ...(isSelected ? {} : unselectedOpacityStyle()),
                     } : isNumbered ? {
                       width: '40px', height: '40px', borderRadius: '8px', fontSize: '14px', fontWeight: 500,
                       ...(isSelected
                         ? scaleCellSelectedStyle(true)
-                        : { border: '1px solid #d1d5db', backgroundColor: '#fff', color: '#111827' }),
-                    } : { padding: '8px' }),
+                        : {
+                            border: '1px solid #d1d5db',
+                            backgroundColor: '#fff',
+                            color: '#111827',
+                            ...unselectedOpacityStyle(),
+                          }),
+                    } : { padding: '8px', ...(isSelected ? {} : unselectedOpacityStyle()) }),
                   }}
                 >
                   {(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>
   );