@explorer02/cfm-survey-sdk 0.4.0 → 0.4.1

package/package.json

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

package/templates/docs/templates/CsatMatrixScale.tsx

@@ -16,14 +16,64 @@ import {
   mcqSelectedAccentVar,
   mcqSelectedBgVar,
 } from '@/lib/surveyUi/selectionStyles';
-import { csatColumnLabelStyle, ratingColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
+import { csatColumnLabelStyle, ratingColumnLabelStyle, stackAnchorLabelLines, ratingAnchorLabelPillStyle } 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();
+  return question.type === 'RATING_MATRIX' ? ratingAnchorLabelPillStyle() : csatColumnLabelStyle();
+}
+
+function anchorLabelPositionPercent(
+  index: number,
+  labelCount: number,
+  columnCount: number,
+  isGraphics: boolean,
+  question: CsatMatrixQuestion,
+): number {
+  if (labelCount === 1) return 50;
+  const useFullSpan = isGraphics || question.type === 'RATING_MATRIX';
+  const startPercent = useFullSpan ? 0 : 0.5 / columnCount;
+  const rangePercent = useFullSpan ? 1 : (columnCount - 1) / columnCount;
+  return (startPercent + (index / (labelCount - 1)) * rangePercent) * 100;
+}
+
+function anchorLabelRowMinHeight(question: CsatMatrixQuestion, hasLabels: boolean): string {
+  if (question.type === 'RATING_MATRIX' && hasLabels) return '44px';
+  return '24px';
+}
+
+function renderAnchorLabelContent(label: string, question: CsatMatrixQuestion): React.ReactNode {
+  if (question.type !== 'RATING_MATRIX') return label;
+  const lines = stackAnchorLabelLines(label);
+  if (lines.length === 1) return label;
+  return lines.map((line, idx) => (
+    <span key={idx} style={{ display: 'block' }}>
+      {line}
+    </span>
+  ));
+}
+
+function anchorLabelBoxStyle(question: CsatMatrixQuestion, isGraphics: boolean): React.CSSProperties {
+  if (question.type === 'RATING_MATRIX') {
+    return {
+      textAlign: 'center',
+      fontSize: '12px',
+      fontWeight: 600,
+      ...ratingAnchorLabelPillStyle(),
+    };
+  }
+  return {
+    textAlign: 'center',
+    fontSize: isGraphics ? '12px' : '13px',
+    fontWeight: 600,
+    lineHeight: 1.3,
+    whiteSpace: isGraphics ? 'normal' : 'nowrap',
+    maxWidth: isGraphics ? '72px' : undefined,
+    ...anchorLabelStyle(question),
+  };
 }
 
 function columnHeaderLabelStyle(question: CsatMatrixQuestion) {
@@ -227,24 +277,25 @@ function CsatMatrixGrid({
         <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '12px', minWidth: 0 }}>
           <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0, minWidth: 0 }} />
           <div style={{ flex: 1, display: 'flex', minWidth: 0 }}>
-            <div style={{ flex: 1, position: 'relative', minHeight: '24px', minWidth: 0, ...(isGraphics ? { margin: '0 8px' } : {}) }}>
+            <div style={{
+              flex: 1,
+              position: 'relative',
+              minHeight: anchorLabelRowMinHeight(question, Boolean(showLabels)),
+              minWidth: 0,
+              ...(isGraphics || question.type === 'RATING_MATRIX' ? { margin: '0 8px' } : {}),
+            }}>
               {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 = anchorLabelPositionPercent(i, n, m, isGraphics, question);
 
                 return (
                   <div key={i} style={{
                     position: 'absolute',
                     left: `${percent}%`,
+                    bottom: 0,
                     transform: 'translateX(-50%)',
-                    textAlign: 'center', fontSize: isGraphics ? '12px' : '13px', fontWeight: 600,
-                    lineHeight: 1.3,
-                    whiteSpace: isGraphics ? 'normal' : 'nowrap',
-                    maxWidth: isGraphics ? '72px' : undefined,
-                    ...anchorLabelStyle(question),
+                    ...anchorLabelBoxStyle(question, isGraphics),
                   }}>
-                    {label}
+                    {renderAnchorLabelContent(label, question)}
                   </div>
                 );
               })}
@@ -465,24 +516,29 @@ function CsatMatrixCarousel({
       <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: '100%', minWidth: 0, position: 'relative', height: '24px', marginBottom: '16px' }}>
+        <div style={{
+          width: '100%',
+          maxWidth: '100%',
+          minWidth: 0,
+          position: 'relative',
+          minHeight: anchorLabelRowMinHeight(question, Boolean(showLabels)),
+          marginBottom: '16px',
+          ...(isGraphics || question.type === 'RATING_MATRIX' ? { padding: '0 8px' } : {}),
+        }}>
           {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 = anchorLabelPositionPercent(i, n, m, isGraphics, question);
 
             return (
               <div key={i} style={{
-                position: 'absolute', left: `${percent}%`, transform: 'translateX(-50%)',
-                textAlign: 'center', fontSize: isGraphics ? '12px' : '13px', fontWeight: 600,
-                lineHeight: 1.3,
-                whiteSpace: isGraphics ? 'normal' : 'nowrap',
-                maxWidth: isGraphics ? '72px' : undefined,
-                ...anchorLabelStyle(question),
+                position: 'absolute',
+                left: `${percent}%`,
+                bottom: 0,
+                transform: 'translateX(-50%)',
+                ...anchorLabelBoxStyle(question, isGraphics),
               }}>
-                {label}
+                {renderAnchorLabelContent(label, question)}
               </div>
             );
           })}

package/templates/docs/templates/Footer.tsx

@@ -39,10 +39,11 @@ export default function Footer() {
               data-cfm-logo
               src={seedLogoSrc!}
               alt=""
-              className="object-contain"
+              className="object-contain object-left"
               style={{
-                width: 'var(--cfm-footer-logo-width, 120px)',
                 height: 'var(--cfm-footer-logo-height, 32px)',
+                maxWidth: 'var(--cfm-footer-logo-width, 120px)',
+                width: 'auto',
               }}
             />
           </div>

package/templates/docs/templates/labelStyles.ts

@@ -64,3 +64,30 @@ export function ratingColumnLabelStyle(): CSSProperties {
 export function sliderTickLabelStyle(): CSSProperties {
   return columnLabelPillStyle('sliderTick');
 }
+
+/** Split multi-word anchor labels into stacked lines for equal-width matrix headers. */
+export function stackAnchorLabelLines(label: string): string[] {
+  const trimmed = label.trim();
+  if (!trimmed) return [''];
+  const words = trimmed.split(/\s+/);
+  if (words.length <= 1) return [trimmed];
+  const mid = Math.ceil(words.length / 2);
+  return [words.slice(0, mid).join(' '), words.slice(mid).join(' ')].filter(Boolean);
+}
+
+/** Rating matrix anchor pills — stacked text, fixed width, same look on every format. */
+export function ratingAnchorLabelPillStyle(): CSSProperties {
+  return {
+    ...columnLabelPillStyle('rating'),
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    whiteSpace: 'normal',
+    maxWidth: '72px',
+    minWidth: '52px',
+    padding: '3px 6px',
+    wordBreak: 'break-word',
+    lineHeight: 1.15,
+  };
+}

package/templates/docs/templates/uiConfig.ts

@@ -136,6 +136,15 @@ export function resolveNpsButtonStyle(questionStyle?: string): NpsButtonStyle {
   const live = readLiveNpsButtonStyle();
   if (live) return live;
 
+  if (
+    questionStyle === 'standard' ||
+    questionStyle === 'numbered' ||
+    questionStyle === 'emoji' ||
+    questionStyle === 'pill'
+  ) {
+    return questionStyle;
+  }
+
   const fromJson = (
     surveyUiConfig.questionTypes as { NPS_SCALE?: { buttonStyle?: string } } | undefined
   )?.NPS_SCALE?.buttonStyle;
@@ -147,18 +156,24 @@ export function resolveNpsButtonStyle(questionStyle?: string): NpsButtonStyle {
   ) {
     return fromJson;
   }
-  if (
-    questionStyle === 'standard' ||
-    questionStyle === 'numbered' ||
-    questionStyle === 'emoji' ||
-    questionStyle === 'pill'
-  ) {
-    return questionStyle;
-  }
   return 'numbered';
 }
 
+function readLiveNpsHintText(kind: 'min' | 'max'): string | null {
+  if (typeof window === 'undefined') return null;
+  const root = document.documentElement;
+  const cssVar = kind === 'min' ? '--cfm-hint-min-text' : '--cfm-hint-max-text';
+  const fromCss =
+    root.style.getPropertyValue(cssVar).trim() ||
+    getComputedStyle(root).getPropertyValue(cssVar).trim();
+  return fromCss || null;
+}
+
 function resolveNpsHintText(kind: 'min' | 'max', questionFallback: string): string {
+  const fromCss = readLiveNpsHintText(kind);
+  if (fromCss) return fromCss;
+  if (questionFallback.trim()) return questionFallback;
+
   const nps = (
     surveyUiConfig.questionTypes as { NPS_SCALE?: { hintMinText?: string; hintMaxText?: string } } | undefined
   )?.NPS_SCALE;

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

@@ -15,6 +15,7 @@ export type PreviewStatePatch = {
 
 export const PREVIEW_BRIDGE_SNAPSHOT = 'CFM_UI_CONFIG_SNAPSHOT';
 export const PREVIEW_BRIDGE_DELTA = 'CFM_UI_CONFIG_DELTA';
+export const PREVIEW_BRIDGE_READY = 'CFM_PREVIEW_READY';
 
 const TRAFFIC = [
   '#ef4444', '#f97316', '#eab308', '#84cc16', '#22c55e', '#14b8a6',
@@ -51,6 +52,26 @@ function applyThemeSideEffects(): void {
   applyDropzoneStyle();
 }
 
+function previewStateFromCssVars(
+  cssVars: Record<string, string>,
+  prev: PreviewStatePatch,
+): PreviewStatePatch {
+  const next: PreviewStatePatch = { ...prev };
+  if (cssVars['--cfm-matrix-multi-statement'] !== undefined) {
+    next.multiStatement = cssVars['--cfm-matrix-multi-statement'] === '1';
+  }
+  if (cssVars['--cfm-nps-button-style']) {
+    next.npsButtonStyle = cssVars['--cfm-nps-button-style'];
+  }
+  if (cssVars['--cfm-hint-min-text']) {
+    next.hintMinText = cssVars['--cfm-hint-min-text'];
+  }
+  if (cssVars['--cfm-hint-max-text']) {
+    next.hintMaxText = cssVars['--cfm-hint-max-text'];
+  }
+  return next;
+}
+
 type PreviewConfigContextValue = {
   previewState: PreviewStatePatch;
   configRevision: number;
@@ -66,17 +87,47 @@ export function PreviewConfigProvider({ children }: { children: ReactNode }) {
   const [configRevision, setConfigRevision] = useState(0);
 
   useEffect(() => {
+    const requestSnapshot = () => {
+      try {
+        window.parent.postMessage({ type: PREVIEW_BRIDGE_READY }, '*');
+      } catch {
+        /* ignore */
+      }
+    };
+
+    requestSnapshot();
+
     const handler = (event: MessageEvent) => {
       const data = event.data;
       if (!data?.type) return;
       if (data.type !== PREVIEW_BRIDGE_SNAPSHOT && data.type !== PREVIEW_BRIDGE_DELTA) return;
 
-      let shouldBumpRevision = false;
+      const isSnapshot = data.type === PREVIEW_BRIDGE_SNAPSHOT;
+      let shouldBumpRevision = isSnapshot;
+
+      if (data.cssVars) {
+        const root = document.documentElement;
+        for (const [key, value] of Object.entries(data.cssVars)) {
+          root.style.setProperty(key, value as string);
+        }
+        shouldBumpRevision = true;
+      }
 
-      if (data.contentPatch?.previewState) {
+      if (isSnapshot) {
+        const patchState = (data.contentPatch?.previewState ?? {}) as PreviewStatePatch;
+        const nextState = data.cssVars
+          ? previewStateFromCssVars(data.cssVars, patchState)
+          : patchState;
+        setPreviewState(nextState);
+        shouldBumpRevision = true;
+      } else if (data.contentPatch?.previewState) {
         setPreviewState((prev) => ({ ...prev, ...data.contentPatch.previewState }));
         shouldBumpRevision = true;
+      } else if (data.cssVars) {
+        setPreviewState((prev) => previewStateFromCssVars(data.cssVars, prev));
+        shouldBumpRevision = true;
       }
+
       if (data.contentPatch?.domAttributes) {
         const root = document.documentElement;
         for (const [key, value] of Object.entries(data.contentPatch.domAttributes)) {
@@ -84,12 +135,7 @@ export function PreviewConfigProvider({ children }: { children: ReactNode }) {
         }
         shouldBumpRevision = true;
       }
-      if (data.cssVars) {
-        const root = document.documentElement;
-        for (const [key, value] of Object.entries(data.cssVars)) {
-          root.style.setProperty(key, value as string);
-        }
-      }
+
       if (shouldBumpRevision) {
         setConfigRevision((r) => r + 1);
       }

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

@@ -34,7 +34,7 @@ function QuestionPreviewInner({ question, initialValue }: QuestionPreviewProps)
 
   const mergedQuestion = useMemo(
     () => mergePreviewQuestion(question, previewState),
-    [question, previewState],
+    [question, previewState, configRevision],
   );
 
   const heatmapInitial =

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

@@ -22,15 +22,15 @@ function SurveyPagePreviewInner() {
 
   const mcqQuestion = useMemo(
     () => mergeSurveyPageQuestion(FIXTURE_SURVEY_PAGE_MCQ, previewState),
-    [previewState],
+    [previewState, configRevision],
   );
   const matrixQuestion = useMemo(
     () => mergeSurveyPageQuestion(FIXTURE_SURVEY_PAGE_CFM_LIKERT, previewState),
-    [previewState],
+    [previewState, configRevision],
   );
   const npsQuestion = useMemo(
     () => mergeSurveyPageQuestion(FIXTURE_SURVEY_PAGE_NPS, previewState),
-    [previewState],
+    [previewState, configRevision],
   );
 
   const allQuestions = [mcqQuestion, matrixQuestion, npsQuestion];

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

@@ -181,7 +181,7 @@ export const FIXTURE_CFM_LIKERT = base({
   showColumnHeaders: true,
   repeatColumnHeaders: false,
   hasNotApplicableOption: false,
-  statementRows: MATRIX_ROWS_MULTI,
+  statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: LIKERT_COLUMNS,
 });
 
@@ -221,7 +221,7 @@ export const FIXTURE_CFM_CAROUSEL = base({
   showColumnHeaders: true,
   repeatColumnHeaders: false,
   hasNotApplicableOption: false,
-  statementRows: MATRIX_ROWS_MULTI,
+  statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: LIKERT_COLUMNS,
 });
 
@@ -267,7 +267,7 @@ export const FIXTURE_CSAT_NUMBERED = base({
   type: 'CSAT_MATRIX',
   displayStyle: 'numbered',
   gridLayout: 'standard',
-  statementRows: MATRIX_ROWS_MULTI,
+  statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: LIKERT_COLUMNS,
   scaleAnchorLabels: LIKERT_ANCHOR_LABELS,
 });
@@ -307,7 +307,7 @@ export const FIXTURE_RATING_STAR = base({
   displayStyle: 'star',
   gridLayout: 'standard',
   showColumnHeaders: true,
-  statementRows: MATRIX_ROWS_MULTI,
+  statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: RATING_TEN_COLUMNS,
   scaleAnchorLabels: LIKERT_ANCHOR_LABELS,
 });
@@ -316,7 +316,7 @@ export const FIXTURE_RATING_NUMBERED = base({
   type: 'RATING_MATRIX',
   displayStyle: 'numbered',
   gridLayout: 'standard',
-  statementRows: MATRIX_ROWS_MULTI,
+  statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: RATING_TEN_COLUMNS,
   scaleAnchorLabels: LIKERT_ANCHOR_LABELS,
 });
@@ -352,10 +352,7 @@ export const FIXTURE_RATING_SLIDER = base({
   type: 'RATING_MATRIX',
   displayStyle: 'graphics',
   gridLayout: 'standard',
-  statementRows: [
-    { id: 'r1', statementText: 'Statement Item 1' },
-    { id: 'r2', statementText: 'Statement Item 2' },
-  ],
+  statementRows: MATRIX_ROW_SINGLE,
   scaleColumns: [
     { id: 'c1', label: 'Likely' },
     { id: 'c2', label: 'Unlikely' },

package/templates/preview-harness/vite-app/src/mergePreviewQuestion.ts

@@ -37,6 +37,46 @@ const MULTI_STATEMENT_MATRIX_TYPES = new Set([
   'SLIDER_MATRIX',
 ]);
 
+/** Each preview iframe loads one fixture — infer its format tab from fixture shape. */
+function inferPreviewKeyFromQuestion(q: SurveyQuestion): string | null {
+  if (q.type === 'CFM_MATRIX') {
+    if (q.statementLayout === 'bipolar') return 'CFM_bipolar';
+    if (q.transposeTable) return 'CFM_transpose';
+    if (q.gridLayout === 'carousel') return 'CFM_carousel';
+    if (q.gridLayout === 'dropdown') return 'CFM_dropdown';
+    return 'CFM_likert';
+  }
+  if (q.type === 'RANK_ORDER') {
+    const mode = (q as { interactionMode?: string }).interactionMode;
+    if (mode === 'dropdown') return 'RANK_dropdown';
+    return 'RANK_drag';
+  }
+  return null;
+}
+
+function resolvePreviewKey(
+  previewState: PreviewStatePatch,
+  question: SurveyQuestion,
+): string {
+  if (previewState.activePreviewKey === 'survey_page') return 'survey_page';
+  const inferred = inferPreviewKeyFromQuestion(question);
+  if (inferred) return inferred;
+  return previewState.activePreviewKey ?? '';
+}
+
+function resolveMultiStatementFlag(
+  previewState: PreviewStatePatch,
+): boolean | undefined {
+  if (previewState.multiStatement !== undefined) return previewState.multiStatement;
+  if (typeof document === 'undefined') return undefined;
+  const css = getComputedStyle(document.documentElement)
+    .getPropertyValue('--cfm-matrix-multi-statement')
+    .trim();
+  if (css === '1') return true;
+  if (css === '0') return false;
+  return undefined;
+}
+
 export function applyMatrixRowCount<T extends MatrixRowCapable>(
   q: T,
   multiStatement: boolean | undefined,
@@ -52,18 +92,27 @@ export function applyMatrixRowCount<T extends MatrixRowCapable>(
 
   if (multiStatement === true) {
     if (isBipolar) {
-      return { ...q, statementRows: BIPOLAR_ROWS_MULTI } as T;
+      return {
+        ...q,
+        statementRows: BIPOLAR_ROWS_MULTI,
+        showColumnHeaders: false,
+        statementLayout: 'bipolar',
+      } as T;
     }
     if (isSlider) {
       return { ...q, statementRows: SLIDER_ROWS_MULTI } as T;
     }
-    if (q.statementRows.length >= 3) return q;
     return { ...q, statementRows: MATRIX_ROWS_MULTI } as T;
   }
 
   if (multiStatement === false) {
     if (isBipolar) {
-      return { ...q, statementRows: BIPOLAR_ROWS_SINGLE } as T;
+      return {
+        ...q,
+        statementRows: BIPOLAR_ROWS_SINGLE,
+        showColumnHeaders: false,
+        statementLayout: 'bipolar',
+      } as T;
     }
     if (isSlider) {
       return { ...q, statementRows: SLIDER_ROWS_SINGLE } as T;
@@ -71,7 +120,6 @@ export function applyMatrixRowCount<T extends MatrixRowCapable>(
     return { ...q, statementRows: [...MATRIX_ROW_SINGLE] } as T;
   }
 
-  // Before bridge snapshot — keep fixture row count (single-row fixtures stay single).
   return q;
 }
 
@@ -84,7 +132,19 @@ function applyCfmMatrixLayout(
   },
   previewKey: string,
 ): SurveyQuestion {
-  if (previewKey === 'survey_page' || previewKey === 'CFM_likert' || !previewKey.startsWith('CFM_')) {
+  if (previewKey === 'survey_page') {
+    return {
+      ...q,
+      statementLayout: 'likert',
+      gridLayout: 'standard',
+      transposeTable: false,
+      showColumnHeaders: true,
+    } as SurveyQuestion;
+  }
+  if (!previewKey) {
+    return q as SurveyQuestion;
+  }
+  if (previewKey === 'CFM_likert' || !previewKey.startsWith('CFM_')) {
     return {
       ...q,
       statementLayout: 'likert',
@@ -120,7 +180,7 @@ export function mergePreviewQuestion(
   previewState: PreviewStatePatch,
 ): SurveyQuestion {
   let q = { ...question } as SurveyQuestion;
-  const previewKey = previewState.activePreviewKey ?? '';
+  const previewKey = resolvePreviewKey(previewState, question);
   const isSurveyPage = previewKey === 'survey_page';
 
   if (previewState.textfieldPlaceholder && q.type === 'TEXTFIELD') {
@@ -159,7 +219,7 @@ export function mergePreviewQuestion(
     }
   }
 
-  return applyMatrixRowCount(q, previewState.multiStatement, {
+  return applyMatrixRowCount(q, resolveMultiStatementFlag(previewState), {
     preserveSurveyPageRows: isSurveyPage,
   });
 }

package/templates/preview-harness/vite-app/src/preview-live-overrides.css

@@ -90,6 +90,14 @@ html.cfm-live-edit .cfm-footer-inner {
   flex-direction: var(--cfm-footer-flex-direction, row) !important;
 }
 
+html.cfm-live-edit [data-cfm-footer-logo] {
+  object-fit: contain !important;
+  object-position: left center !important;
+  height: var(--cfm-footer-logo-height, 32px) !important;
+  max-width: var(--cfm-footer-logo-width, 120px) !important;
+  width: auto !important;
+}
+
 html.cfm-live-edit .rounded-xl,
 html.cfm-live-edit .rounded-md,
 html.cfm-live-edit .rounded-lg {

package/templates/survey-theme.css

@@ -228,6 +228,19 @@ body {
   grid-row: 1;
   justify-self: var(--cfm-footer-logo-justify, start);
   align-self: end;
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+  max-width: 100%;
+}
+
+.cfm-footer-logo-slot img,
+[data-cfm-footer-logo] {
+  object-fit: contain;
+  object-position: left center;
+  height: var(--cfm-footer-logo-height, 32px);
+  max-width: var(--cfm-footer-logo-width, 120px);
+  width: auto;
 }
 
 .cfm-footer-links {

package/templates/wizard-dist/assets/{PreviewMock-BlOAvUCN.js → PreviewMock-MsONyaq9.js}

@@ -1 +1 @@
-import{u as x,j as e}from"./index-2Bi_7Fdh.js";import{b as t}from"./vendor-BwkXDkd3.js";function p(d=150){const l=x(r=>r.config),[a,s]=t.useState(l);return t.useEffect(()=>{const r=window.setTimeout(()=>s(l),d);return()=>window.clearTimeout(r)},[l,d]),a}const h=t.memo(function(){const l=p(150),a=x(n=>n.logoPreviewDataUrl),{global:s}=l,{layout:r,colorScheme:o,buttons:c}=s,m=t.useMemo(()=>r.borderStyle==="sharp"?"rounded-none":r.borderStyle==="pill"?"rounded-[32px]":"rounded-2xl",[r.borderStyle]),i=t.useMemo(()=>r.fontStyle==="serif"?"Georgia, serif":r.fontStyle==="system"?"system-ui, sans-serif":"Inter, sans-serif",[r.fontStyle]),u=a??s.logo.url,f=t.useMemo(()=>({backgroundColor:o.background,color:o.text,borderColor:o.secondary,fontFamily:i}),[o,i]);return e.jsxs("div",{className:`overflow-hidden border shadow-md ${m}`,style:f,children:[r.showHeader&&e.jsxs("div",{className:"flex items-center gap-3 border-b px-5 py-4",style:{borderColor:o.secondary},children:[u&&e.jsx("img",{src:u,alt:"Logo",className:"max-h-6 w-auto object-contain",loading:"lazy"}),e.jsx("span",{className:"text-xs font-semibold tracking-wider",children:s.companyName})]}),e.jsxs("div",{className:"space-y-6 p-6",children:[r.showProgressBar&&e.jsxs("div",{className:"space-y-1.5",children:[e.jsxs("div",{className:"flex justify-between text-[10px] font-semibold text-slate-400",children:[e.jsx("span",{children:"Progress"}),e.jsx("span",{children:"35%"})]}),e.jsx("div",{className:"h-1.5 w-full overflow-hidden rounded-full bg-slate-100",children:e.jsx("div",{className:"h-full w-[35%] rounded-full",style:{backgroundColor:o.accent}})})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("h4",{className:"flex items-start gap-1.5 text-sm font-bold leading-snug",children:[r.showQuestionNumbers&&e.jsx("span",{className:"font-medium text-slate-400",children:"Q1."}),e.jsx("span",{children:s.surveyTitle}),r.showRequiredAsterisk&&e.jsx("span",{className:"text-red-500",children:"*"})]}),e.jsx("p",{className:"text-[11px] text-slate-400",children:"How would you rate your overall experience?"}),e.jsx("div",{className:"grid grid-cols-5 gap-2",children:[1,2,3,4,5].map(n=>e.jsx("div",{className:`flex h-9 items-center justify-center border text-xs font-semibold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:n===1?{backgroundColor:o.secondary,borderColor:o.primary,color:o.primary}:{backgroundColor:o.background,borderColor:o.secondary,color:o.text},children:n},n))})]})]}),e.jsxs("div",{className:"flex items-center justify-between border-t bg-slate-50/50 px-6 py-4",children:[r.showBackButton&&e.jsx("span",{className:`border px-3 py-1.5 text-[10px] font-semibold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:{borderColor:o.secondary,color:o.text},children:c.back}),e.jsx("div",{className:"flex-1"}),r.showNextButton&&e.jsx("span",{className:`px-4 py-1.5 text-[10px] font-bold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:{backgroundColor:o.primary,color:o.buttonText},children:c.next})]})]})});export{h as PreviewMock};
+import{u as x,j as e}from"./index-C7RSJr09.js";import{b as t}from"./vendor-BwkXDkd3.js";function p(d=150){const l=x(r=>r.config),[a,s]=t.useState(l);return t.useEffect(()=>{const r=window.setTimeout(()=>s(l),d);return()=>window.clearTimeout(r)},[l,d]),a}const h=t.memo(function(){const l=p(150),a=x(n=>n.logoPreviewDataUrl),{global:s}=l,{layout:r,colorScheme:o,buttons:c}=s,m=t.useMemo(()=>r.borderStyle==="sharp"?"rounded-none":r.borderStyle==="pill"?"rounded-[32px]":"rounded-2xl",[r.borderStyle]),i=t.useMemo(()=>r.fontStyle==="serif"?"Georgia, serif":r.fontStyle==="system"?"system-ui, sans-serif":"Inter, sans-serif",[r.fontStyle]),u=a??s.logo.url,f=t.useMemo(()=>({backgroundColor:o.background,color:o.text,borderColor:o.secondary,fontFamily:i}),[o,i]);return e.jsxs("div",{className:`overflow-hidden border shadow-md ${m}`,style:f,children:[r.showHeader&&e.jsxs("div",{className:"flex items-center gap-3 border-b px-5 py-4",style:{borderColor:o.secondary},children:[u&&e.jsx("img",{src:u,alt:"Logo",className:"max-h-6 w-auto object-contain",loading:"lazy"}),e.jsx("span",{className:"text-xs font-semibold tracking-wider",children:s.companyName})]}),e.jsxs("div",{className:"space-y-6 p-6",children:[r.showProgressBar&&e.jsxs("div",{className:"space-y-1.5",children:[e.jsxs("div",{className:"flex justify-between text-[10px] font-semibold text-slate-400",children:[e.jsx("span",{children:"Progress"}),e.jsx("span",{children:"35%"})]}),e.jsx("div",{className:"h-1.5 w-full overflow-hidden rounded-full bg-slate-100",children:e.jsx("div",{className:"h-full w-[35%] rounded-full",style:{backgroundColor:o.accent}})})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("h4",{className:"flex items-start gap-1.5 text-sm font-bold leading-snug",children:[r.showQuestionNumbers&&e.jsx("span",{className:"font-medium text-slate-400",children:"Q1."}),e.jsx("span",{children:s.surveyTitle}),r.showRequiredAsterisk&&e.jsx("span",{className:"text-red-500",children:"*"})]}),e.jsx("p",{className:"text-[11px] text-slate-400",children:"How would you rate your overall experience?"}),e.jsx("div",{className:"grid grid-cols-5 gap-2",children:[1,2,3,4,5].map(n=>e.jsx("div",{className:`flex h-9 items-center justify-center border text-xs font-semibold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:n===1?{backgroundColor:o.secondary,borderColor:o.primary,color:o.primary}:{backgroundColor:o.background,borderColor:o.secondary,color:o.text},children:n},n))})]})]}),e.jsxs("div",{className:"flex items-center justify-between border-t bg-slate-50/50 px-6 py-4",children:[r.showBackButton&&e.jsx("span",{className:`border px-3 py-1.5 text-[10px] font-semibold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:{borderColor:o.secondary,color:o.text},children:c.back}),e.jsx("div",{className:"flex-1"}),r.showNextButton&&e.jsx("span",{className:`px-4 py-1.5 text-[10px] font-bold ${r.borderStyle==="pill"?"rounded-full":r.borderStyle==="sharp"?"rounded-none":"rounded-lg"}`,style:{backgroundColor:o.primary,color:o.buttonText},children:c.next})]})]})});export{h as PreviewMock};

package/templates/wizard-dist/assets/TypePanel-D24BxbHk.js

@@ -0,0 +1 @@
+import{u as m,j as e,T as P,S as b,R as d,C as i,N as t,a as R,M as z}from"./index-C7RSJr09.js";import"./vendor-BwkXDkd3.js";function C({values:n,onPatch:r}){return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Label text color",value:n.columnLabelColor,onChange:a=>r({columnLabelColor:a})}),e.jsx(i,{label:"Label background",value:n.columnLabelBgColor,onChange:a=>r({columnLabelBgColor:a})})]})}function T({values:n,onPatch:r}){return e.jsxs("div",{className:"grid grid-cols-1 gap-3 sm:grid-cols-2",children:[e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Min hint label"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:n.hintMinText,onChange:a=>r({hintMinText:a.target.value})})]}),e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Max hint label"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:n.hintMaxText,onChange:a=>r({hintMaxText:a.target.value})})]}),e.jsx(i,{label:"Hint text color",value:n.hintLabelColor,onChange:a=>r({hintLabelColor:a})}),e.jsx(i,{label:"Hint label background",value:n.hintLabelBgColor,onChange:a=>r({hintLabelBgColor:a})})]})}function M({values:n,onPatch:r,count:a=11}){return e.jsxs("div",{className:"space-y-3",children:[e.jsx(b,{label:"Number label style",value:n.numberLabelMode,onChange:c=>r({numberLabelMode:c}),options:[{value:"traffic",label:"Traffic light (default)"},{value:"monochrome",label:"Monochrome (one color)"},{value:"individual",label:"Individual per number"}]}),n.numberLabelMode==="monochrome"&&e.jsx(i,{label:"Monochrome color",value:n.monochromeNumberColor,onChange:c=>r({monochromeNumberColor:c})}),n.numberLabelMode==="individual"&&e.jsx("div",{className:"grid grid-cols-2 gap-2 sm:grid-cols-3",children:Array.from({length:a},(c,x)=>e.jsx(i,{label:`#${x}`,value:n.individualNumberColors[x]??"#9CA3AF",onChange:j=>{const h=[...n.individualNumberColors];h[x]=j,r({individualNumberColors:h})}},x))})]})}function s({title:n,children:r}){return e.jsxs("div",{className:"space-y-3 rounded-xl border border-white/5 bg-slate-950/20 p-4",children:[e.jsx("h4",{className:"text-xs font-semibold uppercase tracking-wider text-slate-400",children:n}),r]})}function I({type:n,activeFormat:r}){const a=m(l=>l.config.questionTypes[n]),c=m(l=>l.updateQuestionType),x=m(l=>l.previewMultiStatementByType),j=m(l=>l.setPreviewMultiStatementForType),h=m(l=>l.heatmapPreviewPin);if(!a)return e.jsx("p",{className:"text-sm text-slate-500",children:"No configuration available for this type."});const o=l=>c(n,l),f=z.includes(n),B=!!x[n],g=r.includes("star"),u=r.includes("emoji"),p=r.includes("numbered"),v=r.includes("drag"),S=r.includes("dropdown"),N=r.includes("radio"),k=r==="CFM_bipolar",w=r.includes("graphics"),y=a.optionStyle??a.cardStyle??"outlined",L=a.buttonStyle??"numbered";return e.jsxs("div",{className:"space-y-4",children:[f&&e.jsx(P,{label:"Preview multiple statements",checked:B,onChange:l=>j(n,l)}),n==="MCQ"&&"optionGap"in a&&e.jsx(s,{title:"Option style",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(b,{label:"Option style",value:a.optionStyle??a.cardStyle??"outlined",onChange:l=>o({optionStyle:l}),options:[{value:"outlined",label:"Outlined"},{value:"filled",label:"Filled"},{value:"minimal",label:"Minimal"}]}),e.jsx(d,{label:"Option gap",value:a.optionGap,onChange:l=>o({optionGap:l}),min:0,max:32}),e.jsx(d,{label:"Border radius",value:a.borderRadius,onChange:l=>o({borderRadius:l}),min:0,max:24}),e.jsx(d,{label:"Option padding",value:a.optionPadding??12,onChange:l=>o({optionPadding:l}),min:4,max:24}),e.jsx(i,{label:"Hover border",value:a.hoverBorderColor,onChange:l=>o({hoverBorderColor:l})}),y==="filled"&&e.jsx(i,{label:"Unselected fill color",value:a.filledOptionBg??"#F9FAFB",onChange:l=>o({filledOptionBg:l})})]})}),n==="TEXTFIELD"&&"defaultPlaceholder"in a&&e.jsx(s,{title:"Text input",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsxs("label",{className:"space-y-1 sm:col-span-2",children:[e.jsx("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-slate-500",children:"Default placeholder"}),e.jsx("input",{className:"w-full rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2 text-sm text-white",value:a.defaultPlaceholder,onChange:l=>o({defaultPlaceholder:l.target.value})})]}),e.jsx(t,{label:"Input radius (px)",value:a.inputRadius,onChange:l=>o({inputRadius:l}),min:0,max:24}),e.jsx(i,{label:"Border color",value:a.borderColor,onChange:l=>o({borderColor:l})}),e.jsx(i,{label:"Placeholder color",value:a.placeholderColor,onChange:l=>o({placeholderColor:l})}),e.jsx(t,{label:"Input height (px)",value:a.inputHeight,onChange:l=>o({inputHeight:l}),min:32,max:64}),e.jsx(t,{label:"Input padding (px)",value:a.inputPadding,onChange:l=>o({inputPadding:l}),min:8,max:24})]})}),n==="NPS_SCALE"&&"buttonStyle"in a&&e.jsxs(e.Fragment,{children:[e.jsxs(s,{title:"NPS buttons",children:[e.jsx(b,{label:"Button style",value:a.buttonStyle,onChange:l=>o({buttonStyle:l}),options:[{value:"standard",label:"Radio"},{value:"numbered",label:"Numbered badges"}]}),e.jsx("p",{className:"text-xs text-slate-500",children:"Selected cell and focus ring come from Theme → Question card."})]}),e.jsx(s,{title:"Hint labels",children:e.jsx(T,{values:a,onPatch:o})}),L==="numbered"&&e.jsx(s,{title:"Number labels",children:e.jsx(M,{values:a,onPatch:o})}),e.jsx(s,{title:"Track & cells",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(t,{label:"Cell size (px)",value:a.cellSize,onChange:l=>o({cellSize:l}),min:24,max:56}),e.jsx(t,{label:"Cell gap (px)",value:a.cellGap,onChange:l=>o({cellGap:l}),min:0,max:16}),e.jsx(i,{label:"Track bar",value:a.trackBarColor,onChange:l=>o({trackBarColor:l})})]})})]}),n==="CFM_MATRIX"&&"rowLabelWidth"in a&&e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Matrix layout",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(t,{label:"Row label width (px)",value:a.rowLabelWidth,onChange:l=>o({rowLabelWidth:l}),min:120,max:280}),k&&e.jsx(t,{label:"Bipolar column width (%)",value:a.bipolarColumnWidthPercent,onChange:l=>o({bipolarColumnWidthPercent:l}),min:15,max:40}),e.jsx(t,{label:"Cell padding (px)",value:a.cellPadding,onChange:l=>o({cellPadding:l}),min:4,max:24})]})}),e.jsx(s,{title:"Label items",children:e.jsx(C,{values:a,onPatch:o})})]}),n==="CSAT_MATRIX"&&"emojiSize"in a&&e.jsxs(e.Fragment,{children:[(u||g||p)&&e.jsxs(s,{title:`${R.CSAT_MATRIX} — ${r.replace("CSAT_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[u&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>o({emojiSize:l}),min:16,max:40}),g&&e.jsx(i,{label:"Star color",value:a.accentColor,onChange:l=>o({accentColor:l})}),(u||g||p)&&e.jsx(d,{label:"Unselected opacity",value:Math.round(a.unselectedOpacity*100),onChange:l=>o({unselectedOpacity:l/100}),min:10,max:100})]}),e.jsx("p",{className:"text-xs text-slate-500",children:"Selected cell color and focus ring come from Theme → Question card."})]}),e.jsxs(s,{title:"Label items",children:[e.jsx("p",{className:"text-xs text-slate-500",children:"Applies to the 5 text labels above options in all formats."}),e.jsx(C,{values:a,onPatch:o})]}),w&&e.jsx(s,{title:"Graphics track",children:e.jsx(i,{label:"Track color",value:a.graphicsTrackColor,onChange:l=>o({graphicsTrackColor:l})})})]}),n==="RATING_MATRIX"&&"unselectedStarOpacity"in a&&e.jsxs(e.Fragment,{children:[(u||g||p||N)&&e.jsxs(s,{title:`Rating — ${r.replace("RATING_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[u&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>o({emojiSize:l}),min:16,max:40}),g&&e.jsx(i,{label:"Star color",value:a.starColor,onChange:l=>o({starColor:l})}),(u||g||p||N)&&e.jsx(d,{label:"Unselected opacity",value:Math.round(a.unselectedStarOpacity*100),onChange:l=>o({unselectedStarOpacity:l/100}),min:10,max:100})]}),e.jsx("p",{className:"text-xs text-slate-500",children:"Selected cell color and focus ring come from Theme → Question card."})]}),e.jsxs(s,{title:"Label items",children:[e.jsx("p",{className:"text-xs text-slate-500",children:"Applies to the 5 text anchor labels in all formats."}),e.jsx(C,{values:a,onPatch:o})]}),w&&e.jsx(s,{title:"Graphics track",children:e.jsx(i,{label:"Track color",value:a.graphicsTrackColor,onChange:l=>o({graphicsTrackColor:l})})})]}),n==="SLIDER_MATRIX"&&"trackColor"in a&&e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Slider track",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Track",value:a.trackColor,onChange:l=>o({trackColor:l})}),e.jsx(i,{label:"Thumb",value:a.thumbColor,onChange:l=>o({thumbColor:l})}),e.jsx(t,{label:"Row label width (px)",value:a.rowLabelWidth,onChange:l=>o({rowLabelWidth:l}),min:120,max:280}),e.jsx(i,{label:"Row band",value:a.rowBandColor,onChange:l=>o({rowBandColor:l})}),e.jsx(t,{label:"Tick badge size (px)",value:a.tickBadgeSize,onChange:l=>o({tickBadgeSize:l}),min:20,max:40})]})}),e.jsx(s,{title:"Anchor hint labels",children:e.jsx(T,{values:a,onPatch:o})}),e.jsx(s,{title:"Tick number labels",children:e.jsx(M,{values:a,onPatch:o,count:11})})]}),n==="FILE_UPLOAD"&&"dropzoneStyle"in a&&e.jsx(s,{title:"Dropzone",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(b,{label:"Dropzone border",value:a.dropzoneStyle,onChange:l=>o({dropzoneStyle:l}),options:[{value:"dashed",label:"Dashed"},{value:"solid",label:"Solid"}]}),e.jsx(i,{label:"Border color",value:a.borderColor??a.accentColor,onChange:l=>o({borderColor:l})}),e.jsx(i,{label:"Fill color",value:a.dropzoneFillColor,onChange:l=>o({dropzoneFillColor:l})}),e.jsx(t,{label:"Padding (px)",value:a.dropzonePadding,onChange:l=>o({dropzonePadding:l}),min:12,max:48})]})}),n==="TEXT_AND_MEDIA"&&"mediaMaxWidth"in a&&e.jsx(s,{title:"Text & media",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(d,{label:"Media max width (%)",value:a.mediaMaxWidth,onChange:l=>o({mediaMaxWidth:l}),min:50,max:100}),e.jsx(d,{label:"Media corner radius",value:a.mediaRadius,onChange:l=>o({mediaRadius:l}),min:0,max:24}),e.jsx(i,{label:"Caption color",value:a.captionColor,onChange:l=>o({captionColor:l})}),e.jsx(t,{label:"Caption size (px)",value:a.captionSize,onChange:l=>o({captionSize:l}),min:10,max:24})]})}),n==="HEATMAP"&&"pinColor"in a&&e.jsx(s,{title:"Heatmap pin",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Pin color",value:a.pinColor,onChange:l=>o({pinColor:l})}),e.jsx(i,{label:"Pin border",value:a.pinBorderColor,onChange:l=>o({pinBorderColor:l})}),e.jsx(d,{label:"Pin size",value:a.pinSize,onChange:l=>o({pinSize:l}),min:8,max:32}),e.jsx(d,{label:"Overlay opacity",value:Math.round(a.overlayOpacity*100),onChange:l=>o({overlayOpacity:l/100}),min:0,max:80}),e.jsxs("p",{className:"text-xs text-slate-500 sm:col-span-2",children:["Click the heatmap image in the preview to place a pin and see styling update live. Pin preview position: ",Math.round(h.x*100),"%, ",Math.round(h.y*100),"%"]})]})}),n==="RANK_ORDER"&&"drag"in a&&e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"List",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"List bg",value:a.drag.itemBg,onChange:l=>o({drag:{...a.drag,itemBg:l},dropdown:{...a.dropdown,itemBg:l}})}),e.jsx(i,{label:"List hover",value:a.dropdown.itemHoverBg??a.drag.itemHoverBg??"#F3F4F6",onChange:l=>o({drag:{...a.drag,itemHoverBg:l},dropdown:{...a.dropdown,itemHoverBg:l}})})]})}),e.jsx(s,{title:v?"Drag & drop":S?"Dropdown rank":"Rank order",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[v&&e.jsxs(e.Fragment,{children:[e.jsx(i,{label:"Drag handle",value:a.drag.dragHandleColor,onChange:l=>o({drag:{...a.drag,dragHandleColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>o({drag:{...a.drag,rankBadgeColor:l},dropdown:{...a.dropdown,rankBadgeColor:l}})})]}),S&&e.jsxs(e.Fragment,{children:[e.jsx(i,{label:"Select border",value:a.dropdown.selectBorderColor,onChange:l=>o({dropdown:{...a.dropdown,selectBorderColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>o({drag:{...a.drag,rankBadgeColor:l},dropdown:{...a.dropdown,rankBadgeColor:l}})})]})]})})]})]})}export{I as TypePanel};