bluedither 1.0.21 → 1.0.22

package/dist/bluedither-tuner.js

@@ -1,8 +1,8 @@
-(()=>{if(!window.__BD_TUNER_LOADED__){let w=function(n,r,e){let i=r.split("."),t=n;for(let d=0;d<i.length-1;d++)t=t[i[d]];t[i[i.length-1]]=e},L=function(n,r){return r.split(".").reduce((e,i)=>e?.[i],n)},k=function(n,r){document.documentElement.style.setProperty(n,r)},v=function(n,r){let e=window.__BD_SHADER__;e&&e.updateParams({[n]:r})},U=function(n){let r=b.layout.designWidth,e=n/16,i=n/r*100;return`clamp(${(e*.55).toFixed(4)}rem, ${i.toFixed(4)}vw, ${e.toFixed(4)}rem)`},$=function(n){let r="bd-gf-"+n.replace(/\s+/g,"-").toLowerCase();if(document.getElementById(r))return;let e=document.createElement("link");e.id=r,e.rel="stylesheet",e.href=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(n)}:wght@400;700&display=swap`,document.head.appendChild(e)},_=function(n){let r=document.createElement("div");return r.className="bd-tuner-section",r.innerHTML=`<div class="bd-tuner-section-label">${n}</div>`,f.appendChild(r),r},C=function(n,r,e,i,t){let d=L(b,e)||"#000000",a=document.createElement("div");a.className="bd-tuner-row",a.innerHTML=`
+(()=>{if(!window.__BD_TUNER_LOADED__){let w=function(n,r,e){let i=r.split("."),t=n;for(let d=0;d<i.length-1;d++)t=t[i[d]];t[i[i.length-1]]=e},L=function(n,r){return r.split(".").reduce((e,i)=>e?.[i],n)},v=function(n,r){document.documentElement.style.setProperty(n,r)},S=function(n,r){let e=window.__BD_SHADER__;e&&e.updateParams({[n]:r})},U=function(n){let r=b.layout.designWidth,e=n/16,i=n/r*100;return`clamp(${(e*.55).toFixed(4)}rem, ${i.toFixed(4)}vw, ${e.toFixed(4)}rem)`},$=function(n){let r="bd-gf-"+n.replace(/\s+/g,"-").toLowerCase();if(document.getElementById(r))return;let e=document.createElement("link");e.id=r,e.rel="stylesheet",e.href=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(n)}:wght@400;700&display=swap`,document.head.appendChild(e)},_=function(n){let r=document.createElement("div");return r.className="bd-tuner-section",r.innerHTML=`<div class="bd-tuner-section-label">${n}</div>`,f.appendChild(r),r},C=function(n,r,e,i,t){let d=L(b,e)||"#000000",a=document.createElement("div");a.className="bd-tuner-row",a.innerHTML=`
     <span class="bd-tuner-label">${r}</span>
     <span class="bd-tuner-input"><input type="color" value="${d.substring(0,7)}"></span>
     <span class="bd-tuner-value">${d.substring(0,7)}</span>
-  `;let s=a.querySelector("input"),c=a.querySelector(".bd-tuner-value");return s.addEventListener("input",l=>{let g=l.target.value;w(b,e,g),c.textContent=g,i&&k(i,g),t&&t(g)}),n.appendChild(a),{setValue(l){w(b,e,l),s.value=l.substring(0,7),c.textContent=l.substring(0,7),i&&k(i,l)}}},m=function(n,r,e,i,t,d,a){let s=L(b,e),c=document.createElement("div");c.className="bd-tuner-row bd-tuner-row-stacked",c.innerHTML=`
+  `;let s=a.querySelector("input"),c=a.querySelector(".bd-tuner-value");return s.addEventListener("input",l=>{let m=l.target.value;w(b,e,m),c.textContent=m,i&&v(i,m),t&&t(m)}),n.appendChild(a),{setValue(l){w(b,e,l),s.value=l.substring(0,7),c.textContent=l.substring(0,7),i&&v(i,l)}}},g=function(n,r,e,i,t,d,a){let s=L(b,e),c=document.createElement("div");c.className="bd-tuner-row bd-tuner-row-stacked",c.innerHTML=`
     <div class="bd-tuner-row-top">
       <span class="bd-tuner-label">${r}</span>
       <div class="bd-tuner-px-input-wrap">
@@ -11,24 +11,24 @@
       </div>
     </div>
     <input type="range" class="bd-tuner-slider" min="${i}" max="${t}" step="${d}" value="${s}">
-  `;let l=c.querySelector(".bd-tuner-px-num"),g=c.querySelector(".bd-tuner-slider");function u(o){if(o=Math.max(i,Math.min(t,o)),w(b,e,o),l.value=o,g.value=o,a){let S=U(o);(Array.isArray(a)?a:[a]).forEach(h=>k(h,S))}}l.addEventListener("input",o=>u(parseFloat(o.target.value)||0)),g.addEventListener("input",o=>u(parseFloat(o.target.value))),l.addEventListener("keydown",o=>{if(o.key==="ArrowUp"||o.key==="ArrowDown"){o.preventDefault();let S=o.shiftKey?10:1,h=(o.key==="ArrowUp"?d:-d)*S;u(parseFloat(l.value)+h)}}),n.appendChild(c)},P=function(n,r,e,i,t,d,a){let s=L(b,e),c=document.createElement("div");c.className="bd-tuner-row bd-tuner-row-stacked",c.innerHTML=`
+  `;let l=c.querySelector(".bd-tuner-px-num"),m=c.querySelector(".bd-tuner-slider");function u(o){if(o=Math.max(i,Math.min(t,o)),w(b,e,o),l.value=o,m.value=o,a){let k=U(o);(Array.isArray(a)?a:[a]).forEach(h=>v(h,k))}}l.addEventListener("input",o=>u(parseFloat(o.target.value)||0)),m.addEventListener("input",o=>u(parseFloat(o.target.value))),l.addEventListener("keydown",o=>{if(o.key==="ArrowUp"||o.key==="ArrowDown"){o.preventDefault();let k=o.shiftKey?10:1,h=(o.key==="ArrowUp"?d:-d)*k;u(parseFloat(l.value)+h)}}),n.appendChild(c)},E=function(n,r,e,i,t,d,a){let s=L(b,e),c=document.createElement("div");c.className="bd-tuner-row bd-tuner-row-stacked",c.innerHTML=`
     <div class="bd-tuner-row-top">
       <span class="bd-tuner-label">${r}</span>
       <span class="bd-tuner-value">${s}</span>
     </div>
     <input type="range" class="bd-tuner-slider" min="${i}" max="${t}" step="${d}" value="${s}">
-  `;let l=c.querySelector(".bd-tuner-slider"),g=c.querySelector(".bd-tuner-value");l.addEventListener("input",u=>{let o=parseFloat(u.target.value);w(b,e,o),g.textContent=o,a&&a(o)}),n.appendChild(c)},D=function(n,r,e,i){let t=L(b,e),d=document.createElement("div");d.className="bd-tuner-row",d.innerHTML=`
+  `;let l=c.querySelector(".bd-tuner-slider"),m=c.querySelector(".bd-tuner-value");l.addEventListener("input",u=>{let o=parseFloat(u.target.value);w(b,e,o),m.textContent=o,a&&a(o)}),n.appendChild(c)},D=function(n,r,e,i){let t=L(b,e),d=document.createElement("div");d.className="bd-tuner-row",d.innerHTML=`
     <span class="bd-tuner-label">${r}</span>
     <span class="bd-tuner-input bd-tuner-font-input">
       <input type="text" class="bd-tuner-font-search" value="${t}" placeholder="Search fonts...">
       <div class="bd-tuner-font-dropdown"></div>
     </span>
-  `;let a=d.querySelector(".bd-tuner-font-search"),s=d.querySelector(".bd-tuner-font-dropdown"),c=g=>z.some(u=>u.toLowerCase()===g.toLowerCase());function l(g=""){let u=q.filter(o=>o.toLowerCase().includes(g.toLowerCase())).slice(0,20);s.innerHTML=u.map(o=>{let S=c(o)?' <span style="opacity:0.4;font-size:9px">SYSTEM</span>':"";return`<div class="bd-tuner-font-option" data-font="${o}" style="font-family:'${o}',system-ui">${o}${S}</div>`}).join(""),u.filter(o=>!c(o)).forEach($),s.querySelectorAll(".bd-tuner-font-option").forEach(o=>{o.addEventListener("mousedown",S=>{S.preventDefault();let h=o.dataset.font;a.value=h,w(b,e,h),c(h)||$(h),k(i,`"${h}", system-ui, sans-serif`),s.classList.remove("open")})})}a.addEventListener("focus",()=>{l(a.value),s.classList.add("open")}),a.addEventListener("input",()=>{l(a.value),s.classList.add("open")}),a.addEventListener("blur",()=>{setTimeout(()=>s.classList.remove("open"),150)}),a.addEventListener("keydown",g=>{if(g.key==="Enter"){let u=a.value.trim();u&&(w(b,e,u),c(u)||$(u),k(i,`"${u}", system-ui, sans-serif`),s.classList.remove("open"),a.blur())}}),n.appendChild(d)},B=function(n,r,e,i,t){let d=L(b,e),a=document.createElement("div");a.className="bd-tuner-row bd-tuner-row-stacked",a.innerHTML=`
+  `;let a=d.querySelector(".bd-tuner-font-search"),s=d.querySelector(".bd-tuner-font-dropdown"),c=m=>z.some(u=>u.toLowerCase()===m.toLowerCase());function l(m=""){let u=q.filter(o=>o.toLowerCase().includes(m.toLowerCase())).slice(0,20);s.innerHTML=u.map(o=>{let k=c(o)?' <span style="opacity:0.4;font-size:9px">SYSTEM</span>':"";return`<div class="bd-tuner-font-option" data-font="${o}" style="font-family:'${o}',system-ui">${o}${k}</div>`}).join(""),u.filter(o=>!c(o)).forEach($),s.querySelectorAll(".bd-tuner-font-option").forEach(o=>{o.addEventListener("mousedown",k=>{k.preventDefault();let h=o.dataset.font;a.value=h,w(b,e,h),c(h)||$(h),v(i,`"${h}", system-ui, sans-serif`),s.classList.remove("open")})})}a.addEventListener("focus",()=>{l(a.value),s.classList.add("open")}),a.addEventListener("input",()=>{l(a.value),s.classList.add("open")}),a.addEventListener("blur",()=>{setTimeout(()=>s.classList.remove("open"),150)}),a.addEventListener("keydown",m=>{if(m.key==="Enter"){let u=a.value.trim();u&&(w(b,e,u),c(u)||$(u),v(i,`"${u}", system-ui, sans-serif`),s.classList.remove("open"),a.blur())}}),n.appendChild(d)},B=function(n,r,e,i,t){let d=L(b,e),a=document.createElement("div");a.className="bd-tuner-row bd-tuner-row-stacked",a.innerHTML=`
     <span class="bd-tuner-label">${r}</span>
     <div class="bd-tuner-segmented">
       ${i.map(s=>`<button class="bd-tuner-seg-btn${s===d?" active":""}" data-val="${s}">${s}</button>`).join("")}
     </div>
-  `,a.querySelectorAll(".bd-tuner-seg-btn").forEach(s=>{s.addEventListener("click",()=>{a.querySelectorAll(".bd-tuner-seg-btn").forEach(l=>l.classList.remove("active")),s.classList.add("active");let c=s.dataset.val;w(b,e,c),t&&t(c)})}),n.appendChild(a)};window.__BD_TUNER_LOADED__=!0;let b=structuredClone(window.__BD_TOKENS__||JSON.parse(document.querySelector('script[type="application/json"][data-bluedither-tokens]')?.textContent||"{}")),O=structuredClone(window.__BD_DEFAULTS__||JSON.parse(document.querySelector('script[type="application/json"][data-bluedither-defaults]')?.textContent||"{}")),H=!!(window.__BD_TOKENS__&&window.__BD_DEFAULTS__)||!!window.__BD_TUNER_SERVER_MODE__,z=["Arial","Arial Black","Bebas Neue Pro","Consolas","Courier New","Georgia","Helvetica","Impact","Lucida Console","Segoe UI","Tahoma","Times New Roman","Trebuchet MS","Verdana","SF Pro Display","SF Mono","Cascadia Code","Menlo","Monaco"],j=["Bebas Neue","Space Mono","Inter","Roboto","Roboto Mono","Roboto Condensed","Open Sans","Montserrat","Lato","Oswald","Raleway","Poppins","Nunito","Playfair Display","Merriweather","Source Sans 3","Source Code Pro","PT Sans","PT Serif","PT Mono","Ubuntu","Ubuntu Mono","Fira Sans","Fira Code","Fira Mono","Work Sans","Noto Sans","Noto Serif","DM Sans","DM Serif Display","DM Mono","IBM Plex Sans","IBM Plex Mono","IBM Plex Serif","JetBrains Mono","Inconsolata","Space Grotesk","Archivo","Archivo Black","Barlow","Barlow Condensed","Lexend","Outfit","Sora","Manrope","Bitter","Crimson Text","Libre Baskerville","Abril Fatface","Anton","Permanent Marker","Righteous","Orbitron","Teko","Rubik","Quicksand","Cabin","Karla","Josefin Sans","Comfortaa","Fredoka","Geologica","Instrument Sans","Instrument Serif"],q=[...new Set([...z,...j])].sort(),f=document.createElement("div");f.id="bd-tuner";let F=document.createElement("button");F.id="bd-tuner-toggle",F.textContent="Tuner",F.onclick=()=>f.classList.remove("collapsed"),document.body.appendChild(f),document.body.appendChild(F),f.innerHTML=`
+  `,a.querySelectorAll(".bd-tuner-seg-btn").forEach(s=>{s.addEventListener("click",()=>{a.querySelectorAll(".bd-tuner-seg-btn").forEach(l=>l.classList.remove("active")),s.classList.add("active");let c=s.dataset.val;w(b,e,c),t&&t(c)})}),n.appendChild(a)};window.__BD_TUNER_LOADED__=!0;let b=structuredClone(window.__BD_TOKENS__||JSON.parse(document.querySelector('script[type="application/json"][data-bluedither-tokens]')?.textContent||"{}")),O=structuredClone(window.__BD_DEFAULTS__||JSON.parse(document.querySelector('script[type="application/json"][data-bluedither-defaults]')?.textContent||"{}")),H=!!(window.__BD_TOKENS__&&window.__BD_DEFAULTS__)||!!window.__BD_TUNER_SERVER_MODE__,z=["Arial","Arial Black","Bebas Neue Pro","Consolas","Courier New","Georgia","Helvetica","Impact","Lucida Console","Segoe UI","Tahoma","Times New Roman","Trebuchet MS","Verdana","SF Pro Display","SF Mono","Cascadia Code","Menlo","Monaco"],j=["Bebas Neue","Space Mono","Inter","Roboto","Roboto Mono","Roboto Condensed","Open Sans","Montserrat","Lato","Oswald","Raleway","Poppins","Nunito","Playfair Display","Merriweather","Source Sans 3","Source Code Pro","PT Sans","PT Serif","PT Mono","Ubuntu","Ubuntu Mono","Fira Sans","Fira Code","Fira Mono","Work Sans","Noto Sans","Noto Serif","DM Sans","DM Serif Display","DM Mono","IBM Plex Sans","IBM Plex Mono","IBM Plex Serif","JetBrains Mono","Inconsolata","Space Grotesk","Archivo","Archivo Black","Barlow","Barlow Condensed","Lexend","Outfit","Sora","Manrope","Bitter","Crimson Text","Libre Baskerville","Abril Fatface","Anton","Permanent Marker","Righteous","Orbitron","Teko","Rubik","Quicksand","Cabin","Karla","Josefin Sans","Comfortaa","Fredoka","Geologica","Instrument Sans","Instrument Serif"],q=[...new Set([...z,...j])].sort(),f=document.createElement("div");f.id="bd-tuner";let P=document.createElement("button");P.id="bd-tuner-toggle",P.textContent="Tuner",P.onclick=()=>f.classList.remove("collapsed"),document.body.appendChild(f),document.body.appendChild(P),f.innerHTML=`
   <div class="bd-tuner-title">
     <span>BlueDither Tuner</span>
     <div style="display:flex;gap:8px;align-items:center;">
@@ -36,7 +36,7 @@
       <button id="bd-tuner-close" title="Close">&times;</button>
     </div>
   </div>
-`,f.querySelector("#bd-tuner-close").onclick=()=>f.classList.add("collapsed"),f.querySelector("#bd-tuner-reset").onclick=async()=>{confirm("Reset all tokens to defaults?")&&(Object.assign(b,structuredClone(O)),await R(),location.reload())};let T=_("Colors");C(T,"Background","colors.background","--bd-bg");let N;C(T,"Primary","colors.primary","--bd-primary",n=>{N.setValue(n),v("colorFront",n)}),C(T,"Text","colors.text","--bd-text"),C(T,"CTA Background","colors.ctaBackground","--bd-cta-bg"),C(T,"CTA Text","colors.ctaText","--bd-cta-text"),N=C(T,"Shader Front","colors.shaderFront",null,n=>v("colorFront",n));let y=_("Typography");D(y,"Primary Font","typography.primaryFont","--bd-font-primary"),D(y,"Secondary Font","typography.secondaryFont","--bd-font-secondary"),m(y,"Headline Size","typography.headline.referencePx",32,300,1,"--bd-headline-size"),m(y,"Headline LH","typography.headline.lineHeightPx",24,280,1,"--bd-headline-lh"),m(y,"Sub Size","typography.subHeadline.referencePx",10,48,1,"--bd-sub-size"),m(y,"Sub LH","typography.subHeadline.lineHeightPx",12,80,1,"--bd-sub-lh"),m(y,"Logo Size","typography.logo.referencePx",12,80,1,"--bd-logo-size"),m(y,"Nav Size","typography.navItem.referencePx",10,48,1,"--bd-nav-size");let x=_("Spacing");m(x,"Header Pad X","spacing.headerPaddingX",0,80,1,"--bd-header-px"),m(x,"Header Pad Y","spacing.headerPaddingY",0,60,1,"--bd-header-py"),m(x,"Hero Pad Top","spacing.heroPaddingTop",0,120,1,"--bd-hero-pt"),m(x,"Hero Pad Bottom","spacing.heroPaddingBottom",0,120,1,"--bd-hero-pb"),m(x,"Hero Pad X","spacing.heroPaddingX",0,120,1,"--bd-hero-px"),m(x,"Nav Gap","spacing.navGap",0,100,1,"--bd-nav-gap"),m(x,"CTA Pad X","spacing.ctaPaddingX",0,60,1,"--bd-cta-px"),m(x,"CTA Pad Y","spacing.ctaPaddingY",0,30,1,"--bd-cta-py"),m(x,"CTA Radius","spacing.ctaBorderRadius",0,32,1,"--bd-cta-radius");let E=_("Shader");B(E,"Shape","shader.shape",["warp","simplex","dots","wave","ripple","swirl","sphere"],n=>v("shape",n)),B(E,"Dither Type","shader.type",["random","2x2","4x4","8x8"],n=>v("type",n)),P(E,"Speed","shader.speed",0,2,.01,n=>v("speed",n)),P(E,"Scale","shader.scale",.1,5,.01,n=>v("scale",n)),P(E,"Dither Size","shader.size",.5,10,.1,n=>v("size",n));let I=_("Opacity");P(I,"Nav Links","opacity.navLinks",0,1,.01,n=>k("--bd-nav-opacity",n));let p=document.createElement("button");p.id="bd-tuner-commit",p.textContent="Commit Changes";let M=null;async function R(){let n=JSON.stringify(b,null,2);try{let t=await fetch("/__bluedither/commit",{method:"POST",headers:{"Content-Type":"application/json"},body:n});if(t.ok&&(await t.json()).ok)return"saved"}catch{}try{let t=await fetch("http://localhost:3344/commit",{method:"POST",headers:{"Content-Type":"application/json"},body:n});if(t.ok&&(await t.json()).ok)return"saved"}catch{}if(H)try{let t=await fetch("/commit",{method:"POST",headers:{"Content-Type":"application/json"},body:n});if(t.ok&&(await t.json()).ok)return"saved"}catch{}if(window.showSaveFilePicker)try{M||(M=await window.showSaveFilePicker({suggestedName:"tokens.json",types:[{description:"JSON",accept:{"application/json":[".json"]}}]}));let t=await M.createWritable();return await t.write(n),await t.close(),"saved"}catch(t){if(t.name==="AbortError")return"cancelled";M=null}let r=new Blob([n],{type:"application/json"}),e=URL.createObjectURL(r),i=document.createElement("a");return i.href=e,i.download="tokens.json",i.click(),URL.revokeObjectURL(e),"downloaded"}p.onclick=async()=>{p.textContent="Saving...",p.disabled=!0;try{let n=await R();if(n==="cancelled"){p.textContent="Commit Changes",p.disabled=!1;return}p.textContent=n==="saved"?"Saved!":"Downloaded!",p.classList.add("success"),setTimeout(()=>{p.textContent="Commit Changes",p.classList.remove("success"),p.disabled=!1},2e3)}catch(n){p.textContent="Error: "+n.message,p.disabled=!1,setTimeout(()=>{p.textContent="Commit Changes"},3e3)}},f.appendChild(p)}var A=document.createElement("style");A.textContent=`/* =============================================
+`,f.querySelector("#bd-tuner-close").onclick=()=>f.classList.add("collapsed"),f.querySelector("#bd-tuner-reset").onclick=async()=>{confirm("Reset all tokens to defaults?")&&(Object.assign(b,structuredClone(O)),await R(),location.reload())};let T=_("Colors");C(T,"Background","colors.background","--bd-bg");let N;C(T,"Primary","colors.primary","--bd-primary",n=>{N.setValue(n),S("colorFront",n)}),C(T,"Text","colors.text","--bd-text"),C(T,"CTA Background","colors.ctaBackground","--bd-cta-bg"),C(T,"CTA Text","colors.ctaText","--bd-cta-text"),N=C(T,"Shader Front","colors.shaderFront",null,n=>S("colorFront",n));let y=_("Typography");D(y,"Primary Font","typography.primaryFont","--bd-font-primary"),D(y,"Secondary Font","typography.secondaryFont","--bd-font-secondary"),g(y,"Headline Size","typography.headline.referencePx",32,300,1,"--bd-headline-size"),g(y,"Headline LH","typography.headline.lineHeightPx",24,280,1,"--bd-headline-lh"),g(y,"Sub Size","typography.subHeadline.referencePx",10,48,1,"--bd-sub-size"),g(y,"Sub LH","typography.subHeadline.lineHeightPx",12,80,1,"--bd-sub-lh"),g(y,"Logo Size","typography.logo.referencePx",12,80,1,"--bd-logo-size"),g(y,"Nav Size","typography.navItem.referencePx",10,48,1,"--bd-nav-size");let x=_("Spacing");g(x,"Header Pad X","spacing.headerPaddingX",0,80,1,"--bd-header-px"),g(x,"Header Pad Y","spacing.headerPaddingY",0,60,1,"--bd-header-py"),g(x,"Hero Pad Top","spacing.heroPaddingTop",0,120,1,"--bd-hero-pt"),g(x,"Hero Pad Bottom","spacing.heroPaddingBottom",0,120,1,"--bd-hero-pb"),g(x,"Hero Pad X","spacing.heroPaddingX",0,120,1,"--bd-hero-px"),g(x,"Nav Gap","spacing.navGap",0,100,1,"--bd-nav-gap"),g(x,"CTA Pad X","spacing.ctaPaddingX",0,60,1,"--bd-cta-px"),g(x,"CTA Pad Y","spacing.ctaPaddingY",0,30,1,"--bd-cta-py"),E(x,"CTA Radius","spacing.ctaBorderRadius",0,32,1,n=>v("--bd-cta-radius",`${(n/16).toFixed(4)}rem`));let F=_("Shader");B(F,"Shape","shader.shape",["warp","simplex","dots","wave","ripple","swirl","sphere"],n=>S("shape",n)),B(F,"Dither Type","shader.type",["random","2x2","4x4","8x8"],n=>S("type",n)),E(F,"Speed","shader.speed",0,2,.01,n=>S("speed",n)),E(F,"Scale","shader.scale",.1,5,.01,n=>S("scale",n)),E(F,"Dither Size","shader.size",.5,10,.1,n=>S("size",n));let I=_("Opacity");E(I,"Nav Links","opacity.navLinks",0,1,.01,n=>v("--bd-nav-opacity",n));let p=document.createElement("button");p.id="bd-tuner-commit",p.textContent="Commit Changes";let M=null;async function R(){let n=JSON.stringify(b,null,2);try{let t=await fetch("/__bluedither/commit",{method:"POST",headers:{"Content-Type":"application/json"},body:n});if(t.ok&&(await t.json()).ok)return"saved"}catch{}try{let t=await fetch("http://localhost:3344/commit",{method:"POST",headers:{"Content-Type":"application/json"},body:n});if(t.ok&&(await t.json()).ok)return"saved"}catch{}if(H)try{let t=await fetch("/commit",{method:"POST",headers:{"Content-Type":"application/json"},body:n});if(t.ok&&(await t.json()).ok)return"saved"}catch{}if(window.showSaveFilePicker)try{M||(M=await window.showSaveFilePicker({suggestedName:"tokens.json",types:[{description:"JSON",accept:{"application/json":[".json"]}}]}));let t=await M.createWritable();return await t.write(n),await t.close(),"saved"}catch(t){if(t.name==="AbortError")return"cancelled";M=null}let r=new Blob([n],{type:"application/json"}),e=URL.createObjectURL(r),i=document.createElement("a");return i.href=e,i.download="tokens.json",i.click(),URL.revokeObjectURL(e),"downloaded"}p.onclick=async()=>{p.textContent="Saving...",p.disabled=!0;try{let n=await R();if(n==="cancelled"){p.textContent="Commit Changes",p.disabled=!1;return}p.textContent=n==="saved"?"Saved!":"Downloaded!",p.classList.add("success"),setTimeout(()=>{p.textContent="Commit Changes",p.classList.remove("success"),p.disabled=!1},2e3)}catch(n){p.textContent="Error: "+n.message,p.disabled=!1,setTimeout(()=>{p.textContent="Commit Changes"},3e3)}},f.appendChild(p)}var A=document.createElement("style");A.textContent=`/* =============================================
    BlueDither Fine-Tuner \u2014 Overlay Panel v2
    ============================================= */
 

package/fine-tuner/inject.js

@@ -59,8 +59,8 @@
 
   // Typography
   if (t.typography) {
-    if (t.typography.primaryFont) root.style.setProperty('--bd-font-primary', t.typography.primaryFont);
-    if (t.typography.secondaryFont) root.style.setProperty('--bd-font-secondary', t.typography.secondaryFont);
+    if (t.typography.primaryFont) root.style.setProperty('--bd-font-primary', `"${t.typography.primaryFont}", system-ui, sans-serif`);
+    if (t.typography.secondaryFont) root.style.setProperty('--bd-font-secondary', `"${t.typography.secondaryFont}", system-ui, sans-serif`);
     if (t.typography.headline) {
       root.style.setProperty('--bd-headline-size', pxToClamp(t.typography.headline.referencePx));
       root.style.setProperty('--bd-headline-lh', pxToClamp(t.typography.headline.lineHeightPx));

package/fine-tuner/tuner.js

@@ -379,7 +379,7 @@ addPxField(spacingSection, 'Hero Pad X', 'spacing.heroPaddingX', 0, 120, 1, '--b
 addPxField(spacingSection, 'Nav Gap', 'spacing.navGap', 0, 100, 1, '--bd-nav-gap');
 addPxField(spacingSection, 'CTA Pad X', 'spacing.ctaPaddingX', 0, 60, 1, '--bd-cta-px');
 addPxField(spacingSection, 'CTA Pad Y', 'spacing.ctaPaddingY', 0, 30, 1, '--bd-cta-py');
-addPxField(spacingSection, 'CTA Radius', 'spacing.ctaBorderRadius', 0, 32, 1, '--bd-cta-radius');
+addRange(spacingSection, 'CTA Radius', 'spacing.ctaBorderRadius', 0, 32, 1, (v) => setCSSVar('--bd-cta-radius', `${(v / 16).toFixed(4)}rem`));
 
 // ── Shader ──
 const shaderSection = addSection('Shader');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bluedither",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "A bold, dithered-shader hero theme for Claude Code — skill + fine-tuner",
   "type": "module",
   "bin": {

package/theme/generators/react.md

@@ -130,7 +130,14 @@ Note: The shader uses `ShaderMount` directly from `paper-shaders-bundle.js` —
 The `window.__BD_SHADER__` assignment is **required** — the tuner calls `updateParams()` on it for live shader editing. The ShaderMount instance has `setUniforms()` and `setSpeed()` methods. The tuner's `updateParams` maps token names to uniform names (e.g., `colorFront` → `u_colorFront`).
 
 ### `src/bluedither.css`
-All CSS custom properties and `.bd-*` class rules.
+All CSS custom properties and `.bd-*` class rules. The CSS variable names MUST match exactly:
+
+**Colors:** `--bd-bg`, `--bd-primary`, `--bd-text`, `--bd-cta-bg`, `--bd-cta-text`
+**Typography:** `--bd-font-primary`, `--bd-font-secondary`, `--bd-font-primary-weight`, `--bd-font-secondary-weight`, `--bd-headline-size`, `--bd-headline-lh`, `--bd-sub-size`, `--bd-sub-lh`, `--bd-sub-transform`, `--bd-logo-size`, `--bd-logo-lh`, `--bd-nav-size`, `--bd-nav-lh`, `--bd-cta-size`, `--bd-cta-lh`
+**Spacing:** `--bd-header-px`, `--bd-header-py`, `--bd-hero-pt`, `--bd-hero-pb`, `--bd-hero-px`, `--bd-nav-gap`, `--bd-cta-px`, `--bd-cta-py`, `--bd-cta-radius`
+**Opacity:** `--bd-nav-opacity`
+
+Using different variable names will break live updates from the tuner.
 
 ## Vite Config
 

package/theme/generators/vanilla.md

@@ -28,20 +28,105 @@ Include `<link>` tags for `typography.primaryFont` and `typography.secondaryFont
 ```
 URL-encode the font family name.
 
+## CRITICAL: File Placement Rules
+
+**In project root (or `src/`):**
+- `index.html` — the rendered page
+- `paper-shaders-bundle.js` — copied from `bluedither/shaders/`
+
+**In `public/bluedither/` (for Vite) or alongside `index.html` (for non-Vite):**
+- `bluedither-tuner.js` — tuner panel
+- `bluedither-tuner.css` — tuner styles
+- `bluedither-tuner-inject.js` — tuner loader
+- `tokens.json` — design tokens (read at runtime by tuner)
+- `tokens.defaults.json` — default tokens
+- `dev-middleware.js` — Vite commit endpoint
+
+Copy tuner assets:
+```bash
+mkdir -p public/bluedither
+cp bluedither/bluedither-tuner.js public/bluedither/
+cp bluedither/bluedither-tuner.css public/bluedither/
+cp bluedither/bluedither-tuner-inject.js public/bluedither/
+cp bluedither/tokens.json public/bluedither/
+cp bluedither/tokens.defaults.json public/bluedither/
+cp bluedither/dev-middleware.js public/bluedither/
+```
+
 ## Shader Module
 
-Copy `theme/shaders/bluedither-shader.js` and `theme/shaders/paper-shaders-bundle.js` to the target project.
+Copy `bluedither/shaders/paper-shaders-bundle.js` to the project root (or `src/`).
+
+Import and initialize in a `<script type="module">` at the end of `<body>`. **CRITICAL:** You MUST create a `window.__BD_SHADER__` wrapper with an `updateParams()` method — the tuner calls `updateParams()` but ShaderMount only has `setUniforms()` and `setSpeed()`.
 
-Import and initialize inline. **CRITICAL**: Assign to `window.__BD_SHADER__` so the tuner can update shader params live:
 ```js
-import { ShaderMount, ditheringFragmentShader, getShaderColorFromString } from './paper-shaders-bundle.js';
+import { ShaderMount, ditheringFragmentShader, DitheringShapes, DitheringTypes, getShaderColorFromString } from './paper-shaders-bundle.js';
+
+const parent = document.getElementById('bd-shader-parent');
+const mount = new ShaderMount(parent, ditheringFragmentShader, {
+  u_colorFront: getShaderColorFromString('#005A6A'),
+  u_colorBack: getShaderColorFromString('#00000000'),
+  u_shape: DitheringShapes.ripple,
+  u_type: DitheringTypes['2x2'],
+  u_pxSize: 4.2,
+  u_scale: 1,
+  u_rotation: 180,
+  u_originX: 0.5, u_originY: 0.5,
+  u_worldWidth: 0, u_worldHeight: 0,
+  u_fit: 0, u_offsetX: 0, u_offsetY: 0,
+}, { alpha: true, premultipliedAlpha: false }, 0.41, 0, 2);
+
+// CRITICAL: wrapper with updateParams for the tuner
+window.__BD_SHADER__ = {
+  updateParams(params) {
+    const uniforms = {};
+    if (params.colorFront !== undefined) uniforms.u_colorFront = getShaderColorFromString(params.colorFront);
+    if (params.colorBack !== undefined) uniforms.u_colorBack = getShaderColorFromString(params.colorBack);
+    if (params.shape !== undefined) uniforms.u_shape = DitheringShapes[params.shape] ?? DitheringShapes.warp;
+    if (params.type !== undefined) uniforms.u_type = DitheringTypes[params.type] ?? DitheringTypes['2x2'];
+    if (params.size !== undefined) uniforms.u_pxSize = params.size;
+    if (params.scale !== undefined) uniforms.u_scale = params.scale;
+    if (params.rotation !== undefined) uniforms.u_rotation = parseFloat(params.rotation) || 180;
+    if (Object.keys(uniforms).length > 0) mount.setUniforms(uniforms);
+    if (params.speed !== undefined) mount.setSpeed(params.speed);
+  },
+};
+```
 
-// After creating the mount:
-const mount = new ShaderMount(parent, ditheringFragmentShader, uniforms, opts, speed, 0, 2);
-window.__BD_SHADER__ = mount;
+## Tuner Loading (Dev-Only)
+
+Add this after the shader script to load the tuner in dev mode:
+```html
+<script type="module">
+  if (import.meta.env.DEV) {
+    const s = document.createElement('script');
+    s.src = '/bluedither/bluedither-tuner-inject.js';
+    document.body.appendChild(s);
+  }
+</script>
 ```
 
-Map shader tokens to uniforms as shown in `template/index.html`'s existing `<script type="module">` block.
+For non-Vite vanilla projects (opened via file:// or a simple HTTP server), use localhost detection instead:
+```html
+<script type="module">
+  if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
+    const s = document.createElement('script');
+    s.src = '/bluedither/bluedither-tuner-inject.js';
+    document.body.appendChild(s);
+  }
+</script>
+```
+
+## CSS Custom Properties
+
+The CSS variable names MUST match exactly what the tuner expects:
+
+**Colors:** `--bd-bg`, `--bd-primary`, `--bd-text`, `--bd-cta-bg`, `--bd-cta-text`
+**Typography:** `--bd-font-primary`, `--bd-font-secondary`, `--bd-font-primary-weight`, `--bd-font-secondary-weight`, `--bd-headline-size`, `--bd-headline-lh`, `--bd-sub-size`, `--bd-sub-lh`, `--bd-sub-transform`, `--bd-logo-size`, `--bd-logo-lh`, `--bd-nav-size`, `--bd-nav-lh`, `--bd-cta-size`, `--bd-cta-lh`
+**Spacing:** `--bd-header-px`, `--bd-header-py`, `--bd-hero-pt`, `--bd-hero-pb`, `--bd-hero-px`, `--bd-nav-gap`, `--bd-cta-px`, `--bd-cta-py`, `--bd-cta-radius`
+**Opacity:** `--bd-nav-opacity`
+
+Using different variable names will break live updates from the tuner.
 
 ## File Output
 

package/theme/generators/vue.md

@@ -2,6 +2,40 @@
 
 When the target project uses **Vue** (detected via `vue` in package.json dependencies), follow these patterns.
 
+## CRITICAL: File Placement Rules
+
+**In `src/` (importable source files):**
+- All `.vue` component files
+- `bluedither.css` — CSS custom properties + rules
+- `paper-shaders-bundle.js` — copied from `bluedither/shaders/`
+- Any other JS modules that are `import`-ed
+
+**In `public/bluedither/` (static assets loaded at runtime):**
+- `bluedither-tuner.js` — tuner panel
+- `bluedither-tuner.css` — tuner styles
+- `bluedither-tuner-inject.js` — tuner loader
+- `tokens.json` — design tokens (read at runtime by tuner)
+- `tokens.defaults.json` — default tokens
+- `dev-middleware.js` — Vite commit endpoint
+
+**NEVER import JS files from `public/` — Vite will error.** Shader files MUST be in `src/`.
+
+Copy shader files during generation:
+```bash
+cp bluedither/shaders/paper-shaders-bundle.js src/paper-shaders-bundle.js
+```
+
+Copy tuner assets to public:
+```bash
+mkdir -p public/bluedither
+cp bluedither/bluedither-tuner.js public/bluedither/
+cp bluedither/bluedither-tuner.css public/bluedither/
+cp bluedither/bluedither-tuner-inject.js public/bluedither/
+cp bluedither/tokens.json public/bluedither/
+cp bluedither/tokens.defaults.json public/bluedither/
+cp bluedither/dev-middleware.js public/bluedither/
+```
+
 ## Detection
 
 Vue is detected when `package.json` contains `vue` in `dependencies` or `devDependencies`. Also check for:
@@ -10,14 +44,26 @@ Vue is detected when `package.json` contains `vue` in `dependencies` or `devDepe
 
 ## Component Structure
 
-Generate Vue Single File Components (SFCs) using `<script setup>` syntax (Vue 3):
+Generate Vue Single File Components (SFCs) using `<script setup>` syntax (Vue 3).
+
+### `src/App.vue` (or modify existing)
+Root component wrapping the full layout. Loads tuner in dev mode.
 
-### `BlueDitherTheme.vue`
-Root component:
 ```vue
 <script setup>
-import BlueDitherHeader from './BlueDitherHeader.vue';
-import BlueDitherHero from './BlueDitherHero.vue';
+import { onMounted } from 'vue';
+import BlueDitherHero from './components/BlueDitherHero.vue';
+import BlueDitherHeader from './components/BlueDitherHeader.vue';
+import './bluedither.css';
+
+// Load tuner in dev mode only
+onMounted(() => {
+  if (import.meta.env.DEV) {
+    const s = document.createElement('script');
+    s.src = '/bluedither/bluedither-tuner-inject.js';
+    document.body.appendChild(s);
+  }
+});
 </script>
 
 <template>
@@ -26,17 +72,16 @@ import BlueDitherHero from './BlueDitherHero.vue';
     <BlueDitherHeader />
   </div>
 </template>
-
-<style src="./bluedither.css"></style>
 ```
 
-### `BlueDitherHeader.vue`
+### `src/components/BlueDitherHeader.vue`
 Navbar with logo, nav items, CTA:
 ```vue
 <script setup>
+// Content from tokens.json content section
+const companyName = 'COMPANYLOGO';
 const navItems = ['HOME', 'FEATURES', 'FAQ', 'CONTACT'];
 const ctaText = 'SIGN UP';
-const companyName = 'COMPANYLOGO';
 </script>
 
 <template>
@@ -54,25 +99,100 @@ const companyName = 'COMPANYLOGO';
 </template>
 ```
 
-### `BlueDitherHero.vue`
-Hero section with shader initialization using `onMounted`:
+### `src/components/BlueDitherHero.vue`
+Hero section with shader initialization. **CRITICAL:** The `window.__BD_SHADER__` wrapper is required — the tuner calls `updateParams()` on it, but ShaderMount only has `setUniforms()` and `setSpeed()`. You MUST create the translation wrapper.
+
 ```vue
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
 
+// Content from tokens.json
+const headline = 'AN ABSOLUTELY\nFANTASTIC HEADLINE.';
+const subHeadline = "Here's a fantastic sub-headline that is sure to impressive your friends.";
+
+// Shader params from tokens.json
+const SHADER_PARAMS = {
+  colorFront: '#005A6A',
+  colorBack: '#00000000',
+  shape: 'ripple',
+  type: '2x2',
+  size: 4.2,
+  scale: 1,
+  speed: 0.41,
+  rotation: 180,
+};
+
 const shaderParent = ref(null);
 let shaderMount = null;
 
 onMounted(async () => {
-  const { ShaderMount, ditheringFragmentShader, getShaderColorFromString } = await import('./paper-shaders-bundle.js');
-  shaderMount = new ShaderMount(shaderParent.value, ditheringFragmentShader, uniforms, opts, speed, 0, 2);
-  window.__BD_SHADER__ = shaderMount;
+  if (!shaderParent.value) return;
+  const {
+    ShaderMount,
+    ditheringFragmentShader,
+    DitheringShapes,
+    DitheringTypes,
+    getShaderColorFromString,
+  } = await import('../paper-shaders-bundle.js');
+
+  shaderMount = new ShaderMount(
+    shaderParent.value,
+    ditheringFragmentShader,
+    {
+      u_colorFront: getShaderColorFromString(SHADER_PARAMS.colorFront),
+      u_colorBack: getShaderColorFromString(SHADER_PARAMS.colorBack),
+      u_shape: DitheringShapes[SHADER_PARAMS.shape] ?? DitheringShapes.warp,
+      u_type: DitheringTypes[SHADER_PARAMS.type] ?? DitheringTypes['2x2'],
+      u_pxSize: SHADER_PARAMS.size,
+      u_scale: SHADER_PARAMS.scale,
+      u_rotation: SHADER_PARAMS.rotation,
+      u_originX: 0.5,
+      u_originY: 0.5,
+      u_worldWidth: 0,
+      u_worldHeight: 0,
+      u_fit: 0,
+      u_offsetX: 0,
+      u_offsetY: 0,
+    },
+    { alpha: true, premultipliedAlpha: false },
+    SHADER_PARAMS.speed,
+    0,
+    2
+  );
+
+  // CRITICAL: expose wrapper with updateParams for the tuner
+  // ShaderMount has setUniforms() and setSpeed() — NOT updateParams()
+  // The tuner calls updateParams() with token names, this translates to uniform names
+  window.__BD_SHADER__ = {
+    updateParams(params) {
+      const uniforms = {};
+      if (params.colorFront !== undefined)
+        uniforms.u_colorFront = getShaderColorFromString(params.colorFront);
+      if (params.colorBack !== undefined)
+        uniforms.u_colorBack = getShaderColorFromString(params.colorBack);
+      if (params.shape !== undefined)
+        uniforms.u_shape = DitheringShapes[params.shape] ?? DitheringShapes.warp;
+      if (params.type !== undefined)
+        uniforms.u_type = DitheringTypes[params.type] ?? DitheringTypes['2x2'];
+      if (params.size !== undefined) uniforms.u_pxSize = params.size;
+      if (params.scale !== undefined) uniforms.u_scale = params.scale;
+      if (params.rotation !== undefined)
+        uniforms.u_rotation = parseFloat(params.rotation) || 180;
+      if (Object.keys(uniforms).length > 0) shaderMount.setUniforms(uniforms);
+      if (params.speed !== undefined) shaderMount.setSpeed(params.speed);
+    },
+    dispose() {
+      shaderMount?.dispose();
+    },
+  };
 });
 
 onUnmounted(() => {
-  shaderMount?.dispose();
+  window.__BD_SHADER__?.dispose();
   window.__BD_SHADER__ = null;
 });
+
+const headlineLines = headline.split('\n');
 </script>
 
 <template>
@@ -80,14 +200,40 @@ onUnmounted(() => {
     <div class="bd-hero-inner">
       <div ref="shaderParent" class="bd-shader-layer"></div>
       <div class="bd-hero-content">
-        <div class="bd-headline">...</div>
-        <div class="bd-subheadline">...</div>
+        <div class="bd-headline">
+          <template v-for="(line, i) in headlineLines" :key="i">
+            <br v-if="i > 0" />{{ line }}
+          </template>
+        </div>
+        <div class="bd-subheadline">{{ subHeadline }}</div>
       </div>
     </div>
   </div>
 </template>
 ```
 
+Note: The shader uses `ShaderMount` directly from `paper-shaders-bundle.js` — do NOT create a separate shader wrapper module. Import `ShaderMount`, `ditheringFragmentShader`, `DitheringShapes`, `DitheringTypes`, and `getShaderColorFromString` directly.
+
+The `window.__BD_SHADER__` wrapper is **required** — the tuner calls `updateParams()` on it for live shader editing. The ShaderMount instance has `setUniforms()` and `setSpeed()` methods. The wrapper translates token names to uniform names (e.g., `colorFront` → `u_colorFront`).
+
+### `src/bluedither.css`
+All CSS custom properties and `.bd-*` class rules. See `bluedither/template/index.html` for the exact variable names and class styles. The CSS variable names MUST match exactly:
+
+**Colors:** `--bd-bg`, `--bd-primary`, `--bd-text`, `--bd-cta-bg`, `--bd-cta-text`
+**Typography:** `--bd-font-primary`, `--bd-font-secondary`, `--bd-font-primary-weight`, `--bd-font-secondary-weight`, `--bd-headline-size`, `--bd-headline-lh`, `--bd-sub-size`, `--bd-sub-lh`, `--bd-sub-transform`, `--bd-logo-size`, `--bd-logo-lh`, `--bd-nav-size`, `--bd-nav-lh`, `--bd-cta-size`, `--bd-cta-lh`
+**Spacing:** `--bd-header-px`, `--bd-header-py`, `--bd-hero-pt`, `--bd-hero-pb`, `--bd-hero-px`, `--bd-nav-gap`, `--bd-cta-px`, `--bd-cta-py`, `--bd-cta-radius`
+**Opacity:** `--bd-nav-opacity`
+
+Using different variable names will break live updates from the tuner.
+
+## Vite Config
+
+The `npx bluedither install` command auto-wires the Vite plugin. If it wasn't auto-wired, add manually:
+```js
+import { bluedither } from './bluedither/dev-middleware.js'
+export default defineConfig({ plugins: [vue(), bluedither()] })
+```
+
 ## TypeScript
 
 If TypeScript is detected, add `lang="ts"` to `<script setup lang="ts">`. Type the template ref:
@@ -95,12 +241,26 @@ If TypeScript is detected, add `lang="ts"` to `<script setup lang="ts">`. Type t
 const shaderParent = ref<HTMLDivElement | null>(null);
 ```
 
+## Nuxt
+
+If Nuxt is detected:
+- Place components in `components/` directory (auto-imported)
+- Use `useHead()` for font links
+- Use `process.client` for shader initialization
+- Use `process.dev` for tuner loading
+
+## Content Handling
+
+- Inject content tokens directly as Vue template text
+- Headline newlines: split and use `v-for` with `<br>` (see example above)
+- Nav items: `v-for="item in navItems"`
+
 ## File Output
 
 | File | Contents |
 |------|----------|
-| `BlueDitherTheme.vue` | Root layout SFC |
-| `BlueDitherHeader.vue` | Navbar SFC |
-| `BlueDitherHero.vue` | Hero + shader SFC |
-| `bluedither.css` | CSS custom properties + rules |
-| `paper-shaders-bundle.js` | Shader library (copied) |
+| `src/App.vue` | Root layout SFC (or modify existing) |
+| `src/components/BlueDitherHeader.vue` | Navbar SFC |
+| `src/components/BlueDitherHero.vue` | Hero + shader SFC |
+| `src/bluedither.css` | CSS custom properties + rules |
+| `src/paper-shaders-bundle.js` | Shader library (copied from bluedither/shaders/) |