bluedither 1.0.24 → 1.0.25

package/cli/commands/install.js

@@ -107,6 +107,10 @@ export default async function install(args) {
   if (existsSync(middlewarePath)) {
     filesToCopy.push(['fine-tuner/dev-middleware.js', 'dev-middleware.js']);
   }
+  const sidecarPath = resolve(BLUEDITHER_ROOT, 'fine-tuner', 'sidecar.js');
+  if (existsSync(sidecarPath)) {
+    filesToCopy.push(['fine-tuner/sidecar.js', 'sidecar.js']);
+  }
 
   let copied = 0;
   for (const [src, dest] of filesToCopy) {
@@ -167,10 +171,14 @@ $ARGUMENTS
 
   To apply the theme, use Claude Code:
     /apply-theme [description of your site]
-
+${framework === 'vanilla' ? `
+  For vanilla projects, start the dev server:
+    node bluedither/sidecar.js [port]
+  This serves your files AND handles "Commit Changes" saves.
+` : `
   The tuner panel loads automatically in dev mode.
   Click "Commit Changes" to save tweaks to tokens.json.
-  `);
+`}  `);
 }
 
 function autoWireVitePlugin(targetDir) {
@@ -280,6 +288,7 @@ async function installFromRegistry(slug, targetDir) {
     ['fine-tuner/tuner.css', 'bluedither-tuner.css'],
     ['fine-tuner/inject.js', 'bluedither-tuner-inject.js'],
     ['fine-tuner/dev-middleware.js', 'dev-middleware.js'],
+    ['fine-tuner/sidecar.js', 'sidecar.js'],
   ];
   for (const [src, dest] of tunerFiles) {
     const srcPath = resolve(BLUEDITHER_ROOT, src);
@@ -338,8 +347,12 @@ $ARGUMENTS
 
   To apply the theme, use Claude Code:
     /apply-theme [description of your site]
-
+${framework === 'vanilla' ? `
+  For vanilla projects, start the dev server:
+    node bluedither/sidecar.js [port]
+  This serves your files AND handles "Commit Changes" saves.
+` : `
   The tuner panel loads automatically in dev mode.
   Click "Commit Changes" to save tweaks to tokens.json.
-  `);
+`}  `);
 }

package/dist/bluedither-shader.js

@@ -148,7 +148,7 @@ void main() {
 
   v_imageUV += .5;
   v_imageUV.y = 1. - v_imageUV.y;
-}`,z=8294400,X=class{constructor(e,o,t,i,n=0,s=0,r=2,l=z,m=[]){a(this,"parentElement");a(this,"canvasElement");a(this,"gl");a(this,"program",null);a(this,"uniformLocations",{});a(this,"fragmentShader");a(this,"rafId",null);a(this,"lastRenderTime",0);a(this,"currentFrame",0);a(this,"speed",0);a(this,"currentSpeed",0);a(this,"providedUniforms");a(this,"mipmaps",[]);a(this,"hasBeenDisposed",!1);a(this,"resolutionChanged",!0);a(this,"textures",new Map);a(this,"minPixelRatio");a(this,"maxPixelCount");a(this,"isSafari",oe());a(this,"uniformCache",{});a(this,"textureUnitMap",new Map);a(this,"initProgram",()=>{let e=$(this.gl,Z,this.fragmentShader);e&&(this.program=e)});a(this,"setupPositionAttribute",()=>{let e=this.gl.getAttribLocation(this.program,"a_position"),o=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,o);let t=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(t),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(e),this.gl.vertexAttribPointer(e,2,this.gl.FLOAT,!1,0,0)});a(this,"setupUniforms",()=>{let e={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_pixelRatio:this.gl.getUniformLocation(this.program,"u_pixelRatio"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution")};Object.entries(this.providedUniforms).forEach(([o,t])=>{if(e[o]=this.gl.getUniformLocation(this.program,o),t instanceof HTMLImageElement){let i=`${o}AspectRatio`;e[i]=this.gl.getUniformLocation(this.program,i)}}),this.uniformLocations=e});a(this,"renderScale",1);a(this,"parentWidth",0);a(this,"parentHeight",0);a(this,"parentDevicePixelWidth",0);a(this,"parentDevicePixelHeight",0);a(this,"devicePixelsSupported",!1);a(this,"resizeObserver",null);a(this,"setupResizeObserver",()=>{this.resizeObserver=new ResizeObserver(([e])=>{if(e?.borderBoxSize[0]){let o=e.devicePixelContentBoxSize?.[0];o!==void 0&&(this.devicePixelsSupported=!0,this.parentDevicePixelWidth=o.inlineSize,this.parentDevicePixelHeight=o.blockSize),this.parentWidth=e.borderBoxSize[0].inlineSize,this.parentHeight=e.borderBoxSize[0].blockSize}this.handleResize()}),this.resizeObserver.observe(this.parentElement)});a(this,"handleVisualViewportChange",()=>{this.resizeObserver?.disconnect(),this.setupResizeObserver()});a(this,"handleResize",()=>{let e=0,o=0,t=Math.max(1,window.devicePixelRatio),i=visualViewport?.scale??1;if(this.devicePixelsSupported){let u=Math.max(1,this.minPixelRatio/t);e=this.parentDevicePixelWidth*u*i,o=this.parentDevicePixelHeight*u*i}else{let u=Math.max(t,this.minPixelRatio)*i;if(this.isSafari){let d=te();u*=Math.max(1,d)}e=Math.round(this.parentWidth)*u,o=Math.round(this.parentHeight)*u}let n=Math.sqrt(this.maxPixelCount)/Math.sqrt(e*o),s=Math.min(1,n),r=Math.round(e*s),l=Math.round(o*s),m=r/Math.round(this.parentWidth);(this.canvasElement.width!==r||this.canvasElement.height!==l||this.renderScale!==m)&&(this.renderScale=m,this.canvasElement.width=r,this.canvasElement.height=l,this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now()))});a(this,"render",e=>{if(this.hasBeenDisposed)return;if(this.program===null){console.warn("Tried to render before program or gl was initialized");return}let o=e-this.lastRenderTime;this.lastRenderTime=e,this.currentSpeed!==0&&(this.currentFrame+=o*this.currentSpeed),this.gl.clear(this.gl.COLOR_BUFFER_BIT),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,this.currentFrame*.001),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.gl.uniform1f(this.uniformLocations.u_pixelRatio,this.renderScale),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.currentSpeed!==0?this.requestRender():this.rafId=null});a(this,"requestRender",()=>{this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)});a(this,"setTextureUniform",(e,o)=>{if(!o.complete||o.naturalWidth===0)throw new Error(`Paper Shaders: image for uniform ${e} must be fully loaded`);let t=this.textures.get(e);t&&this.gl.deleteTexture(t),this.textureUnitMap.has(e)||this.textureUnitMap.set(e,this.textureUnitMap.size);let i=this.textureUnitMap.get(e);this.gl.activeTexture(this.gl.TEXTURE0+i);let n=this.gl.createTexture();this.gl.bindTexture(this.gl.TEXTURE_2D,n),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_S,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_T,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MAG_FILTER,this.gl.LINEAR),this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,this.gl.RGBA,this.gl.UNSIGNED_BYTE,o),this.mipmaps.includes(e)&&(this.gl.generateMipmap(this.gl.TEXTURE_2D),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR_MIPMAP_LINEAR));let s=this.gl.getError();if(s!==this.gl.NO_ERROR||n===null){console.error("Paper Shaders: WebGL error when uploading texture:",s);return}this.textures.set(e,n);let r=this.uniformLocations[e];if(r){this.gl.uniform1i(r,i);let l=`${e}AspectRatio`,m=this.uniformLocations[l];if(m){let u=o.naturalWidth/o.naturalHeight;this.gl.uniform1f(m,u)}}});a(this,"areUniformValuesEqual",(e,o)=>e===o?!0:Array.isArray(e)&&Array.isArray(o)&&e.length===o.length?e.every((t,i)=>this.areUniformValuesEqual(t,o[i])):!1);a(this,"setUniformValues",e=>{this.gl.useProgram(this.program),Object.entries(e).forEach(([o,t])=>{let i=t;if(t instanceof HTMLImageElement&&(i=`${t.src.slice(0,200)}|${t.naturalWidth}x${t.naturalHeight}`),this.areUniformValuesEqual(this.uniformCache[o],i))return;this.uniformCache[o]=i;let n=this.uniformLocations[o];if(!n){console.warn(`Uniform location for ${o} not found`);return}if(t instanceof HTMLImageElement)this.setTextureUniform(o,t);else if(Array.isArray(t)){let s=null,r=null;if(t[0]!==void 0&&Array.isArray(t[0])){let l=t[0].length;if(t.every(m=>m.length===l))s=t.flat(),r=l;else{console.warn(`All child arrays must be the same length for ${o}`);return}}else s=t,r=s.length;switch(r){case 2:this.gl.uniform2fv(n,s);break;case 3:this.gl.uniform3fv(n,s);break;case 4:this.gl.uniform4fv(n,s);break;case 9:this.gl.uniformMatrix3fv(n,!1,s);break;case 16:this.gl.uniformMatrix4fv(n,!1,s);break;default:console.warn(`Unsupported uniform array length: ${r}`)}}else typeof t=="number"?this.gl.uniform1f(n,t):typeof t=="boolean"?this.gl.uniform1i(n,t?1:0):console.warn(`Unsupported uniform type for ${o}: ${typeof t}`)})});a(this,"getCurrentFrame",()=>this.currentFrame);a(this,"setFrame",e=>{this.currentFrame=e,this.lastRenderTime=performance.now(),this.render(performance.now())});a(this,"setSpeed",(e=1)=>{this.speed=e,this.setCurrentSpeed(document.hidden?0:e)});a(this,"setCurrentSpeed",e=>{this.currentSpeed=e,this.rafId===null&&e!==0&&(this.lastRenderTime=performance.now(),this.rafId=requestAnimationFrame(this.render)),this.rafId!==null&&e===0&&(cancelAnimationFrame(this.rafId),this.rafId=null)});a(this,"setMaxPixelCount",(e=z)=>{this.maxPixelCount=e,this.handleResize()});a(this,"setMinPixelRatio",(e=2)=>{this.minPixelRatio=e,this.handleResize()});a(this,"setUniforms",e=>{this.setUniformValues(e),this.providedUniforms={...this.providedUniforms,...e},this.render(performance.now())});a(this,"handleDocumentVisibilityChange",()=>{this.setCurrentSpeed(document.hidden?0:this.speed)});a(this,"dispose",()=>{this.hasBeenDisposed=!0,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.gl&&this.program&&(this.textures.forEach(e=>{this.gl.deleteTexture(e)}),this.textures.clear(),this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),visualViewport?.removeEventListener("resize",this.handleVisualViewportChange),document.removeEventListener("visibilitychange",this.handleDocumentVisibilityChange),this.uniformLocations={},this.canvasElement.remove(),delete this.parentElement.paperShaderMount});if(e instanceof HTMLElement)this.parentElement=e;else throw new Error("Paper Shaders: parent element must be an HTMLElement");if(!document.querySelector("style[data-paper-shader]")){let x=document.createElement("style");x.innerHTML=ee,x.setAttribute("data-paper-shader",""),document.head.prepend(x)}let u=document.createElement("canvas");this.canvasElement=u,this.parentElement.prepend(u),this.fragmentShader=o,this.providedUniforms=t,this.mipmaps=m,this.currentFrame=s,this.minPixelRatio=r,this.maxPixelCount=l;let d=u.getContext("webgl2",i);if(!d)throw new Error("Paper Shaders: WebGL is not supported in this browser");this.gl=d,this.initProgram(),this.setupPositionAttribute(),this.setupUniforms(),this.setUniformValues(this.providedUniforms),this.setupResizeObserver(),visualViewport?.addEventListener("resize",this.handleVisualViewportChange),this.setSpeed(n),this.parentElement.setAttribute("data-paper-shader",""),this.parentElement.paperShaderMount=this,document.addEventListener("visibilitychange",this.handleDocumentVisibilityChange)}};function O(e,o,t){let i=e.createShader(o);return i?(e.shaderSource(i,t),e.compileShader(i),e.getShaderParameter(i,e.COMPILE_STATUS)?i:(console.error("An error occurred compiling the shaders: "+e.getShaderInfoLog(i)),e.deleteShader(i),null)):null}function $(e,o,t){let i=e.getShaderPrecisionFormat(e.FRAGMENT_SHADER,e.MEDIUM_FLOAT),n=i?i.precision:null;n&&n<23&&(o=o.replace(/precision\s+(lowp|mediump)\s+float;/g,"precision highp float;"),t=t.replace(/precision\s+(lowp|mediump)\s+float/g,"precision highp float").replace(/\b(uniform|varying|attribute)\s+(lowp|mediump)\s+(\w+)/g,"$1 highp $3"));let s=O(e,e.VERTEX_SHADER,o),r=O(e,e.FRAGMENT_SHADER,t);if(!s||!r)return null;let l=e.createProgram();return l?(e.attachShader(l,s),e.attachShader(l,r),e.linkProgram(l),e.getProgramParameter(l,e.LINK_STATUS)?(e.detachShader(l,s),e.detachShader(l,r),e.deleteShader(s),e.deleteShader(r),l):(console.error("Unable to initialize the shader program: "+e.getProgramInfoLog(l)),e.deleteProgram(l),e.deleteShader(s),e.deleteShader(r),null)):null}var ee=`@layer paper-shaders {
+}`,z=8294400,X=class{constructor(e,o,t,r,l=0,s=0,n=2,i=z,u=[]){a(this,"parentElement");a(this,"canvasElement");a(this,"gl");a(this,"program",null);a(this,"uniformLocations",{});a(this,"fragmentShader");a(this,"rafId",null);a(this,"lastRenderTime",0);a(this,"currentFrame",0);a(this,"speed",0);a(this,"currentSpeed",0);a(this,"providedUniforms");a(this,"mipmaps",[]);a(this,"hasBeenDisposed",!1);a(this,"resolutionChanged",!0);a(this,"textures",new Map);a(this,"minPixelRatio");a(this,"maxPixelCount");a(this,"isSafari",oe());a(this,"uniformCache",{});a(this,"textureUnitMap",new Map);a(this,"initProgram",()=>{let e=$(this.gl,Z,this.fragmentShader);e&&(this.program=e)});a(this,"setupPositionAttribute",()=>{let e=this.gl.getAttribLocation(this.program,"a_position"),o=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,o);let t=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(t),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(e),this.gl.vertexAttribPointer(e,2,this.gl.FLOAT,!1,0,0)});a(this,"setupUniforms",()=>{let e={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_pixelRatio:this.gl.getUniformLocation(this.program,"u_pixelRatio"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution")};Object.entries(this.providedUniforms).forEach(([o,t])=>{if(e[o]=this.gl.getUniformLocation(this.program,o),t instanceof HTMLImageElement){let r=`${o}AspectRatio`;e[r]=this.gl.getUniformLocation(this.program,r)}}),this.uniformLocations=e});a(this,"renderScale",1);a(this,"parentWidth",0);a(this,"parentHeight",0);a(this,"parentDevicePixelWidth",0);a(this,"parentDevicePixelHeight",0);a(this,"devicePixelsSupported",!1);a(this,"resizeObserver",null);a(this,"setupResizeObserver",()=>{this.resizeObserver=new ResizeObserver(([e])=>{if(e?.borderBoxSize[0]){let o=e.devicePixelContentBoxSize?.[0];o!==void 0&&(this.devicePixelsSupported=!0,this.parentDevicePixelWidth=o.inlineSize,this.parentDevicePixelHeight=o.blockSize),this.parentWidth=e.borderBoxSize[0].inlineSize,this.parentHeight=e.borderBoxSize[0].blockSize}this.handleResize()}),this.resizeObserver.observe(this.parentElement)});a(this,"handleVisualViewportChange",()=>{this.resizeObserver?.disconnect(),this.setupResizeObserver()});a(this,"handleResize",()=>{let e=0,o=0,t=Math.max(1,window.devicePixelRatio),r=visualViewport?.scale??1;if(this.devicePixelsSupported){let f=Math.max(1,this.minPixelRatio/t);e=this.parentDevicePixelWidth*f*r,o=this.parentDevicePixelHeight*f*r}else{let f=Math.max(t,this.minPixelRatio)*r;if(this.isSafari){let d=te();f*=Math.max(1,d)}e=Math.round(this.parentWidth)*f,o=Math.round(this.parentHeight)*f}let l=Math.sqrt(this.maxPixelCount)/Math.sqrt(e*o),s=Math.min(1,l),n=Math.round(e*s),i=Math.round(o*s),u=n/Math.round(this.parentWidth);(this.canvasElement.width!==n||this.canvasElement.height!==i||this.renderScale!==u)&&(this.renderScale=u,this.canvasElement.width=n,this.canvasElement.height=i,this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now()))});a(this,"render",e=>{if(this.hasBeenDisposed)return;if(this.program===null){console.warn("Tried to render before program or gl was initialized");return}let o=e-this.lastRenderTime;this.lastRenderTime=e,this.currentSpeed!==0&&(this.currentFrame+=o*this.currentSpeed),this.gl.clear(this.gl.COLOR_BUFFER_BIT),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,this.currentFrame*.001),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.gl.uniform1f(this.uniformLocations.u_pixelRatio,this.renderScale),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.currentSpeed!==0?this.requestRender():this.rafId=null});a(this,"requestRender",()=>{this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)});a(this,"setTextureUniform",(e,o)=>{if(!o.complete||o.naturalWidth===0)throw new Error(`Paper Shaders: image for uniform ${e} must be fully loaded`);let t=this.textures.get(e);t&&this.gl.deleteTexture(t),this.textureUnitMap.has(e)||this.textureUnitMap.set(e,this.textureUnitMap.size);let r=this.textureUnitMap.get(e);this.gl.activeTexture(this.gl.TEXTURE0+r);let l=this.gl.createTexture();this.gl.bindTexture(this.gl.TEXTURE_2D,l),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_S,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_T,this.gl.CLAMP_TO_EDGE),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MAG_FILTER,this.gl.LINEAR),this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,this.gl.RGBA,this.gl.UNSIGNED_BYTE,o),this.mipmaps.includes(e)&&(this.gl.generateMipmap(this.gl.TEXTURE_2D),this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR_MIPMAP_LINEAR));let s=this.gl.getError();if(s!==this.gl.NO_ERROR||l===null){console.error("Paper Shaders: WebGL error when uploading texture:",s);return}this.textures.set(e,l);let n=this.uniformLocations[e];if(n){this.gl.uniform1i(n,r);let i=`${e}AspectRatio`,u=this.uniformLocations[i];if(u){let f=o.naturalWidth/o.naturalHeight;this.gl.uniform1f(u,f)}}});a(this,"areUniformValuesEqual",(e,o)=>e===o?!0:Array.isArray(e)&&Array.isArray(o)&&e.length===o.length?e.every((t,r)=>this.areUniformValuesEqual(t,o[r])):!1);a(this,"setUniformValues",e=>{this.gl.useProgram(this.program),Object.entries(e).forEach(([o,t])=>{let r=t;if(t instanceof HTMLImageElement&&(r=`${t.src.slice(0,200)}|${t.naturalWidth}x${t.naturalHeight}`),this.areUniformValuesEqual(this.uniformCache[o],r))return;this.uniformCache[o]=r;let l=this.uniformLocations[o];if(!l){console.warn(`Uniform location for ${o} not found`);return}if(t instanceof HTMLImageElement)this.setTextureUniform(o,t);else if(Array.isArray(t)){let s=null,n=null;if(t[0]!==void 0&&Array.isArray(t[0])){let i=t[0].length;if(t.every(u=>u.length===i))s=t.flat(),n=i;else{console.warn(`All child arrays must be the same length for ${o}`);return}}else s=t,n=s.length;switch(n){case 2:this.gl.uniform2fv(l,s);break;case 3:this.gl.uniform3fv(l,s);break;case 4:this.gl.uniform4fv(l,s);break;case 9:this.gl.uniformMatrix3fv(l,!1,s);break;case 16:this.gl.uniformMatrix4fv(l,!1,s);break;default:console.warn(`Unsupported uniform array length: ${n}`)}}else typeof t=="number"?this.gl.uniform1f(l,t):typeof t=="boolean"?this.gl.uniform1i(l,t?1:0):console.warn(`Unsupported uniform type for ${o}: ${typeof t}`)})});a(this,"getCurrentFrame",()=>this.currentFrame);a(this,"setFrame",e=>{this.currentFrame=e,this.lastRenderTime=performance.now(),this.render(performance.now())});a(this,"setSpeed",(e=1)=>{this.speed=e,this.setCurrentSpeed(document.hidden?0:e)});a(this,"setCurrentSpeed",e=>{this.currentSpeed=e,this.rafId===null&&e!==0&&(this.lastRenderTime=performance.now(),this.rafId=requestAnimationFrame(this.render)),this.rafId!==null&&e===0&&(cancelAnimationFrame(this.rafId),this.rafId=null)});a(this,"setMaxPixelCount",(e=z)=>{this.maxPixelCount=e,this.handleResize()});a(this,"setMinPixelRatio",(e=2)=>{this.minPixelRatio=e,this.handleResize()});a(this,"setUniforms",e=>{this.setUniformValues(e),this.providedUniforms={...this.providedUniforms,...e},this.render(performance.now())});a(this,"handleDocumentVisibilityChange",()=>{this.setCurrentSpeed(document.hidden?0:this.speed)});a(this,"dispose",()=>{this.hasBeenDisposed=!0,this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.gl&&this.program&&(this.textures.forEach(e=>{this.gl.deleteTexture(e)}),this.textures.clear(),this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),visualViewport?.removeEventListener("resize",this.handleVisualViewportChange),document.removeEventListener("visibilitychange",this.handleDocumentVisibilityChange),this.uniformLocations={},this.canvasElement.remove(),delete this.parentElement.paperShaderMount});if(e instanceof HTMLElement)this.parentElement=e;else throw new Error("Paper Shaders: parent element must be an HTMLElement");if(!document.querySelector("style[data-paper-shader]")){let x=document.createElement("style");x.innerHTML=ee,x.setAttribute("data-paper-shader",""),document.head.prepend(x)}let f=document.createElement("canvas");this.canvasElement=f,this.parentElement.prepend(f),this.fragmentShader=o,this.providedUniforms=t,this.mipmaps=u,this.currentFrame=s,this.minPixelRatio=n,this.maxPixelCount=i;let d=f.getContext("webgl2",r);if(!d)throw new Error("Paper Shaders: WebGL is not supported in this browser");this.gl=d,this.initProgram(),this.setupPositionAttribute(),this.setupUniforms(),this.setUniformValues(this.providedUniforms),this.setupResizeObserver(),visualViewport?.addEventListener("resize",this.handleVisualViewportChange),this.setSpeed(l),this.parentElement.setAttribute("data-paper-shader",""),this.parentElement.paperShaderMount=this,document.addEventListener("visibilitychange",this.handleDocumentVisibilityChange)}};function O(e,o,t){let r=e.createShader(o);return r?(e.shaderSource(r,t),e.compileShader(r),e.getShaderParameter(r,e.COMPILE_STATUS)?r:(console.error("An error occurred compiling the shaders: "+e.getShaderInfoLog(r)),e.deleteShader(r),null)):null}function $(e,o,t){let r=e.getShaderPrecisionFormat(e.FRAGMENT_SHADER,e.MEDIUM_FLOAT),l=r?r.precision:null;l&&l<23&&(o=o.replace(/precision\s+(lowp|mediump)\s+float;/g,"precision highp float;"),t=t.replace(/precision\s+(lowp|mediump)\s+float/g,"precision highp float").replace(/\b(uniform|varying|attribute)\s+(lowp|mediump)\s+(\w+)/g,"$1 highp $3"));let s=O(e,e.VERTEX_SHADER,o),n=O(e,e.FRAGMENT_SHADER,t);if(!s||!n)return null;let i=e.createProgram();return i?(e.attachShader(i,s),e.attachShader(i,n),e.linkProgram(i),e.getProgramParameter(i,e.LINK_STATUS)?(e.detachShader(i,s),e.detachShader(i,n),e.deleteShader(s),e.deleteShader(n),i):(console.error("Unable to initialize the shader program: "+e.getProgramInfoLog(i)),e.deleteProgram(i),e.deleteShader(s),e.deleteShader(n),null)):null}var ee=`@layer paper-shaders {
   :where([data-paper-shader]) {
     isolation: isolate;
     position: relative;
@@ -165,10 +165,10 @@ void main() {
       corner-shape: inherit;
     }
   }
-}`;function oe(){let e=navigator.userAgent.toLowerCase();return e.includes("safari")&&!e.includes("chrome")&&!e.includes("android")}function te(){let e=visualViewport?.scale??1,o=visualViewport?.width??window.innerWidth,t=window.innerWidth-document.documentElement.clientWidth,i=e*o+t,n=outerWidth/i,s=Math.round(100*n);return s%5===0?s/100:s===33?1/3:s===67?2/3:s===133?4/3:n}var c=`
+}`;function oe(){let e=navigator.userAgent.toLowerCase();return e.includes("safari")&&!e.includes("chrome")&&!e.includes("android")}function te(){let e=visualViewport?.scale??1,o=visualViewport?.width??window.innerWidth,t=window.innerWidth-document.documentElement.clientWidth,r=e*o+t,l=outerWidth/r,s=Math.round(100*l);return s%5===0?s/100:s===33?1/3:s===67?2/3:s===133?4/3:l}var c=`
 #define TWO_PI 6.28318530718
 #define PI 3.14159265358979323846
-`,f=`
+`,m=`
 vec2 rotate(vec2 uv, float th) {
   return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
 }
@@ -279,7 +279,7 @@ in vec2 v_objectUV;
 out vec4 fragColor;
 
 ${c}
-${f}
+${m}
 ${g}
 
 float valueNoise(vec2 st) {
@@ -505,7 +505,7 @@ in vec2 v_patternUV;
 
 out vec4 fragColor;
 
-${f}
+${m}
 
 float neuroShape(vec2 uv, float t) {
   vec2 sine_acc = vec2(0.);
@@ -575,7 +575,7 @@ in vec2 v_patternUV;
 out vec4 fragColor;
 
 ${c}
-${f}
+${m}
 ${_}
 ${E}
 
@@ -1293,7 +1293,7 @@ in vec2 v_patternUV;
 out vec4 fragColor;
 
 ${c}
-${f}
+${m}
 float randomG(vec2 p) {
   vec2 uv = floor(p) / 100. + .5;
   return texture(u_noiseTexture, fract(uv)).g;
@@ -1404,7 +1404,7 @@ in vec2 v_objectUV;
 out vec4 fragColor;
 
 ${c}
-${f}
+${m}
 ${_}
 float valueNoise(vec2 st) {
   vec2 i = floor(st);
@@ -1588,7 +1588,7 @@ out vec4 fragColor;
 
 ${c}
 ${h}
-${f}
+${m}
 
 void main() {
   vec2 shape_uv = v_objectUV;
@@ -1930,7 +1930,7 @@ out vec4 fragColor;
 
 ${c}
 ${h}
-${f}
+${m}
 ${_}
 
 float valueNoiseR(vec2 st) {
@@ -2607,7 +2607,7 @@ in vec2 v_objectUV;
 out vec4 fragColor;
 
 ${c}
-${f}
+${m}
 ${g}
 
 float valueNoise(vec2 st) {
@@ -2721,7 +2721,7 @@ in vec2 v_objectUV;
 out vec4 fragColor;
 
 ${c}
-${f}
+${m}
 ${g}
 
 float valueNoise(vec2 st) {
@@ -2909,7 +2909,7 @@ float getUvFrame(vec2 uv) {
 }
 
 ${c}
-${f}
+${m}
 ${_}
 float valueNoise(vec2 st) {
   vec2 i = floor(st);
@@ -3125,7 +3125,7 @@ in vec2 v_imageUV;
 out vec4 fragColor;
 
 ${c}
-${f}
+${m}
 ${h}
 
 float getUvFrame(vec2 uv) {
@@ -3247,7 +3247,7 @@ in vec2 v_imageUV;
 out vec4 fragColor;
 
 ${c}
-${f}
+${m}
 ${g}
 
 float valueNoise(vec2 st) {
@@ -4003,7 +4003,7 @@ in vec2 v_imageUV;
 out vec4 fragColor;
 
 ${c}
-${f}
+${m}
 ${h}
 
 float getColorChanges(float c1, float c2, float stripe_p, vec3 w, float blur, float bump, float tint) {
@@ -4322,7 +4322,7 @@ in vec2 v_imageUV;
 out vec4 fragColor;
 
 ${c}
-${f}
+${m}
 ${g}
 
 float valueNoise(vec2 st) {
@@ -4864,4 +4864,4 @@ void main() {
 
   fragColor = vec4(color, opacity);
 }
-`;function A(e){if(Array.isArray(e))return e.length===4?e:e.length===3?[...e,1]:M;if(typeof e!="string")return M;let o,t,i,n=1;if(e.startsWith("#"))[o,t,i,n]=ie(e);else if(e.startsWith("rgb"))[o,t,i,n]=re(e);else if(e.startsWith("hsl"))[o,t,i,n]=le(se(e));else return console.error("Unsupported color format",e),M;return[C(o,0,1),C(t,0,1),C(i,0,1),C(n,0,1)]}function ie(e){e=e.replace(/^#/,""),e.length===3&&(e=e.split("").map(s=>s+s).join("")),e.length===6&&(e=e+"ff");let o=parseInt(e.slice(0,2),16)/255,t=parseInt(e.slice(2,4),16)/255,i=parseInt(e.slice(4,6),16)/255,n=parseInt(e.slice(6,8),16)/255;return[o,t,i,n]}function re(e){let o=e.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([0-9.]+))?\s*\)$/i);return o?[parseInt(o[1]??"0")/255,parseInt(o[2]??"0")/255,parseInt(o[3]??"0")/255,o[4]===void 0?1:parseFloat(o[4])]:[0,0,0,1]}function se(e){let o=e.match(/^hsla?\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([0-9.]+))?\s*\)$/i);return o?[parseInt(o[1]??"0"),parseInt(o[2]??"0"),parseInt(o[3]??"0"),o[4]===void 0?1:parseFloat(o[4])]:[0,0,0,1]}function le(e){let[o,t,i,n]=e,s=o/360,r=t/100,l=i/100,m,u,d;if(t===0)m=u=d=l;else{let x=(y,V,v)=>(v<0&&(v+=1),v>1&&(v-=1),v<.16666666666666666?y+(V-y)*6*v:v<.5?V:v<.6666666666666666?y+(V-y)*(.6666666666666666-v)*6:y),b=l<.5?l*(1+r):l+r-l*r,U=2*l-b;m=x(U,b,s+1/3),u=x(U,b,s),d=x(U,b,s-1/3)}return[m,u,d,n]}var C=(e,o,t)=>Math.min(Math.max(e,o),t),M=[0,0,0,1];function Qe(e,o){let t=B[o.shape]??B.warp,i=S[o.type]??S["2x2"],n={u_colorFront:A(o.colorFront),u_colorBack:A(o.colorBack),u_shape:t,u_type:i,u_pxSize:o.size,u_scale:o.scale,u_rotation:parseFloat(o.rotation)||180,u_originX:.5,u_originY:.5,u_worldWidth:0,u_worldHeight:0,u_fit:0,u_offsetX:0,u_offsetY:0},s=new X(e,J,n,{alpha:!0,premultipliedAlpha:!1},o.speed,0,2);return{updateParams(r){let l={};r.colorFront!==void 0&&(l.u_colorFront=A(r.colorFront)),r.colorBack!==void 0&&(l.u_colorBack=A(r.colorBack)),r.shape!==void 0&&(l.u_shape=B[r.shape]??t),r.type!==void 0&&(l.u_type=S[r.type]??i),r.size!==void 0&&(l.u_pxSize=r.size),r.scale!==void 0&&(l.u_scale=r.scale),r.rotation!==void 0&&(l.u_rotation=parseFloat(r.rotation)||180),r.speed!==void 0&&s.setSpeed(r.speed),Object.keys(l).length>0&&s.setUniforms(l)},destroy(){s.dispose()}}}export{Qe as createDitheringRenderer};
+`;function A(e){if(Array.isArray(e))return e.length===4?e:e.length===3?[...e,1]:M;if(typeof e!="string")return M;let o,t,r,l=1;if(e.startsWith("#"))[o,t,r,l]=ie(e);else if(e.startsWith("rgb"))[o,t,r,l]=re(e);else if(e.startsWith("hsl"))[o,t,r,l]=le(se(e));else return console.error("Unsupported color format",e),M;return[C(o,0,1),C(t,0,1),C(r,0,1),C(l,0,1)]}function ie(e){e=e.replace(/^#/,""),e.length===3&&(e=e.split("").map(s=>s+s).join("")),e.length===6&&(e=e+"ff");let o=parseInt(e.slice(0,2),16)/255,t=parseInt(e.slice(2,4),16)/255,r=parseInt(e.slice(4,6),16)/255,l=parseInt(e.slice(6,8),16)/255;return[o,t,r,l]}function re(e){let o=e.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([0-9.]+))?\s*\)$/i);return o?[parseInt(o[1]??"0")/255,parseInt(o[2]??"0")/255,parseInt(o[3]??"0")/255,o[4]===void 0?1:parseFloat(o[4])]:[0,0,0,1]}function se(e){let o=e.match(/^hsla?\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([0-9.]+))?\s*\)$/i);return o?[parseInt(o[1]??"0"),parseInt(o[2]??"0"),parseInt(o[3]??"0"),o[4]===void 0?1:parseFloat(o[4])]:[0,0,0,1]}function le(e){let[o,t,r,l]=e,s=o/360,n=t/100,i=r/100,u,f,d;if(t===0)u=f=d=i;else{let x=(y,V,v)=>(v<0&&(v+=1),v>1&&(v-=1),v<.16666666666666666?y+(V-y)*6*v:v<.5?V:v<.6666666666666666?y+(V-y)*(.6666666666666666-v)*6:y),b=i<.5?i*(1+n):i+n-i*n,U=2*i-b;u=x(U,b,s+1/3),f=x(U,b,s),d=x(U,b,s-1/3)}return[u,f,d,l]}var C=(e,o,t)=>Math.min(Math.max(e,o),t),M=[0,0,0,1];function Qe(e,o){let t=B[o.shape]??B.warp,r=S[o.type]??S["2x2"],l={u_colorFront:A(o.colorFront),u_colorBack:A(o.colorBack),u_shape:t,u_type:r,u_pxSize:o.size,u_scale:o.scale,u_rotation:parseFloat(o.rotation)||180,u_originX:.5,u_originY:.5,u_worldWidth:0,u_worldHeight:0,u_fit:0,u_offsetX:0,u_offsetY:0},s=new X(e,J,l,{alpha:!0,premultipliedAlpha:!1},o.speed,0,2),n={updateParams(i){let u={};i.colorFront!==void 0&&(u.u_colorFront=A(i.colorFront)),i.colorBack!==void 0&&(u.u_colorBack=A(i.colorBack)),i.shape!==void 0&&(u.u_shape=B[i.shape]??t),i.type!==void 0&&(u.u_type=S[i.type]??r),i.size!==void 0&&(u.u_pxSize=i.size),i.scale!==void 0&&(u.u_scale=i.scale),i.rotation!==void 0&&(u.u_rotation=parseFloat(i.rotation)||180),i.speed!==void 0&&s.setSpeed(i.speed),Object.keys(u).length>0&&s.setUniforms(u)},destroy(){s.dispose(),window.__BD_SHADER__===n&&(window.__BD_SHADER__=null)}};return window.__BD_SHADER__=n,n}export{Qe as createDitheringRenderer};

package/fine-tuner/sidecar.js

@@ -0,0 +1,91 @@
+/**
+ * BlueDither Sidecar — Lightweight dev server for vanilla projects.
+ *
+ * Serves static files from the current directory and handles
+ * POST /__bluedither/commit to save tokens.json to disk.
+ *
+ * Usage: node bluedither/sidecar.js [port]
+ * Default port: 3456
+ */
+
+import { createServer } from 'http';
+import { readFileSync, writeFileSync, existsSync, statSync } from 'fs';
+import { resolve, join, extname } from 'path';
+
+const PORT = parseInt(process.argv[2] || '3456', 10);
+const ROOT = process.cwd();
+
+const MIME = {
+  '.html': 'text/html',
+  '.css': 'text/css',
+  '.js': 'application/javascript',
+  '.mjs': 'application/javascript',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.otf': 'font/otf',
+};
+
+function findTokensPath() {
+  const candidates = [
+    resolve(ROOT, 'bluedither', 'tokens.json'),
+    resolve(ROOT, 'tokens.json'),
+  ];
+  for (const p of candidates) {
+    if (existsSync(p)) return p;
+  }
+  return candidates[0]; // default to bluedither/tokens.json
+}
+
+const server = createServer((req, res) => {
+  // Handle commit endpoint
+  if (req.method === 'POST' && req.url === '/__bluedither/commit') {
+    let body = '';
+    req.on('data', (chunk) => { body += chunk; });
+    req.on('end', () => {
+      try {
+        JSON.parse(body); // validate JSON
+        const tokensPath = findTokensPath();
+        writeFileSync(tokensPath, body);
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: true, path: tokensPath }));
+        console.log(`  Saved tokens to ${tokensPath}`);
+      } catch (e) {
+        res.writeHead(500, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: e.message }));
+      }
+    });
+    return;
+  }
+
+  // Serve static files
+  let filePath = join(ROOT, decodeURIComponent(req.url.split('?')[0]));
+  if (filePath.endsWith('/') || filePath === ROOT) {
+    filePath = join(filePath, 'index.html');
+  }
+
+  if (!existsSync(filePath) || !statSync(filePath).isFile()) {
+    res.writeHead(404, { 'Content-Type': 'text/plain' });
+    res.end('Not Found');
+    return;
+  }
+
+  const ext = extname(filePath).toLowerCase();
+  const mime = MIME[ext] || 'application/octet-stream';
+  const content = readFileSync(filePath);
+  res.writeHead(200, { 'Content-Type': mime });
+  res.end(content);
+});
+
+server.listen(PORT, () => {
+  console.log(`\n  BlueDither dev server running at http://localhost:${PORT}/\n`);
+  console.log(`  Commit endpoint: POST /__bluedither/commit`);
+  console.log(`  Serving files from: ${ROOT}\n`);
+});

package/package.json

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

package/theme/generators/vanilla.md

@@ -2,124 +2,83 @@
 
 When the target project is **plain HTML/CSS/JS** (no framework detected), follow these patterns.
 
-## Output Structure
-
-Generate a single `index.html` file containing:
-1. Inline `<style>` with CSS custom properties from tokens + all `.bd-*` class rules
-2. Semantic HTML matching `structure.json` exactly
-3. `<script type="module">` at the end of `<body>` that:
-   - Imports `bluedither-shader.js` (or the bundled version)
-   - Initializes `ShaderMount` on `#bd-shader-parent`
+## Dev Server
 
-## CSS Custom Properties
+Vanilla projects use the BlueDither sidecar as their dev server. It serves static files AND handles the "Commit Changes" endpoint.
 
-Compute `clamp()` values from all `referencePx` and spacing tokens using:
-```
-clamp(max*0.55 rem, px/designWidth*100 vw, px/16 rem)
+```bash
+node bluedither/sidecar.js
 ```
 
-Emit all properties under `:root` using the `--bd-*` namespace. See `template/index.html` for the exact variable names.
+This starts a server at `http://localhost:3456/`. The sidecar handles `POST /__bluedither/commit` to save tokens.json to disk.
 
-## Google Fonts
+## Output Structure
 
-Include `<link>` tags for `typography.primaryFont` and `typography.secondaryFont` via Google Fonts CDN:
-```html
-<link href="https://fonts.googleapis.com/css2?family=FONT_NAME:wght@400;700&display=swap" rel="stylesheet">
-```
-URL-encode the font family name.
+Generate a single `index.html` file containing:
+1. Inline `<style>` with CSS custom properties from tokens + all `.bd-*` class rules
+2. Semantic HTML matching `structure.json` exactly
+3. `<script type="module">` at the end of `<body>` that imports and initializes the shader
 
 ## CRITICAL: File Placement Rules
 
-**In project root (or `src/`):**
+**In project root:**
 - `index.html` — the rendered page
-- `paper-shaders-bundle.js` — copied from `bluedither/shaders/`
+- `bluedither-shader.js` — copied from `bluedither/shaders/bluedither-shader.js`
+- `paper-shaders-bundle.js` — copied from `bluedither/shaders/paper-shaders-bundle.js`
 
-**In `public/bluedither/` (for Vite) or alongside `index.html` (for non-Vite):**
+**In `bluedither/` (already placed by install):**
 - `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
+- `sidecar.js` — dev server
 
-Copy tuner assets:
+Copy shader files to project root:
 ```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/
+cp bluedither/shaders/bluedither-shader.js ./bluedither-shader.js
+cp bluedither/shaders/paper-shaders-bundle.js ./paper-shaders-bundle.js
 ```
 
 ## Shader Module
 
-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 `createDitheringRenderer` from `bluedither-shader.js`. It auto-assigns `window.__BD_SHADER__` so the tuner can update shader params live.
 
 ```js
-import { ShaderMount, ditheringFragmentShader, DitheringShapes, DitheringTypes, getShaderColorFromString } from './paper-shaders-bundle.js';
+import { createDitheringRenderer } from './bluedither-shader.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);
-  },
-};
+createDitheringRenderer(parent, {
+  colorFront: '#005A6A',
+  colorBack: '#00000000',
+  shape: 'ripple',
+  type: '2x2',
+  size: 4.2,
+  scale: 1,
+  speed: 0.41,
+  rotation: 180,
+});
 ```
 
-## Tuner Loading (Dev-Only)
+Replace the param values with the actual values from `tokens.json` shader + colors sections.
 
-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>
-```
+## Tuner Loading
 
-For non-Vite vanilla projects (opened via file:// or a simple HTTP server), use localhost detection instead:
+Load the tuner inject script. For vanilla projects served by the sidecar, use localhost detection:
 ```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>
+<script src="./bluedither/bluedither-tuner-inject.js"></script>
 ```
 
+This loads the tuner on every page load. The tuner applies saved tokens from `tokens.json` and shows the overlay panel.
+
 ## CSS Custom Properties
 
-The CSS variable names MUST match exactly what the tuner expects:
+Compute `clamp()` values from all `referencePx` and spacing tokens using:
+```
+clamp(max*0.55 rem, px/designWidth*100 vw, px/16 rem)
+```
+
+The CSS variable names MUST match exactly what the tuner expects. **DO NOT use long names like `--bd-color-background` — use the short names below:**
 
 **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`
@@ -128,13 +87,33 @@ The CSS variable names MUST match exactly what the tuner expects:
 
 Using different variable names will break live updates from the tuner.
 
+## CSS Rule References
+
+In your CSS rules, reference the SHORT variable names:
+```css
+.bd-root { background-color: var(--bd-bg); }
+.bd-header { background-color: var(--bd-primary); }
+.bd-logo { color: var(--bd-text); }
+.bd-cta { background-color: var(--bd-cta-bg); }
+.bd-cta-text { color: var(--bd-cta-text); }
+.bd-subheadline { font-size: var(--bd-sub-size); line-height: var(--bd-sub-lh); text-transform: var(--bd-sub-transform); }
+```
+
+## Google Fonts
+
+Include `<link>` tags for `typography.primaryFont` and `typography.secondaryFont` via Google Fonts CDN:
+```html
+<link href="https://fonts.googleapis.com/css2?family=FONT_NAME:wght@400;700&display=swap" rel="stylesheet">
+```
+URL-encode the font family name.
+
 ## File Output
 
 | File | Contents |
 |------|----------|
 | `index.html` | Complete rendered page |
-| `bluedither-shader.js` | Shader module (copied) |
-| `paper-shaders-bundle.js` | Shader library bundle (copied) |
+| `bluedither-shader.js` | Shader wrapper module (copied from bluedither/shaders/) |
+| `paper-shaders-bundle.js` | Shader library bundle (copied from bluedither/shaders/) |
 
 ## Content Handling
 

package/theme/shaders/bluedither-shader.js

@@ -52,7 +52,7 @@ export function createDitheringRenderer(parentEl, params) {
     2,             // minPixelRatio
   );
 
-  return {
+  const wrapper = {
     updateParams(newParams) {
       const updatedUniforms = {};
 
@@ -87,6 +87,12 @@ export function createDitheringRenderer(parentEl, params) {
     },
     destroy() {
       mount.dispose();
+      if (window.__BD_SHADER__ === wrapper) window.__BD_SHADER__ = null;
     }
   };
+
+  // Auto-assign so the tuner can find it without extra wiring
+  window.__BD_SHADER__ = wrapper;
+
+  return wrapper;
 }

package/theme/template/index.html

@@ -11,11 +11,11 @@
   <style>
     :root {
       /* Colors */
-      --bd-color-background: {{colors.background}};
-      --bd-color-primary: {{colors.primary}};
-      --bd-color-text: {{colors.text}};
-      --bd-color-cta-bg: {{colors.ctaBackground}};
-      --bd-color-cta-text: {{colors.ctaText}};
+      --bd-bg: {{colors.background}};
+      --bd-primary: {{colors.primary}};
+      --bd-text: {{colors.text}};
+      --bd-cta-bg: {{colors.ctaBackground}};
+      --bd-cta-text: {{colors.ctaText}};
 
       /* Typography */
       --bd-font-primary: "{{typography.primaryFont}}", system-ui, sans-serif;
@@ -25,9 +25,9 @@
 
       --bd-headline-size: {{clamp.headline.fontSize}};
       --bd-headline-lh: {{clamp.headline.lineHeight}};
-      --bd-subheadline-size: {{clamp.subHeadline.fontSize}};
-      --bd-subheadline-lh: {{clamp.subHeadline.lineHeight}};
-      --bd-subheadline-transform: {{typography.subHeadline.textTransform}};
+      --bd-sub-size: {{clamp.subHeadline.fontSize}};
+      --bd-sub-lh: {{clamp.subHeadline.lineHeight}};
+      --bd-sub-transform: {{typography.subHeadline.textTransform}};
       --bd-logo-size: {{clamp.logo.fontSize}};
       --bd-logo-lh: {{clamp.logo.lineHeight}};
       --bd-nav-size: {{clamp.navItem.fontSize}};
@@ -59,7 +59,7 @@
       flex-direction: column;
       width: 100%;
       min-height: 100vh;
-      background-color: var(--bd-color-background);
+      background-color: var(--bd-bg);
       overflow: clip;
     }
 
@@ -73,7 +73,7 @@
       width: 100%;
       padding-inline: var(--bd-header-px);
       padding-block: var(--bd-header-py);
-      background-color: var(--bd-color-primary);
+      background-color: var(--bd-primary);
       overflow: clip;
       flex-shrink: 0;
     }
@@ -90,7 +90,7 @@
       font-weight: var(--bd-font-primary-weight);
       font-size: var(--bd-logo-size);
       line-height: var(--bd-logo-lh);
-      color: var(--bd-color-text);
+      color: var(--bd-text);
       white-space: pre;
       flex-shrink: 0;
     }
@@ -108,7 +108,7 @@
       font-weight: var(--bd-font-primary-weight);
       font-size: var(--bd-nav-size);
       line-height: var(--bd-nav-lh);
-      color: var(--bd-color-text);
+      color: var(--bd-text);
       white-space: pre;
       text-decoration: none;
       cursor: pointer;
@@ -117,7 +117,7 @@
     .bd-cta {
       display: flex;
       align-items: start;
-      background-color: var(--bd-color-cta-bg);
+      background-color: var(--bd-cta-bg);
       border-radius: var(--bd-cta-radius);
       padding-inline: var(--bd-cta-px);
       padding-block: var(--bd-cta-py);
@@ -132,7 +132,7 @@
       font-weight: var(--bd-font-primary-weight);
       font-size: var(--bd-cta-size);
       line-height: var(--bd-cta-lh);
-      color: var(--bd-color-cta-text);
+      color: var(--bd-cta-text);
       white-space: pre;
     }
 
@@ -188,7 +188,7 @@
       font-weight: var(--bd-font-primary-weight);
       font-size: var(--bd-headline-size);
       line-height: var(--bd-headline-lh);
-      color: var(--bd-color-text);
+      color: var(--bd-text);
       white-space: pre;
       width: fit-content;
       flex-shrink: 0;
@@ -197,10 +197,10 @@
     .bd-subheadline {
       font-family: var(--bd-font-secondary);
       font-weight: var(--bd-font-secondary-weight);
-      font-size: var(--bd-subheadline-size);
-      line-height: var(--bd-subheadline-lh);
-      text-transform: var(--bd-subheadline-transform);
-      color: var(--bd-color-text);
+      font-size: var(--bd-sub-size);
+      line-height: var(--bd-sub-lh);
+      text-transform: var(--bd-sub-transform);
+      color: var(--bd-text);
       width: fit-content;
       flex-shrink: 0;
     }