npm - @explorer02/cfm-survey-sdk - Versions diffs - 0.2.8 → 0.3.0 - Mend

@explorer02/cfm-survey-sdk 0.2.8 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/dist/cli/index.js CHANGED Viewed

@@ -126,7 +126,7 @@ ${n}`,u.writeFileSync(e,t)}function it(e){return e.replace(/_/g," ")}async funct
 </body>
 </html>`),u.writeFileSync(p.join(a,"src","entries",`${f}.tsx`),ot(f));u.writeFileSync(p.join(a,"tsconfig.json"),JSON.stringify({compilerOptions:{target:"ES2020",lib:["ES2020","DOM","DOM.Iterable"],module:"ESNext",moduleResolution:"bundler",jsx:"react-jsx",strict:!0,skipLibCheck:!0,paths:{"@/*":["./agent/src/*"]}},include:["src","agent/src","stubs"]},null,2)),tt(a,o,i,n);let m=Zo(i,o),C=Oe(o).join(p.delimiter);(0,ho.execSync)(`node "${m}" build --config "${p.join(a,"vite.config.mjs")}"`,{cwd:a,stdio:"inherit",env:{...process.env,NODE_PATH:C}});let S=p.join(t,"previews");u.mkdirSync(S,{recursive:!0});let v=p.join(a,"dist"),R=u.readFileSync(p.join(i,"templates","preview-harness","preview-bridge.inline.js"),"utf8");for(let f of n){let T=p.join(v,f),$=p.join(S,f);if(!u.existsSync(p.join(T,"index.html")))throw new Error(`Vite build did not produce ${f}/index.html`);u.existsSync($)&&u.rmSync($,{recursive:!0,force:!0}),K(T,$),nt(p.join($,"index.html"),R)}let x=p.join(v,"assets");u.existsSync(x)&&K(x,p.join(S,"assets"));let d=p.join(a,"agent","public");if(u.existsSync(d))for(let f of u.readdirSync(d)){let T=p.join(d,f);u.statSync(T).isFile()&&u.copyFileSync(T,p.join(S,f))}u.rmSync(a,{recursive:!0,force:!0})}var Le=k(require("fs")),Me=k(require("path"));function Pe(e){if(e)return e;let o=process.cwd();if(Le.existsSync(Me.join(o,"src","components","Question.tsx")))return o;let t=process.env.INIT_CWD;return t&&Le.existsSync(Me.join(t,"src","components","Question.tsx"))?t:o}var O=c;function rt(){return I.join(__dirname,"..","..","templates")}function st(e){let o=j.readFileSync(e,"utf8"),t=new Set,n=["MCQ","TEXTFIELD","NPS_SCALE","CFM_MATRIX","CSAT_MATRIX","RATING_MATRIX","SLIDER_MATRIX","FILE_UPLOAD","TEXT_AND_MEDIA","HEATMAP","RANK_ORDER"];for(let i of n)o.includes(i)&&t.add(i);return t.size?[...t]:n}function ct(e,o){let t=["header","footer","chrome","survey_page","intro","end"],n={MCQ:["MCQ_single","MCQ_multiple"],TEXTFIELD:["TEXTFIELD_short","TEXTFIELD_long"],NPS_SCALE:["NPS_SCALE"],CFM_MATRIX:["CFM_likert","CFM_bipolar"],CSAT_MATRIX:["CSAT_emoji","CSAT_star","CSAT_numbered","CSAT_graphics","CSAT_carousel","CSAT_dropdown"],RATING_MATRIX:["RATING_star","RATING_numbered","RATING_radio","RATING_emoji","RATING_graphics","RATING_slider"],SLIDER_MATRIX:["SLIDER_matrix"],FILE_UPLOAD:["FILE_UPLOAD"],HEATMAP:["HEATMAP"],RANK_ORDER:["RANK_drag","RANK_dropdown"]},i=new Set(t);for(let s of o)for(let r of n[s]??[])i.add(r);return e.filter(s=>i.has(s))}function Ue(e,o,t){if(j.existsSync(e))for(let n of j.readdirSync(e)){let i=I.join(e,n),s=I.posix.join(o,n);if(j.statSync(i).isDirectory())Ue(i,s,t);else{let r=I.extname(n).toLowerCase(),a=r===".html"?"text/html":r===".css"?"text/css":r===".js"?"application/javascript":r===".json"?"application/json":r===".svg"?"image/svg+xml":r===".jpg"||r===".jpeg"?"image/jpeg":r===".png"?"image/png":"application/octet-stream";t.push({path:s,contentType:a,sizeBytes:j.statSync(i).size})}}}async function ce(e={}){let o=Pe(e.projectRoot),t=e.outputDir??I.join(o,"out"),n=rt(),i=I.join(n,"preview-harness");e.useTemplatesOnly&&console.log(`${O.dim}   Using SDK template preview harness only (--use-templates-only)${O.reset}`);let s=I.join(i,"previewPages.js"),{PREVIEW_PAGE_DEFS:r,buildPreviewHtml:a,PREVIEW_KEYS:l}=require(s),y=(()=>{let d=ie(o);return d?(console.log(`${O.dim}   Using project theme: ${I.relative(o,d)}${O.reset}`),j.readFileSync(d,"utf8")):j.readFileSync(I.join(n,"survey-theme.css"),"utf8")})(),m=j.readFileSync(I.join(i,"preview-bridge.inline.js"),"utf8"),C=e.surveyTypes;if(!C){let d=I.join(o,"implementation_plan.md");C=j.existsSync(d)?st(d):["MCQ","TEXTFIELD","NPS_SCALE","CFM_MATRIX","CSAT_MATRIX","RATING_MATRIX","SLIDER_MATRIX","FILE_UPLOAD","TEXT_AND_MEDIA","HEATMAP","RANK_ORDER"]}let S=ct(l,C),v=I.join(t,"previews");if(j.existsSync(v)&&(j.rmSync(v,{recursive:!0,force:!0}),console.log(`${O.dim}   Cleared previous preview output${O.reset}`)),j.mkdirSync(v,{recursive:!0}),!e.useTemplatesOnly)try{console.log(`${O.dim}   Building previews from agent components (Vite)\u2026${O.reset}`),await yo({projectRoot:o,outputDir:t,keys:S});let d={};for(let T of S)d[T]=`previews/${T}/index.html`;j.writeFileSync(I.join(t,"previews","manifest.json"),JSON.stringify(d,null,2));let f=[];return Ue(I.join(t,"previews"),"previews",f),console.log(`${O.green}\u2705 Exported ${S.length} agent component previews \u2192 ${t}${O.reset}`),{outputDir:t,manifestPath:I.join(t,"previews","manifest.json"),files:f,surveyTypes:C}}catch(d){console.warn(`${O.yellow}\u26A0 Agent Vite preview build failed; falling back to template harness.${O.reset}`),console.warn(`${O.dim}   ${L(d)}${O.reset}`)}for(let d of r){if(!S.includes(d.key))continue;let f=I.join(t,"previews",d.key);j.mkdirSync(f,{recursive:!0}),j.writeFileSync(I.join(f,"index.html"),a(d,y,m))}let R={};for(let d of S)R[d]=`previews/${d}/index.html`;j.writeFileSync(I.join(t,"previews","manifest.json"),JSON.stringify(R,null,2));let x=[];return Ue(I.join(t,"previews"),"previews",x),console.log(`${O.green}\u2705 Exported ${S.length} preview pages \u2192 ${t}${O.reset}`),{outputDir:t,manifestPath:I.join(t,"previews","manifest.json"),files:x,surveyTypes:C}}var F=c,ye=["MCQ","TEXTFIELD","NPS_SCALE","CFM_MATRIX","CSAT_MATRIX","RATING_MATRIX","SLIDER_MATRIX","FILE_UPLOAD","TEXT_AND_MEDIA","HEATMAP","RANK_ORDER"];function bo(e){return new Promise(o=>{let t=we.createServer();t.listen(e,()=>{t.close(()=>o(e))}),t.on("error",()=>o(bo(e+1)))})}function wo(e){return new Promise((o,t)=>{let n="";e.on("data",i=>n+=i),e.on("end",()=>o(n)),e.on("error",t)})}function at(e){let{exec:o}=require("child_process"),t=process.platform==="darwin"?`open "${e}"`:process.platform==="win32"?`start "" "${e}"`:`xdg-open "${e}"`;o(t)}function So(e){let o=N.extname(e).toLowerCase();return{".html":"text/html",".js":"application/javascript",".css":"text/css",".json":"application/json",".svg":"image/svg+xml",".png":"image/png",".jpg":"image/jpeg",".woff2":"font/woff2",".ico":"image/x-icon"}[o]??"application/octet-stream"}function lt(e){let o=new Set,t,n=e.match(/\*\*instanceId:\*\*\s*(.+)/i);if(n){let s=n[1].replace(/[()[\]]/g,"").trim();s&&!s.startsWith("(")&&s!=="JWT"&&(t=s)}for(let s of ye)e.includes(s)&&o.add(s);let i=e.matchAll(/\|\s*`([A-Z_]+)`\s*\|/g);for(let s of i)ye.includes(s[1])&&o.add(s[1]);return{surveyTypes:o.size>0?[...o]:[...ye],instanceId:t}}async function ft(e){return new Promise(o=>{try{let t=we.get(e,n=>{o((n.statusCode??500)<500),n.resume()});t.on("error",()=>o(!1)),t.setTimeout(2e3,()=>{t.destroy(),o(!1)})}catch{o(!1)}})}function ze(e){let o=N.join(e,"out","previews");P.existsSync(o)&&(P.rmSync(o,{recursive:!0,force:!0}),console.log(`${F.dim}   Removed local preview files: out/previews/${F.reset}`))}async function Co(){let e=process.env.INIT_CWD||process.cwd(),o=N.join(e,"public"),t=N.join(e,"survey-ui-config.json"),n=N.join(e,"implementation_plan.md"),i=N.join(__dirname,"..","..","templates"),s=N.join(i,"wizard-dist"),r=process.env.CFM_PREVIEW_URL??"http://localhost:3000",a={},l=N.join(e,"out","previews"),y=N.join(l,"manifest.json");P.existsSync(y)||(console.log(`${F.dim}   Exporting component previews for local wizard\u2026${F.reset}`),await ce({projectRoot:e,surveyTypes:[...ye]})),P.existsSync(y)&&(a=JSON.parse(P.readFileSync(y,"utf8")));let m=await bo(4200),C=`http://localhost:${m}`;return new Promise((S,v)=>{let R=we.createServer(async(d,f)=>{try{let T=d.url??"/";if(d.method==="GET"&&T==="/api/inventory"){let $;if(P.existsSync(n)){let w=P.readFileSync(n,"utf8");$=lt(w).instanceId}if(P.existsSync(t))try{let w=JSON.parse(P.readFileSync(t,"utf8"));w.instanceId&&($=w.instanceId)}catch{}let h=[...ye],{config:E}=se({projectRoot:e,surveyTypes:h,instanceId:$});f.writeHead(200,{"Content-Type":"application/json"}),f.end(JSON.stringify({surveyTypes:h,instanceId:$,previewUrl:r,initialConfig:E,previewManifest:Object.fromEntries(Object.keys(a).map(w=>[w,`${C}/previews/${w}/index.html`]))}));return}if(d.method==="GET"&&T==="/api/preview-url"){let $=await ft(r);f.writeHead(200,{"Content-Type":"application/json"}),f.end(JSON.stringify({url:r,connected:$}));return}if(d.method==="POST"&&T.split("?")[0]==="/api/wizard-quit"){ze(e),f.writeHead(200,{"Content-Type":"application/json"}),f.end(JSON.stringify({ok:!0,deleted:"out/previews"})),setTimeout(()=>{R.close(()=>{v(new Error("Client quit the wizard without saving. Local preview garbage collection complete (out/previews removed)."))})},300);return}if(d.method==="POST"&&T==="/api/upload-logo"){let $=await wo(d),h=JSON.parse($);P.existsSync(o)||P.mkdirSync(o,{recursive:!0});let E=h.base64.replace(/^data:image\/\w+;base64,/,""),w=Buffer.from(E,"base64"),_=N.extname(h.filename),U=N.basename(h.filename,_).toLowerCase().replace(/[^a-z0-9_-]/g,""),oe=`logo_${Date.now()}_${U}${_||".png"}`;P.writeFileSync(N.join(o,oe),w),f.writeHead(200,{"Content-Type":"application/json"}),f.end(JSON.stringify({fileName:oe}));return}if(d.method==="POST"&&T==="/api/save-config"){let $=await wo(d),h=JSON.parse($);h.configuredAt=new Date().toISOString();let E=h.global?.logo;E?.url?.startsWith("data:")&&(E.url=null),P.writeFileSync(t,JSON.stringify(h,null,2),"utf8"),console.log(`
 ${F.green}\u2705 UI configuration saved to ${t}${F.reset}`),ze(e),console.log(`${F.dim}   Local preview garbage collection complete (out/previews removed)${F.reset}`),f.writeHead(200,{"Content-Type":"application/json"}),f.end(JSON.stringify({ok:!0})),setTimeout(()=>{R.close(()=>S())},500);return}if(d.method==="GET"){let $=T.split("?")[0];if($==="/"&&($="/index.html"),$.startsWith("/previews/")&&P.existsSync(l)){let w=$.replace(/^\/previews\//,""),_=N.join(l,w),U=N.normalize(_);if(U.startsWith(l)&&P.existsSync(U)&&P.statSync(U).isFile()){let oe=P.readFileSync(U);f.writeHead(200,{"Content-Type":So(U)}),f.end(oe);return}}let h=P.existsSync(s),E=h?N.join(s,$):N.join(i,"wizard.html");if(h&&P.existsSync(E)&&P.statSync(E).isFile()){let w=P.readFileSync(E);f.writeHead(200,{"Content-Type":So(E)}),f.end(w);return}if(!h&&$==="/index.html"){let w=P.readFileSync(N.join(i,"wizard.html"),"utf8");f.writeHead(200,{"Content-Type":"text/html"}),f.end(w);return}}f.writeHead(404,{"Content-Type":"text/plain"}),f.end("Not found")}catch(T){f.writeHead(500,{"Content-Type":"text/plain"}),f.end(`Server error: ${L(T)}`)}});R.listen(m,()=>{let d=C;console.log(`
-${F.bold}${F.cyan}\u{1F3A8} Survey UI Customization Wizard${F.reset}`),console.log(`${F.dim}   Running at ${F.reset}${F.green}${d}${F.reset}`),console.log(`${F.dim}   Live previews: ${F.reset}${Object.keys(a).length} components`),console.log(`${F.dim}   Preview target: ${F.reset}${r}`),console.log(`${F.dim}   Default wizard \u2014 saves directly to survey-ui-config.json when client clicks Review & Build${F.reset}
+${F.bold}${F.cyan}\u{1F3A8} Survey UI Customization Wizard${F.reset}`),console.log(`${F.bold}\u{1F517} Client wizard link \u2014 share this URL only:${F.reset}`),console.log(`   ${F.green}${d}${F.reset}`),console.log(`${F.dim}   Port ${m} (auto-selected if 4200 was in use)${F.reset}`),console.log(`${F.dim}   Live previews: ${F.reset}${Object.keys(a).length} components`),console.log(`${F.dim}   Preview target: ${F.reset}${r}`),console.log(`${F.dim}   Default wizard \u2014 saves directly to survey-ui-config.json when client clicks Review & Build${F.reset}
 `),at(d)}),R.on("error",v);let x=()=>{ze(e),R.close(()=>process.exit(130))};process.once("SIGINT",x),process.once("SIGTERM",x)})}var de=k(require("fs")),vo=k(require("path")),Ro=k(require("http")),Io=k(require("https"));z();$e();he();Re();je();var g=c;function ut(e){let{exec:o}=require("child_process"),t=process.platform==="darwin"?`open "${e}"`:process.platform==="win32"?`start "" "${e}"`:`xdg-open "${e}"`;o(t)}function pt(e){return new Promise(o=>setTimeout(o,e))}async function Je(e,o={}){return new Promise((t,n)=>{let i=new URL(e),r=(i.protocol==="https:"?Io:Ro).request(i,{method:o.method??"GET",headers:o.headers??{}},a=>{let l="";a.on("data",y=>l+=y),a.on("end",()=>{if((a.statusCode??500)>=400){n(new Error(`HTTP ${a.statusCode}: ${l}`));return}try{t(JSON.parse(l))}catch{n(new Error(`Invalid JSON: ${l.slice(0,200)}`))}})});r.on("error",n),o.body&&r.write(o.body),r.end()})}async function mt(e,o,t,n){return new Promise((i,s)=>{let r=new URL(e),a=r.protocol==="https:"?Io:Ro,l={"Content-Type":t,"Content-Length":o.length};n&&(l["X-Wizard-Session"]=n.sessionSecret,l["X-Wizard-Session-Id"]=n.sessionId);let y=a.request(r,{method:"PUT",headers:l},m=>{if((m.statusCode??500)>=400){let C="";m.on("data",S=>C+=S),m.on("end",()=>s(new Error(`PUT failed ${m.statusCode}: ${C}`)));return}m.resume(),i()});y.on("error",s),y.write(o),y.end()})}function ht(e){try{let o=e.split(".")[1];return JSON.parse(Buffer.from(o,"base64url").toString("utf8")).surveyId??null}catch{return null}}async function jo(e={}){let o=e.wait!==!1,t=e.pollIntervalMs??Number(process.env.CFM_WIZARD_POLL_MS??3e3),n=e.timeoutMs??Number(process.env.CFM_WIZARD_TIMEOUT_MS??72e5),i=process.env.CFM_INSTANCE_ID,s=(process.env.CFM_DEPLOY_API_BASE??"http://localhost:3000").replace(/\/$/,"");if(!i)throw new Error("CFM_INSTANCE_ID (JWT) is required");let r=ht(i);if(!r)throw new Error("Could not parse surveyId from CFM_INSTANCE_ID JWT");let a=Pe(),l=Y(a),y=l.activeConfigPath,m=e.apply?!1:e.review!==!1;console.log(`
 ${g.bold}${g.cyan}\u{1F3A8} CFM UI Customization (AWS)${g.reset}
 `),m&&(console.log(`${g.dim}   Review mode: seed kept in survey-ui-config.json; final + diff written on complete.${g.reset}`),console.log(`${g.dim}   Apply later with: npx cfm-sdk confirm-ui-config${g.reset}

package/dist/cli/index.mjs CHANGED Viewed

@@ -126,7 +126,7 @@ ${n}`,u.writeFileSync(e,t)}function et(e){return e.replace(/_/g," ")}async funct
 </body>
 </html>`),u.writeFileSync(p.join(a,"src","entries",`${f}.tsx`),Ko(f));u.writeFileSync(p.join(a,"tsconfig.json"),JSON.stringify({compilerOptions:{target:"ES2020",lib:["ES2020","DOM","DOM.Iterable"],module:"ESNext",moduleResolution:"bundler",jsx:"react-jsx",strict:!0,skipLibCheck:!0,paths:{"@/*":["./agent/src/*"]}},include:["src","agent/src","stubs"]},null,2)),Yo(a,o,i,n);let m=Qo(i,o),C=Ae(o).join(p.delimiter);Xo(`node "${m}" build --config "${p.join(a,"vite.config.mjs")}"`,{cwd:a,stdio:"inherit",env:{...process.env,NODE_PATH:C}});let S=p.join(t,"previews");u.mkdirSync(S,{recursive:!0});let E=p.join(a,"dist"),v=u.readFileSync(p.join(i,"templates","preview-harness","preview-bridge.inline.js"),"utf8");for(let f of n){let T=p.join(E,f),$=p.join(S,f);if(!u.existsSync(p.join(T,"index.html")))throw new Error(`Vite build did not produce ${f}/index.html`);u.existsSync($)&&u.rmSync($,{recursive:!0,force:!0}),G(T,$),Zo(p.join($,"index.html"),v)}let x=p.join(E,"assets");u.existsSync(x)&&G(x,p.join(S,"assets"));let d=p.join(a,"agent","public");if(u.existsSync(d))for(let f of u.readdirSync(d)){let T=p.join(d,f);u.statSync(T).isFile()&&u.copyFileSync(T,p.join(S,f))}u.rmSync(a,{recursive:!0,force:!0})}import*as _e from"fs";import*as De from"path";function Te(e){if(e)return e;let o=process.cwd();if(_e.existsSync(De.join(o,"src","components","Question.tsx")))return o;let t=process.env.INIT_CWD;return t&&_e.existsSync(De.join(t,"src","components","Question.tsx"))?t:o}var D=c;function ot(){return R.join(__dirname,"..","..","templates")}function tt(e){let o=I.readFileSync(e,"utf8"),t=new Set,n=["MCQ","TEXTFIELD","NPS_SCALE","CFM_MATRIX","CSAT_MATRIX","RATING_MATRIX","SLIDER_MATRIX","FILE_UPLOAD","TEXT_AND_MEDIA","HEATMAP","RANK_ORDER"];for(let i of n)o.includes(i)&&t.add(i);return t.size?[...t]:n}function nt(e,o){let t=["header","footer","chrome","survey_page","intro","end"],n={MCQ:["MCQ_single","MCQ_multiple"],TEXTFIELD:["TEXTFIELD_short","TEXTFIELD_long"],NPS_SCALE:["NPS_SCALE"],CFM_MATRIX:["CFM_likert","CFM_bipolar"],CSAT_MATRIX:["CSAT_emoji","CSAT_star","CSAT_numbered","CSAT_graphics","CSAT_carousel","CSAT_dropdown"],RATING_MATRIX:["RATING_star","RATING_numbered","RATING_radio","RATING_emoji","RATING_graphics","RATING_slider"],SLIDER_MATRIX:["SLIDER_matrix"],FILE_UPLOAD:["FILE_UPLOAD"],HEATMAP:["HEATMAP"],RANK_ORDER:["RANK_drag","RANK_dropdown"]},i=new Set(t);for(let s of o)for(let r of n[s]??[])i.add(r);return e.filter(s=>i.has(s))}function Oe(e,o,t){if(I.existsSync(e))for(let n of I.readdirSync(e)){let i=R.join(e,n),s=R.posix.join(o,n);if(I.statSync(i).isDirectory())Oe(i,s,t);else{let r=R.extname(n).toLowerCase(),a=r===".html"?"text/html":r===".css"?"text/css":r===".js"?"application/javascript":r===".json"?"application/json":r===".svg"?"image/svg+xml":r===".jpg"||r===".jpeg"?"image/jpeg":r===".png"?"image/png":"application/octet-stream";t.push({path:s,contentType:a,sizeBytes:I.statSync(i).size})}}}async function se(e={}){let o=Te(e.projectRoot),t=e.outputDir??R.join(o,"out"),n=ot(),i=R.join(n,"preview-harness");e.useTemplatesOnly&&console.log(`${D.dim}   Using SDK template preview harness only (--use-templates-only)${D.reset}`);let s=R.join(i,"previewPages.js"),{PREVIEW_PAGE_DEFS:r,buildPreviewHtml:a,PREVIEW_KEYS:l}=we(s),y=(()=>{let d=ne(o);return d?(console.log(`${D.dim}   Using project theme: ${R.relative(o,d)}${D.reset}`),I.readFileSync(d,"utf8")):I.readFileSync(R.join(n,"survey-theme.css"),"utf8")})(),m=I.readFileSync(R.join(i,"preview-bridge.inline.js"),"utf8"),C=e.surveyTypes;if(!C){let d=R.join(o,"implementation_plan.md");C=I.existsSync(d)?tt(d):["MCQ","TEXTFIELD","NPS_SCALE","CFM_MATRIX","CSAT_MATRIX","RATING_MATRIX","SLIDER_MATRIX","FILE_UPLOAD","TEXT_AND_MEDIA","HEATMAP","RANK_ORDER"]}let S=nt(l,C),E=R.join(t,"previews");if(I.existsSync(E)&&(I.rmSync(E,{recursive:!0,force:!0}),console.log(`${D.dim}   Cleared previous preview output${D.reset}`)),I.mkdirSync(E,{recursive:!0}),!e.useTemplatesOnly)try{console.log(`${D.dim}   Building previews from agent components (Vite)\u2026${D.reset}`),await go({projectRoot:o,outputDir:t,keys:S});let d={};for(let T of S)d[T]=`previews/${T}/index.html`;I.writeFileSync(R.join(t,"previews","manifest.json"),JSON.stringify(d,null,2));let f=[];return Oe(R.join(t,"previews"),"previews",f),console.log(`${D.green}\u2705 Exported ${S.length} agent component previews \u2192 ${t}${D.reset}`),{outputDir:t,manifestPath:R.join(t,"previews","manifest.json"),files:f,surveyTypes:C}}catch(d){console.warn(`${D.yellow}\u26A0 Agent Vite preview build failed; falling back to template harness.${D.reset}`),console.warn(`${D.dim}   ${O(d)}${D.reset}`)}for(let d of r){if(!S.includes(d.key))continue;let f=R.join(t,"previews",d.key);I.mkdirSync(f,{recursive:!0}),I.writeFileSync(R.join(f,"index.html"),a(d,y,m))}let v={};for(let d of S)v[d]=`previews/${d}/index.html`;I.writeFileSync(R.join(t,"previews","manifest.json"),JSON.stringify(v,null,2));let x=[];return Oe(R.join(t,"previews"),"previews",x),console.log(`${D.green}\u2705 Exported ${S.length} preview pages \u2192 ${t}${D.reset}`),{outputDir:t,manifestPath:R.join(t,"previews","manifest.json"),files:x,surveyTypes:C}}var j=c,me=["MCQ","TEXTFIELD","NPS_SCALE","CFM_MATRIX","CSAT_MATRIX","RATING_MATRIX","SLIDER_MATRIX","FILE_UPLOAD","TEXT_AND_MEDIA","HEATMAP","RANK_ORDER"];function mo(e){return new Promise(o=>{let t=he.createServer();t.listen(e,()=>{t.close(()=>o(e))}),t.on("error",()=>o(mo(e+1)))})}function uo(e){return new Promise((o,t)=>{let n="";e.on("data",i=>n+=i),e.on("end",()=>o(n)),e.on("error",t)})}function it(e){let{exec:o}=we("child_process"),t=process.platform==="darwin"?`open "${e}"`:process.platform==="win32"?`start "" "${e}"`:`xdg-open "${e}"`;o(t)}function po(e){let o=F.extname(e).toLowerCase();return{".html":"text/html",".js":"application/javascript",".css":"text/css",".json":"application/json",".svg":"image/svg+xml",".png":"image/png",".jpg":"image/jpeg",".woff2":"font/woff2",".ico":"image/x-icon"}[o]??"application/octet-stream"}function rt(e){let o=new Set,t,n=e.match(/\*\*instanceId:\*\*\s*(.+)/i);if(n){let s=n[1].replace(/[()[\]]/g,"").trim();s&&!s.startsWith("(")&&s!=="JWT"&&(t=s)}for(let s of me)e.includes(s)&&o.add(s);let i=e.matchAll(/\|\s*`([A-Z_]+)`\s*\|/g);for(let s of i)me.includes(s[1])&&o.add(s[1]);return{surveyTypes:o.size>0?[...o]:[...me],instanceId:t}}async function st(e){return new Promise(o=>{try{let t=he.get(e,n=>{o((n.statusCode??500)<500),n.resume()});t.on("error",()=>o(!1)),t.setTimeout(2e3,()=>{t.destroy(),o(!1)})}catch{o(!1)}})}function Le(e){let o=F.join(e,"out","previews");k.existsSync(o)&&(k.rmSync(o,{recursive:!0,force:!0}),console.log(`${j.dim}   Removed local preview files: out/previews/${j.reset}`))}async function ho(){let e=process.env.INIT_CWD||process.cwd(),o=F.join(e,"public"),t=F.join(e,"survey-ui-config.json"),n=F.join(e,"implementation_plan.md"),i=F.join(__dirname,"..","..","templates"),s=F.join(i,"wizard-dist"),r=process.env.CFM_PREVIEW_URL??"http://localhost:3000",a={},l=F.join(e,"out","previews"),y=F.join(l,"manifest.json");k.existsSync(y)||(console.log(`${j.dim}   Exporting component previews for local wizard\u2026${j.reset}`),await se({projectRoot:e,surveyTypes:[...me]})),k.existsSync(y)&&(a=JSON.parse(k.readFileSync(y,"utf8")));let m=await mo(4200),C=`http://localhost:${m}`;return new Promise((S,E)=>{let v=he.createServer(async(d,f)=>{try{let T=d.url??"/";if(d.method==="GET"&&T==="/api/inventory"){let $;if(k.existsSync(n)){let w=k.readFileSync(n,"utf8");$=rt(w).instanceId}if(k.existsSync(t))try{let w=JSON.parse(k.readFileSync(t,"utf8"));w.instanceId&&($=w.instanceId)}catch{}let h=[...me],{config:P}=re({projectRoot:e,surveyTypes:h,instanceId:$});f.writeHead(200,{"Content-Type":"application/json"}),f.end(JSON.stringify({surveyTypes:h,instanceId:$,previewUrl:r,initialConfig:P,previewManifest:Object.fromEntries(Object.keys(a).map(w=>[w,`${C}/previews/${w}/index.html`]))}));return}if(d.method==="GET"&&T==="/api/preview-url"){let $=await st(r);f.writeHead(200,{"Content-Type":"application/json"}),f.end(JSON.stringify({url:r,connected:$}));return}if(d.method==="POST"&&T.split("?")[0]==="/api/wizard-quit"){Le(e),f.writeHead(200,{"Content-Type":"application/json"}),f.end(JSON.stringify({ok:!0,deleted:"out/previews"})),setTimeout(()=>{v.close(()=>{E(new Error("Client quit the wizard without saving. Local preview garbage collection complete (out/previews removed)."))})},300);return}if(d.method==="POST"&&T==="/api/upload-logo"){let $=await uo(d),h=JSON.parse($);k.existsSync(o)||k.mkdirSync(o,{recursive:!0});let P=h.base64.replace(/^data:image\/\w+;base64,/,""),w=Buffer.from(P,"base64"),A=F.extname(h.filename),M=F.basename(h.filename,A).toLowerCase().replace(/[^a-z0-9_-]/g,""),ee=`logo_${Date.now()}_${M}${A||".png"}`;k.writeFileSync(F.join(o,ee),w),f.writeHead(200,{"Content-Type":"application/json"}),f.end(JSON.stringify({fileName:ee}));return}if(d.method==="POST"&&T==="/api/save-config"){let $=await uo(d),h=JSON.parse($);h.configuredAt=new Date().toISOString();let P=h.global?.logo;P?.url?.startsWith("data:")&&(P.url=null),k.writeFileSync(t,JSON.stringify(h,null,2),"utf8"),console.log(`
 ${j.green}\u2705 UI configuration saved to ${t}${j.reset}`),Le(e),console.log(`${j.dim}   Local preview garbage collection complete (out/previews removed)${j.reset}`),f.writeHead(200,{"Content-Type":"application/json"}),f.end(JSON.stringify({ok:!0})),setTimeout(()=>{v.close(()=>S())},500);return}if(d.method==="GET"){let $=T.split("?")[0];if($==="/"&&($="/index.html"),$.startsWith("/previews/")&&k.existsSync(l)){let w=$.replace(/^\/previews\//,""),A=F.join(l,w),M=F.normalize(A);if(M.startsWith(l)&&k.existsSync(M)&&k.statSync(M).isFile()){let ee=k.readFileSync(M);f.writeHead(200,{"Content-Type":po(M)}),f.end(ee);return}}let h=k.existsSync(s),P=h?F.join(s,$):F.join(i,"wizard.html");if(h&&k.existsSync(P)&&k.statSync(P).isFile()){let w=k.readFileSync(P);f.writeHead(200,{"Content-Type":po(P)}),f.end(w);return}if(!h&&$==="/index.html"){let w=k.readFileSync(F.join(i,"wizard.html"),"utf8");f.writeHead(200,{"Content-Type":"text/html"}),f.end(w);return}}f.writeHead(404,{"Content-Type":"text/plain"}),f.end("Not found")}catch(T){f.writeHead(500,{"Content-Type":"text/plain"}),f.end(`Server error: ${O(T)}`)}});v.listen(m,()=>{let d=C;console.log(`
-${j.bold}${j.cyan}\u{1F3A8} Survey UI Customization Wizard${j.reset}`),console.log(`${j.dim}   Running at ${j.reset}${j.green}${d}${j.reset}`),console.log(`${j.dim}   Live previews: ${j.reset}${Object.keys(a).length} components`),console.log(`${j.dim}   Preview target: ${j.reset}${r}`),console.log(`${j.dim}   Default wizard \u2014 saves directly to survey-ui-config.json when client clicks Review & Build${j.reset}
+${j.bold}${j.cyan}\u{1F3A8} Survey UI Customization Wizard${j.reset}`),console.log(`${j.bold}\u{1F517} Client wizard link \u2014 share this URL only:${j.reset}`),console.log(`   ${j.green}${d}${j.reset}`),console.log(`${j.dim}   Port ${m} (auto-selected if 4200 was in use)${j.reset}`),console.log(`${j.dim}   Live previews: ${j.reset}${Object.keys(a).length} components`),console.log(`${j.dim}   Preview target: ${j.reset}${r}`),console.log(`${j.dim}   Default wizard \u2014 saves directly to survey-ui-config.json when client clicks Review & Build${j.reset}
 `),it(d)}),v.on("error",E);let x=()=>{Le(e),v.close(()=>process.exit(130))};process.once("SIGINT",x),process.once("SIGTERM",x)})}U();import*as fe from"fs";import*as xo from"path";import*as To from"http";import*as ko from"https";be();pe();Ee();Re();var g=c;function lt(e){let{exec:o}=we("child_process"),t=process.platform==="darwin"?`open "${e}"`:process.platform==="win32"?`start "" "${e}"`:`xdg-open "${e}"`;o(t)}function ft(e){return new Promise(o=>setTimeout(o,e))}async function ze(e,o={}){return new Promise((t,n)=>{let i=new URL(e),r=(i.protocol==="https:"?ko:To).request(i,{method:o.method??"GET",headers:o.headers??{}},a=>{let l="";a.on("data",y=>l+=y),a.on("end",()=>{if((a.statusCode??500)>=400){n(new Error(`HTTP ${a.statusCode}: ${l}`));return}try{t(JSON.parse(l))}catch{n(new Error(`Invalid JSON: ${l.slice(0,200)}`))}})});r.on("error",n),o.body&&r.write(o.body),r.end()})}async function dt(e,o,t,n){return new Promise((i,s)=>{let r=new URL(e),a=r.protocol==="https:"?ko:To,l={"Content-Type":t,"Content-Length":o.length};n&&(l["X-Wizard-Session"]=n.sessionSecret,l["X-Wizard-Session-Id"]=n.sessionId);let y=a.request(r,{method:"PUT",headers:l},m=>{if((m.statusCode??500)>=400){let C="";m.on("data",S=>C+=S),m.on("end",()=>s(new Error(`PUT failed ${m.statusCode}: ${C}`)));return}m.resume(),i()});y.on("error",s),y.write(o),y.end()})}function gt(e){try{let o=e.split(".")[1];return JSON.parse(Buffer.from(o,"base64url").toString("utf8")).surveyId??null}catch{return null}}async function Po(e={}){let o=e.wait!==!1,t=e.pollIntervalMs??Number(process.env.CFM_WIZARD_POLL_MS??3e3),n=e.timeoutMs??Number(process.env.CFM_WIZARD_TIMEOUT_MS??72e5),i=process.env.CFM_INSTANCE_ID,s=(process.env.CFM_DEPLOY_API_BASE??"http://localhost:3000").replace(/\/$/,"");if(!i)throw new Error("CFM_INSTANCE_ID (JWT) is required");let r=gt(i);if(!r)throw new Error("Could not parse surveyId from CFM_INSTANCE_ID JWT");let a=Te(),l=K(a),y=l.activeConfigPath,m=e.apply?!1:e.review!==!1;console.log(`
 ${g.bold}${g.cyan}\u{1F3A8} CFM UI Customization (AWS)${g.reset}
 `),m&&(console.log(`${g.dim}   Review mode: seed kept in survey-ui-config.json; final + diff written on complete.${g.reset}`),console.log(`${g.dim}   Apply later with: npx cfm-sdk confirm-ui-config${g.reset}

package/package.json CHANGED Viewed

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

package/templates/docs/00-integration/ui-customization-wizard.md CHANGED Viewed

@@ -2,6 +2,37 @@
 > Optional **run** after Phase 6 verify. **Wizard-ready build** is mandatory in Phase 5 — see [`agent-execution-flow.md`](agent-execution-flow.md).
+### Port selection (strict)
+The CLI calls `findPort(4200)` — tries **4200**, then **4201**, **4202**, … until a port is free.
+**Agent rules:**
+1. **Do not** hardcode `localhost:4200` if the CLI printed a different port.
+2. **Share only** the URL the CLI prints under `🔗 Client wizard link — share this URL only:`.
+3. **Do not** give the client a second link, a file path, or `out/previews/` paths.
+Example CLI output:
+```
+🔗 Client wizard link — share this URL only:
+   http://localhost:4201
+   Port 4201 (auto-selected if 4200 was in use)
+```
+### Client quit without save
+If the client clicks **Quit** (no Review & Build):
+- CLI runs preview GC (`out/previews/` deleted)
+- CLI exits without `survey-ui-config.json` update
+- **Agent must NOT** re-run `npx cfm-sdk customize` or send another wizard link
+- **Agent must** ask deploy confirmation (INPUT 4) using the **existing** build from Phase 6
+See [`wizard-config-handoff.md`](wizard-config-handoff.md) § Quit without save.
+---
 ## Default: local wizard (`customize`)
 When the client says **yes** to customization in agent chat, **always run:**

package/templates/docs/00-integration/wizard-chrome-contract.md CHANGED Viewed

@@ -12,6 +12,7 @@ Pipeline: [`wizard-preview-build-guide.md`](wizard-preview-build-guide.md) · [`
 | Wizard control / symptom | Required fix |
 |--------------------------|--------------|
 | Logo not updating in Branding / Header preview | `data-cfm-logo` img + `data-cfm-logo-text` fallback in `Header.tsx` |
+| Logo shows colored pad behind image | Logo `<img>` must use `background: transparent` — **never** `var(--cfm-primary)` on logo box |
 | Company name not updating | `data-cfm-company` span in `Header.tsx` |
 | Show header works but progress bar toggle does nothing | Progress bar needs `data-cfm-progress` + class `cfm-progress`; header needs class `cfm-header` only — **not** on sticky wrapper |
 | Show footer toggle does nothing | `footer` + class `cfm-footer` |

package/templates/docs/00-integration/wizard-config-handoff.md CHANGED Viewed

@@ -58,6 +58,16 @@ The logo is **not** fetched from wizard memory on CloudFront — only from the d
 **After save:** `POST /api/save-config` also deletes `out/previews/` before CLI exits (preview garbage collection).
+**Quit without save (no second wizard run):**
+| Event | Agent action |
+|-------|----------------|
+| Client clicks **Quit** in wizard | Wait for CLI exit; previews GC'd automatically |
+| CLI exits without `✅ UI configuration saved` | **Do not** run `customize` again or share another wizard URL |
+| Build still valid from Phase 6 | Ask deploy confirmation (INPUT 4) — use existing `out/` from prior `npm run build` |
+The agent does **not** re-open the wizard after quit. Garbage collection removes preview artifacts only; the production build in `out/` from Phase 6 remains unless the client requests a rebuild.
 ---
 ## Remote client flow — `customize-ui` (fallback only)

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

@@ -102,11 +102,12 @@ Single-select radio: outer border = focus ring, annulus = cell selected, inner d
 | Wizard section | Config path | CSS vars | Apply in |
 |----------------|-------------|----------|----------|
 | Button style | `questionTypes.NPS_SCALE.buttonStyle` | `data-cfm-nps-button-style` | `RatingScale.tsx` |
-| Track | `selectedFill`, `trackBar`, `trackHighlight` | `--cfm-nps-selected-fill`, `--cfm-nps-track-bar`, `--cfm-nps-track-highlight` | Track bar background |
-| Hint labels | `hintMinText`, `hintMaxText` + hint colors | `--cfm-hint-label-*` | Min/max anchor row |
-| Number labels | `numberLabelMode`, per-index colors | `--cfm-number-label-mode`, `--cfm-number-mono-color`, `--cfm-number-color-{n}` | Badge row above radios |
+| Hint labels | `hintMinText`, `hintMaxText` + hint colors | `--cfm-hint-label-*` | `hintLabelStyle()` on anchor row in `Question.tsx` |
+| Number labels | `numberLabelMode`, per-index colors | `--cfm-number-*` | `resolveNumberLabelColor()` / badge row in `RatingScale.tsx` |
 | Selection | Theme → Question card | `--cfm-matrix-selected`, `--cfm-input-focus-ring` | `scaleRadioRingStyle` + `scaleRadioDotStyle` |
+**Removed from wizard UI:** selected fill, track bar, track highlight — NPS selection uses Theme → Question card tokens only.
 ### CFM_MATRIX (`CFM_matrix`, `CFM_dropdown`, `CFM_transpose`, `CFM_likert`, `CFM_bipolar`)
 | Wizard section | CSS vars | Apply in |

package/templates/docs/templates/CsatMatrixScale.tsx CHANGED Viewed

@@ -4,6 +4,18 @@ import { getEmojiForIndex, CsatStarIcons } from './surveyUiIcons';
 import { columnSubmitValue, nonNaScaleColumns } from './surveyUiScaleUtils';
 import { CustomSliderTrack } from './CustomSliderTrack';
 import MatrixDropdown from './MatrixDropdown';
+import {
+  matrixRadioRingStyle,
+  matrixRadioDotStyle,
+  scaleCellSelectedStyle,
+  unselectedOpacityStyle,
+  emojiSizeStyle,
+  cellSelectedVar,
+  focusRingVar,
+} from '@/lib/surveyUi/selectionStyles';
+import { csatColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
+const MATRIX_ROW_LABEL_WIDTH = 'var(--cfm-matrix-row-width, 180px)';
 type CsatMatrixQuestion = CsatQuestion | RatingMatrixQuestion;
@@ -190,7 +202,7 @@ function CsatMatrixGrid({
       {/* Labels row */}
       {showLabels && m > 0 && (
         <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '12px' }}>
-          <div style={{ width: '180px', flexShrink: 0 }} />
+          <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0 }} />
           <div style={{ flex: 1, display: 'flex' }}>
             <div style={{ flex: 1, position: 'relative', height: '24px', ...(isGraphics ? { margin: '0 40px' } : {}) }}>
               {labels!.map((label, i) => {
@@ -219,7 +231,7 @@ function CsatMatrixGrid({
       {/* Column tick labels for graphics sliders (shown with or without anchor labels) */}
       {isGraphics && m > 0 && (
         <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: showLabels ? '8px' : '16px', minHeight: '24px' }}>
-          <div style={{ width: '180px', flexShrink: 0 }} />
+          <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0 }} />
           <div style={{ flex: 1, display: 'flex' }}>
             <GraphicsColumnLabelsRow scaleColumns={scaleColumns} />
             {hasNotApplicable && (
@@ -232,13 +244,13 @@ function CsatMatrixGrid({
       {/* Column Headers for non-graphics */}
       {!isGraphics && !showLabels && m > 0 && (
         <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '16px', minHeight: '24px' }}>
-          <div style={{ width: '180px', flexShrink: 0 }} />
+          <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0 }} />
           <div style={{ flex: 1, display: 'flex' }}>
             <div style={{ flex: 1, display: 'grid', gridTemplateColumns: `repeat(${scaleColumns.length}, 1fr)` }}>
               {scaleColumns.map(col => (
                 <div key={col.id} style={{ display: 'flex', justifyContent: 'center', padding: '0 4px' }}>
                   <span
-                    style={{ fontSize: '13px', fontWeight: 500, color: '#4b5563', textAlign: 'center', lineHeight: 1.2 }}
+                    style={{ fontSize: '13px', fontWeight: 500, textAlign: 'center', lineHeight: 1.2, ...csatColumnLabelStyle() }}
                     dangerouslySetInnerHTML={{ __html: col.label }}
                   />
                 </div>
@@ -260,7 +272,7 @@ function CsatMatrixGrid({
             display: 'flex', alignItems: 'center', borderRadius: '8px',
             padding: '12px 0', backgroundColor: rowIdx % 2 === 0 ? 'rgba(249, 250, 251, 0.8)' : '#fff',
           }}>
-            <div style={{ width: '180px', flexShrink: 0, padding: '0 16px' }}>
+            <div style={{ width: MATRIX_ROW_LABEL_WIDTH, flexShrink: 0, padding: '0 16px' }}>
               <span style={{ fontSize: '14px', fontWeight: 500, color: '#111827', lineHeight: 1.4 }}
                 dangerouslySetInnerHTML={{ __html: row.statementText }} />
             </div>
@@ -298,13 +310,8 @@ function CsatMatrixGrid({
                   const StarNode = isStar ? (isSelected ? (CsatStarIcons.filled as any) : (CsatStarIcons.empty as any)) : null;
                   const RadioNode = (
-                    <div style={{
-                      display: 'flex', width: '18px', height: '18px',
-                      alignItems: 'center', justifyContent: 'center', borderRadius: '50%',
-                      margin: '0 auto', border: isSelected ? '2px solid #e20074' : '2px solid #d1d5db',
-                      backgroundColor: '#fff',
-                    }}>
-                      {isSelected && <div style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#e20074' }} />}
+                    <div style={matrixRadioRingStyle(isSelected)}>
+                      <div style={matrixRadioDotStyle(isSelected)} />
                     </div>
                   );
@@ -324,22 +331,24 @@ function CsatMatrixGrid({
                             cursor: 'pointer', borderRadius: '6px',
                             ...(isEmoji ? {
                               padding: '6px',
+                              ...emojiSizeStyle(),
                               transform: isSelected ? 'scale(1.1)' : isHovered ? 'scale(1.25)' : 'scale(1)',
                               ...(isSelected ? {
-                                backgroundColor: 'rgba(252, 231, 243, 0.6)',
-                                boxShadow: '0 0 0 2px rgba(226, 0, 116, 0.3)',
+                                outline: `2px solid ${focusRingVar}`,
+                                backgroundColor: cellSelectedVar,
                                 borderRadius: '50%',
-                              } : {}),
+                              } : unselectedOpacityStyle()),
                             } : isStar ? {
                               padding: '4px',
                               transform: isHovered ? 'scale(1.1)' : 'scale(1)',
-                              opacity: isSelected ? 1 : isHovered ? 1 : 0.5,
+                              color: isSelected ? cellSelectedVar : focusRingVar,
+                              ...(isSelected ? {} : unselectedOpacityStyle()),
                               } : isNumbered ? {
                                 width: '40px', height: '40px', borderRadius: '8px',
                                 fontSize: '14px', fontWeight: 500,
-                                border: `1px solid ${isSelected ? '#e20074' : '#d1d5db'}`,
-                                backgroundColor: isSelected ? '#e20074' : '#fff',
-                                color: isSelected ? '#fff' : '#111827',
+                                ...(isSelected
+                                  ? scaleCellSelectedStyle(true)
+                                  : { border: '1px solid #d1d5db', backgroundColor: '#fff', color: '#111827' }),
                                 transition: 'all 0.15s',
                               } : { padding: '8px' }),
                           }}
@@ -609,7 +618,7 @@ export function CsatMatrixScale({ question, selectedValue = {}, onSelect }: Csat
     );
   }
-  if (isDropdown || isSelectBox || isStandardRadio) {
+  if (isDropdown || isSelectBox || (isStandardRadio && question.type !== 'RATING_MATRIX')) {
     return (
       <CsatMatrixVerticalList
         question={question}

package/templates/docs/templates/CustomSliderTrack.tsx CHANGED Viewed

@@ -50,7 +50,7 @@ export function CustomSliderTrack({
     ? tooltipLabel.replace(/<[^>]*>/g, '')
     : String(Math.round(value));
-  const themeColor = disabled ? '#9ca3af' : '#e20074';
+  const themeColor = disabled ? '#9ca3af' : 'var(--cfm-input-focus-ring, var(--cfm-primary))';
   return (
     <div
@@ -60,7 +60,7 @@ export function CustomSliderTrack({
     >
       <div style={{
         position: 'absolute', top: '50%', left: 0, right: 0, transform: 'translateY(-50%)',
-        height: '4px', borderRadius: '2px', backgroundColor: '#e5e7eb',
+        height: '4px', borderRadius: '2px', backgroundColor: 'var(--cfm-slider-track, #e5e7eb)',
       }} />
       <div style={{

package/templates/docs/templates/FileUploadScale.tsx CHANGED Viewed

@@ -98,10 +98,10 @@ function FileUploadDropzone({
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
-        border: `2px dashed ${isDragActive ? '#e20074' : '#d1d5db'}`,
-        borderRadius: '12px',
-        backgroundColor: isDragActive ? '#fdf2f8' : '#f9fafb',
-        padding: '40px 24px',
+        border: `2px ${isDragActive ? 'solid' : 'var(--cfm-upload-border-style, dashed)'} var(--cfm-upload-border-color, #d1d5db)`,
+        borderRadius: 'var(--cfm-border-radius, 12px)',
+        backgroundColor: isDragActive ? 'var(--cfm-mcq-selected-bg, #fdf2f8)' : 'var(--cfm-upload-fill, #f9fafb)',
+        padding: 'var(--cfm-upload-padding, 40px 24px)',
         cursor: disabled ? 'not-allowed' : 'pointer',
         opacity: disabled ? 0.6 : 1,
         textAlign: 'center',

package/templates/docs/templates/Header.tsx CHANGED Viewed

@@ -57,7 +57,7 @@ export default function Header({ embedded = false }: HeaderProps) {
                 width: 'var(--cfm-header-logo-width, 120px)',
                 height: 'var(--cfm-header-logo-height, 120px)',
                 padding: 'var(--cfm-header-logo-padding, 10px)',
-                background: 'var(--cfm-primary)',
+                background: 'transparent',
               }}
             />
           ) : (

package/templates/docs/templates/HeatmapScale.tsx CHANGED Viewed

@@ -26,11 +26,11 @@ function HeatmapSpot({ spot }: { spot: { id: string; x: number; y: number } }) {
       style={{
         left: `${spot.x * 100}%`,
         top: `${spot.y * 100}%`,
-        width: 16,
-        height: 16,
+        width: 'var(--cfm-heatmap-pin-size, 16px)',
+        height: 'var(--cfm-heatmap-pin-size, 16px)',
         transform: 'translate(-50%, -50%)',
-        backgroundColor: '#F97316',
-        border: '2px solid white',
+        backgroundColor: 'var(--cfm-heatmap-pin, #F97316)',
+        border: '2px solid var(--cfm-heatmap-pin-border, #fff)',
         boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
       }}
     />

package/templates/docs/templates/LikertMatrixScale.tsx CHANGED Viewed

@@ -2,6 +2,9 @@ import React, { useState } from 'react';
 import type { CfmMatrixQuestion, MatrixRowAnswers } from '@explorer02/cfm-survey-sdk';
 import { columnSubmitValue } from './surveyUiScaleUtils';
 import MatrixDropdown from './MatrixDropdown';
+import { matrixColumnLabelStyle } from '@/lib/surveyUi/labelStyles';
+const MATRIX_ROW_LABEL_WIDTH = 'var(--cfm-matrix-row-width, 180px)';
 type LikertMatrixScaleProps = {
   question: CfmMatrixQuestion;
@@ -229,12 +232,12 @@ function LikertMatrixGridLayout({
         )}
         {showColumnHeaders && (
           <div style={{ display: 'flex', alignItems: 'flex-end', minHeight: '24px' }}>
-            <div style={{ flex: isBipolar ? '0 0 25%' : '0 0 180px', paddingRight: '16px', boxSizing: 'border-box' }} />
+            <div style={{ flex: isBipolar ? '0 0 25%' : `0 0 ${MATRIX_ROW_LABEL_WIDTH}`, paddingRight: '16px', boxSizing: 'border-box' }} />
             <div style={{ flex: 1, display: 'flex' }}>
               <div style={{ flex: 1, display: 'grid', gridTemplateColumns: `repeat(${gridCols.length}, 1fr)` }}>
                 {gridCols.map((col) => (
                   <div key={col.id} style={{ display: 'flex', justifyContent: 'center', padding: '0 4px' }}>
-                    <span style={{ fontSize: '13px', fontWeight: 500, color: '#4b5563', textAlign: 'center', lineHeight: 1.2 }}
+                    <span style={{ fontSize: '13px', fontWeight: 500, textAlign: 'center', lineHeight: 1.2, ...matrixColumnLabelStyle() }}
                           dangerouslySetInnerHTML={{ __html: transposeTable ? ('statementText' in col ? col.statementText : col.label) : ('label' in col ? col.label : (col as { statementText: string }).statementText) }} />
                   </div>
                 ))}
@@ -261,7 +264,7 @@ function LikertMatrixGridLayout({
                 padding: '12px 0', backgroundColor: !repeatColumnHeaders && rowIdx % 2 === 0 ? 'rgba(249, 250, 251, 0.8)' : '#fff',
                 boxSizing: 'border-box'
               }}>
-                <div style={{ flex: isBipolar ? '0 0 25%' : '0 0 180px', padding: '0 16px', boxSizing: 'border-box' }}>
+                <div style={{ flex: isBipolar ? '0 0 25%' : `0 0 ${MATRIX_ROW_LABEL_WIDTH}`, padding: '0 16px', boxSizing: 'border-box' }}>
                   <span style={{ fontSize: '14px', fontWeight: 500, color: '#111827', lineHeight: 1.4, wordWrap: 'break-word', display: 'block' }}
                     dangerouslySetInnerHTML={{ __html: transposeTable ? ('label' in rowItem ? rowItem.label : '') : ('statementText' in rowItem ? rowItem.statementText : '') }} />
                 </div>
@@ -299,7 +302,7 @@ function LikertMatrixGridLayout({
                                 }
                               }}
                               style={{
-                                width: '18px', height: '18px', accentColor: '#e20074',
+                                width: '18px', height: '18px', accentColor: 'var(--cfm-input-focus-ring)',
                                 cursor: isDisabled ? 'not-allowed' : 'pointer',
                                 ...(isMultiple ? { borderRadius: '4px' } : {})
                               }}

package/templates/docs/templates/Question.tsx CHANGED Viewed

@@ -19,6 +19,7 @@ import { FileUploadScale } from './FileUploadScale';
 import { HeatmapScale } from './HeatmapScale';
 import { RankOrderScale } from './RankOrderScale';
 import RatingScale from './RatingScale';
+import { hintLabelStyle } from '@/lib/surveyUi/labelStyles';
 type QuestionProps = {
   question: SurveyQuestion;
@@ -141,7 +142,7 @@ export default function Question({
       {question.type === QUESTION_TYPE.NPS_SCALE && (
         <div className="space-y-3">
           {(question.minLabel || question.midLabel || question.maxLabel) && (
-            <div className="relative w-full h-6 text-xs font-semibold text-gray-500">
+            <div className="relative w-full h-6 text-xs font-semibold" style={hintLabelStyle()}>
               <span
                 className="absolute left-0 top-0 max-w-[30%] text-left leading-tight"
                 dangerouslySetInnerHTML={{ __html: question.minLabel ?? '' }}

package/templates/docs/templates/RankOrderScale.tsx CHANGED Viewed

@@ -119,11 +119,17 @@ function RankOrderOptionRow({
   rankBadge,
 }: RankOrderOptionRowProps) {
   return (
-    <div className="flex items-center gap-3 rounded-lg border border-[#e5e5e5] bg-white px-4 py-3 transition-colors hover:bg-gray-50/50">
+    <div
+      className="flex items-center gap-3 rounded-lg border border-[#e5e5e5] px-4 py-3 transition-colors"
+      style={{ backgroundColor: 'var(--cfm-rank-item-bg, #fff)', padding: 'var(--cfm-rank-item-padding, 12px 16px)', marginBottom: 'var(--cfm-rank-item-gap, 12px)' }}
+    >
       {rankSelect}
       {dragHandle}
       {rankBadge !== undefined && (
-        <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[#fdf2f8] text-sm font-semibold text-[#e20074]">
+        <span
+          className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-sm font-semibold text-white"
+          style={{ backgroundColor: 'var(--cfm-rank-badge, var(--cfm-primary))' }}
+        >
           {rankBadge}
         </span>
       )}
@@ -161,7 +167,8 @@ function DropdownRankLayout({
                 aria-label={`Rank for ${option.optionLabel || option.id}`}
                 value={currentRank ?? ''}
                 onChange={event => handleRankChange(option.id, event.target.value)}
-                className="h-10 w-16 shrink-0 rounded border border-gray-300 bg-white px-2 text-sm outline-none focus:border-[#e20074] focus:ring-1 focus:ring-[#e20074]"
+                className="h-10 w-16 shrink-0 rounded border bg-white px-2 text-sm outline-none"
+                style={{ borderColor: 'var(--cfm-rank-select-border, #d1d5db)' }}
               >
                 <option value="">-</option>
                 {rankChoices.map(rank => (

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

@@ -49,6 +49,7 @@
         if (patch.logoUrl) {
           img.src = patch.logoUrl;
           img.style.display = '';
+          img.style.background = 'transparent';
         } else if (el.hasAttribute('data-cfm-logo')) {
           img.style.display = 'none';
           img.removeAttribute('src');
@@ -171,10 +172,22 @@
         }
       }
     }
-    if (patch.previewState && patch.previewState.textfieldPlaceholder !== undefined) {
-      document.querySelectorAll('[data-cfm-textfield]').forEach(function (el) {
-        el.setAttribute('placeholder', patch.previewState.textfieldPlaceholder || '');
-      });
+    if (patch.previewState) {
+      if (patch.previewState.textfieldPlaceholder !== undefined) {
+        document.querySelectorAll('[data-cfm-textfield]').forEach(function (el) {
+          el.setAttribute('placeholder', patch.previewState.textfieldPlaceholder || '');
+        });
+      }
+      if (patch.previewState.hintMinText !== undefined) {
+        document.querySelectorAll('[data-cfm-hint-min], .cfm-hint-min').forEach(function (el) {
+          el.textContent = patch.previewState.hintMinText || '';
+        });
+      }
+      if (patch.previewState.hintMaxText !== undefined) {
+        document.querySelectorAll('[data-cfm-hint-max], .cfm-hint-max').forEach(function (el) {
+          el.textContent = patch.previewState.hintMaxText || '';
+        });
+      }
     }
   }

package/templates/preview-harness/previewPages.js CHANGED Viewed

@@ -2,7 +2,7 @@
 const sharedStyles = `
   .cfm-header { height:var(--cfm-header-height); background:var(--cfm-header-bg); border-bottom:1px solid var(--cfm-header-border); display:flex; align-items:center; padding:0 var(--cfm-header-padding-x); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
-  .cfm-header-logo { width:var(--cfm-header-logo-width); height:var(--cfm-header-logo-height); object-fit:contain; padding:var(--cfm-header-logo-padding); background:var(--cfm-primary); }
+  .cfm-header-logo { width:var(--cfm-header-logo-width); height:var(--cfm-header-logo-height); object-fit:contain; padding:var(--cfm-header-logo-padding); background:transparent; }
   .cfm-header-company { font-size:var(--cfm-header-company-size); font-weight:var(--cfm-header-company-weight); color:var(--cfm-header-company-color); margin-left:16px; }
   .cfm-footer { background:var(--cfm-footer-bg); color:var(--cfm-footer-text); padding:var(--cfm-footer-padding-y) var(--cfm-footer-padding-x); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-end; }
   .cfm-footer-links { display:flex; gap:24px; flex-wrap:wrap; }
@@ -12,27 +12,31 @@ const sharedStyles = `
   .cfm-mcq-option { border:2px solid #e5e7eb; border-radius:var(--cfm-mcq-border-radius); padding:var(--cfm-mcq-card-padding); margin-bottom:var(--cfm-mcq-option-gap); display:flex; align-items:center; gap:8px; }
   .cfm-mcq-option.selected { border-color:var(--cfm-mcq-selected-accent); background:var(--cfm-mcq-selected-bg); }
   .cfm-nps-row { display:flex; gap:var(--cfm-nps-cell-gap); flex-wrap:wrap; }
-  .cfm-nps-cell { width:var(--cfm-nps-cell-size); height:var(--cfm-nps-cell-size); border-radius:var(--cfm-border-radius); background:var(--cfm-nps-track-bar); display:flex; align-items:center; justify-content:center; font-size:14px; }
-  .cfm-nps-cell.selected { background:var(--cfm-nps-selected-fill); border:2px solid var(--cfm-accent); }
+  .cfm-nps-cell { width:var(--cfm-nps-cell-size); height:var(--cfm-nps-cell-size); border-radius:var(--cfm-border-radius); background:var(--cfm-nps-track-bar,#f2f2f2); display:flex; align-items:center; justify-content:center; font-size:14px; box-sizing:border-box; }
+  .cfm-nps-cell.selected { border:2px solid var(--cfm-input-focus-ring); background:var(--cfm-matrix-selected); color:#fff; }
+  .cfm-hint-row { display:flex; justify-content:space-between; font-size:12px; font-weight:600; margin-bottom:8px; }
+  .cfm-hint-min, .cfm-hint-max { color:var(--cfm-hint-label-color,#6b7280); background:var(--cfm-hint-label-bg,transparent); padding:2px 4px; border-radius:4px; }
+  .cfm-matrix-col-header { font-size:13px; font-weight:500; text-align:center; color:var(--cfm-csat-column-label-color,var(--cfm-matrix-column-label-color,#4b5563)); background:var(--cfm-csat-column-label-bg,var(--cfm-matrix-column-label-bg,transparent)); padding:2px 6px; border-radius:4px; }
   .cfm-matrix-row { display:flex; align-items:center; padding:8px 0; background:var(--cfm-row-band); margin-bottom:4px; }
   .cfm-matrix-label { width:var(--cfm-matrix-row-width); flex-shrink:0; padding:0 16px; font-size:14px; font-weight:500; }
   .cfm-matrix-cells { display:flex; gap:8px; flex:1; justify-content:center; }
-  .cfm-matrix-cell { width:var(--cfm-csat-cell-size); height:var(--cfm-csat-cell-size); border-radius:50%; border:2px solid #d1d5db; }
-  .cfm-matrix-cell.selected { border-color:var(--cfm-csat-ring-color); background:var(--cfm-selected-bg); }
+  .cfm-matrix-cell { width:var(--cfm-csat-cell-size,18px); height:var(--cfm-csat-cell-size,18px); border-radius:50%; border:2px solid #d1d5db; box-sizing:border-box; }
+  .cfm-matrix-cell.selected { border-color:var(--cfm-input-focus-ring); background:var(--cfm-matrix-selected); }
   .cfm-emoji { font-size:var(--cfm-csat-emoji-size); opacity:var(--cfm-csat-unselected-opacity); }
-  .cfm-emoji.selected { opacity:1; outline:2px solid var(--cfm-csat-ring-color); border-radius:8px; }
-  .cfm-star { color:var(--cfm-star-color); font-size:24px; opacity:var(--cfm-star-unselected-opacity); }
-  .cfm-star.selected { opacity:1; }
-  .cfm-badge { width:40px; height:40px; border-radius:8px; background:var(--cfm-badge-color); color:white; display:flex; align-items:center; justify-content:center; font-weight:600; }
+  .cfm-emoji.selected { opacity:1; outline:2px solid var(--cfm-input-focus-ring); border-radius:8px; background:var(--cfm-matrix-selected); }
+  .cfm-star { color:var(--cfm-input-focus-ring); font-size:var(--cfm-csat-emoji-size,24px); opacity:var(--cfm-csat-unselected-opacity); }
+  .cfm-star.selected { opacity:1; color:var(--cfm-matrix-selected); }
+  .cfm-badge { width:40px; height:40px; border-radius:8px; background:var(--cfm-number-color-0,#9ca3af); color:white; display:flex; align-items:center; justify-content:center; font-weight:600; border:1px solid #d1d5db; box-sizing:border-box; }
+  .cfm-badge.selected { border:2px solid var(--cfm-input-focus-ring); background:var(--cfm-matrix-selected); color:#fff; }
   .cfm-slider-track { height:8px; background:var(--cfm-slider-track); border-radius:4px; position:relative; margin:24px 0; }
   .cfm-slider-thumb { width:20px; height:20px; background:var(--cfm-slider-thumb); border-radius:50%; position:absolute; top:-6px; left:60%; }
   .cfm-tick { width:var(--cfm-slider-tick-size); height:var(--cfm-slider-tick-size); background:var(--cfm-slider-tick); border-radius:4px; font-size:11px; display:flex; align-items:center; justify-content:center; color:white; }
-  .cfm-dropzone { border:2px dashed var(--cfm-upload-accent); border-radius:var(--cfm-border-radius); padding:var(--cfm-upload-padding); text-align:center; color:var(--cfm-text); }
+  .cfm-dropzone { border-width:2px; border-style:var(--cfm-upload-border-style,dashed); border-color:var(--cfm-upload-border-color,#d1d5db); border-radius:var(--cfm-border-radius); padding:var(--cfm-upload-padding,24px); background:var(--cfm-upload-fill,#f9fafb); text-align:center; color:var(--cfm-text); }
   .cfm-input { width:100%; height:var(--cfm-input-height); border:1px solid var(--cfm-input-border); border-radius:var(--cfm-input-radius); padding:0 var(--cfm-input-padding); font-family:inherit; box-sizing:border-box; }
   .cfm-rank-item { background:var(--cfm-rank-item-bg); padding:var(--cfm-rank-item-padding); margin-bottom:var(--cfm-rank-item-gap); border-radius:var(--cfm-border-radius); display:flex; align-items:center; gap:12px; }
   .cfm-rank-badge { background:var(--cfm-rank-badge); color:white; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; }
   .cfm-handle { color:var(--cfm-rank-handle); cursor:grab; }
-  .cfm-pin { width:var(--cfm-heatmap-pin-size); height:var(--cfm-heatmap-pin-size); background:var(--cfm-heatmap-pin); border:2px solid white; border-radius:50%; position:absolute; }
+  .cfm-pin { width:var(--cfm-heatmap-pin-size); height:var(--cfm-heatmap-pin-size); background:var(--cfm-heatmap-pin); border:2px solid var(--cfm-heatmap-pin-border,#fff); border-radius:50%; position:absolute; }
   .cfm-media { max-width:var(--cfm-media-max-width); border-radius:var(--cfm-media-radius); background:#e5e7eb; height:200px; display:flex; align-items:center; justify-content:center; }
   .cfm-btn-primary { background:var(--cfm-primary); color:var(--cfm-button-text); border:none; border-radius:var(--cfm-border-radius); padding:10px 20px; }
   .cfm-btn-back { background:transparent; color:var(--cfm-primary); border:1px solid var(--cfm-primary); border-radius:var(--cfm-border-radius); padding:10px 20px; }
@@ -44,8 +48,12 @@ function cells(n) {
   ).join('');
 }
+function matrixColHeaders(n) {
+  return `<div class="cfm-matrix-row" style="background:transparent;margin-bottom:8px"><div class="cfm-matrix-label"></div><div class="cfm-matrix-cells">${Array.from({ length: n }, (_, i) => `<span class="cfm-matrix-col-header">${i + 1}</span>`).join('')}</div></div>`;
+}
 function matrixPreview(label) {
-  return `<div class="cfm-matrix-row"><div class="cfm-matrix-label">${label}</div><div class="cfm-matrix-cells">${cells(5)}</div></div>`;
+  return `${matrixColHeaders(5)}<div class="cfm-matrix-row"><div class="cfm-matrix-label">${label}</div><div class="cfm-matrix-cells">${cells(5)}</div></div>`;
 }
 const npsCells = Array.from({ length: 11 }, (_, i) =>
@@ -63,7 +71,7 @@ const PREVIEW_PAGE_DEFS = [
   { key: 'MCQ_multiple', title: 'MCQ Multiple', body: `<p style="font-weight:600;margin-bottom:16px">Select all that apply</p><div class="cfm-mcq-option selected"><span>☑</span> Option A</div><div class="cfm-mcq-option"><span>☐</span> Option B</div>` },
   { key: 'TEXTFIELD_short', title: 'Text Short', body: `<p style="font-weight:600;margin-bottom:8px">Your name</p><input class="cfm-input" placeholder="Type here..." />` },
   { key: 'TEXTFIELD_long', title: 'Text Long', body: `<p style="font-weight:600;margin-bottom:8px">Comments</p><textarea class="cfm-input" style="height:120px;padding:12px" placeholder="Type your response..."></textarea>` },
-  { key: 'NPS_SCALE', title: 'NPS', body: `<p style="font-weight:600;margin-bottom:8px">How likely are you to recommend us?</p><div class="cfm-nps-row">${npsCells}</div>` },
+  { key: 'NPS_SCALE', title: 'NPS', body: `<p style="font-weight:600;margin-bottom:8px">How likely are you to recommend us?</p><div class="cfm-hint-row"><span class="cfm-hint-min" data-cfm-hint-min>Not likely</span><span class="cfm-hint-max" data-cfm-hint-max>Very likely</span></div><div class="cfm-nps-row">${npsCells}</div>` },
   { key: 'CFM_likert', title: 'CFM Likert', body: matrixPreview('Statement item 1') },
   { key: 'CFM_bipolar', title: 'CFM Bipolar', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width)">Left</div><div class="cfm-matrix-cells">${cells(5)}</div><div class="cfm-matrix-label" style="width:var(--cfm-matrix-bipolar-width);text-align:right">Right</div></div>` },
   { key: 'CFM_transpose', title: 'CFM Transpose', body: matrixPreview('Scale item (transposed)') },
@@ -71,7 +79,7 @@ const PREVIEW_PAGE_DEFS = [
   { key: 'CFM_dropdown', title: 'CFM Dropdown', body: `<div class="cfm-matrix-label">Statement 1</div><select class="cfm-input" style="margin-top:8px"><option>Select...</option></select>` },
   { key: 'CSAT_emoji', title: 'CSAT Emoji', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">How satisfied?</div><div class="cfm-matrix-cells"><span class="cfm-emoji selected">😞</span><span class="cfm-emoji">🙂</span><span class="cfm-emoji">😊</span></div></div>` },
   { key: 'CSAT_star', title: 'CSAT Star', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Rate us</div><div class="cfm-matrix-cells"><span class="cfm-star selected">★</span><span class="cfm-star selected">★</span><span class="cfm-star">★</span></div></div>` },
-  { key: 'CSAT_numbered', title: 'CSAT Numbered', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Score</div><div class="cfm-matrix-cells"><div class="cfm-badge">1</div><div class="cfm-badge">2</div><div class="cfm-badge">3</div></div></div>` },
+  { key: 'CSAT_numbered', title: 'CSAT Numbered', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Score</div><div class="cfm-matrix-cells"><div class="cfm-badge">1</div><div class="cfm-badge selected">2</div><div class="cfm-badge">3</div></div></div>` },
   { key: 'CSAT_graphics', title: 'CSAT Graphics', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Slider row</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>` },
   { key: 'CSAT_carousel', title: 'CSAT Carousel', body: `${matrixPreview('Carousel row')}<div style="text-align:center"><span style="color:var(--cfm-csat-accent)">●</span> ○</div>` },
   { key: 'CSAT_dropdown', title: 'CSAT Dropdown', body: `<div class="cfm-matrix-label">Statement</div><select class="cfm-input" style="margin-top:8px"><option>Choose rating...</option></select>` },
@@ -81,7 +89,7 @@ const PREVIEW_PAGE_DEFS = [
   { key: 'RATING_emoji', title: 'Rating Emoji', body: `<div class="cfm-matrix-cells" style="padding:16px"><span class="cfm-emoji">🙂</span><span class="cfm-emoji selected">😊</span><span class="cfm-emoji">🤩</span></div>` },
   { key: 'RATING_graphics', title: 'Rating Graphics', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Experience</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>` },
   { key: 'RATING_slider', title: 'Rating Slider', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Rate on slider</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>` },
-  { key: 'SLIDER_matrix', title: 'Slider Matrix', body: `<div class="cfm-matrix-row"><div class="cfm-matrix-label">Statement 1</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div></div></div>` },
+  { key: 'SLIDER_matrix', title: 'Slider Matrix', body: `<div class="cfm-matrix-row" style="background:transparent;margin-bottom:4px"><div class="cfm-matrix-label"></div><div style="flex:1;padding:0 16px;display:flex;justify-content:space-between"><span class="cfm-matrix-col-header">Low</span><span class="cfm-matrix-col-header">High</span></div></div><div class="cfm-matrix-row"><div class="cfm-matrix-label">Statement 1</div><div style="flex:1;padding:0 16px"><div class="cfm-slider-track"><div class="cfm-slider-thumb"></div></div><div style="display:flex;justify-content:space-between;margin-top:8px"><span class="cfm-tick">0</span><span class="cfm-tick">5</span><span class="cfm-tick">10</span></div></div></div>` },
   { key: 'FILE_UPLOAD', title: 'File Upload', body: `<div data-cfm-dropzone-style="dashed" class="cfm-dropzone">Drop files here or click to upload</div>` },
   { key: 'TEXT_AND_MEDIA', title: 'Text & Media', body: `<div class="cfm-media">Media preview</div>` },
   { key: 'HEATMAP', title: 'Heatmap', body: `<div style="position:relative;background:#e5e7eb;height:240px;border-radius:var(--cfm-border-radius)"><div class="cfm-pin" style="top:40%;left:55%"></div></div>` },