bluedither 1.0.12 → 1.0.14

package/cli/commands/install.js

@@ -103,6 +103,10 @@ export default async function install(args) {
   if (existsSync(injectPath)) {
     filesToCopy.push(['fine-tuner/inject.js', 'bluedither-tuner-inject.js']);
   }
+  const middlewarePath = resolve(BLUEDITHER_ROOT, 'fine-tuner', 'dev-middleware.js');
+  if (existsSync(middlewarePath)) {
+    filesToCopy.push(['fine-tuner/dev-middleware.js', 'dev-middleware.js']);
+  }
 
   let copied = 0;
   for (const [src, dest] of filesToCopy) {
@@ -203,6 +207,7 @@ async function installFromRegistry(slug, targetDir) {
     ['dist/bluedither-tuner.js', 'bluedither-tuner.js'],
     ['fine-tuner/tuner.css', 'bluedither-tuner.css'],
     ['fine-tuner/inject.js', 'bluedither-tuner-inject.js'],
+    ['fine-tuner/dev-middleware.js', 'dev-middleware.js'],
   ];
   for (const [src, dest] of tunerFiles) {
     const srcPath = resolve(BLUEDITHER_ROOT, src);

package/dist/bluedither-tuner.js

@@ -1,4 +1,4 @@
-(()=>{var u=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||"{}")),N=!!(window.__BD_TOKENS__&&window.__BD_DEFAULTS__)||!!window.__BD_TUNER_SERVER_MODE__,P=["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"],H=["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"],A=[...new Set([...P,...H])].sort();function v(n,t,e){let a=t.split("."),l=n;for(let s=0;s<a.length-1;s++)l=l[a[s]];l[a[a.length-1]]=e}function E(n,t){return t.split(".").reduce((e,a)=>e?.[a],n)}function k(n,t){document.documentElement.style.setProperty(n,t)}function S(n,t){let e=window.__BD_SHADER__;e&&e.updateParams({[n]:t})}function j(n){let t=u.layout.designWidth,e=n/16,a=n/t*100;return`clamp(${(e*.55).toFixed(4)}rem, ${a.toFixed(4)}vw, ${e.toFixed(4)}rem)`}function D(n){let t="bd-gf-"+n.replace(/\s+/g,"-").toLowerCase();if(document.getElementById(t))return;let e=document.createElement("link");e.id=t,e.rel="stylesheet",e.href=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(n)}:wght@400;700&display=swap`,document.head.appendChild(e)}var x=document.createElement("div");x.id="bd-tuner";var M=document.createElement("button");M.id="bd-tuner-toggle";M.textContent="Tuner";M.onclick=()=>x.classList.remove("collapsed");document.body.appendChild(x);document.body.appendChild(M);x.innerHTML=`
+(()=>{var p=structuredClone(window.__BD_TOKENS__||JSON.parse(document.querySelector('script[type="application/json"][data-bluedither-tokens]')?.textContent||"{}")),N=structuredClone(window.__BD_DEFAULTS__||JSON.parse(document.querySelector('script[type="application/json"][data-bluedither-defaults]')?.textContent||"{}")),j=!!(window.__BD_TOKENS__&&window.__BD_DEFAULTS__)||!!window.__BD_TUNER_SERVER_MODE__,$=["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"],H=["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"],A=[...new Set([...$,...H])].sort();function v(n,t,e){let i=t.split("."),o=n;for(let d=0;d<i.length-1;d++)o=o[i[d]];o[i[i.length-1]]=e}function E(n,t){return t.split(".").reduce((e,i)=>e?.[i],n)}function k(n,t){document.documentElement.style.setProperty(n,t)}function S(n,t){let e=window.__BD_SHADER__;e&&e.updateParams({[n]:t})}function U(n){let t=p.layout.designWidth,e=n/16,i=n/t*100;return`clamp(${(e*.55).toFixed(4)}rem, ${i.toFixed(4)}vw, ${e.toFixed(4)}rem)`}function R(n){let t="bd-gf-"+n.replace(/\s+/g,"-").toLowerCase();if(document.getElementById(t))return;let e=document.createElement("link");e.id=t,e.rel="stylesheet",e.href=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(n)}:wght@400;700&display=swap`,document.head.appendChild(e)}var x=document.createElement("div");x.id="bd-tuner";var M=document.createElement("button");M.id="bd-tuner-toggle";M.textContent="Tuner";M.onclick=()=>x.classList.remove("collapsed");document.body.appendChild(x);document.body.appendChild(M);x.innerHTML=`
   <div class="bd-tuner-title">
     <span>BlueDither Tuner</span>
     <div style="display:flex;gap:8px;align-items:center;">
@@ -6,37 +6,37 @@
       <button id="bd-tuner-close" title="Close">&times;</button>
     </div>
   </div>
-`;x.querySelector("#bd-tuner-close").onclick=()=>x.classList.add("collapsed");x.querySelector("#bd-tuner-reset").onclick=()=>{confirm("Reset all tokens to defaults?")&&(Object.assign(u,structuredClone(O)),window.__BD_SERVER_MODE__?fetch("/commit",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(u,null,2)}).then(()=>location.reload()):location.reload())};function T(n){let t=document.createElement("div");return t.className="bd-tuner-section",t.innerHTML=`<div class="bd-tuner-section-label">${n}</div>`,x.appendChild(t),t}function C(n,t,e,a,l){let s=E(u,e)||"#000000",r=document.createElement("div");r.className="bd-tuner-row",r.innerHTML=`
+`;x.querySelector("#bd-tuner-close").onclick=()=>x.classList.add("collapsed");x.querySelector("#bd-tuner-reset").onclick=async()=>{confirm("Reset all tokens to defaults?")&&(Object.assign(p,structuredClone(N)),await I(),location.reload())};function T(n){let t=document.createElement("div");return t.className="bd-tuner-section",t.innerHTML=`<div class="bd-tuner-section-label">${n}</div>`,x.appendChild(t),t}function C(n,t,e,i,o){let d=E(p,e)||"#000000",a=document.createElement("div");a.className="bd-tuner-row",a.innerHTML=`
     <span class="bd-tuner-label">${t}</span>
-    <span class="bd-tuner-input"><input type="color" value="${s.substring(0,7)}"></span>
-    <span class="bd-tuner-value">${s.substring(0,7)}</span>
-  `;let i=r.querySelector("input"),d=r.querySelector(".bd-tuner-value");return i.addEventListener("input",c=>{let m=c.target.value;v(u,e,m),d.textContent=m,a&&k(a,m),l&&l(m)}),n.appendChild(r),{setValue(c){v(u,e,c),i.value=c.substring(0,7),d.textContent=c.substring(0,7),a&&k(a,c)}}}function g(n,t,e,a,l,s,r){let i=E(u,e),d=document.createElement("div");d.className="bd-tuner-row bd-tuner-row-stacked",d.innerHTML=`
+    <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 m=l.target.value;v(p,e,m),c.textContent=m,i&&k(i,m),o&&o(m)}),n.appendChild(a),{setValue(l){v(p,e,l),s.value=l.substring(0,7),c.textContent=l.substring(0,7),i&&k(i,l)}}}function f(n,t,e,i,o,d,a){let s=E(p,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">${t}</span>
       <div class="bd-tuner-px-input-wrap">
-        <input type="number" class="bd-tuner-px-num" value="${i}" min="${a}" max="${l}" step="${s}">
+        <input type="number" class="bd-tuner-px-num" value="${s}" min="${i}" max="${o}" step="${d}">
         <span class="bd-tuner-unit">px</span>
       </div>
     </div>
-    <input type="range" class="bd-tuner-slider" min="${a}" max="${l}" step="${s}" value="${i}">
-  `;let c=d.querySelector(".bd-tuner-px-num"),m=d.querySelector(".bd-tuner-slider");function b(o){if(o=Math.max(a,Math.min(l,o)),v(u,e,o),c.value=o,m.value=o,r){let w=j(o);(Array.isArray(r)?r:[r]).forEach(f=>k(f,w))}}c.addEventListener("input",o=>b(parseFloat(o.target.value)||0)),m.addEventListener("input",o=>b(parseFloat(o.target.value))),c.addEventListener("keydown",o=>{if(o.key==="ArrowUp"||o.key==="ArrowDown"){o.preventDefault();let w=o.shiftKey?10:1,f=(o.key==="ArrowUp"?s:-s)*w;b(parseFloat(c.value)+f)}}),n.appendChild(d)}function F(n,t,e,a,l,s,r){let i=E(u,e),d=document.createElement("div");d.className="bd-tuner-row bd-tuner-row-stacked",d.innerHTML=`
+    <input type="range" class="bd-tuner-slider" min="${i}" max="${o}" step="${d}" value="${s}">
+  `;let l=c.querySelector(".bd-tuner-px-num"),m=c.querySelector(".bd-tuner-slider");function u(r){if(r=Math.max(i,Math.min(o,r)),v(p,e,r),l.value=r,m.value=r,a){let w=U(r);(Array.isArray(a)?a:[a]).forEach(g=>k(g,w))}}l.addEventListener("input",r=>u(parseFloat(r.target.value)||0)),m.addEventListener("input",r=>u(parseFloat(r.target.value))),l.addEventListener("keydown",r=>{if(r.key==="ArrowUp"||r.key==="ArrowDown"){r.preventDefault();let w=r.shiftKey?10:1,g=(r.key==="ArrowUp"?d:-d)*w;u(parseFloat(l.value)+g)}}),n.appendChild(c)}function P(n,t,e,i,o,d,a){let s=E(p,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">${t}</span>
-      <span class="bd-tuner-value">${i}</span>
+      <span class="bd-tuner-value">${s}</span>
     </div>
-    <input type="range" class="bd-tuner-slider" min="${a}" max="${l}" step="${s}" value="${i}">
-  `;let c=d.querySelector(".bd-tuner-slider"),m=d.querySelector(".bd-tuner-value");c.addEventListener("input",b=>{let o=parseFloat(b.target.value);v(u,e,o),m.textContent=o,r&&r(o)}),n.appendChild(d)}function $(n,t,e,a){let l=E(u,e),s=document.createElement("div");s.className="bd-tuner-row",s.innerHTML=`
+    <input type="range" class="bd-tuner-slider" min="${i}" max="${o}" step="${d}" value="${s}">
+  `;let l=c.querySelector(".bd-tuner-slider"),m=c.querySelector(".bd-tuner-value");l.addEventListener("input",u=>{let r=parseFloat(u.target.value);v(p,e,r),m.textContent=r,a&&a(r)}),n.appendChild(c)}function B(n,t,e,i){let o=E(p,e),d=document.createElement("div");d.className="bd-tuner-row",d.innerHTML=`
     <span class="bd-tuner-label">${t}</span>
     <span class="bd-tuner-input bd-tuner-font-input">
-      <input type="text" class="bd-tuner-font-search" value="${l}" placeholder="Search fonts...">
+      <input type="text" class="bd-tuner-font-search" value="${o}" placeholder="Search fonts...">
       <div class="bd-tuner-font-dropdown"></div>
     </span>
-  `;let r=s.querySelector(".bd-tuner-font-search"),i=s.querySelector(".bd-tuner-font-dropdown"),d=m=>P.some(b=>b.toLowerCase()===m.toLowerCase());function c(m=""){let b=A.filter(o=>o.toLowerCase().includes(m.toLowerCase())).slice(0,20);i.innerHTML=b.map(o=>{let w=d(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}${w}</div>`}).join(""),b.filter(o=>!d(o)).forEach(D),i.querySelectorAll(".bd-tuner-font-option").forEach(o=>{o.addEventListener("mousedown",w=>{w.preventDefault();let f=o.dataset.font;r.value=f,v(u,e,f),d(f)||D(f),k(a,`"${f}", system-ui, sans-serif`),i.classList.remove("open")})})}r.addEventListener("focus",()=>{c(r.value),i.classList.add("open")}),r.addEventListener("input",()=>{c(r.value),i.classList.add("open")}),r.addEventListener("blur",()=>{setTimeout(()=>i.classList.remove("open"),150)}),r.addEventListener("keydown",m=>{if(m.key==="Enter"){let b=r.value.trim();b&&(v(u,e,b),d(b)||D(b),k(a,`"${b}", system-ui, sans-serif`),i.classList.remove("open"),r.blur())}}),n.appendChild(s)}function R(n,t,e,a,l){let s=E(u,e),r=document.createElement("div");r.className="bd-tuner-row bd-tuner-row-stacked",r.innerHTML=`
+  `;let a=d.querySelector(".bd-tuner-font-search"),s=d.querySelector(".bd-tuner-font-dropdown"),c=m=>$.some(u=>u.toLowerCase()===m.toLowerCase());function l(m=""){let u=A.filter(r=>r.toLowerCase().includes(m.toLowerCase())).slice(0,20);s.innerHTML=u.map(r=>{let w=c(r)?' <span style="opacity:0.4;font-size:9px">SYSTEM</span>':"";return`<div class="bd-tuner-font-option" data-font="${r}" style="font-family:'${r}',system-ui">${r}${w}</div>`}).join(""),u.filter(r=>!c(r)).forEach(R),s.querySelectorAll(".bd-tuner-font-option").forEach(r=>{r.addEventListener("mousedown",w=>{w.preventDefault();let g=r.dataset.font;a.value=g,v(p,e,g),c(g)||R(g),k(i,`"${g}", 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&&(v(p,e,u),c(u)||R(u),k(i,`"${u}", system-ui, sans-serif`),s.classList.remove("open"),a.blur())}}),n.appendChild(d)}function D(n,t,e,i,o){let d=E(p,e),a=document.createElement("div");a.className="bd-tuner-row bd-tuner-row-stacked",a.innerHTML=`
     <span class="bd-tuner-label">${t}</span>
     <div class="bd-tuner-segmented">
-      ${a.map(i=>`<button class="bd-tuner-seg-btn${i===s?" active":""}" data-val="${i}">${i}</button>`).join("")}
+      ${i.map(s=>`<button class="bd-tuner-seg-btn${s===d?" active":""}" data-val="${s}">${s}</button>`).join("")}
     </div>
-  `,r.querySelectorAll(".bd-tuner-seg-btn").forEach(i=>{i.addEventListener("click",()=>{r.querySelectorAll(".bd-tuner-seg-btn").forEach(c=>c.classList.remove("active")),i.classList.add("active");let d=i.dataset.val;v(u,e,d),l&&l(d)})}),n.appendChild(r)}var _=T("Colors");C(_,"Background","colors.background","--bd-color-background");var B;C(_,"Primary","colors.primary","--bd-color-primary",n=>{B.setValue(n),S("colorFront",n)});C(_,"Text","colors.text","--bd-color-text");C(_,"CTA Background","colors.ctaBackground","--bd-color-cta-bg");C(_,"CTA Text","colors.ctaText","--bd-color-cta-text");B=C(_,"Shader Front","colors.shaderFront",null,n=>S("colorFront",n));var y=T("Typography");$(y,"Primary Font","typography.primaryFont","--bd-font-primary");$(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-subheadline-size");g(y,"Sub LH","typography.subHeadline.lineHeightPx",12,80,1,"--bd-subheadline-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");var h=T("Spacing");g(h,"Header Pad X","spacing.headerPaddingX",0,80,1,"--bd-header-px");g(h,"Header Pad Y","spacing.headerPaddingY",0,60,1,"--bd-header-py");g(h,"Hero Pad Top","spacing.heroPaddingTop",0,120,1,"--bd-hero-pt");g(h,"Hero Pad Bottom","spacing.heroPaddingBottom",0,120,1,"--bd-hero-pb");g(h,"Hero Pad X","spacing.heroPaddingX",0,120,1,"--bd-hero-px");g(h,"Nav Gap","spacing.navGap",0,100,1,"--bd-nav-gap");g(h,"CTA Pad X","spacing.ctaPaddingX",0,60,1,"--bd-cta-px");g(h,"CTA Pad Y","spacing.ctaPaddingY",0,30,1,"--bd-cta-py");g(h,"CTA Radius","spacing.ctaBorderRadius",0,32,1,"--bd-cta-radius");var L=T("Shader");R(L,"Shape","shader.shape",["warp","simplex","dots","wave","ripple","swirl","sphere"],n=>S("shape",n));R(L,"Dither Type","shader.type",["random","2x2","4x4","8x8"],n=>S("type",n));F(L,"Speed","shader.speed",0,2,.01,n=>S("speed",n));F(L,"Scale","shader.scale",.1,5,.01,n=>S("scale",n));F(L,"Dither Size","shader.size",.5,10,.1,n=>S("size",n));var q=T("Opacity");F(q,"Nav Links","opacity.navLinks",0,1,.01,n=>k("--bd-nav-opacity",n));var p=document.createElement("button");p.id="bd-tuner-commit";p.textContent="Commit Changes";var I=N?"Commit Changes":"Export Tokens";p.textContent=I;p.onclick=async()=>{p.textContent="Exporting...",p.disabled=!0;try{if(window.__BD_SERVER_MODE__){let t=await(await fetch("/commit",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(u,null,2)})).json();if(!t.ok)throw new Error(t.error);p.textContent="Committed!"}else{let n=new Blob([JSON.stringify(u,null,2)],{type:"application/json"}),t=URL.createObjectURL(n),e=document.createElement("a");e.href=t,e.download="tokens.json",e.click(),URL.revokeObjectURL(t),p.textContent="Downloaded!"}p.classList.add("success"),setTimeout(()=>{p.textContent=window.__BD_SERVER_MODE__?"Commit Changes":"Export Tokens",p.classList.remove("success"),p.disabled=!1},2e3)}catch(n){p.textContent="Error: "+n.message,p.disabled=!1,setTimeout(()=>{p.textContent=window.__BD_SERVER_MODE__?"Commit Changes":"Export Tokens"},3e3)}};window.__BD_SERVER_MODE__||(p.textContent="Export Tokens");x.appendChild(p);var z=document.createElement("style");z.textContent=`/* =============================================
+  `,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;v(p,e,c),o&&o(c)})}),n.appendChild(a)}var _=T("Colors");C(_,"Background","colors.background","--bd-color-background");var O;C(_,"Primary","colors.primary","--bd-color-primary",n=>{O.setValue(n),S("colorFront",n)});C(_,"Text","colors.text","--bd-color-text");C(_,"CTA Background","colors.ctaBackground","--bd-color-cta-bg");C(_,"CTA Text","colors.ctaText","--bd-color-cta-text");O=C(_,"Shader Front","colors.shaderFront",null,n=>S("colorFront",n));var y=T("Typography");B(y,"Primary Font","typography.primaryFont","--bd-font-primary");B(y,"Secondary Font","typography.secondaryFont","--bd-font-secondary");f(y,"Headline Size","typography.headline.referencePx",32,300,1,"--bd-headline-size");f(y,"Headline LH","typography.headline.lineHeightPx",24,280,1,"--bd-headline-lh");f(y,"Sub Size","typography.subHeadline.referencePx",10,48,1,"--bd-subheadline-size");f(y,"Sub LH","typography.subHeadline.lineHeightPx",12,80,1,"--bd-subheadline-lh");f(y,"Logo Size","typography.logo.referencePx",12,80,1,"--bd-logo-size");f(y,"Nav Size","typography.navItem.referencePx",10,48,1,"--bd-nav-size");var h=T("Spacing");f(h,"Header Pad X","spacing.headerPaddingX",0,80,1,"--bd-header-px");f(h,"Header Pad Y","spacing.headerPaddingY",0,60,1,"--bd-header-py");f(h,"Hero Pad Top","spacing.heroPaddingTop",0,120,1,"--bd-hero-pt");f(h,"Hero Pad Bottom","spacing.heroPaddingBottom",0,120,1,"--bd-hero-pb");f(h,"Hero Pad X","spacing.heroPaddingX",0,120,1,"--bd-hero-px");f(h,"Nav Gap","spacing.navGap",0,100,1,"--bd-nav-gap");f(h,"CTA Pad X","spacing.ctaPaddingX",0,60,1,"--bd-cta-px");f(h,"CTA Pad Y","spacing.ctaPaddingY",0,30,1,"--bd-cta-py");f(h,"CTA Radius","spacing.ctaBorderRadius",0,32,1,"--bd-cta-radius");var L=T("Shader");D(L,"Shape","shader.shape",["warp","simplex","dots","wave","ripple","swirl","sphere"],n=>S("shape",n));D(L,"Dither Type","shader.type",["random","2x2","4x4","8x8"],n=>S("type",n));P(L,"Speed","shader.speed",0,2,.01,n=>S("speed",n));P(L,"Scale","shader.scale",.1,5,.01,n=>S("scale",n));P(L,"Dither Size","shader.size",.5,10,.1,n=>S("size",n));var q=T("Opacity");P(q,"Nav Links","opacity.navLinks",0,1,.01,n=>k("--bd-nav-opacity",n));var b=document.createElement("button");b.id="bd-tuner-commit";b.textContent="Commit Changes";var F=null;async function I(){let n=JSON.stringify(p,null,2);try{let o=await fetch("/__bluedither/commit",{method:"POST",headers:{"Content-Type":"application/json"},body:n});if(o.ok&&(await o.json()).ok)return"saved"}catch{}try{let o=await fetch("http://localhost:3344/commit",{method:"POST",headers:{"Content-Type":"application/json"},body:n});if(o.ok&&(await o.json()).ok)return"saved"}catch{}if(j)try{let o=await fetch("/commit",{method:"POST",headers:{"Content-Type":"application/json"},body:n});if(o.ok&&(await o.json()).ok)return"saved"}catch{}if(window.showSaveFilePicker)try{F||(F=await window.showSaveFilePicker({suggestedName:"tokens.json",types:[{description:"JSON",accept:{"application/json":[".json"]}}]}));let o=await F.createWritable();return await o.write(n),await o.close(),"saved"}catch(o){if(o.name==="AbortError")return"cancelled";F=null}let t=new Blob([n],{type:"application/json"}),e=URL.createObjectURL(t),i=document.createElement("a");return i.href=e,i.download="tokens.json",i.click(),URL.revokeObjectURL(e),"downloaded"}b.onclick=async()=>{b.textContent="Exporting...",b.disabled=!0;try{if(window.__BD_SERVER_MODE__){let t=await(await fetch("/commit",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(p,null,2)})).json();if(!t.ok)throw new Error(t.error);b.textContent="Committed!"}else{let n=new Blob([JSON.stringify(p,null,2)],{type:"application/json"}),t=URL.createObjectURL(n),e=document.createElement("a");e.href=t,e.download="tokens.json",e.click(),URL.revokeObjectURL(t),b.textContent="Downloaded!"}b.classList.add("success"),setTimeout(()=>{b.textContent=window.__BD_SERVER_MODE__?"Commit Changes":"Export Tokens",b.classList.remove("success"),b.disabled=!1},2e3)}catch(n){b.textContent="Error: "+n.message,b.disabled=!1,setTimeout(()=>{b.textContent=window.__BD_SERVER_MODE__?"Commit Changes":"Export Tokens"},3e3)}};window.__BD_SERVER_MODE__||(b.textContent="Export Tokens");x.appendChild(b);var z=document.createElement("style");z.textContent=`/* =============================================
    BlueDither Fine-Tuner \u2014 Overlay Panel v2
    ============================================= */
 

package/fine-tuner/dev-middleware.js

@@ -0,0 +1,110 @@
+/**
+ * BlueDither Dev Middleware
+ *
+ * Universal middleware that handles POST /___bluedither/commit
+ * to write tokens.json to disk. Works with any Node.js dev server.
+ *
+ * Exports:
+ *   bluedither()           — Vite plugin
+ *   blueditherMiddleware() — Express/Connect middleware
+ *   blueditherHandler()    — Raw Node http handler (for custom servers)
+ *
+ * The grab-theme command auto-wires the right export for the detected framework.
+ */
+
+import { writeFileSync, existsSync } from 'fs';
+import { resolve, dirname } from 'path';
+
+const ENDPOINT = '/__bluedither/commit';
+
+function findTokensPath() {
+  // Search from cwd for bluedither/tokens.json
+  const cwd = process.cwd();
+  const paths = [
+    resolve(cwd, 'bluedither', 'tokens.json'),
+    resolve(cwd, 'public', 'bluedither', 'tokens.json'),
+    resolve(cwd, 'theme', 'tokens.json'),
+  ];
+  for (const p of paths) {
+    if (existsSync(p)) return p;
+  }
+  // Default to bluedither/tokens.json even if it doesn't exist yet
+  return resolve(cwd, 'bluedither', 'tokens.json');
+}
+
+function handleRequest(req, res) {
+  // CORS preflight
+  if (req.method === 'OPTIONS' && req.url === ENDPOINT) {
+    res.writeHead(204, {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'POST, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type',
+    });
+    res.end();
+    return true;
+  }
+
+  if (req.method === 'POST' && req.url === ENDPOINT) {
+    let body = '';
+    req.on('data', chunk => { body += chunk; });
+    req.on('end', () => {
+      try {
+        // Validate it's JSON
+        JSON.parse(body);
+        const tokensPath = findTokensPath();
+        writeFileSync(tokensPath, body);
+        res.writeHead(200, {
+          'Content-Type': 'application/json',
+          'Access-Control-Allow-Origin': '*',
+        });
+        res.end('{"ok":true}');
+      } catch (e) {
+        res.writeHead(500, {
+          'Content-Type': 'application/json',
+          'Access-Control-Allow-Origin': '*',
+        });
+        res.end(JSON.stringify({ error: e.message }));
+      }
+    });
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Vite plugin — add to vite.config.js:
+ *   import { bluedither } from './bluedither/dev-middleware.js'
+ *   export default { plugins: [bluedither()] }
+ */
+export function bluedither() {
+  return {
+    name: 'bluedither-tuner',
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        if (!handleRequest(req, res)) next();
+      });
+    },
+  };
+}
+
+/**
+ * Express/Connect middleware — add to your server:
+ *   import { blueditherMiddleware } from './bluedither/dev-middleware.js'
+ *   app.use(blueditherMiddleware())
+ */
+export function blueditherMiddleware() {
+  return (req, res, next) => {
+    if (!handleRequest(req, res)) next();
+  };
+}
+
+/**
+ * Raw handler for custom Node http servers:
+ *   import { blueditherHandler } from './bluedither/dev-middleware.js'
+ *   // In your request handler:
+ *   if (!blueditherHandler(req, res)) { /* your normal handling */ }
+ */
+export { handleRequest as blueditherHandler };
+
+export default bluedither;

package/fine-tuner/inject.js

@@ -3,13 +3,10 @@
  *
  * Drop this script into ANY page to get the tuner overlay.
  * Reads tokens from bluedither/tokens.json, updates CSS vars live.
- * Saves via sidecar (if running) or downloads the file.
+ * "Commit Changes" saves via dev middleware → sidecar → File System API → download.
  *
  * Usage:
  *   <script src="./bluedither/bluedither-tuner-inject.js"></script>
- *
- * The sidecar save server:
- *   npx bluedither tune --save-only
  */
 
 (async function () {
@@ -38,30 +35,8 @@
   window.__BD_TOKENS__ = tokens;
   window.__BD_DEFAULTS__ = defaults;
 
-  // Override server mode — use sidecar instead of /commit
-  const SIDECAR_PORT = 3344;
-  let sidecarAvailable = false;
-
-  try {
-    const probe = await fetch(`http://localhost:${SIDECAR_PORT}/ping`, { method: 'GET', signal: AbortSignal.timeout(500) });
-    sidecarAvailable = probe.ok;
-  } catch {
-    // Sidecar not running
-  }
-
-  // Patch the commit mechanism
-  if (sidecarAvailable) {
-    // Override fetch for /commit to redirect to sidecar
-    const origFetch = window.fetch;
-    window.fetch = function (url, opts) {
-      if (url === '/commit' && opts?.method === 'POST') {
-        return origFetch.call(this, `http://localhost:${SIDECAR_PORT}/commit`, opts);
-      }
-      return origFetch.apply(this, arguments);
-    };
-    // Signal to tuner that server mode is available
-    window.__BD_TUNER_SERVER_MODE__ = true;
-  }
+  // Signal that we're in injectable mode (tuner will use commitTokens cascade)
+  window.__BD_TUNER_SERVER_MODE__ = true;
 
   // Load tuner CSS
   try {

package/fine-tuner/tuner.js

@@ -112,18 +112,11 @@ panel.innerHTML = `
   </div>
 `;
 panel.querySelector('#bd-tuner-close').onclick = () => panel.classList.add('collapsed');
-panel.querySelector('#bd-tuner-reset').onclick = () => {
+panel.querySelector('#bd-tuner-reset').onclick = async () => {
   if (!confirm('Reset all tokens to defaults?')) return;
   Object.assign(tokens, structuredClone(defaults));
-  if (__serverMode) {
-    fetch('/commit', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(tokens, null, 2)
-    }).then(() => location.reload());
-  } else {
-    location.reload();
-  }
+  await commitTokens();
+  location.reload();
 };
 
 // ── Section builders ──
@@ -404,42 +397,105 @@ addRange(opacitySection, 'Nav Links', 'opacity.navLinks', 0, 1, 0.01, (v) => set
 const commitBtn = document.createElement('button');
 commitBtn.id = 'bd-tuner-commit';
 commitBtn.textContent = 'Commit Changes';
-const commitLabel = __serverMode ? 'Commit Changes' : 'Export Tokens';
-commitBtn.textContent = commitLabel;
-commitBtn.onclick = async () => {
-  commitBtn.textContent = __serverMode ? 'Committing...' : 'Exporting...';
-  commitBtn.disabled = true;
+
+// Try to commit via dev middleware, then sidecar, then File System Access API, then download
+let __fileHandle = null; // Cached File System Access API handle
+
+async function commitTokens() {
+  const payload = JSON.stringify(tokens, null, 2);
+
+  // Strategy 1: Dev middleware (Vite plugin, Express middleware, etc.)
   try {
-    if (__serverMode) {
+    const res = await fetch('/__bluedither/commit', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: payload,
+    });
+    if (res.ok) {
+      const data = await res.json();
+      if (data.ok) return 'saved';
+    }
+  } catch {}
+
+  // Strategy 2: Sidecar on port 3344 (if running)
+  try {
+    const res = await fetch('http://localhost:3344/commit', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: payload,
+    });
+    if (res.ok) {
+      const data = await res.json();
+      if (data.ok) return 'saved';
+    }
+  } catch {}
+
+  // Strategy 3: Legacy /commit endpoint (BlueDither's own dev server)
+  if (__serverMode) {
+    try {
       const res = await fetch('/commit', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(tokens, null, 2)
+        body: payload,
       });
-      const data = await res.json();
-      if (!data.ok) throw new Error(data.error);
-      commitBtn.textContent = 'Committed!';
-    } else {
-      // Standalone: download tokens as JSON file
-      const blob = new Blob([JSON.stringify(tokens, null, 2)], { type: 'application/json' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = 'tokens.json';
-      a.click();
-      URL.revokeObjectURL(url);
-      commitBtn.textContent = 'Downloaded!';
+      if (res.ok) {
+        const data = await res.json();
+        if (data.ok) return 'saved';
+      }
+    } catch {}
+  }
+
+  // Strategy 4: File System Access API (Chrome/Edge — no server needed)
+  if (window.showSaveFilePicker) {
+    try {
+      if (!__fileHandle) {
+        __fileHandle = await window.showSaveFilePicker({
+          suggestedName: 'tokens.json',
+          types: [{ description: 'JSON', accept: { 'application/json': ['.json'] } }],
+        });
+      }
+      const writable = await __fileHandle.createWritable();
+      await writable.write(payload);
+      await writable.close();
+      return 'saved';
+    } catch (e) {
+      if (e.name === 'AbortError') return 'cancelled';
+      __fileHandle = null;
+    }
+  }
+
+  // Strategy 5: Download as last resort
+  const blob = new Blob([payload], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'tokens.json';
+  a.click();
+  URL.revokeObjectURL(url);
+  return 'downloaded';
+}
+
+commitBtn.onclick = async () => {
+  commitBtn.textContent = 'Saving...';
+  commitBtn.disabled = true;
+  try {
+    const result = await commitTokens();
+    if (result === 'cancelled') {
+      commitBtn.textContent = 'Commit Changes';
+      commitBtn.disabled = false;
+      return;
     }
+    commitBtn.textContent = result === 'saved' ? 'Saved!' : 'Downloaded!';
     commitBtn.classList.add('success');
     setTimeout(() => {
-      commitBtn.textContent = commitLabel;
+      commitBtn.textContent = 'Commit Changes';
       commitBtn.classList.remove('success');
       commitBtn.disabled = false;
     }, 2000);
   } catch (e) {
     commitBtn.textContent = 'Error: ' + e.message;
     commitBtn.disabled = false;
-    setTimeout(() => { commitBtn.textContent = commitLabel; }, 3000);
+    setTimeout(() => { commitBtn.textContent = 'Commit Changes'; }, 3000);
   }
 };
 panel.appendChild(commitBtn);

package/package.json

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

package/skill.md

@@ -89,13 +89,7 @@ Follow the generator's patterns for component structure, file naming, shader ini
 ## Step 6 — Inform About Fine-Tuner
 
 Tell the user:
-> Your BlueDither theme has been generated. To customize colors, fonts, spacing, and shader parameters visually, run:
->
-> ```
-> npm run tune
-> ```
->
-> Open http://localhost:3333 to see your theme with a floating customization panel.
+> Your BlueDither theme has been generated with the tuner panel built in. Adjust colors, fonts, spacing, and shader parameters live, then click "Commit Changes" to save.
 
 ## CSS Custom Property Computation
 
@@ -115,7 +109,7 @@ Border radius converts directly: `px / 16` rem (no clamp).
 2. **Only content slots are editable** — never change colors, typography, spacing, shader, or opacity tokens during generation.
 3. **Two sections only** — navbar + hero. No footers, sidebars, additional sections, icons, or images.
 4. **Framework-native output** — use the framework's idioms (JSX for React, SFCs for Vue, etc.), never output raw HTML for a framework project.
-5. **Shader is required** — the WebGL dithering shader must be initialized in every greenfield and hero-partial output.
+5. **Shader is required** — the WebGL dithering shader must be initialized in every greenfield and hero-partial output. **Always assign the mount to `window.__BD_SHADER__`** so the tuner can update shader params live.
 6. **CSS namespace** — all custom properties use `--bd-*` prefix. All classes use `bd-*` prefix.
 7. **Headline is 2 lines max**, ALL CAPS, 4-6 words.
 8. **Exactly 4 nav items.**

package/theme/generators/react.md

@@ -41,7 +41,7 @@ Navbar component with logo, nav items, and CTA.
 ### `BlueDitherHero.jsx`
 Hero section with shader and text content.
 
-- **Shader initialization**: Use `useEffect` + `useRef` for the shader parent div:
+- **Shader initialization**: Use `useEffect` + `useRef` for the shader parent div. **CRITICAL**: Assign the mount to `window.__BD_SHADER__` so the tuner can update shader params live:
 ```jsx
 import { useEffect, useRef } from 'react';
 
@@ -51,7 +51,8 @@ useEffect(() => {
   // Dynamic import to avoid SSR issues
   import('./paper-shaders-bundle.js').then(({ ShaderMount, ditheringFragmentShader, getShaderColorFromString }) => {
     const mount = new ShaderMount(shaderRef.current, ditheringFragmentShader, uniforms, opts, speed, 0, 2);
-    return () => mount.dispose();
+    window.__BD_SHADER__ = mount;
+    return () => { mount.dispose(); window.__BD_SHADER__ = null; };
   });
 }, []);
 ```

package/theme/generators/svelte.md

@@ -62,10 +62,12 @@ Hero section with shader initialization using `onMount`:
   onMount(async () => {
     const { ShaderMount, ditheringFragmentShader, getShaderColorFromString } = await import('./paper-shaders-bundle.js');
     shaderMount = new ShaderMount(shaderParent, ditheringFragmentShader, uniforms, opts, speed, 0, 2);
+    window.__BD_SHADER__ = shaderMount;
   });
 
   onDestroy(() => {
     shaderMount?.dispose();
+    window.__BD_SHADER__ = null;
   });
 </script>
 

package/theme/generators/vanilla.md

@@ -32,9 +32,13 @@ URL-encode the font family name.
 
 Copy `theme/shaders/bluedither-shader.js` and `theme/shaders/paper-shaders-bundle.js` to the target project.
 
-Import and initialize inline:
+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';
+
+// After creating the mount:
+const mount = new ShaderMount(parent, ditheringFragmentShader, uniforms, opts, speed, 0, 2);
+window.__BD_SHADER__ = mount;
 ```
 
 Map shader tokens to uniforms as shown in `template/index.html`'s existing `<script type="module">` block.

package/theme/generators/vue.md

@@ -66,10 +66,12 @@ 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;
 });
 
 onUnmounted(() => {
   shaderMount?.dispose();
+  window.__BD_SHADER__ = null;
 });
 </script>