@explorer02/cfm-survey-sdk 0.1.2 → 0.1.4

package/package.json

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

package/templates/AGENT.md

@@ -72,9 +72,14 @@ npm install @explorer02/cfm-survey-sdk @tanstack/react-query
 >    ```
 > 3. Tell the client in chat: *"I am launching a premium interactive setup page in your browser. Please customize your survey preferences and logo there, then click Complete Setup."*
 > 4. The wizard will open in the browser. The client will answer the questions and upload their logo there. **You do not need to do anything while the wizard is running — just wait.**
-> 5. When `npx cfm-sdk init` exits (the terminal returns to a prompt), **immediately** read `./survey-config.json` and proceed to Phase 3.
-> 6. **Do NOT ask the client to invoke you again.** Continue automatically.
+> 5. When `npx cfm-sdk init` exits (the terminal returns to a prompt), **immediately** read `./survey-config.json` and proceed.
 
+### Phase 2b: Request Instance ID (STRICT REQUIREMENT)
+
+Before proceeding to Phase 3, you **MUST STRICTLY ASK THE CLIENT** for the Survey Instance ID input:
+*"Please provide the Instance ID (JWT Token) for your survey so I can configure the fetch logic."*
+
+**DO NOT proceed with code generation** or build the SurveyPage until the client provides this Instance ID in the chat!
 
 ### Phase 3: Configuration Setup
 
@@ -627,12 +632,17 @@ const SURVEY_PLACEHOLDERS = {
 export default function SurveyPage() {
   const [selectedLanguage, setSelectedLanguage] = useState<string | undefined>("");
 
+  // ⚠️ MANDATORY: Pass the exact Instance ID that the client provided to you in the chat!
+  // The SDK will only fetch the survey data once this valid instance ID is passed.
+  const INPUT_OPTIONS = {
+    instanceId: '<<REPLACE_WITH_CLIENT_PROVIDED_INSTANCE_ID>>',
+    language: selectedLanguage,
+    debug: false,
+    placeholders: SURVEY_PLACEHOLDERS,
+  };
+
   const { surveyQueryResults, submitSurveyResults, state, onAction } = useSurveySDK({
-    options: {
-      language: selectedLanguage,
-      debug: false,
-      placeholders: SURVEY_PLACEHOLDERS,
-    },
+    options: INPUT_OPTIONS
   });
 
   const survey = surveyQueryResults.data;
@@ -734,16 +744,14 @@ export default function SurveyPage() {
       )}
 
       {/* Navigation Buttons */}
-      <nav>
-        {/* Back Button — only show if enabled and not on the first page */}
+      <div className="mt-8 flex items-center justify-start gap-4">
         {state.currentPageIndex > 0 && surveyConfig.layout.showBackButton && (
           <button
             type="button"
             onClick={() => onAction({ type: 'PREVIOUS' })}
-            /* STYLE: Design a secondary/outline button matching the mockup. */
+            className="rounded-md border border-[#e20074] px-6 py-2 text-sm font-semibold text-[#e20074] transition-all hover:bg-[#fdf2f8]"
           >
-            {/* STYLE: Use client's preferred label (e.g., "Back", "Previous", "Zurück") */}
-            Back
+            {survey.language?.startsWith('de') ? 'Zurück' : 'Back'}
           </button>
         )}
 
@@ -753,17 +761,22 @@ export default function SurveyPage() {
             type="button"
             onClick={() => onAction({ type: 'NEXT' })}
             disabled={submitSurveyResults.isLoading}
-            /* STYLE: Design a primary action button matching the mockup.
-               Must have disabled state styling for when submission is in progress. */
+            className="rounded-md bg-[#e20074] px-6 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
           >
             {submitSurveyResults.isLoading
-              ? 'Submitting...'
+              ? survey.language?.startsWith('de')
+                ? 'Wird gesendet...'
+                : 'Submitting...'
               : state.currentPageIndex < survey.pages.length - 1
-                ? 'Next'
-                : 'Submit'}
+                ? survey.language?.startsWith('de')
+                  ? 'Weiter'
+                  : 'Next'
+                : survey.language?.startsWith('de')
+                  ? 'Absenden'
+                  : 'Submit'}
           </button>
         )}
-      </nav>
+      </div>
 
       {/* Footer — pass links/data as needed */}
       <Footer />
@@ -1012,34 +1025,73 @@ export default function Question({ question, selectedValue, validationError, onS
 ### Logic Skeleton: `RatingScale.tsx` — Rating Input
 
 ```tsx
+import type { SurveyOption, AnswerValue } from '@explorer02/cfm-survey-sdk';
+
 type RatingScaleProps = {
   questionId: string;
-  options: { label: string; value: string | number; color?: string }[];
-  selectedValue?: string | number;
-  onSelect: (value: string | number) => void;
+  options: SurveyOption[];
+  selectedValue?: AnswerValue;
+  onSelect: (value: AnswerValue) => void;
 };
 
 export default function RatingScale({ questionId, options, selectedValue, onSelect }: RatingScaleProps) {
   return (
-    <div>
-      {/* STYLE: Design the rating scale layout to match the mockup.
-          Common patterns: horizontal badge row, numbered circles, star rating, slider.
-          Each option.color (if present) should be used as the badge/indicator background color. */}
-      {options.map(option => {
-        const isSelected = selectedValue === option.value;
-        return (
-          <button
-            key={option.value}
-            type="button"
-            onClick={() => onSelect(option.value)}
-            /* STYLE: Design selected vs. unselected states.
-               If option.color is available, use it: style={{ backgroundColor: option.color }}
-               Must be clearly distinguishable which option is selected. */
-          >
-            {option.label}
-          </button>
-        );
-      })}
+    <div role="radiogroup" className="w-full">
+      {/* Badges row */}
+      <div
+        className="grid gap-0.5 sm:gap-1 mb-3"
+        style={{ gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))` }}
+      >
+        {options.map((option, index) => (
+          <div key={`${questionId}-badge-${option.value}`} className="flex justify-center">
+            <div
+              className="flex h-5 w-5 sm:h-6 sm:w-6 items-center justify-center rounded-[3px] text-[10px] sm:text-xs font-bold text-white shadow-sm"
+              style={{ backgroundColor: option.color ?? '#e20074' }}
+            >
+              {option.label}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Track row */}
+      <div
+        className="grid bg-[#f2f2f2] rounded-md overflow-hidden h-11 sm:h-12 border border-gray-200/50"
+        style={{ gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))` }}
+      >
+        {options.map((option, index) => {
+          const isSelected = selectedValue === option.value;
+          return (
+            <label
+              key={`${questionId}-track-${option.value}`}
+              className="flex items-center justify-center cursor-pointer transition-colors relative h-full w-full"
+            >
+              <input
+                type="radio"
+                name={questionId}
+                value={option.value === null ? '' : String(option.value)}
+                checked={isSelected}
+                onChange={() => onSelect(option.value)}
+                className="sr-only"
+              />
+              <div
+                className={`flex items-center justify-center w-[90%] h-[80%] rounded-[6px] transition-all ${
+                  isSelected ? 'bg-[#fbe8f3]' : 'hover:bg-gray-200/40'
+                }`}
+              >
+                {/* Custom Radio Button */}
+                <div
+                  className={`flex h-4.5 w-4.5 sm:h-5.5 sm:w-5.5 items-center justify-center rounded-full transition-all ${
+                    isSelected
+                      ? 'border-[4px] border-[#e20074] bg-white shadow-sm'
+                      : 'border-2 border-gray-300 bg-white'
+                  }`}
+                />
+              </div>
+            </label>
+          );
+        })}
+      </div>
     </div>
   );
 }
@@ -1051,57 +1103,96 @@ export default function RatingScale({ questionId, options, selectedValue, onSele
 
 ```tsx
 import type { CsatQuestion } from '@explorer02/cfm-survey-sdk';
-import { getEmojiForIndex, CsatStarIcons } from '@explorer02/cfm-survey-sdk';
+import { CsatEmojiMapping, CsatStarIcons, getEmojiForIndex } from '@explorer02/cfm-survey-sdk';
 
 type CsatScaleProps = {
   question: CsatQuestion;
-  selectedValue: string | number | null;
+  selectedValue?: string | number | null;
   onSelect: (value: string | number | null) => void;
 };
 
 export default function CsatScale({ question, selectedValue, onSelect }: CsatScaleProps) {
-  const { options, buttonType, hasNotApplicable, reverseScaleOrder } = question;
+  const { buttonType, options, labelPosition } = question;
+
+  if (buttonType === 'dropdown') {
+    return (
+      <div className="w-full max-w-sm">
+        <select
+          className="w-full rounded-[4px] border border-gray-300 bg-white p-3 text-[15px] font-medium text-gray-900 outline-none transition-colors hover:border-gray-400 focus:border-[#e20074] focus:ring-1 focus:ring-[#e20074]"
+          value={selectedValue !== undefined ? String(selectedValue) : ''}
+          onChange={(e) => {
+            const val = e.target.value === 'null' ? null : e.target.value;
+            const numeric = Number(val);
+            onSelect(val !== null && !isNaN(numeric) ? numeric : val);
+          }}
+        >
+          <option value="" disabled>Select an option</option>
+          {options.map((opt, index) => (
+            <option key={`${String(opt.value)}-${index}`} value={String(opt.value)}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  }
 
   return (
-    <div>
-      {/* STYLE: Design a horizontal layout for CSAT options. */}
-      <div>
-        {options.map((option, index) => {
-          const isSelected = selectedValue === option.value;
-          
-          return (
-            <button
-              key={option.value}
-              type="button"
-              onClick={() => onSelect(option.value)}
-              /* STYLE: Style selected vs unselected states */
+    <div className="flex flex-wrap items-center gap-3">
+      {options.map((option, index) => {
+        const isSelected = selectedValue === option.value;
+        const isNA = option.value === null;
+
+        // Emoji
+        const scaleOptionsLength = options.filter(o => o.value !== null).length;
+        const EmojiNode =
+          buttonType === 'emoji' && !isNA
+            ? getEmojiForIndex(index, scaleOptionsLength)
+            : null;
+
+        // Star
+        const StarNode =
+          buttonType === 'star' && !isNA
+            ? isSelected ? CsatStarIcons.filled : CsatStarIcons.empty
+            : null;
+
+        // Numbered Button
+        const isNumbered = buttonType === 'numbered' || buttonType === 'number';
+
+        return (
+          <button
+            key={`${String(option.value)}-${index}`}
+            type="button"
+            onClick={() => onSelect(option.value)}
+            className={`flex ${labelPosition === 'top' ? 'flex-col-reverse' : 'flex-col'} items-center justify-center gap-2 rounded-lg border px-5 py-4 transition-all ${
+              isSelected
+                ? 'border-[#e20074] bg-[#fdf2f8] shadow-sm'
+                : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50'
+            } ${StarNode ? 'border-transparent bg-transparent hover:bg-transparent shadow-none px-2 py-2' : ''}`}
+          >
+            <div
+              className={`flex h-10 items-center justify-center text-3xl transition-transform ${
+                isSelected ? 'scale-110' : 'scale-100'
+              }`}
             >
-              {buttonType === 'emoji' && (
-                 /* ⚠️ SDK provides getEmojiForIndex helper! */
-                 <span dangerouslySetInnerHTML={{ __html: getEmojiForIndex(index, options.length, reverseScaleOrder) }} />
-              )}
-              {buttonType === 'star' && (
-                 <span dangerouslySetInnerHTML={{ __html: CsatStarIcons[isSelected ? 'filled' : 'empty'] }} />
-              )}
-              {/* Default fallback for other buttonTypes */}
-              {buttonType !== 'emoji' && buttonType !== 'star' && (
-                <span>{option.label}</span>
-              )}
-            </button>
-          );
-        })}
-      </div>
+              {(EmojiNode ?? StarNode ?? (
+                <span className={`text-lg ${isNumbered ? 'font-mono text-xl' : 'font-bold'} ${isSelected ? 'text-[#e20074]' : 'text-gray-700'}`}>
+                  {option.value !== null ? option.value : 'N/A'}
+                </span>
+              )) as React.ReactNode}
+            </div>
 
-      {hasNotApplicable && (
-        <label>
-          <input 
-            type="checkbox" 
-            checked={selectedValue === null} 
-            onChange={() => onSelect(selectedValue === null ? undefined : null)} 
-          />
-          <span>Not Applicable</span>
-        </label>
-      )}
+            {labelPosition !== 'hidden' && !StarNode && (
+              <span
+                className={`text-[13px] font-medium leading-tight ${
+                  isSelected ? 'text-[#e20074]' : 'text-gray-600'
+                }`}
+                dangerouslySetInnerHTML={{ __html: option.label }}
+              />
+            )}
+          </button>
+        );
+      })}
     </div>
   );
 }
@@ -1238,52 +1329,245 @@ export default function LikertMatrixScale({ question, selectedValue = {}, onSele
 ### Logic Skeleton: `SliderMatrixScale.tsx`
 
 ```tsx
-import type { SliderMatrixQuestion, MatrixAnswerMap } from '@explorer02/cfm-survey-sdk';
+import React from 'react';
+import type { SliderMatrixQuestion } from '@explorer02/cfm-survey-sdk';
+import { CustomSliderTrack } from './CustomSliderTrack';
 
 type SliderMatrixScaleProps = {
   question: SliderMatrixQuestion;
-  selectedValue?: MatrixAnswerMap;
-  onSelect: (value: MatrixAnswerMap) => void;
+  selectedValue?: Record<string, number | null | 'N/A'>;
+  onSelect: (value: Record<string, number | null | 'N/A'>) => void;
 };
 
-export default function SliderMatrixScale({ question, selectedValue = {}, onSelect }: SliderMatrixScaleProps) {
-  const handleSliderChange = (rowId: string, val: number) => {
+export function SliderMatrixScale({ question, selectedValue = {}, onSelect }: SliderMatrixScaleProps) {
+  const { rows, labels, ticks, tickValues, enableInputBox, displayValues, enableNotApplicable, sliderType } = question;
+
+  const handleSliderChange = (rowId: string, val: number | 'N/A') => {
     onSelect({ ...selectedValue, [rowId]: val });
   };
 
+  // Assume uniform min/max/step across rows for the header
+  const baseRow = rows[0];
+  const min = baseRow?.min ?? 0;
+  const max = baseRow?.max ?? 10;
+  const step = baseRow?.step ?? 1;
+
+  const marks: number[] = [];
+  if (ticks && ticks > 1) {
+    const markStep = (max - min) / (ticks - 1);
+    for (let i = 0; i < ticks; i++) {
+      marks.push(Number((min + i * markStep).toFixed(2))); // Round to 2 decimal digits
+    }
+  } else {
+    for (let i = min; i <= max; i += step) {
+      marks.push(Number(i.toFixed(2)));
+    }
+  }
+
+  const htmlStep = (ticks && ticks > 1) ? ((max - min) / (ticks - 1)) : step;
+
+  const hasRightText = rows.some(r => !!r.rightText);
+
+  const renderHeaderRow = () => {
+    if ((!labels || labels.length === 0) && (!tickValues || tickValues.length === 0) && hasRightText) {
+      return null;
+    }
+    return (
+      <div style={{ 
+        display: 'flex', width: '100%', marginBottom: '4px', alignItems: 'flex-end', 
+        padding: '0 16px', boxSizing: 'border-box' 
+      }}>
+        {/* Left spacer for statement text */}
+        <div style={{ flex: '0 0 25%', paddingRight: '16px' }} />
+        
+        {/* Slider track area header */}
+        <div style={{ flex: '1', position: 'relative' }}>
+          {/* Labels row */}
+          {labels && labels.length > 0 && (
+            <div style={{ 
+              position: 'relative', display: 'flex', justifyContent: 'space-between', 
+              margin: '0 16px', marginBottom: '16px', color: '#111827', fontSize: '14px', fontWeight: 500 
+            }}>
+              {labels.map((lbl, idx) => (
+                <div key={idx} style={{ width: 0, display: 'flex', justifyContent: 'center' }}>
+                  <span style={{ whiteSpace: 'nowrap' }}>{lbl}</span>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Numbers row */}
+          <div style={{ 
+            position: 'relative', margin: '0 16px', marginBottom: '8px', 
+            color: '#4b5563', fontSize: '14px', fontWeight: 400, height: '28px'
+          }}>
+            {tickValues && tickValues.length > 0 ? (
+              tickValues.map((tv, idx) => {
+                const percentage = max !== min ? ((tv.value - min) / (max - min)) * 100 : 0;
+                const sliceWidth = tickValues.length > 1 ? 100 / (tickValues.length - 1) : 100;
+                return (
+                  <div key={idx} style={{ 
+                    position: 'absolute', left: `${percentage}%`, transform: 'translateX(-50%)',
+                    width: `${sliceWidth}%`, display: 'flex', justifyContent: 'center'
+                  }}>
+                    {sliderType === 'graphics' ? (
+                      <div style={{ wordBreak: 'break-word', textAlign: 'center', lineHeight: '1.2', fontWeight: 500, color: '#4b5563', fontSize: '13px' }}>
+                        {tv.label}
+                      </div>
+                    ) : (
+                      <div style={{ 
+                        backgroundColor: tv.color, color: 'white', padding: '4px 8px', borderRadius: '4px',
+                        fontWeight: 600, wordBreak: 'break-word', textAlign: 'center', lineHeight: '1.2',
+                        boxShadow: '0 1px 2px rgba(0,0,0,0.1)'
+                      }}>
+                        {tv.label}
+                      </div>
+                    )}
+                  </div>
+                );
+              })
+            ) : (
+              marks.map((m, idx) => {
+                const percentage = max !== min ? ((m - min) / (max - min)) * 100 : 0;
+                const sliceWidth = marks.length > 1 ? 100 / (marks.length - 1) : 100;
+                return (
+                  <div key={idx} style={{ 
+                    position: 'absolute', left: `${percentage}%`, transform: 'translateX(-50%)',
+                    width: `${sliceWidth}%`, display: 'flex', justifyContent: 'center'
+                  }}>
+                    <span style={{ wordBreak: 'break-word', textAlign: 'center', lineHeight: '1.2' }}>{m}</span>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </div>
+
+        {/* Right Statement Header Spacer */}
+        {hasRightText && <div style={{ flex: '0 0 25%', paddingLeft: '16px' }} />}
+
+        {/* Right spacers for input box and N/A checkbox if enabled */}
+        {enableInputBox && <div style={{ width: '80px', marginLeft: '16px' }} />}
+        {enableNotApplicable && (
+          <div style={{ width: '40px', marginLeft: '16px', textAlign: 'center', fontSize: '13px', fontWeight: 600, color: '#4b5563', paddingBottom: '8px' }}>
+            N/A
+          </div>
+        )}
+      </div>
+    );
+  };
+
   return (
-    <div>
-      {question.rows.map(row => {
-        const currentVal = typeof selectedValue[row.id] === 'number' 
-          ? selectedValue[row.id] as number 
-          : row.defaultValue ?? row.min;
-          
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      {renderHeaderRow()}
+      
+      {rows.map((row) => {
+        const rowVal = selectedValue[row.id];
+        const isNa = rowVal === 'N/A';
+        const val = (typeof rowVal === 'number') ? rowVal : (isNa ? row.min : (row.defaultValue ?? row.min));
+        
         return (
-          <div key={row.id}>
-            <div dangerouslySetInnerHTML={{ __html: row.text }} />
-            
-            {/* Custom Slider logic: Calculate percentage fill */}
-            <div style={{ position: 'relative' }}>
-              <input
-                 type="range"
-                 min={row.min} max={row.max} step={row.step}
-                 value={currentVal}
-                 onChange={(e) => handleSliderChange(row.id, Number(e.target.value))}
-                 style={{ zIndex: 10, width: '100%', position: 'absolute', opacity: 0 }}
-                 /* STYLE: Make the native input invisible but keep it on top for interaction */
-              />
-              {/* STYLE: Build a custom visible track and thumb behind the transparent native input */}
-              <div style={{ width: '100%', height: '8px', backgroundColor: '#e5e7eb' }}>
-                <div style={{ width: `${((currentVal - row.min) / (row.max - row.min)) * 100}%`, height: '100%', backgroundColor: 'var(--brand-color)' }} />
-              </div>
+          <div key={row.id} style={{ 
+            display: 'flex', width: '100%', alignItems: 'center', 
+            backgroundColor: '#f3f4f6', borderRadius: '12px', padding: '16px', boxSizing: 'border-box'
+          }}>
+            {/* Statement Text */}
+            <div style={{ flex: '0 0 25%', paddingRight: '16px', fontSize: '15px', color: '#111827', wordWrap: 'break-word', display: 'flex', alignItems: 'center' }}>
+              {row.text !== 'Question' && row.text !== '' ? (
+                 <span dangerouslySetInnerHTML={{ __html: row.text }} />
+              ) : null}
             </div>
             
-            {row.enableInputBox && (
-              <input 
-                type="number" 
-                value={currentVal} 
-                onChange={(e) => handleSliderChange(row.id, Number(e.target.value))} 
+            {/* Slider */}
+            <div style={{ flex: '1' }}>
+              <CustomSliderTrack
+                min={row.min}
+                max={row.max}
+                htmlStep={htmlStep}
+                value={val}
+                disabled={isNa}
+                displayValues={displayValues}
+                hasSelectedValue={typeof rowVal === 'number'}
+                sliderType={sliderType}
+                ticks={ticks}
+                onChange={(v) => handleSliderChange(row.id, v)}
               />
+            </div>
+
+            {/* Right Statement Text (Bipolar) */}
+            {row.rightText && (
+              <div style={{ flex: '0 0 25%', paddingLeft: '16px', fontSize: '15px', color: '#111827', wordWrap: 'break-word', display: 'flex', alignItems: 'center', textAlign: 'right', justifyContent: 'flex-end' }}>
+                <span dangerouslySetInnerHTML={{ __html: row.rightText }} />
+              </div>
+            )}
+
+            {/* Input Box */}
+            {enableInputBox && (
+              <div style={{ 
+                marginLeft: '16px', width: '80px', display: 'flex', alignItems: 'stretch',
+                border: '1px solid #d1d5db', borderRadius: '8px', overflow: 'hidden', 
+                backgroundColor: isNa ? '#e5e7eb' : '#fff', boxSizing: 'border-box'
+              }}>
+                <input 
+                  type="text"
+                  value={isNa ? '' : Math.round(Number(val))}
+                  disabled={isNa}
+                  onChange={(e) => {
+                    if (e.target.value === '') return;
+                    let num = Number(e.target.value);
+                    if (!isNaN(num)) {
+                       if (num < row.min) num = row.min;
+                       if (num > row.max) num = row.max;
+                       handleSliderChange(row.id, num);
+                    }
+                  }}
+                  style={{
+                    width: '50px', padding: '8px', border: 'none',
+                    fontSize: '14px', outline: 'none', backgroundColor: 'transparent', textAlign: 'center'
+                  }}
+                />
+                <div style={{ display: 'flex', flexDirection: 'column', borderLeft: '1px solid #d1d5db', backgroundColor: '#f9fafb', width: '30px' }}>
+                  <button 
+                    disabled={isNa}
+                    onClick={() => {
+                      const num = Number((Number(val) + htmlStep).toFixed(2));
+                      if (num <= row.max) handleSliderChange(row.id, num);
+                    }}
+                    style={{ flex: 1, border: 'none', background: 'none', cursor: isNa ? 'not-allowed' : 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4b5563' }}
+                  >
+                    <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5L5 1L9 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                  </button>
+                  <div style={{ height: '1px', backgroundColor: '#d1d5db', width: '100%' }} />
+                  <button 
+                    disabled={isNa}
+                    onClick={() => {
+                      const num = Number((Number(val) - htmlStep).toFixed(2));
+                      if (num >= row.min) handleSliderChange(row.id, num);
+                    }}
+                    style={{ flex: 1, border: 'none', background: 'none', cursor: isNa ? 'not-allowed' : 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4b5563' }}
+                  >
+                    <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* N/A Checkbox */}
+            {enableNotApplicable && (
+              <div style={{ marginLeft: '16px', width: '40px', display: 'flex', justifyContent: 'center' }}>
+                <input 
+                  type="checkbox"
+                  checked={isNa}
+                  onChange={(e) => {
+                    if (e.target.checked) {
+                      handleSliderChange(row.id, 'N/A');
+                    } else {
+                      handleSliderChange(row.id, row.defaultValue ?? row.min);
+                    }
+                  }}
+                  style={{ width: '20px', height: '20px', cursor: 'pointer' }}
+                />
+              </div>
             )}
           </div>
         );
@@ -1295,6 +1579,156 @@ export default function SliderMatrixScale({ question, selectedValue = {}, onSele
 
 ---
 
+### Logic Skeleton: `CustomSliderTrack.tsx`
+
+```tsx
+import React from 'react';
+import { getEmojiForIndex } from '@explorer02/cfm-survey-sdk';
+
+type CustomSliderTrackProps = {
+  min: number;
+  max: number;
+  htmlStep: number;
+  value: number;
+  disabled: boolean;
+  displayValues?: boolean;
+  hasSelectedValue: boolean;
+  sliderType?: 'graphics';
+  ticks?: number;
+  reverseScaleOrder?: boolean;
+  onChange: (v: number) => void;
+};
+
+export function CustomSliderTrack({
+  min,
+  max,
+  htmlStep,
+  value,
+  disabled,
+  displayValues,
+  hasSelectedValue,
+  sliderType,
+  ticks,
+  reverseScaleOrder,
+  onChange
+}: CustomSliderTrackProps) {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isDragging, setIsDragging] = React.useState(false);
+  
+  const percentage = ((value - min) / (max - min)) * 100;
+  
+  // Use gray color if disabled, otherwise use pink/magenta theme color
+  const themeColor = disabled ? '#9ca3af' : '#e20074';
+  
+  return (
+    <div 
+      style={{ position: 'relative', height: '32px', display: 'flex', alignItems: 'center', margin: '0 16px', opacity: disabled ? 0.5 : 1 }}
+      onMouseEnter={() => !disabled && setIsHovered(true)}
+      onMouseLeave={() => { setIsHovered(false); setIsDragging(false); }}
+    >
+      <div style={{ 
+        position: 'absolute', top: '50%', left: 0, right: 0, transform: 'translateY(-50%)',
+        height: '4px', borderRadius: '2px', backgroundColor: '#e5e7eb' 
+      }} />
+      
+      <div style={{ 
+        position: 'absolute', top: '50%', left: 0, width: `${percentage}%`, transform: 'translateY(-50%)',
+        height: '4px', borderRadius: '2px', backgroundColor: themeColor,
+        transition: isDragging ? 'none' : 'width 0.15s ease-in-out'
+      }} />
+
+      {/* Ticks on track */}
+      {ticks && ticks > 1 && Array.from({ length: ticks }).map((_, idx) => {
+        const tickPct = (idx / (ticks - 1)) * 100;
+        return (
+          <div 
+            key={idx}
+            style={{
+              position: 'absolute',
+              top: '50%',
+              left: `${tickPct}%`,
+              transform: 'translate(-50%, -50%)',
+              width: '1px',
+              height: '8px',
+              backgroundColor: '#d1d5db',
+              pointerEvents: 'none'
+            }}
+          />
+        );
+      })}
+
+      <input
+        type="range"
+        min={min} max={max} step={htmlStep} value={value}
+        disabled={disabled}
+        onChange={(e) => onChange(Number(e.target.value))}
+        onMouseDown={() => !disabled && setIsDragging(true)}
+        onMouseUp={() => setIsDragging(false)}
+        onTouchStart={() => !disabled && setIsDragging(true)}
+        onTouchEnd={() => setIsDragging(false)}
+        style={{
+          position: 'absolute', top: '50%', left: '-16px', right: '-16px', width: 'calc(100% + 32px)', height: '100%',
+          transform: 'translateY(-50%)', opacity: 0, cursor: disabled ? 'not-allowed' : 'pointer', zIndex: 10, margin: 0,
+        }}
+      />
+
+      {sliderType === 'graphics' ? (
+        <div style={{
+          position: 'absolute', top: '50%', left: `${percentage}%`,
+          transform: 'translate(-50%, -50%)',
+          transition: isDragging ? 'none' : 'left 0.15s ease-in-out',
+          pointerEvents: 'none', zIndex: 11,
+          opacity: disabled ? 0.5 : 1
+        }}>
+          {getEmojiForIndex(
+            reverseScaleOrder
+              ? (ticks || 10) - 1 - Math.min((ticks || 10) - 1, Math.max(0, Math.round(((value - min) / (max - min)) * ((ticks || 10) - 1))))
+              : Math.min((ticks || 10) - 1, Math.max(0, Math.round(((value - min) / (max - min)) * ((ticks || 10) - 1)))), 
+            ticks || 10
+          ) as React.ReactNode}
+        </div>
+      ) : (
+        <div style={{
+          position: 'absolute', top: '50%', left: `${percentage}%`,
+          transform: 'translate(-50%, -50%)', 
+          width: '18px', 
+          height: '18px',
+          borderRadius: '50%', 
+          backgroundColor: '#ffffff',
+          border: `2.5px solid ${themeColor}`,
+          boxShadow: (isHovered || isDragging) && !disabled 
+            ? '0 0 0 6px rgba(226, 0, 116, 0.2), 0 1px 3px rgba(0,0,0,0.2)' 
+            : '0 1px 3px rgba(0,0,0,0.2)', 
+          pointerEvents: 'none',
+          transition: isDragging ? 'none' : 'left 0.15s ease-in-out, box-shadow 0.15s, border-color 0.2s',
+          boxSizing: 'border-box'
+        }} />
+      )}
+
+      {(isHovered || isDragging) && !disabled && (
+        <div style={{
+          position: 'absolute', bottom: '100%', left: `${percentage}%`,
+          transform: 'translate(-50%, -10px)',
+          backgroundColor: '#1f2937', color: '#fff', fontSize: '13px', fontWeight: 600,
+          padding: '4px 10px', borderRadius: '6px', pointerEvents: 'none',
+          boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+          zIndex: 20
+        }}>
+          {Math.round(value)}
+          <div style={{
+            position: 'absolute', top: '100%', left: '50%', transform: 'translateX(-50%)',
+            borderWidth: '5px', borderStyle: 'solid',
+            borderColor: '#1f2937 transparent transparent transparent'
+          }} />
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+---
+
 ### Logic Skeleton: `FileUploadScale.tsx`
 
 ```tsx
@@ -1391,24 +1825,35 @@ type LanguageSelectorProps = {
   onChange: (languageCode: string) => void;
 };
 
-export default function LanguageSelector({ languages, selectedLanguage, onChange }: LanguageSelectorProps) {
-  // Don't render if there's only one language
-  if (!languages || languages.length <= 1) return null;
+export default function LanguageSelector({
+  languages,
+  selectedLanguage,
+  onChange,
+}: LanguageSelectorProps) {
+  if (!languages || languages.length <= 1) {
+    return null;
+  }
 
   return (
-    /* STYLE: Design a language selector matching the mockup.
-       Common patterns: dropdown, pill buttons, flag icons.
-       Position according to the mockup (e.g., top-right corner, header area). */
-    <div>
-      <select
-        value={selectedLanguage}
-        onChange={e => onChange(e.target.value)}
-        /* STYLE: Style the select element or replace with a custom dropdown component. */
-      >
-        {languages.map(lang => (
-          <option key={lang.code} value={lang.code}>{lang.name}</option>
-        ))}
-      </select>
+    <div className="flex justify-end mb-6 mt-4">
+      <div className="relative">
+        <select
+          value={selectedLanguage}
+          onChange={(e) => onChange(e.target.value)}
+          className="appearance-none rounded-lg border border-[#2563eb] bg-white py-2 pl-4 pr-10 text-sm font-semibold text-[#2563eb] focus:outline-none focus:ring-2 focus:ring-[#2563eb] cursor-pointer"
+        >
+          {languages.map((lang) => (
+            <option key={lang.code} value={lang.code} className="text-gray-900">
+              {lang.name}
+            </option>
+          ))}
+        </select>
+        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+          <svg className="h-4 w-4 text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
+          </svg>
+        </div>
+      </div>
     </div>
   );
 }