@explorer02/cfm-survey-sdk 0.2.4 → 0.2.6

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/docs/templates/verify-agent-build.sh

@@ -67,11 +67,35 @@ echo "OK: survey-ui-config.json present"
 
 CHROME_HOOKS=$(grep -rE "data-cfm-(logo|btn-next|survey-title)" src/ components/ app/ 2>/dev/null || true)
 if [ -z "$CHROME_HOOKS" ]; then
-  echo "FAIL: No data-cfm-* chrome hooks found — see wizard-preview-build-guide.md"
+  echo "FAIL: No data-cfm-* chrome hooks found — copy templates/docs/templates/Header.tsx etc.; see wizard-chrome-contract.md"
   exit 1
 fi
 echo "OK: data-cfm-* chrome hooks present"
 
+# Wizard layout toggle targets (each must exist for live preview toggles)
+for hook in "data-cfm-logo" "data-cfm-company" "data-cfm-progress" "cfm-footer" "data-cfm-question-number" "data-cfm-required"; do
+  FOUND=$(grep -rE "$hook" src/ components/ app/ 2>/dev/null || true)
+  if [ -z "$FOUND" ]; then
+    echo "FAIL: Missing wizard hook $hook — see wizard-chrome-contract.md"
+    exit 1
+  fi
+done
+echo "OK: wizard layout + branding hooks present"
+
+PREVIEW_BRIDGE=""
+for candidate in src/lib/previewBridge.ts lib/previewBridge.ts; do
+  if [ -f "$candidate" ]; then PREVIEW_BRIDGE="$candidate"; break; fi
+done
+if [ -z "$PREVIEW_BRIDGE" ]; then
+  echo "FAIL: src/lib/previewBridge.ts missing — copy from templates/previewBridge.ts"
+  exit 1
+fi
+if ! grep -q "layoutFlags" "$PREVIEW_BRIDGE"; then
+  echo "FAIL: previewBridge.ts outdated — re-copy from templates/previewBridge.ts (needs layoutFlags handler)"
+  exit 1
+fi
+echo "OK: previewBridge.ts present with layoutFlags"
+
 REQUIRED_TYPES=(MCQ TEXTFIELD NPS_SCALE CFM_MATRIX CSAT_MATRIX RATING_MATRIX SLIDER_MATRIX FILE_UPLOAD TEXT_AND_MEDIA HEATMAP RANK_ORDER)
 QUESTION_FILE=""
 for candidate in src/components/Question.tsx components/Question.tsx app/components/Question.tsx; do

package/templates/preview-harness/preview-bridge.inline.js

@@ -122,7 +122,7 @@
         setDisplay('[data-cfm-company]', flags.showCompanyName);
       }
       if (flags.showHeader !== undefined) {
-        setDisplay('.cfm-header, header.cfm-header, .sticky.top-0', flags.showHeader);
+        setDisplay('.cfm-header, header.cfm-header', flags.showHeader);
       }
       if (flags.showFooter !== undefined) {
         setDisplay('.cfm-footer, footer.cfm-footer', flags.showFooter);

package/templates/previewBridge.ts

@@ -1,8 +1,8 @@
 /**
  * Live preview bridge for cfm-sdk customize wizard.
- * Copy to src/lib/previewBridge.ts and import once in layout.tsx.
+ * Copy to src/lib/previewBridge.ts and import once via PreviewBridgeInit in layout.tsx.
  *
- * Supports SNAPSHOT (full state on tab load) and DELTA (rAF-batched partial updates).
+ * Must stay in sync with templates/preview-harness/preview-bridge.inline.js (injected into export-previews HTML).
  */
 export const PREVIEW_BRIDGE_SNAPSHOT = 'CFM_UI_CONFIG_SNAPSHOT';
 export const PREVIEW_BRIDGE_DELTA = 'CFM_UI_CONFIG_DELTA';
@@ -13,11 +13,14 @@ export interface ContentPatch {
   logoUrl?: string | null;
   surveyTitle?: string;
   companyName?: string;
+  browserTabTitle?: string;
   thankYouMessage?: string;
   buttonLabels?: { next?: string; back?: string; submit?: string };
   layoutFlags?: Record<string, boolean | string>;
   footerLinks?: { label: string; url: string }[];
   copyrightText?: string;
+  domAttributes?: Record<string, string>;
+  previewState?: Record<string, unknown>;
 }
 
 interface PreviewBridgePayload {
@@ -48,61 +51,147 @@ function queueCssVars(vars: Record<string, string>): void {
   }
 }
 
-function applyContentPatch(patch: ContentPatch): void {
+function applyCssVarsImmediate(vars: Record<string, string>): void {
   const root = document.documentElement;
+  for (const [key, value] of Object.entries(vars)) {
+    root.style.setProperty(key, value);
+  }
+}
+
+function setDisplay(selector: string, visible: boolean): void {
+  document.querySelectorAll(selector).forEach((el) => {
+    (el as HTMLElement).style.display = visible ? '' : 'none';
+  });
+}
+
+function applyContentPatch(patch: ContentPatch): void {
   if (patch.logoUrl !== undefined) {
-    root.dataset.cfmLogoUrl = patch.logoUrl ?? '';
-    document.querySelectorAll('[data-cfm-logo]').forEach((el) => {
+    document.querySelectorAll('[data-cfm-logo], header img, footer img').forEach((el) => {
       const img = el as HTMLImageElement;
       if (patch.logoUrl) {
         img.src = patch.logoUrl;
         img.style.display = '';
-      } else {
+      } else if (el.hasAttribute('data-cfm-logo')) {
         img.style.display = 'none';
       }
     });
+    document.querySelectorAll('[data-cfm-logo-text]').forEach((el) => {
+      const htmlEl = el as HTMLElement;
+      if (patch.logoUrl) {
+        htmlEl.style.display = 'none';
+      } else {
+        htmlEl.style.display = '';
+        htmlEl.classList.remove('hidden');
+      }
+    });
   }
+
   if (patch.companyName !== undefined) {
     document.querySelectorAll('[data-cfm-company]').forEach((el) => {
       el.textContent = patch.companyName ?? '';
     });
+    document.querySelectorAll('[data-cfm-logo-text]').forEach((el) => {
+      const logoImg = document.querySelector('[data-cfm-logo]') as HTMLImageElement | null;
+      const logoHidden = !logoImg || logoImg.style.display === 'none';
+      if (logoHidden) {
+        el.textContent = patch.companyName ?? el.textContent;
+      }
+    });
   }
+
   if (patch.surveyTitle !== undefined) {
     document.querySelectorAll('[data-cfm-survey-title]').forEach((el) => {
       el.textContent = patch.surveyTitle ?? '';
     });
   }
+
+  if (patch.browserTabTitle) {
+    document.title = patch.browserTabTitle;
+  }
+
   if (patch.thankYouMessage !== undefined) {
     document.querySelectorAll('[data-cfm-thank-you]').forEach((el) => {
       el.textContent = patch.thankYouMessage ?? '';
     });
   }
+
   if (patch.buttonLabels?.next) {
     document.querySelectorAll('[data-cfm-btn-next]').forEach((el) => {
       el.textContent = patch.buttonLabels!.next!;
     });
   }
+
   if (patch.buttonLabels?.back) {
     document.querySelectorAll('[data-cfm-btn-back]').forEach((el) => {
       el.textContent = patch.buttonLabels!.back!;
     });
   }
+
   if (patch.copyrightText !== undefined) {
     document.querySelectorAll('[data-cfm-copyright]').forEach((el) => {
       el.textContent = patch.copyrightText ?? '';
     });
   }
+
   if (patch.footerLinks) {
     const nav = document.querySelector('[data-cfm-footer-links]');
     if (nav) {
       nav.innerHTML = patch.footerLinks
         .map(
           (l) =>
-            `<a href="${l.url}" target="_blank" rel="noopener noreferrer" style="color:var(--cfm-footer-link)">${l.label}</a>`,
+            `<a href="${l.url}" class="cfm-footer-link" target="_blank" rel="noopener noreferrer" style="color:var(--cfm-footer-link)">${l.label}</a>`,
         )
         .join('');
     }
   }
+
+  if (patch.layoutFlags) {
+    const flags = patch.layoutFlags;
+    if (flags.showCompanyName !== undefined) {
+      setDisplay('[data-cfm-company]', Boolean(flags.showCompanyName));
+    }
+    if (flags.showHeader !== undefined) {
+      setDisplay('.cfm-header, header.cfm-header', Boolean(flags.showHeader));
+    }
+    if (flags.showFooter !== undefined) {
+      setDisplay('.cfm-footer, footer.cfm-footer', Boolean(flags.showFooter));
+    }
+    if (flags.showProgressBar !== undefined) {
+      setDisplay('.cfm-progress, [data-cfm-progress]', Boolean(flags.showProgressBar));
+    }
+    if (flags.showLanguageSwitcher !== undefined) {
+      setDisplay('[data-cfm-language]', Boolean(flags.showLanguageSwitcher));
+    }
+    if (flags.showNextButton !== undefined) {
+      setDisplay('[data-cfm-btn-next]', Boolean(flags.showNextButton));
+    }
+    if (flags.showBackButton !== undefined) {
+      setDisplay('[data-cfm-btn-back]', Boolean(flags.showBackButton));
+    }
+    if (flags.showQuestionNumbers !== undefined) {
+      setDisplay('[data-cfm-question-number]', Boolean(flags.showQuestionNumbers));
+    }
+    if (flags.showRequiredAsterisk !== undefined) {
+      setDisplay('[data-cfm-required]', Boolean(flags.showRequiredAsterisk));
+    }
+    if (flags.showFooterLogo !== undefined) {
+      setDisplay('[data-cfm-footer-logo]', Boolean(flags.showFooterLogo));
+    }
+  }
+
+  if (patch.domAttributes) {
+    const root = document.documentElement;
+    for (const [attr, value] of Object.entries(patch.domAttributes)) {
+      root.setAttribute(attr, value);
+    }
+  }
+
+  const placeholder = patch.previewState?.textfieldPlaceholder;
+  if (typeof placeholder === 'string') {
+    document.querySelectorAll('[data-cfm-textfield]').forEach((el) => {
+      el.setAttribute('placeholder', placeholder);
+    });
+  }
 }
 
 function setLiveEditMode(on: boolean): void {
@@ -111,43 +200,47 @@ function setLiveEditMode(on: boolean): void {
   document.documentElement.classList.toggle('cfm-live-edit', on);
 }
 
-export function initPreviewBridge(): () => void {
-  if (typeof window === 'undefined') return () => {};
+function handleMessage(event: MessageEvent<PreviewBridgePayload>): void {
+  const data = event.data;
+  if (!data?.type) return;
+  if (
+    data.type !== PREVIEW_BRIDGE_SNAPSHOT &&
+    data.type !== PREVIEW_BRIDGE_DELTA &&
+    data.type !== PREVIEW_BRIDGE_MESSAGE
+  ) {
+    return;
+  }
 
-  const handler = (event: MessageEvent<PreviewBridgePayload>) => {
-    const data = event.data;
-    if (!data?.type) return;
+  setLiveEditMode(true);
 
-    if (
-      data.type !== PREVIEW_BRIDGE_SNAPSHOT &&
-      data.type !== PREVIEW_BRIDGE_DELTA &&
-      data.type !== PREVIEW_BRIDGE_MESSAGE
-    ) {
-      return;
+  if (data.cssVars) {
+    if (data.type === PREVIEW_BRIDGE_DELTA) {
+      queueCssVars(data.cssVars);
+    } else {
+      applyCssVarsImmediate(data.cssVars);
     }
+  }
 
-    setLiveEditMode(true);
-
-    if (data.cssVars) {
-      if (data.type === PREVIEW_BRIDGE_DELTA) {
-        queueCssVars(data.cssVars);
-      } else {
-        applyCssVarsImmediate(data.cssVars);
-      }
-    }
+  if (data.contentPatch) {
+    applyContentPatch(data.contentPatch);
+  }
+}
 
-    if (data.contentPatch && data.type !== PREVIEW_BRIDGE_DELTA) {
-      applyContentPatch(data.contentPatch);
-    }
-  };
+export function initPreviewBridge(): () => void {
+  if (typeof window === 'undefined') return () => {};
 
-  window.addEventListener('message', handler);
-  return () => window.removeEventListener('message', handler);
-}
+  window.addEventListener('message', handleMessage);
 
-function applyCssVarsImmediate(vars: Record<string, string>): void {
-  const root = document.documentElement;
-  for (const [key, value] of Object.entries(vars)) {
-    root.style.setProperty(key, value);
+  let channel: BroadcastChannel | null = null;
+  try {
+    channel = new BroadcastChannel('cfm-wizard-preview');
+    channel.addEventListener('message', (event) => handleMessage(event as MessageEvent<PreviewBridgePayload>));
+  } catch {
+    /* BroadcastChannel unavailable */
   }
+
+  return () => {
+    window.removeEventListener('message', handleMessage);
+    channel?.close();
+  };
 }

package/templates/wizard-dist/assets/{PreviewMock-DgHfrVeb.js → PreviewMock-7peNZK-z.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-DtZhNwPS.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-BxHnE3cm.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-DtZhNwPS.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};