@explorer02/cfm-survey-sdk 0.2.1 → 0.2.3

package/templates/docs/index.md

@@ -4,23 +4,36 @@
 
 Master guide for AI coding agents. Machine-readable index: `MANIFEST.json`.
 
+**Installed package path:** `node_modules/@explorer02/cfm-survey-sdk/templates/docs/` (docs ship inside `templates/` — no postinstall copy needed).
+
 ## Documentation Layout
 
 ```
-docs/
+templates/docs/              ← installed npm package layout
+packages/sdk/templates/docs/ ← monorepo layout
 ├── index.md                 ← YOU ARE HERE
 ├── MANIFEST.json            ← Phase + question-type routing (for tooling)
 ├── 00-integration/          ← Setup, hook contract, constraints
-├── 01-components/           ← Wiring blueprints (read ALL before coding)
-├── 02-reference/            ← Routing table + config-field-index (on demand)
-├── 03-ui-specs/             ← Authoritative UI specs (reference-client driven)
+├── 01-components/           ← Wiring blueprints (read per type from MANIFEST)
+├── 02-reference/            ← Routing table, exports, config-field-index
+├── 03-ui-specs/             ← Authoritative UI specs
 └── templates/
     ├── implementation_plan.md
+    ├── survey-inventory.schema.json
+    ├── verify-agent-build.sh
+    ├── deploy-to-aws.sh
+    ├── heatmapCoords.ts
     └── Question.tsx           ← Canonical dispatcher (copy before building)
 ```
 
 **Import rule:** Use whatever package name appears in the project's `package.json` (`@explorer02/cfm-survey-sdk` or `@repo/sdk`).
 
+## Do Not Read
+
+- Internal SDK mapper/source paths (`packages/sdk/src/**` or `node_modules/.../src/**`)
+- `cfm-sdk init`, `survey-config.json`, or any setup wizard
+- Stale `apps/client` code without verifying type literals against `MANIFEST.json` `typeLiterals`
+
 ---
 
 ## Client Inputs (3 only)
@@ -37,7 +50,9 @@ docs/
 
 ### PHASE 0: ORIENT
 
-- Read this file and `AGENT.md`
+- Read this file and `AGENT.md`:
+  - **Monorepo:** `packages/sdk/templates/AGENT.md`
+  - **Installed npm:** `node_modules/@explorer02/cfm-survey-sdk/templates/AGENT.md`
 - Detect framework: read `package.json` — Next.js / Vite / CRA (see `00-integration/setup.md`)
 - Extract branding and layout from client prompt
 - For existing apps: read project structure; do not blindly scaffold
@@ -56,60 +71,93 @@ Ask: *"Please provide your survey instance ID (JWT token)."*
 
 ### PHASE 3: SDK CONTRACT
 
-Read: `00-integration/useSurveySDK.md`
+Read: `00-integration/client-integration-guide.md` (start here), `00-integration/question-type-sdk-matrix.md`, `00-integration/useSurveySDK.md`, `02-reference/exports.md`, `00-integration/skip-logic-and-navigation.md`, `00-integration/display-logic-and-navigation.md`, `00-integration/question-display-variants.md`, `00-integration/question-numbering.md`, `00-integration/placeholders-and-tokens.md`, `00-integration/partial-save-and-recovery.md`, `00-integration/survey-lifecycle-analytics.md`, `00-integration/end-page-logic.md`, `00-integration/answer-logic-and-navigation.md`, `00-integration/custom-field-logic-and-navigation.md`, `00-integration/progress.md`, `02-reference/value-derivation.md`, `00-integration/logic-fields-catalog.md`, `00-integration/analytics-events-catalog.md`
 
-Understand `useSurveySDK`, `onAction`, states. Do **not** read internal mapper/source paths.
+Understand `useSurveySDK`, `onAction`, `state.answers`. Do **not** read internal mapper/source paths.
 
 Optional: read `02-reference/routing-table.md` for type overview.
 
 ### PHASE 4: PLAN + INGEST (CRITICAL)
 
-1. Read **every** file in `01-components/` (all 14 blueprints)
-2. Read `00-integration/component-checklist.md` and `03-ui-specs/README.md`
-3. **Inventory** every `(type, subType)` in `survey.pages` after instanceId fetch
-4. For **each type in the survey**, read matching `03-ui-specs/` (use `MANIFEST.json` `uiSpecs`) and `02-reference/question-types/` — **blocking** for `matrix`, `slider_matrix`, `file_upload`
-5. Copy `docs/templates/implementation_plan.md` → `./implementation_plan.md` and fill every section
-6. Copy `docs/templates/Question.tsx` as the dispatcher starting point
-7. **Auto-proceed to Phase 5** — do not wait for approval
+1. Fetch survey with `instanceId`; extract unique `question.type` values from `survey.pages`
+2. Write inventory to `implementation_plan.md` §3b (validate against `templates/survey-inventory.schema.json`)
+3. Read **always**: `component-checklist.md`, `00-integration/question-type-sdk-matrix.md`, `03-ui-specs/00-question-shell.md`, `03-ui-specs/12-survey-chrome.md`, `01-components/01-survey-page.md`, `01-components/02-question.md`, `01-components/14-intro-page.md`, `01-components/15-end-page.md`, `01-components/16-paused-page.md`
+4. For **each type in the survey**, read MANIFEST `questionTypes.{type}` → blueprint + reference + uiSpec; cross-check the matching row in `question-type-sdk-matrix.md`
+5. When config flags match MANIFEST `sharedUiSpecTriggers` (e.g. `gridLayout:dropdown`, `displayStyle:graphics`) → read matching `03-ui-specs/shared/` specs
+6. Copy `docs/templates/implementation_plan.md` → `./implementation_plan.md` and fill every section
+7. Copy `docs/templates/Question.tsx` as the dispatcher starting point
+8. **Auto-proceed to Phase 5** — do not wait for approval
+
+**Fallback:** If survey fetch fails, read all `01-components/*.md` blueprints before coding.
 
 ### PHASE 5: BUILD
 
-Read: `00-integration/constraints.md`, `00-integration/component-checklist.md`
+Read: `00-integration/constraints.md`, `00-integration/component-checklist.md`, `00-integration/question-type-sdk-matrix.md`
 
-Create all required scale component files **before** wiring `Question.tsx`. For each question in the survey:
+Create all required scale component files **before** wiring `Question.tsx`. **Copy portable templates** from `docs/templates/` when listed in `component-checklist.md` (`RankOrderScale.tsx`, `MatrixDropdown.tsx`, `CustomSliderTrack.tsx`, `surveyUiIcons.tsx`, `heatmapCoords.ts`). For each question in the survey:
 
-1. Read `02-reference/question-types/{type}.md` for data shape
-2. Read `03-ui-specs/{NN}-{type}.md` (use `MANIFEST.json` `uiSpecs`; split matrix by `subType`)
-3. If `matrixFormat`, `buttonType`, or `sliderType` is present → read `03-ui-specs/shared/` specs
+1. Read the matching row in `question-type-sdk-matrix.md` (answer shape, visibility helper, performance)
+2. Read `02-reference/question-types/` doc for data shape (MANIFEST `reference`)
+2. Read matching `03-ui-specs/` (MANIFEST `uiSpec`)
+3. If `gridLayout`, `displayStyle`, or `statementLayout` triggers shared specs → read `03-ui-specs/shared/`
 4. Cross-check `02-reference/config-field-index.md` for every non-default field
-5. Implement per ui-spec — monorepo devs may consult `apps/client/src/components/`; npm installs use ui-specs only
+5. Implement per ui-spec — trust SDK Integration Checklist in blueprint/reference + `templates/Question.tsx` + exported SDK types + `02-reference/value-derivation.md`
 
 Implement components per blueprints + UI specs. Use exported types:
 
 ```typescript
-import { useSurveySDK, ACTIONS, type SurveyAction } from '@explorer02/cfm-survey-sdk';
+import { useSurveySDK, ACTIONS, QUESTION_TYPE, type SurveyAction } from '@explorer02/cfm-survey-sdk';
 ```
 
+**Dispatch on flat `question.type` only** — **11** `QUESTION_TYPE` literals, no `subType`. See `MANIFEST.json` `typeLiterals`.
+
+**AWS deploy prep (when client prompt mentions AWS / CloudFront / S3 / EC2 / Sprinklr):** apply Next.js static export config **during this phase**, not at deploy time. Read `00-integration/setup.md#nextjs-aws-static-export` and `00-integration/aws-deploy.md` § Build Config. Fill `implementation_plan.md` §8.
+
 ### PHASE 6: VERIFY
 
 Read: `00-integration/constraints.md` (troubleshooting)
 
+Run: `bash templates/verify-agent-build.sh` (from project root, after copying script if needed)
+
 Checklist:
 
-- [ ] `Question.tsx` copied from `docs/templates/Question.tsx` — covers all 12 `question.type` values
-- [ ] Matrix routes by `subType` (`CFM_MATRIX` vs `CSAT_MATRIX` / `RATING_MATRIX`)
+- [ ] `Question.tsx` copied from `docs/templates/Question.tsx` — covers all **11** `question.type` values
+- [ ] Each matrix variant routes by its own type literal (`CFM_MATRIX`, `CSAT_MATRIX`, `RATING_MATRIX`) — **no `subType`**
 - [ ] All scale components from `component-checklist.md` exist for types in survey
 - [ ] **Zero stub text:** `grep -r "not yet implemented" src/ components/ app/` returns no matches
 - [ ] Every question wrapper has `id={question.id}`
-- [ ] No imports from `@explorer02/cfm-survey-sdk/src/...`
-- [ ] `SurveyPage` handles loading / error / empty / submitted / active
+- [ ] No imports from `@explorer02/cfm-survey-sdk/src/...` or `@repo/sdk/src/...`
+- [ ] `SurveyPage` handles loading / error / empty / all `state.phase` values / active content
+- [ ] Hook uses `state.answers`, `state.canGoBack`, `state.primaryButtonType`, and `payload.answerValue`
+- [ ] Stable `customFieldValues` ref when survey uses custom-field logic; passed to hook and `Question` visibility helpers
+- [ ] `SURVEY_PLACEHOLDERS` stable ref; `surveyOptions` in `useMemo` (see `placeholders-and-tokens.md`)
+- [ ] `SCROLL` + `RECORD_QUESTION_VIEW` lifecycle effects wired (see `survey-lifecycle-analytics.md`)
+- [ ] Monorepo: `packages/sdk` built before client dev (`npm run build`)
 - [ ] `npm run build` exits 0
+- [ ] **AWS intent:** `out/index.html` exists; file count ≤ 500; Next.js static export configured (`output: export`, `assetPrefix: "./"`)
 
 ### PHASE 7: DEPLOY (INPUT 3)
 
 Ask: *"Your survey is built and verified. Ready to deploy?"*
 
-If yes: `npx cfm-sdk deploy` (preferred) or `npx vercel --prod --yes`
+**Route by client prompt** (see MANIFEST `deployTargets` and `phases[7].selectTargetFromPrompt`):
+
+| Prompt mentions | Target | Action |
+|-----------------|--------|--------|
+| AWS, CloudFront, S3, EC2, Sprinklr | **AWS** | Read `00-integration/aws-deploy.md`; set env vars; run 3-channel deploy or `bash templates/deploy-to-aws.sh` |
+| Vercel or unspecified (default) | **Vercel** | `npx cfm-sdk deploy` (requires `VERCEL_TOKEN` or Vercel CLI) |
+
+**AWS env vars (dev machine):**
+
+```bash
+export CFM_INSTANCE_ID="<same JWT as SurveyPage>"
+export CFM_DEPLOY_API_BASE="http://43.204.26.213:3000"
+export OUT_DIR="<absolute path to out/ or dist/>"
+```
+
+**AWS success:** print live CloudFront HTTPS URL from `/deploy/complete`; ask client to open in browser.
+
+**Vercel success:** CLI prints production URL.
 
 ---
 
@@ -117,8 +165,12 @@ If yes: `npx cfm-sdk deploy` (preferred) or `npx vercel --prod --yes`
 
 | When | Read |
 |------|------|
-| Always first | `index.md`, `00-integration/setup.md`, `00-integration/useSurveySDK.md`, `00-integration/constraints.md` |
-| Before any React code | All `01-components/*.md`, `00-integration/component-checklist.md`, `templates/Question.tsx` |
-| After instanceId fetch | `03-ui-specs/` per type in survey (blocking for matrix / slider_matrix / file_upload) |
+| Always first | `index.md`, `00-integration/client-integration-guide.md`, `00-integration/question-type-sdk-matrix.md`, `00-integration/setup.md`, `00-integration/useSurveySDK.md`, `00-integration/constraints.md` |
+| Lifecycle & placeholders | `survey-lifecycle-analytics.md`, `placeholders-and-tokens.md`, `partial-save-and-recovery.md`, `analytics-events-catalog.md` |
+| Skip logic & progress | `skip-logic-and-navigation.md`, `display-logic-and-navigation.md`, `question-display-variants.md`, `question-numbering.md`, `end-page-logic.md`, `answer-logic-and-navigation.md`, `custom-field-logic-and-navigation.md`, `progress.md`, `logic-fields-catalog.md` |
+| File upload submit | `file-upload-aws.md`, `03-ui-specs/10-file-upload.md` |
+| Before any React code | `component-checklist.md`, `templates/Question.tsx`, MANIFEST `readAlways` docs |
+| After instanceId fetch | Per-type docs from MANIFEST `questionTypes` (blocking: `CFM_MATRIX`, `CSAT_MATRIX`, `RATING_MATRIX`, `SLIDER_MATRIX`, `FILE_UPLOAD`) |
 | Config audit | `02-reference/config-field-index.md` |
-| Tooling | `MANIFEST.json`, `templates/implementation_plan.md` |
+| AWS deploy | `00-integration/aws-deploy.md`, `setup.md#nextjs-aws-static-export`, `templates/deploy-to-aws.sh` |
+| Tooling | `MANIFEST.json`, `templates/implementation_plan.md`, `templates/survey-inventory.schema.json` |

package/templates/docs/templates/CustomSliderTrack.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+/**
+ * Portable CustomSliderTrack template — copy to src/components/CustomSliderTrack.tsx
+ * Also copy surveyUiIcons.tsx to the same folder (or src/lib/surveyUiIcons.tsx)
+ * Pass tickLabels from scaleColumns[].label for matrix scale label rendering (Day 19 fix)
+ */
+
+import React from 'react';
+import { getEmojiForIndex } from './surveyUiIcons';
+
+type CustomSliderTrackProps = {
+  min: number;
+  max: number;
+  htmlStep: number;
+  value: number;
+  disabled: boolean;
+  displayValues?: boolean;
+  hasSelectedValue: boolean;
+  sliderType?: 'graphics';
+  ticks?: number;
+  /** Pass scaleColumns.map(c => c.label) for visible column labels under slider */
+  tickLabels?: string[];
+  reverseScaleOrder?: boolean;
+  onChange: (v: number) => void;
+};
+
+export function CustomSliderTrack({
+  min,
+  max,
+  htmlStep,
+  value,
+  disabled,
+  sliderType,
+  ticks,
+  tickLabels,
+  reverseScaleOrder,
+  onChange,
+}: CustomSliderTrackProps) {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isDragging, setIsDragging] = React.useState(false);
+
+  const percentage = ((value - min) / (max - min)) * 100;
+  const tickIndex = Math.min(
+    Math.max(0, Math.round(value)),
+    tickLabels && tickLabels.length > 0 ? tickLabels.length - 1 : Math.round(value)
+  );
+  const tooltipLabel = tickLabels?.[tickIndex];
+  const tooltipText = tooltipLabel
+    ? tooltipLabel.replace(/<[^>]*>/g, '')
+    : String(Math.round(value));
+
+  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 && 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,
+        }}>
+          {tooltipText}
+          <div style={{
+            position: 'absolute', top: '100%', left: '50%', transform: 'translateX(-50%)',
+            borderWidth: '5px', borderStyle: 'solid',
+            borderColor: '#1f2937 transparent transparent transparent',
+          }} />
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/docs/templates/MatrixDropdown.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+/**
+ * Portable MatrixDropdown template — copy to src/components/MatrixDropdown.tsx
+ * Import SDK from your package.json: @explorer02/cfm-survey-sdk or @repo/sdk
+ * UI spec: docs/03-ui-specs/shared/matrix-dropdown.md
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import type { ScaleColumn } from '@explorer02/cfm-survey-sdk';
+import { matrixColumnStoredValue } from '@explorer02/cfm-survey-sdk';
+
+type MatrixDropdownProps = {
+  options: ScaleColumn[];
+  value: string | number | null | Array<string | number | null> | undefined;
+  onChange: (val: string | number | null | Array<string | number | null>) => void;
+  multiple?: boolean;
+  placeholder?: string;
+};
+
+export default function MatrixDropdown({
+  options,
+  value,
+  onChange,
+  multiple = false,
+  placeholder = 'Select Answer',
+}: MatrixDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const multiValues: Array<string | number | null> = Array.isArray(value) ? value : [];
+  const selectedOptionSingle = !multiple
+    ? options.find(o => matrixColumnStoredValue(o) === value)
+    : null;
+
+  const toggleMultiOption = (val: string | number | null) => {
+    if (val === null) {
+      if (multiValues.includes(null)) onChange([]);
+      else onChange([null]);
+      return;
+    }
+
+    let nextVals = multiValues.filter(v => v !== null);
+    if (nextVals.includes(val)) {
+      nextVals = nextVals.filter(v => v !== val);
+    } else {
+      nextVals = [...nextVals, val];
+    }
+    onChange(nextVals);
+  };
+
+  const removeMultiOption = (e: React.MouseEvent, val: string | number | null) => {
+    e.stopPropagation();
+    onChange(multiValues.filter(v => v !== val));
+  };
+
+  const renderTrigger = () => {
+    if (multiple) {
+      return (
+        <div
+          onClick={() => setIsOpen(!isOpen)}
+          style={{
+            display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '8px',
+            width: '100%', padding: '10px 14px', backgroundColor: '#fff',
+            border: `1px solid ${isOpen ? '#e20074' : '#d1d5db'}`, borderRadius: '8px',
+            cursor: 'pointer', transition: 'all 0.2s', minHeight: '44px',
+            boxShadow: isOpen ? '0 0 0 3px rgba(226, 0, 116, 0.1)' : '0 1px 2px rgba(0,0,0,0.05)',
+          }}
+        >
+          {multiValues.length === 0 ? (
+            <span style={{ fontSize: '15px', color: '#6b7280', flex: 1 }}>{placeholder}</span>
+          ) : (
+            multiValues.map(v => {
+              const opt = options.find(o => matrixColumnStoredValue(o) === v);
+              return (
+                <div
+                  key={String(v)}
+                  style={{
+                    display: 'flex', alignItems: 'center', gap: '6px',
+                    backgroundColor: '#f3f4f6', padding: '4px 8px', borderRadius: '4px',
+                    fontSize: '14px', color: '#374151', fontWeight: 500,
+                  }}
+                >
+                  <span dangerouslySetInnerHTML={{ __html: opt?.label || String(v) }} />
+                  <div
+                    onClick={e => removeMultiOption(e, v)}
+                    style={{
+                      display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      width: '16px', height: '16px', borderRadius: '50%', backgroundColor: '#e5e7eb',
+                      color: '#6b7280', cursor: 'pointer', fontSize: '12px', fontWeight: 'bold',
+                    }}
+                  >
+                    &times;
+                  </div>
+                </div>
+              );
+            })
+          )}
+          <div style={{ marginLeft: 'auto' }}>
+            <svg
+              style={{ width: '18px', height: '18px', color: '#6b7280', transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}
+              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>
+      );
+    }
+
+    return (
+      <div
+        onClick={() => setIsOpen(!isOpen)}
+        style={{
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+          width: '100%', padding: '14px 16px', backgroundColor: '#fff',
+          border: `1px solid ${isOpen ? '#e20074' : '#d1d5db'}`, borderRadius: '8px',
+          cursor: 'pointer', transition: 'all 0.2s',
+          boxShadow: isOpen ? '0 0 0 3px rgba(226, 0, 116, 0.1)' : '0 1px 2px rgba(0,0,0,0.05)',
+        }}
+      >
+        <span
+          style={{ fontSize: '15px', color: selectedOptionSingle ? '#111827' : '#6b7280', fontWeight: selectedOptionSingle ? 500 : 400 }}
+          dangerouslySetInnerHTML={{ __html: selectedOptionSingle ? selectedOptionSingle.label : placeholder }}
+        />
+        <svg
+          style={{ width: '18px', height: '18px', color: '#6b7280', transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}
+          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>
+    );
+  };
+
+  return (
+    <div ref={containerRef} style={{ position: 'relative', width: '100%', userSelect: 'none' }}>
+      {renderTrigger()}
+
+      {isOpen && (
+        <div style={{
+          position: 'absolute', top: 'calc(100% + 8px)', left: 0, right: 0,
+          backgroundColor: '#fff', border: '1px solid #e5e5e5', borderRadius: '8px',
+          boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
+          zIndex: 50, overflow: 'hidden', maxHeight: '280px', overflowY: 'auto',
+        }}>
+          {options.map(col => {
+            const submitValue = matrixColumnStoredValue(col);
+            const isSelected = multiple ? multiValues.includes(submitValue) : value === submitValue;
+            const isNaSelected = multiple && multiValues.includes(null);
+            const isDisabled = multiple && isNaSelected && submitValue !== null;
+
+            return (
+              <div
+                key={col.id}
+                style={{
+                  padding: '12px 16px', cursor: isDisabled ? 'not-allowed' : 'pointer', transition: 'background-color 0.15s',
+                  backgroundColor: isSelected ? '#fdf2f8' : '#fff',
+                  opacity: isDisabled ? 0.5 : 1,
+                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px',
+                }}
+                onMouseEnter={e => { if (!isDisabled) e.currentTarget.style.backgroundColor = '#fdf2f8'; }}
+                onMouseLeave={e => { if (!isDisabled) e.currentTarget.style.backgroundColor = isSelected ? '#fdf2f8' : '#fff'; }}
+                onClick={e => {
+                  e.preventDefault();
+                  if (isDisabled) return;
+                  if (multiple) {
+                    toggleMultiOption(submitValue);
+                  } else {
+                    onChange(submitValue);
+                    setIsOpen(false);
+                  }
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flex: 1 }}>
+                  {multiple && (
+                    <div style={{
+                      display: 'flex', alignItems: 'center', justifyContent: 'center',
+                      width: '18px', height: '18px', borderRadius: '4px',
+                      border: isSelected ? '2px solid #e20074' : '2px solid #d1d5db',
+                      backgroundColor: isSelected ? '#e20074' : '#fff',
+                      flexShrink: 0, transition: 'all 0.15s',
+                    }}>
+                      {isSelected && (
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                          <polyline points="20 6 9 17 4 12" />
+                        </svg>
+                      )}
+                    </div>
+                  )}
+                  <span style={{ fontSize: '15px', fontWeight: isSelected ? 600 : 400, color: isSelected ? '#e20074' : '#374151', userSelect: 'none' }}
+                        dangerouslySetInnerHTML={{ __html: col.label }} />
+                </div>
+                {!multiple && isSelected && (
+                  <svg style={{ width: '18px', height: '18px', color: '#e20074', flexShrink: 0 }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+                  </svg>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}