@explorer02/cfm-survey-sdk 0.2.4 → 0.2.5

package/templates/docs/00-integration/wizard-question-type-styling.md

@@ -172,7 +172,9 @@ For production builds after wizard: syncing `survey-theme.css` is sufficient —
 
 ## Agent checklist (per survey type)
 
-For each type in survey inventory:
+**Wizard customization** exposes all **11** question types regardless of fetched survey inventory. Wire styling for every scale template you copy — not only types in the client's mockup image.
+
+For each type in **wizard export** (all 11):
 
 - [ ] Scale component uses `var(--cfm-*)` for every wizard-exposed token (no hardcoded brand hex)
 - [ ] Radio/scale selections use `selectionStyles.ts` pattern (focus ring + cell selected)
@@ -191,5 +193,5 @@ For each type in survey inventory:
 | [`templates/selectionStyles.ts`](../templates/selectionStyles.ts) | Copy to client `src/lib/surveyUi/` |
 | [`templates/labelStyles.ts`](../templates/labelStyles.ts) | Copy to client `src/lib/surveyUi/` |
 | [`templates/survey-theme.css`](../../survey-theme.css) | Full `--cfm-*` defaults |
-| [`wizard-preview-build-guide.md`](wizard-preview-build-guide.md) | Chrome + bridge contract |
+| [`wizard-troubleshooting.md`](wizard-troubleshooting.md) | Mock preview, local vs EC2, toggle/logo fixes |
 | [`apply-ui-config.md`](apply-ui-config.md) | Post-wizard apply workflow |

package/templates/docs/00-integration/wizard-troubleshooting.md

@@ -0,0 +1,80 @@
+# Wizard Troubleshooting — Agent Guide
+
+> Companion: [`ui-customization-wizard.md`](ui-customization-wizard.md), [`wizard-preview-build-guide.md`](wizard-preview-build-guide.md).
+
+## Default command
+
+**When client says yes → run `npx cfm-sdk customize`** (not `customize-ui` unless client is on another device).
+
+| | `customize` **(default)** | `customize-ui` **(fallback)** |
+|--|---------------------------|--------------------------------|
+| **When** | Client on same machine as agent | Client on different device |
+| **URL** | `localhost:4200` | EC2 link with `session` + `secret` |
+| **Previews** | `out/previews/` on agent disk | EC2 disk |
+| **Save** | `survey-ui-config.json` immediately | Poll → `.final.json` + `.diff.md` |
+| **GC** | CLI stops → no orphans | Session cleanup on EC2 |
+
+---
+
+## Mock preview instead of live components
+
+### Symptom
+
+Footer: **"Mock preview — run customize or customize-ui…"**
+
+### Fix
+
+1. Run `npx cfm-sdk customize` — auto-runs `export-previews` if needed
+2. Ensure `src/components/Question.tsx` exists (Phase 5 build complete)
+3. Re-run if you changed components after last export
+
+---
+
+## Client on another device opened localhost
+
+### Symptom
+
+Client cannot open `http://localhost:4200`
+
+### Fix
+
+Use EC2 fallback:
+
+```bash
+export CFM_INSTANCE_ID="<JWT>"
+export CFM_DEPLOY_API_BASE="http://43.204.26.213:3000"
+npx cfm-sdk customize-ui
+```
+
+Send **only the EC2 link** from CLI output.
+
+---
+
+## Storage service unavailable (EC2 only)
+
+Only applies to **`customize-ui`** on submit — S3 denied when saving final config/logo. Previews on EC2 disk do not need S3.
+
+Fix: EC2 IAM + `HOSTING_BUCKET` on deploy-api.
+
+For same-machine clients, use **`customize`** — no S3 during wizard at all.
+
+---
+
+## Logo / toggles / layout not updating
+
+Wire `data-cfm-*` hooks and `--cfm-*` CSS vars per [`wizard-preview-build-guide.md`](wizard-preview-build-guide.md).
+
+---
+
+## Only one question type showing
+
+`customize` exports **all 11** types. Mockup may show NPS only — wizard still customizes all types.
+
+---
+
+## Checklist
+
+- [ ] Used **`customize`** as default when client said yes
+- [ ] Waited for `✅ UI configuration saved`
+- [ ] Phase 5 preview bridge + `data-cfm-*` wired
+- [ ] EC2 only if client on remote device

package/templates/docs/01-components/10-header-footer.md

@@ -25,12 +25,12 @@ Agents must implement **one** of these wizard-compatible patterns in `Header.tsx
 
 | Mode | When | Required markup |
 |------|------|-----------------|
-| **Image** | Brand asset in `public/` | `<img data-cfm-logo src="/exact-file.svg" />` plus hidden `<span data-cfm-logo-text>` fallback |
+| **Image** | Brand asset in `public/` | `<img data-cfm-logo src="./exact-file.svg" />` for AWS deploy (`assetPrefix: './'`). Use `/exact-file.svg` only for local dev. Include hidden `<span data-cfm-logo-text>` fallback. |
 | **Text** | CSS-only logo from prompt (no image file) | `<span data-cfm-logo-text>Company</span>` in logo slot — no `data-cfm-logo` img |
 
-- **NO EXTERNAL URLS** for logos (`https://…`).
+- **NO EXTERNAL URLS** for logos (`https://…`, wizard `/assets/` URLs, or `data:image/…`).
 - **CSS-only logos** use `data-cfm-logo-text` (and optional CSS shapes) — wizard shows text until client uploads an image.
-- After wizard upload, saved `global.logo.fileName` is used on subsequent sessions — see `wizard-preview-build-guide.md`.
+- After wizard upload, set `src="./{global.logo.fileName}"` from saved config — see [`aws-deploy.md`](../00-integration/aws-deploy.md) § Logos & local assets.
 
 ## Theme Engineering
 - Map the primary brand color to the accent and border colors across the entire survey.

package/templates/docs/MANIFEST.json

@@ -19,10 +19,10 @@
   "surveyUiConfig": {
     "artifact": "survey-ui-config.json",
     "schema": "templates/survey-ui-config.schema.json",
-    "cliCommand": "npx cfm-sdk customize-ui",
+    "cliCommand": "npx cfm-sdk customize",
     "cliCommands": {
-      "aws": "npx cfm-sdk customize-ui",
-      "local": "npx cfm-sdk customize",
+      "default": "npx cfm-sdk customize",
+      "remoteClient": "npx cfm-sdk customize-ui",
       "exportPreviews": "npx cfm-sdk export-previews"
     },
     "wizardApiDoc": "00-integration/wizard-api.md",
@@ -178,7 +178,19 @@
     },
     {
       "path": "00-integration/wizard-api.md",
-      "purpose": "EC2 /wizard/* API for customize-ui and preview hosting"
+      "purpose": "EC2 /wizard/* API — customize-ui remote-client fallback only"
+    },
+    {
+      "path": "00-integration/wizard-troubleshooting.md",
+      "purpose": "Fix mock preview, local vs EC2, layout toggles, all-11-types wizard export (Phase 6b)"
+    },
+    {
+      "path": "00-integration/mockup-ui-extraction.md",
+      "purpose": "UI-only extraction from client mockup — no logic/language/types from images (Phase 0–4)"
+    },
+    {
+      "path": "00-integration/placeholders-and-custom-fields-wiring.md",
+      "purpose": "Discover placeholder + _c_ keys from fetch; precise useSurveySDK wiring (Phase 4–5)"
     }
   ],
   "templateScaleFiles": [
@@ -203,7 +215,7 @@
       "apiBaseEnv": "CFM_DEPLOY_API_BASE",
       "apiBaseDefault": "http://43.204.26.213:3000",
       "wizardClientUrlPattern": "{CFM_DEPLOY_API_BASE}/wizard-app/index.html?session={sessionId}&secret={sessionSecret}",
-      "wizardClientUrlNote": "Printed by customize-ui after component previews upload to S3 — agent copies link and sends to client",
+      "wizardClientUrlNote": "customize-ui only (remote client): EC2 link after preview upload — default is npx cfm-sdk customize on localhost",
       "instanceIdEnv": "CFM_INSTANCE_ID",
       "outDirEnv": "OUT_DIR",
       "healthPath": "/health",
@@ -263,11 +275,12 @@
         "../AGENT.md",
         "00-integration/agent-operating-contract.md",
         "00-integration/agent-execution-flow.md",
+        "00-integration/mockup-ui-extraction.md",
         "MANIFEST.json"
       ],
       "actions": [
         "detectFramework",
-        "extractBrandingFromClientPrompt"
+        "extractUiOnlyFromMockup"
       ]
     },
     {
@@ -320,6 +333,8 @@
       "readAlways": [
         "00-integration/agent-operating-contract.md",
         "00-integration/agent-execution-flow.md",
+        "00-integration/mockup-ui-extraction.md",
+        "00-integration/placeholders-and-custom-fields-wiring.md",
         "00-integration/component-checklist.md",
         "00-integration/canonical-survey-fixtures.md",
         "00-integration/client-lib-folder.md",
@@ -409,21 +424,23 @@
         "00-integration/ui-customization-wizard.md",
         "00-integration/wizard-preview-build-guide.md",
         "00-integration/wizard-question-type-styling.md",
-        "00-integration/wizard-api.md"
+        "00-integration/wizard-api.md",
+        "00-integration/wizard-troubleshooting.md"
       ],
-      "cliCommand": "npx cfm-sdk customize-ui",
-      "cliCommandLocal": "npx cfm-sdk customize",
+      "cliCommand": "npx cfm-sdk customize",
+      "cliCommandRemote": "npx cfm-sdk customize-ui",
       "cliConfirmCommand": "npx cfm-sdk confirm-ui-config",
-      "output": "survey-ui-config.final.json",
-      "outputArtifacts": [
+      "output": "survey-ui-config.json",
+      "outputArtifactsRemote": [
         "survey-ui-config.seed.json",
         "survey-ui-config.final.json",
         "survey-ui-config.diff.json",
         "survey-ui-config.diff.md"
       ],
       "agentMustWait": true,
-      "waitUntil": "cliExit0ConfigurationReady",
-      "clientHandoff": "shareDeployedWizardUrlAfterS3Upload",
+      "waitUntil": "cliExit0UiConfigurationSaved",
+      "clientHandoff": "openLocalhostWizardSameMachine",
+      "clientHandoffRemote": "shareDeployedWizardUrlAfterPreviewUpload",
       "prerequisites": [
         "phase6VerifyPassed",
         "devServerRunning"

package/templates/docs/index.md

@@ -79,7 +79,7 @@ Full step-by-step: [`agent-execution-flow.md`](00-integration/agent-execution-fl
 | **4** Plan | Inventory + copy dispatcher | `component-checklist.md`, per-type MANIFEST docs, `implementation_plan.md` |
 | **5** Build | Wizard-ready UI | `constraints.md`, `wizard-preview-build-guide.md`, `wizard-question-type-styling.md`, `03-ui-specs/*` |
 | **6** Verify | Build + dev server | `verify-agent-build.sh` — **ask wizard** |
-| **6b** Wizard | Optional customize | `customize-ui` — only if client said yes |
+| **6b** Wizard | Optional customize | **`npx cfm-sdk customize`** (default) — EC2 `customize-ui` only if client on another device |
 | **6c** Apply | Sync final config | `apply-ui-config.md` |
 | **7** Deploy | Production | **ask deploy** — `aws-deploy.md` or Vercel |
 
@@ -130,12 +130,10 @@ Run: `bash templates/verify-agent-build.sh`
 Only after Phase 6 passes and client says **yes**:
 
 ```bash
-export CFM_INSTANCE_ID="<JWT>"
-export CFM_DEPLOY_API_BASE="http://43.204.26.213:3000"
-npx cfm-sdk customize-ui   # uploads previews → prints client link → WAITS until submit
+npx cfm-sdk customize   # DEFAULT — opens localhost:4200, WAITS until client saves
 ```
 
-**Phase 6b:** CLI uploads component previews to S3, prints deployed wizard link for the client, polls until `Configuration ready`. Read `survey-ui-config.diff.md`. Do **not** apply yet.
+**Phase 6b:** Client on same machine → `customize` writes `survey-ui-config.json` directly. Remote client → `customize-ui` + EC2 link (see `wizard-troubleshooting.md`). Apply per `apply-ui-config.md`.
 
 **Phase 6c:** Apply from `survey-ui-config.final.json` per [`wizard-config-handoff.md`](00-integration/wizard-config-handoff.md) + [`apply-ui-config.md`](00-integration/apply-ui-config.md) — **every** diff path. Then:
 
@@ -151,13 +149,13 @@ Re-run verify script + build.
 
 | When | Read |
 |------|------|
-| **Always first** | `agent-operating-contract.md`, `agent-execution-flow.md`, `index.md`, `client-integration-guide.md`, `constraints.md` |
+| **Always first** | `agent-operating-contract.md`, `agent-execution-flow.md`, `mockup-ui-extraction.md`, `index.md`, `client-integration-guide.md`, `constraints.md` |
 | Phase 3 contract | `question-type-sdk-matrix.md`, `useSurveySDK.md`, logic/navigation docs |
-| Before React code | `component-checklist.md`, `templates/Question.tsx`, per-type `03-ui-specs/*` |
+| Phase 4 plan | `mockup-ui-extraction.md`, `placeholders-and-custom-fields-wiring.md`, `component-checklist.md`, per-type `03-ui-specs/*` |
 | Wizard build | `wizard-preview-build-guide.md`, `wizard-question-type-styling.md` |
-| Wizard run | `wizard-config-handoff.md`, `ui-customization-wizard.md`, `wizard-api.md` |
+| Wizard run | `wizard-config-handoff.md`, `ui-customization-wizard.md`, `wizard-api.md`, `wizard-troubleshooting.md` |
 | After wizard (apply all paths) | `apply-ui-config.md` |
-| Deploy | `aws-deploy.md`, `setup.md#nextjs-aws-static-export` |
+| Deploy | `aws-deploy.md` (§ Logos & local assets), `setup.md#nextjs-aws-static-export` |
 | Config audit | `02-reference/config-field-index.md` |
 
 ---

package/templates/docs/templates/deploy-to-aws.sh

@@ -24,6 +24,55 @@ echo "API: $CFM_DEPLOY_API_BASE"
 echo "OUT: $OUT_DIR ($FILE_COUNT files)"
 echo
 
+# Verify wizard logos and other public assets made it into the static build (not just browser memory).
+python3 <<'PY' || exit 1
+import json, os, re, sys
+from pathlib import Path
+
+out = Path(os.environ["OUT_DIR"])
+root = Path(os.environ.get("PROJECT_ROOT", os.getcwd()))
+config_path = root / "survey-ui-config.json"
+missing = []
+
+if config_path.is_file():
+    cfg = json.load(open(config_path))
+    logo = (cfg.get("global") or {}).get("logo") or {}
+    fn = logo.get("fileName")
+    url = logo.get("url") or ""
+    if fn:
+        if url.startswith("data:"):
+            print(f"FAIL: global.logo.url is a data: URL — apply Phase 6c: Header src=./{fn}, file in public/")
+            sys.exit(1)
+        for base in (root / "public", out):
+            if not (base / fn).is_file():
+                missing.append(str(base / fn))
+        if missing:
+            print("FAIL: logo file missing from build output:")
+            for p in missing:
+                print(f"  - {p}")
+            print("Fix: run confirm-ui-config (EC2 wizard) or re-upload in customize; update Header data-cfm-logo src")
+            sys.exit(1)
+        print(f"Logo OK: {fn} in out/")
+    else:
+        print("No global.logo.fileName in survey-ui-config.json — skipping logo check")
+
+for header in sorted((root / "src").rglob("Header.tsx")):
+    text = header.read_text()
+    for m in re.finditer(r'data-cfm-logo[^>]*\ssrc=["\']([^"\']+)["\']', text):
+        src = m.group(1)
+        if src.startswith(("http://", "https://", "data:")):
+            print(f"FAIL: {header} uses external/data logo src: {src[:60]}")
+            sys.exit(1)
+        rel = src.lstrip("./").lstrip("/")
+        if rel and not (out / rel).is_file():
+            missing.append(str(out / rel))
+            print(f"FAIL: Header references {src} but {out / rel} not in build")
+            sys.exit(1)
+
+if not missing:
+    print("Static asset preflight OK")
+PY
+
 HEALTH=$(curl -s "$CFM_DEPLOY_API_BASE/health")
 echo "Health: $HEALTH"
 echo
@@ -111,4 +160,29 @@ if [ "$HTTP" != "200" ]; then
   exit 1
 fi
 
+# Optional: verify logo asset under same deploy prefix (broken img = missing from out/ or wrong Header src)
+python3 <<'PY' || true
+import json, os, re, subprocess
+from pathlib import Path
+from urllib.parse import urljoin
+
+root = Path(os.environ.get("PROJECT_ROOT", os.getcwd()))
+cfg_path = root / "survey-ui-config.json"
+live = json.load(open("/tmp/deploy-complete.json"))["url"]
+if not cfg_path.is_file():
+    raise SystemExit(0)
+fn = ((json.load(open(cfg_path)).get("global") or {}).get("logo") or {}).get("fileName")
+if not fn:
+    raise SystemExit(0)
+base = live.rsplit("/", 1)[0] + "/"
+logo_url = urljoin(base, fn)
+code = subprocess.check_output(
+    ["curl", "-s", "-o", "/dev/null", "-w", "%{http_code}", logo_url],
+    text=True,
+).strip()
+print(f"Logo asset: {logo_url} → HTTP {code}")
+if code != "200":
+    print("WARN: logo missing on CloudFront — rebuild after Phase 6c logo apply (see aws-deploy.md § Static assets)")
+PY
+
 echo "=== Deploy complete ==="

package/templates/docs/templates/implementation_plan.md

@@ -2,14 +2,15 @@
 
 > Copy this file to `./implementation_plan.md` in the project root. Fill every section before writing React code.
 >
-> Pipeline: [`agent-operating-contract.md`](../00-integration/agent-operating-contract.md) → [`agent-execution-flow.md`](../00-integration/agent-execution-flow.md)
+> Pipeline: [`agent-operating-contract.md`](../00-integration/agent-operating-contract.md) → [`agent-execution-flow.md`](../00-integration/agent-execution-flow.md)  
+> Mockup rules: [`mockup-ui-extraction.md`](../00-integration/mockup-ui-extraction.md)
 
 ## 0. Project Context
 
 - **Framework:** [ ] Next.js App Router  [ ] Vite  [ ] CRA  [ ] Existing app
 - **Package import name:** (from `package.json` — `@explorer02/cfm-survey-sdk` or `@repo/sdk`)
 - **instanceId:** (JWT — wired in SurveyPage)
-- **Branding source:** (client prompt / mockup description; optional wizard override via `survey-ui-config.json`)
+- **Branding source:** (client prompt / mockup — **UI only** per [`mockup-ui-extraction.md`](../00-integration/mockup-ui-extraction.md); optional wizard override via `survey-ui-config.json`)
 
 ## 1. Data Fetching & State
 
@@ -109,7 +110,8 @@ Read `00-integration/canonical-survey-fixtures.md`. For each matrix question not
 
 ## 3d. Custom field inventory (mandatory when `_c_…` ids found)
 
-After fetch, scan `skipLogics`, `displayLogic`, `answerLogic`, and `endPages` for `entityType: 'CUSTOM_FIELD'`.
+After fetch, scan `skipLogics`, `displayLogic`, `answerLogic`, and `endPages` for `entityType: 'CUSTOM_FIELD'`.  
+**Do not** infer ids from mockup — see [`placeholders-and-custom-fields-wiring.md`](../00-integration/placeholders-and-custom-fields-wiring.md).
 
 | `_c_` id | fieldType | used in (skip/display/answer/end) | logic field (e.g. CASE_SENSITIVE_TEXT) | CRM value | populated in `lib/customFieldValues.ts`? |
 |----------|-----------|-----------------------------------|----------------------------------------|-----------|---------------------------------------------|
@@ -121,9 +123,17 @@ Wire map in **both** places: `useSurveySDK({ options: { customFieldValues } })`
 
 See `00-integration/custom-field-logic-and-navigation.md` and `00-integration/client-lib-folder.md`.
 
+## 3d-b. Placeholder inventory (from fetched question text)
+
+Scan fetched survey for `{{TOKEN}}` and `{{SURVEY_QUESTION-:-id}}` — **not** from mockup. See [`placeholders-and-custom-fields-wiring.md`](../00-integration/placeholders-and-custom-fields-wiring.md).
+
+| Token in fetch | Key in `SURVEY_PLACEHOLDERS` | Example value | Question ids |
+|----------------|------------------------------|---------------|--------------|
+| | | | |
+
 ## 3e. Logic inventory (from fetched survey)
 
-Scan `survey.pages` for logic flags. Fill after fetch:
+Scan `survey.pages` for logic flags. Fill after fetch — **not** from mockup:
 
 | questionId | skipLogics | displayLogic | answerLogic (options/rows/cols) | customField refs (`_c_…`) |
 |------------|------------|--------------|----------------------------------|---------------------------|
@@ -182,7 +192,7 @@ Inventory required config fields per type:
 - [ ] `src/styles/survey-theme.css` with `--cfm-*` CSS variables (full template set)
 - [ ] **Wizard preview contract:** `var(--cfm-*)` in chrome/scales + `data-cfm-*` on editable text/logo — see `00-integration/wizard-preview-build-guide.md`
 - [ ] **Wizard per-type styling:** `selectionStyles.ts`, `labelStyles.ts`, per-type tokens — see `00-integration/wizard-question-type-styling.md`
-- [ ] **Draft** `./survey-ui-config.json` in sync with theme tokens (seeds optional wizard in Phase 6b)
+- [ ] **Wizard `surveyTypes`:** all 11 literals in seed (mockup may show NPS only — wizard still customizes all types)
 - [ ] `previewBridge.ts` wired for wizard live preview (see `ui-customization-wizard.md`)
 - [ ] If `survey-ui-config.json` exists: apply per `apply-ui-config.md` (Phase 5 draft or Phase 6c final)
 
@@ -190,13 +200,10 @@ Inventory required config fields per type:
 
 See `wizard-config-handoff.md`.
 
-- [ ] `customize-ui` uploaded component previews to S3
-- [ ] Deployed wizard link sent to client: `http://43.204.26.213:3000/wizard-app/index.html?session=…&secret=…` (from CLI output)
-- [ ] CLI `customize-ui` exited 0 — waited for client submit
-- [ ] Read `survey-ui-config.diff.md` — paths changed: ___
-- [ ] Applied from `survey-ui-config.final.json` (AWS) or `survey-ui-config.json` (local)
-- [ ] Every diff path applied (count matches)
-- [ ] `confirm-ui-config` run (AWS)
+- [ ] `npx cfm-sdk customize` ran (default) and exited 0 — client saved on same machine
+- [ ] OR `customize-ui` + EC2 link if client on remote device
+- [ ] `survey-ui-config.json` written (or `.final.json` + `.diff.md` for EC2)
+- [ ] Applied per `apply-ui-config.md`
 - [ ] Verify + build re-run after apply
 
 ## 6. Submit & Thank You

package/templates/wizard-dist/assets/{PreviewMock-DgHfrVeb.js → PreviewMock-AoZdAEPZ.js}

@@ -1 +1 @@
-import{u as x,j as e}from"./index-DYK3X1e5.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-CWKdsJOp.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-CFVC3Ptn.js → TypePanel-39FnbtvG.js}

@@ -1 +1 @@
-import{u as g,j as e,T as f,S as j,R as u,N as t,C as i,a as M,M as L}from"./index-DYK3X1e5.js";import"./vendor-BwkXDkd3.js";function b({values:o,onPatch:r}){return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Label text color",value:o.columnLabelColor,onChange:a=>r({columnLabelColor:a})}),e.jsx(i,{label:"Label background",value:o.columnLabelBgColor,onChange:a=>r({columnLabelBgColor:a})})]})}function P({values:o,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:o.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:o.hintMaxText,onChange:a=>r({hintMaxText:a.target.value})})]}),e.jsx(i,{label:"Hint text color",value:o.hintLabelColor,onChange:a=>r({hintLabelColor:a})}),e.jsx(i,{label:"Hint label background",value:o.hintLabelBgColor,onChange:a=>r({hintLabelBgColor:a})})]})}function p({values:o,onPatch:r,count:a=11}){return e.jsxs("div",{className:"space-y-3",children:[e.jsx(j,{label:"Number label style",value:o.numberLabelMode,onChange:d=>r({numberLabelMode:d}),options:[{value:"traffic",label:"Traffic light (default)"},{value:"monochrome",label:"Monochrome (one color)"},{value:"individual",label:"Individual per number"}]}),o.numberLabelMode==="monochrome"&&e.jsx(i,{label:"Monochrome color",value:o.monochromeNumberColor,onChange:d=>r({monochromeNumberColor:d})}),o.numberLabelMode==="individual"&&e.jsx("div",{className:"grid grid-cols-2 gap-2 sm:grid-cols-3",children:Array.from({length:a},(d,c)=>e.jsx(i,{label:`#${c}`,value:o.individualNumberColors[c]??"#9CA3AF",onChange:C=>{const x=[...o.individualNumberColors];x[c]=C,r({individualNumberColors:x})}},c))})]})}function s({title:o,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:o}),r]})}function B({type:o,activeFormat:r}){const a=g(l=>l.config.questionTypes[o]),d=g(l=>l.updateQuestionType),c=g(l=>l.previewMultiStatement),C=g(l=>l.setPreviewMultiStatement),x=g(l=>l.heatmapPreviewPin);if(!a)return e.jsx("p",{className:"text-sm text-slate-500",children:"No configuration available for this type."});const n=l=>d(o,l),S=L.includes(o),T=r.includes("star"),h=r.includes("emoji"),v=r.includes("numbered"),N=r.includes("drag"),w=r.includes("dropdown"),k=r.includes("radio"),m=h||T||v||k;return e.jsxs("div",{className:"space-y-4",children:[S&&e.jsx(f,{label:"Preview multiple statements",checked:c,onChange:C}),o==="MCQ"&&"optionGap"in a&&e.jsx(s,{title:"Option style",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(j,{label:"Option style",value:a.optionStyle??a.cardStyle??"outlined",onChange:l=>n({optionStyle:l}),options:[{value:"outlined",label:"Outlined"},{value:"filled",label:"Filled"},{value:"minimal",label:"Minimal"}]}),e.jsx(u,{label:"Option gap",value:a.optionGap,onChange:l=>n({optionGap:l}),min:0,max:32}),e.jsx(u,{label:"Border radius",value:a.borderRadius,onChange:l=>n({borderRadius:l}),min:0,max:24}),e.jsx(u,{label:"Option padding",value:a.optionPadding??12,onChange:l=>n({optionPadding:l}),min:4,max:24})]})}),o==="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=>n({defaultPlaceholder:l.target.value})})]}),e.jsx(t,{label:"Input radius (px)",value:a.inputRadius,onChange:l=>n({inputRadius:l}),min:0,max:24}),e.jsx(i,{label:"Border color",value:a.borderColor,onChange:l=>n({borderColor:l})}),e.jsx(i,{label:"Placeholder color",value:a.placeholderColor,onChange:l=>n({placeholderColor:l})})]})}),o==="NPS_SCALE"&&"buttonStyle"in a&&e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"NPS buttons",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(j,{label:"Button style",value:a.buttonStyle,onChange:l=>n({buttonStyle:l}),options:[{value:"standard",label:"Radio"},{value:"numbered",label:"Numbered badges"},{value:"pill",label:"Pill"}]}),e.jsx(i,{label:"Selected fill",value:a.selectedFill,onChange:l=>n({selectedFill:l})}),e.jsx(i,{label:"Track bar",value:a.trackBarColor,onChange:l=>n({trackBarColor:l})}),e.jsx(i,{label:"Track highlight",value:a.trackHighlightColor,onChange:l=>n({trackHighlightColor:l})})]})}),e.jsx(s,{title:"Hint labels",children:e.jsx(P,{values:a,onPatch:n})}),e.jsx(s,{title:"Number labels",children:e.jsx(p,{values:a,onPatch:n})})]}),o==="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=>n({rowLabelWidth:l}),min:120,max:280}),e.jsx(t,{label:"Bipolar column width (%)",value:a.bipolarColumnWidthPercent,onChange:l=>n({bipolarColumnWidthPercent:l}),min:15,max:40})]})}),e.jsx(s,{title:"Label items",children:e.jsx(b,{values:a,onPatch:n})})]}),o==="CSAT_MATRIX"&&"emojiSize"in a&&e.jsxs(e.Fragment,{children:[(h||m)&&e.jsxs(s,{title:`${M.CSAT_MATRIX} — ${r.replace("CSAT_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[h&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>n({emojiSize:l}),min:16,max:40}),m&&e.jsx(u,{label:"Unselected opacity",value:Math.round(a.unselectedOpacity*100),onChange:l=>n({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.jsx(s,{title:"Label items",children:e.jsx(b,{values:a,onPatch:n})}),v&&e.jsx(s,{title:"Number labels",children:e.jsx(p,{values:a,onPatch:n,count:10})})]}),o==="RATING_MATRIX"&&"unselectedStarOpacity"in a&&e.jsxs(e.Fragment,{children:[(h||m)&&e.jsxs(s,{title:`Rating — ${r.replace("RATING_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[h&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>n({emojiSize:l}),min:16,max:40}),m&&e.jsx(u,{label:"Unselected opacity",value:Math.round(a.unselectedStarOpacity*100),onChange:l=>n({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.jsx(s,{title:"Label items",children:e.jsx(b,{values:a,onPatch:n})}),v&&e.jsx(s,{title:"Number labels",children:e.jsx(p,{values:a,onPatch:n,count:10})})]}),o==="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=>n({trackColor:l})}),e.jsx(i,{label:"Thumb",value:a.thumbColor,onChange:l=>n({thumbColor:l})}),e.jsx(i,{label:"Tick",value:a.tickColor,onChange:l=>n({tickColor:l})}),e.jsx(t,{label:"Row label width (px)",value:a.rowLabelWidth,onChange:l=>n({rowLabelWidth:l}),min:120,max:280})]})}),e.jsx(s,{title:"Tick label items",children:e.jsx(b,{values:a,onPatch:n})}),e.jsx(s,{title:"Tick number labels",children:e.jsx(p,{values:a,onPatch:n,count:11})})]}),o==="FILE_UPLOAD"&&"dropzoneStyle"in a&&e.jsx(s,{title:"Dropzone",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(j,{label:"Dropzone border",value:a.dropzoneStyle,onChange:l=>n({dropzoneStyle:l}),options:[{value:"dashed",label:"Dashed"},{value:"solid",label:"Solid"}]}),e.jsx(i,{label:"Border color",value:a.borderColor??a.accentColor,onChange:l=>n({borderColor:l})}),e.jsx(i,{label:"Fill color",value:a.dropzoneFillColor,onChange:l=>n({dropzoneFillColor:l})}),e.jsx(t,{label:"Padding (px)",value:a.dropzonePadding,onChange:l=>n({dropzonePadding:l}),min:12,max:48})]})}),o==="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=>n({pinColor:l})}),e.jsx(i,{label:"Pin border",value:a.pinBorderColor,onChange:l=>n({pinBorderColor:l})}),e.jsx(u,{label:"Pin size",value:a.pinSize,onChange:l=>n({pinSize:l}),min:8,max:32}),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(x.x*100),"%, ",Math.round(x.y*100),"%"]})]})}),o==="RANK_ORDER"&&"drag"in a&&e.jsx(s,{title:N?"Drag & drop":w?"Dropdown rank":"Rank order",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[N&&e.jsxs(e.Fragment,{children:[e.jsx(i,{label:"Item background",value:a.drag.itemBg,onChange:l=>n({drag:{...a.drag,itemBg:l}})}),e.jsx(i,{label:"Drag handle",value:a.drag.dragHandleColor,onChange:l=>n({drag:{...a.drag,dragHandleColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>n({drag:{...a.drag,rankBadgeColor:l}})})]}),w&&e.jsxs(e.Fragment,{children:[e.jsx(i,{label:"Item background",value:a.dropdown.itemBg,onChange:l=>n({dropdown:{...a.dropdown,itemBg:l}})}),e.jsx(i,{label:"Select border",value:a.dropdown.selectBorderColor,onChange:l=>n({dropdown:{...a.dropdown,selectBorderColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.dropdown.rankBadgeColor,onChange:l=>n({dropdown:{...a.dropdown,rankBadgeColor:l}})})]})]})})]})}export{B as TypePanel};
+import{u as g,j as e,T as f,S as j,R as u,N as t,C as i,a as M,M as L}from"./index-CWKdsJOp.js";import"./vendor-BwkXDkd3.js";function b({values:o,onPatch:r}){return e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(i,{label:"Label text color",value:o.columnLabelColor,onChange:a=>r({columnLabelColor:a})}),e.jsx(i,{label:"Label background",value:o.columnLabelBgColor,onChange:a=>r({columnLabelBgColor:a})})]})}function P({values:o,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:o.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:o.hintMaxText,onChange:a=>r({hintMaxText:a.target.value})})]}),e.jsx(i,{label:"Hint text color",value:o.hintLabelColor,onChange:a=>r({hintLabelColor:a})}),e.jsx(i,{label:"Hint label background",value:o.hintLabelBgColor,onChange:a=>r({hintLabelBgColor:a})})]})}function p({values:o,onPatch:r,count:a=11}){return e.jsxs("div",{className:"space-y-3",children:[e.jsx(j,{label:"Number label style",value:o.numberLabelMode,onChange:d=>r({numberLabelMode:d}),options:[{value:"traffic",label:"Traffic light (default)"},{value:"monochrome",label:"Monochrome (one color)"},{value:"individual",label:"Individual per number"}]}),o.numberLabelMode==="monochrome"&&e.jsx(i,{label:"Monochrome color",value:o.monochromeNumberColor,onChange:d=>r({monochromeNumberColor:d})}),o.numberLabelMode==="individual"&&e.jsx("div",{className:"grid grid-cols-2 gap-2 sm:grid-cols-3",children:Array.from({length:a},(d,c)=>e.jsx(i,{label:`#${c}`,value:o.individualNumberColors[c]??"#9CA3AF",onChange:C=>{const x=[...o.individualNumberColors];x[c]=C,r({individualNumberColors:x})}},c))})]})}function s({title:o,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:o}),r]})}function B({type:o,activeFormat:r}){const a=g(l=>l.config.questionTypes[o]),d=g(l=>l.updateQuestionType),c=g(l=>l.previewMultiStatement),C=g(l=>l.setPreviewMultiStatement),x=g(l=>l.heatmapPreviewPin);if(!a)return e.jsx("p",{className:"text-sm text-slate-500",children:"No configuration available for this type."});const n=l=>d(o,l),S=L.includes(o),T=r.includes("star"),h=r.includes("emoji"),v=r.includes("numbered"),N=r.includes("drag"),w=r.includes("dropdown"),k=r.includes("radio"),m=h||T||v||k;return e.jsxs("div",{className:"space-y-4",children:[S&&e.jsx(f,{label:"Preview multiple statements",checked:c,onChange:C}),o==="MCQ"&&"optionGap"in a&&e.jsx(s,{title:"Option style",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(j,{label:"Option style",value:a.optionStyle??a.cardStyle??"outlined",onChange:l=>n({optionStyle:l}),options:[{value:"outlined",label:"Outlined"},{value:"filled",label:"Filled"},{value:"minimal",label:"Minimal"}]}),e.jsx(u,{label:"Option gap",value:a.optionGap,onChange:l=>n({optionGap:l}),min:0,max:32}),e.jsx(u,{label:"Border radius",value:a.borderRadius,onChange:l=>n({borderRadius:l}),min:0,max:24}),e.jsx(u,{label:"Option padding",value:a.optionPadding??12,onChange:l=>n({optionPadding:l}),min:4,max:24})]})}),o==="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=>n({defaultPlaceholder:l.target.value})})]}),e.jsx(t,{label:"Input radius (px)",value:a.inputRadius,onChange:l=>n({inputRadius:l}),min:0,max:24}),e.jsx(i,{label:"Border color",value:a.borderColor,onChange:l=>n({borderColor:l})}),e.jsx(i,{label:"Placeholder color",value:a.placeholderColor,onChange:l=>n({placeholderColor:l})})]})}),o==="NPS_SCALE"&&"buttonStyle"in a&&e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"NPS buttons",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(j,{label:"Button style",value:a.buttonStyle,onChange:l=>n({buttonStyle:l}),options:[{value:"standard",label:"Radio"},{value:"numbered",label:"Numbered badges"},{value:"pill",label:"Pill"}]}),e.jsx(i,{label:"Selected fill",value:a.selectedFill,onChange:l=>n({selectedFill:l})}),e.jsx(i,{label:"Track bar",value:a.trackBarColor,onChange:l=>n({trackBarColor:l})}),e.jsx(i,{label:"Track highlight",value:a.trackHighlightColor,onChange:l=>n({trackHighlightColor:l})})]})}),e.jsx(s,{title:"Hint labels",children:e.jsx(P,{values:a,onPatch:n})}),e.jsx(s,{title:"Number labels",children:e.jsx(p,{values:a,onPatch:n})})]}),o==="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=>n({rowLabelWidth:l}),min:120,max:280}),e.jsx(t,{label:"Bipolar column width (%)",value:a.bipolarColumnWidthPercent,onChange:l=>n({bipolarColumnWidthPercent:l}),min:15,max:40})]})}),e.jsx(s,{title:"Label items",children:e.jsx(b,{values:a,onPatch:n})})]}),o==="CSAT_MATRIX"&&"emojiSize"in a&&e.jsxs(e.Fragment,{children:[(h||m)&&e.jsxs(s,{title:`${M.CSAT_MATRIX} — ${r.replace("CSAT_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[h&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>n({emojiSize:l}),min:16,max:40}),m&&e.jsx(u,{label:"Unselected opacity",value:Math.round(a.unselectedOpacity*100),onChange:l=>n({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.jsx(s,{title:"Label items",children:e.jsx(b,{values:a,onPatch:n})}),v&&e.jsx(s,{title:"Number labels",children:e.jsx(p,{values:a,onPatch:n,count:10})})]}),o==="RATING_MATRIX"&&"unselectedStarOpacity"in a&&e.jsxs(e.Fragment,{children:[(h||m)&&e.jsxs(s,{title:`Rating — ${r.replace("RATING_","")}`,children:[e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[h&&e.jsx(t,{label:"Emoji size (px)",value:a.emojiSize,onChange:l=>n({emojiSize:l}),min:16,max:40}),m&&e.jsx(u,{label:"Unselected opacity",value:Math.round(a.unselectedStarOpacity*100),onChange:l=>n({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.jsx(s,{title:"Label items",children:e.jsx(b,{values:a,onPatch:n})}),v&&e.jsx(s,{title:"Number labels",children:e.jsx(p,{values:a,onPatch:n,count:10})})]}),o==="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=>n({trackColor:l})}),e.jsx(i,{label:"Thumb",value:a.thumbColor,onChange:l=>n({thumbColor:l})}),e.jsx(i,{label:"Tick",value:a.tickColor,onChange:l=>n({tickColor:l})}),e.jsx(t,{label:"Row label width (px)",value:a.rowLabelWidth,onChange:l=>n({rowLabelWidth:l}),min:120,max:280})]})}),e.jsx(s,{title:"Tick label items",children:e.jsx(b,{values:a,onPatch:n})}),e.jsx(s,{title:"Tick number labels",children:e.jsx(p,{values:a,onPatch:n,count:11})})]}),o==="FILE_UPLOAD"&&"dropzoneStyle"in a&&e.jsx(s,{title:"Dropzone",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[e.jsx(j,{label:"Dropzone border",value:a.dropzoneStyle,onChange:l=>n({dropzoneStyle:l}),options:[{value:"dashed",label:"Dashed"},{value:"solid",label:"Solid"}]}),e.jsx(i,{label:"Border color",value:a.borderColor??a.accentColor,onChange:l=>n({borderColor:l})}),e.jsx(i,{label:"Fill color",value:a.dropzoneFillColor,onChange:l=>n({dropzoneFillColor:l})}),e.jsx(t,{label:"Padding (px)",value:a.dropzonePadding,onChange:l=>n({dropzonePadding:l}),min:12,max:48})]})}),o==="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=>n({pinColor:l})}),e.jsx(i,{label:"Pin border",value:a.pinBorderColor,onChange:l=>n({pinBorderColor:l})}),e.jsx(u,{label:"Pin size",value:a.pinSize,onChange:l=>n({pinSize:l}),min:8,max:32}),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(x.x*100),"%, ",Math.round(x.y*100),"%"]})]})}),o==="RANK_ORDER"&&"drag"in a&&e.jsx(s,{title:N?"Drag & drop":w?"Dropdown rank":"Rank order",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3",children:[N&&e.jsxs(e.Fragment,{children:[e.jsx(i,{label:"Item background",value:a.drag.itemBg,onChange:l=>n({drag:{...a.drag,itemBg:l}})}),e.jsx(i,{label:"Drag handle",value:a.drag.dragHandleColor,onChange:l=>n({drag:{...a.drag,dragHandleColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.drag.rankBadgeColor,onChange:l=>n({drag:{...a.drag,rankBadgeColor:l}})})]}),w&&e.jsxs(e.Fragment,{children:[e.jsx(i,{label:"Item background",value:a.dropdown.itemBg,onChange:l=>n({dropdown:{...a.dropdown,itemBg:l}})}),e.jsx(i,{label:"Select border",value:a.dropdown.selectBorderColor,onChange:l=>n({dropdown:{...a.dropdown,selectBorderColor:l}})}),e.jsx(i,{label:"Rank badge",value:a.dropdown.rankBadgeColor,onChange:l=>n({dropdown:{...a.dropdown,rankBadgeColor:l}})})]})]})})]})}export{B as TypePanel};