diff --git a/web/public/pattern-sandbox.html b/web/public/pattern-sandbox.html
index aae0aac82..28d5cdcf8 100644
--- a/web/public/pattern-sandbox.html
+++ b/web/public/pattern-sandbox.html
@@ -19,7 +19,7 @@
 <script>
 // Built by scripts/build-sandbox.ts from src/sandbox/sandbox.ts and the lab runtime in
 // src/lib/pattern/. Do not edit: run `npm run build:sandbox` in web/.
-"use strict";(()=>{function clampByte(value){return Number.isFinite(value)?Math.max(0,Math.min(255,Math.round(value))):0}var RAMP_MODES=["linear","smooth","step","hsvShort","hsvLong","oklab","oklchShort","oklchLong"];function rgbToHsv(r,g,b){let rf=r/255,gf=g/255,bf=b/255,max=Math.max(rf,gf,bf),min=Math.min(rf,gf,bf),delta=max-min,h=0;delta>0&&(max===rf?h=(gf-bf)/delta%6:max===gf?h=(bf-rf)/delta+2:h=(rf-gf)/delta+4,h/=6,h<0&&(h+=1));let s=max===0?0:delta/max;return[h,s,max]}function hsvToRgbTuple(h,s,v){h=h-Math.floor(h);let i=Math.floor(h*6),f=h*6-i,p=v*(1-s),q=v*(1-f*s),t=v*(1-(1-f)*s),r,g,b;switch(i%6){case 0:r=v,g=t,b=p;break;case 1:r=q,g=v,b=p;break;case 2:r=p,g=v,b=t;break;case 3:r=p,g=q,b=v;break;case 4:r=t,g=p,b=v;break;default:r=v,g=p,b=q;break}return[Math.round(r*255),Math.round(g*255),Math.round(b*255)]}function srgbChannelToLinear(c){return c/=255,c<=.04045?c/12.92:Math.pow((c+.055)/1.055,2.4)}function linearChannelToSrgb(c){let v=c<=.0031308?c*12.92:1.055*Math.pow(c,.4166666666666667)-.055;return Math.max(0,Math.min(1,v))*255}function srgbToOklab(r,g,b){let lr=srgbChannelToLinear(r),lg=srgbChannelToLinear(g),lb=srgbChannelToLinear(b),l=Math.cbrt(.4122214708*lr+.5363325363*lg+.0514459929*lb),m=Math.cbrt(.2119034982*lr+.6806995451*lg+.1073969566*lb),s=Math.cbrt(.0883024619*lr+.2817188376*lg+.6299787005*lb);return[.2104542553*l+.793617785*m-.0040720468*s,1.9779984951*l-2.428592205*m+.4505937099*s,.0259040371*l+.7827717662*m-.808675766*s]}function oklabToLinearRgb(L,A,B){let l_=L+.3963377774*A+.2158037573*B,m_=L-.1055613458*A-.0638541728*B,s_=L-.0894841775*A-1.291485548*B,l=l_*l_*l_,m=m_*m_*m_,s=s_*s_*s_;return[4.0767416621*l-3.3077115913*m+.2309699292*s,-1.2684380046*l+2.6097574011*m-.3413193965*s,-.0041960863*l-.7034186147*m+1.707614701*s]}var GAMUT_EPS=1e-4;function inLinearGamut(rgb){return rgb[0]>=-GAMUT_EPS&&rgb[0]<=1+GAMUT_EPS&&rgb[1]>=-GAMUT_EPS&&rgb[1]<=1+GAMUT_EPS&&rgb[2]>=-GAMUT_EPS&&rgb[2]<=1+GAMUT_EPS}function oklabToSrgb(L,A,B){let rgb=oklabToLinearRgb(L,A,B);if(!inLinearGamut(rgb)){let lo=0,hi=1;for(let i=0;i<16;i++){let mid=(lo+hi)/2;inLinearGamut(oklabToLinearRgb(L,A*mid,B*mid))?lo=mid:hi=mid}rgb=oklabToLinearRgb(L,A*lo,B*lo)}return[linearChannelToSrgb(rgb[0]),linearChannelToSrgb(rgb[1]),linearChannelToSrgb(rgb[2])]}function mixRampColors(a,b,t,mode){if(mode==="smooth"&&(t=t*t*(3-2*t)),mode==="oklab"||mode==="oklchShort"||mode==="oklchLong"){let[La,Aa,Ba]=srgbToOklab(a[0],a[1],a[2]),[Lb,Ab,Bb]=srgbToOklab(b[0],b[1],b[2]),L=La+(Lb-La)*t;if(mode==="oklab")return oklabToSrgb(L,Aa+(Ab-Aa)*t,Ba+(Bb-Ba)*t);let CHROMA_EPS=1e-4,TWO_PI=Math.PI*2,Ca=Math.sqrt(Aa*Aa+Ba*Ba),Cb=Math.sqrt(Ab*Ab+Bb*Bb),hueA=Math.atan2(Ba,Aa)/TWO_PI;hueA<0&&(hueA+=1);let hueB=Math.atan2(Bb,Ab)/TWO_PI;hueB<0&&(hueB+=1);let h1=Ca<CHROMA_EPS?Cb<CHROMA_EPS?0:hueB:hueA,dh=(Cb<CHROMA_EPS?h1:hueB)-h1;mode==="oklchShort"?(dh>.5&&(dh-=1),dh<-.5&&(dh+=1)):dh>0&&dh<.5?dh-=1:dh<=0&&dh>-.5&&(dh+=1);let C=Ca+(Cb-Ca)*t,H=(h1+dh*t)*TWO_PI;return oklabToSrgb(L,Math.cos(H)*C,Math.sin(H)*C)}if(mode==="hsvShort"||mode==="hsvLong"){let ha=rgbToHsv(a[0],a[1],a[2]),hb=rgbToHsv(b[0],b[1],b[2]),h1=ha[1]===0?hb[0]:ha[0],dh=(hb[1]===0?h1:hb[0])-h1;return mode==="hsvShort"?(dh>.5&&(dh-=1),dh<-.5&&(dh+=1)):dh>0&&dh<.5?dh-=1:dh<=0&&dh>-.5&&(dh+=1),hsvToRgbTuple(h1+dh*t,ha[1]+(hb[1]-ha[1])*t,ha[2]+(hb[2]-ha[2])*t)}return[a[0]+(b[0]-a[0])*t,a[1]+(b[1]-a[1])*t,a[2]+(b[2]-a[2])*t]}function stopAlpha(stop){let a=stop.alpha;return a===void 0||!Number.isFinite(a)?1:Math.max(0,Math.min(1,a))}function mixStopAlpha(a,b,t,mode){mode==="smooth"&&(t=t*t*(3-2*t));let aa=stopAlpha(a);return aa+(stopAlpha(b)-aa)*t}function sampleSortedRampRGBA(stops,mode,wrap,t){if(stops.length===0)return[255,255,255,1];if(stops.length===1)return[...stops[0].color,stopAlpha(stops[0])];t=Math.max(0,Math.min(1,t));let first=stops[0],last=stops[stops.length-1];if(t<=first.position||t>=last.position){if(!wrap){let edge=t<=first.position?first:last;return[...edge.color,stopAlpha(edge)]}let span=1-last.position+first.position,local=span<=0?0:(t>=last.position?t-last.position:t+1-last.position)/span;return mode==="step"?[...last.color,stopAlpha(last)]:[...mixRampColors(last.color,first.color,local,mode),mixStopAlpha(last,first,local,mode)]}for(let i=0;i<stops.length-1;i++){let a=stops[i],b=stops[i+1];if(t>b.position)continue;if(mode==="step")return[...a.color,stopAlpha(a)];let span=b.position-a.position,local=span<=0?0:(t-a.position)/span;return[...mixRampColors(a.color,b.color,local,mode),mixStopAlpha(a,b,local,mode)]}return[...last.color,stopAlpha(last)]}function buildRampLUT(ramp){let sorted=[...ramp.stops].sort((a,b)=>a.position-b.position),lut=new Uint8Array(256*3);for(let i=0;i<256;i++){let[r,g,b]=sampleSortedRampRGBA(sorted,ramp.mode,ramp.wrap,i/255);lut[i*3]=clampByte(r),lut[i*3+1]=clampByte(g),lut[i*3+2]=clampByte(b)}return lut}function buildRampLUTRGBA(ramp){let sorted=[...ramp.stops].sort((a,b)=>a.position-b.position),lut=new Uint8Array(256*4);for(let i=0;i<256;i++){let[r,g,b,a]=sampleSortedRampRGBA(sorted,ramp.mode,ramp.wrap,i/255);lut[i*4]=clampByte(r),lut[i*4+1]=clampByte(g),lut[i*4+2]=clampByte(b),lut[i*4+3]=clampByte(a*255)}return lut}function normalizePatternCode(code){return code.replace(/^\s*import\s+.*?;?\s*$/gm,"").replace(/\bexport\s+function\b/g,"function")}var WRAPPER_LINES_BEFORE_CODE=2,functionPreambleLines=null;function stackLocation(error){let stack=error instanceof Error?error.stack:null;if(!stack)return null;let match=stack.match(/(?:<anonymous>|Function|eval):(\d+):(\d+)/);return match?{line:Number(match[1]),column:Number(match[2])}:null}function getFunctionPreambleLines(){if(functionPreambleLines!==null)return functionPreambleLines;functionPreambleLines=2;try{new Function("throw new Error('probe');")()}catch(error){let location=stackLocation(error);location&&(functionPreambleLines=location.line-1)}return functionPreambleLines}function describePatternError(error,code){let message=error instanceof Error?error.message:String(error);if(!code)return message;let location=stackLocation(error);if(!location)return message;let line=location.line-getFunctionPreambleLines()-WRAPPER_LINES_BEFORE_CODE,sourceLines=code.split(`
+"use strict";(()=>{var PANEL_GEOMETRIES={"128x64_SINGLE":{id:1,physW:128,physH:64,chain:1,resW:128,resH:64},"64x64_SINGLE":{id:2,physW:64,physH:64,chain:1,resW:64,resH:64},"64x64_CHAIN2":{id:3,physW:64,physH:64,chain:2,resW:128,resH:64}},PANEL_GEOM_DEFAULT="128x64_SINGLE",KNOB_COUNT=4,DETENTS_PER_TURN=24;var PATTERN_MATRIX_WIDTH=PANEL_GEOMETRIES[PANEL_GEOM_DEFAULT].resW,PATTERN_MATRIX_HEIGHT=PANEL_GEOMETRIES[PANEL_GEOM_DEFAULT].resH,PATTERN_KNOB_COUNT=KNOB_COUNT,PATTERN_DETENTS_PER_TURN=DETENTS_PER_TURN;function clampByte(value){return Number.isFinite(value)?Math.max(0,Math.min(255,Math.round(value))):0}var RAMP_MODES=["linear","smooth","step","hsvShort","hsvLong","oklab","oklchShort","oklchLong"];function rgbToHsv(r,g,b){let rf=r/255,gf=g/255,bf=b/255,max=Math.max(rf,gf,bf),min=Math.min(rf,gf,bf),delta=max-min,h=0;delta>0&&(max===rf?h=(gf-bf)/delta%6:max===gf?h=(bf-rf)/delta+2:h=(rf-gf)/delta+4,h/=6,h<0&&(h+=1));let s=max===0?0:delta/max;return[h,s,max]}function hsvToRgbTuple(h,s,v){h=h-Math.floor(h);let i=Math.floor(h*6),f=h*6-i,p=v*(1-s),q=v*(1-f*s),t=v*(1-(1-f)*s),r,g,b;switch(i%6){case 0:r=v,g=t,b=p;break;case 1:r=q,g=v,b=p;break;case 2:r=p,g=v,b=t;break;case 3:r=p,g=q,b=v;break;case 4:r=t,g=p,b=v;break;default:r=v,g=p,b=q;break}return[Math.round(r*255),Math.round(g*255),Math.round(b*255)]}function srgbChannelToLinear(c){return c/=255,c<=.04045?c/12.92:Math.pow((c+.055)/1.055,2.4)}function linearChannelToSrgb(c){let v=c<=.0031308?c*12.92:1.055*Math.pow(c,.4166666666666667)-.055;return Math.max(0,Math.min(1,v))*255}function srgbToOklab(r,g,b){let lr=srgbChannelToLinear(r),lg=srgbChannelToLinear(g),lb=srgbChannelToLinear(b),l=Math.cbrt(.4122214708*lr+.5363325363*lg+.0514459929*lb),m=Math.cbrt(.2119034982*lr+.6806995451*lg+.1073969566*lb),s=Math.cbrt(.0883024619*lr+.2817188376*lg+.6299787005*lb);return[.2104542553*l+.793617785*m-.0040720468*s,1.9779984951*l-2.428592205*m+.4505937099*s,.0259040371*l+.7827717662*m-.808675766*s]}function oklabToLinearRgb(L,A,B){let l_=L+.3963377774*A+.2158037573*B,m_=L-.1055613458*A-.0638541728*B,s_=L-.0894841775*A-1.291485548*B,l=l_*l_*l_,m=m_*m_*m_,s=s_*s_*s_;return[4.0767416621*l-3.3077115913*m+.2309699292*s,-1.2684380046*l+2.6097574011*m-.3413193965*s,-.0041960863*l-.7034186147*m+1.707614701*s]}var GAMUT_EPS=1e-4;function inLinearGamut(rgb){return rgb[0]>=-GAMUT_EPS&&rgb[0]<=1+GAMUT_EPS&&rgb[1]>=-GAMUT_EPS&&rgb[1]<=1+GAMUT_EPS&&rgb[2]>=-GAMUT_EPS&&rgb[2]<=1+GAMUT_EPS}function oklabToSrgb(L,A,B){let rgb=oklabToLinearRgb(L,A,B);if(!inLinearGamut(rgb)){let lo=0,hi=1;for(let i=0;i<16;i++){let mid=(lo+hi)/2;inLinearGamut(oklabToLinearRgb(L,A*mid,B*mid))?lo=mid:hi=mid}rgb=oklabToLinearRgb(L,A*lo,B*lo)}return[linearChannelToSrgb(rgb[0]),linearChannelToSrgb(rgb[1]),linearChannelToSrgb(rgb[2])]}function mixRampColors(a,b,t,mode){if(mode==="smooth"&&(t=t*t*(3-2*t)),mode==="oklab"||mode==="oklchShort"||mode==="oklchLong"){let[La,Aa,Ba]=srgbToOklab(a[0],a[1],a[2]),[Lb,Ab,Bb]=srgbToOklab(b[0],b[1],b[2]),L=La+(Lb-La)*t;if(mode==="oklab")return oklabToSrgb(L,Aa+(Ab-Aa)*t,Ba+(Bb-Ba)*t);let CHROMA_EPS=1e-4,TWO_PI=Math.PI*2,Ca=Math.sqrt(Aa*Aa+Ba*Ba),Cb=Math.sqrt(Ab*Ab+Bb*Bb),hueA=Math.atan2(Ba,Aa)/TWO_PI;hueA<0&&(hueA+=1);let hueB=Math.atan2(Bb,Ab)/TWO_PI;hueB<0&&(hueB+=1);let h1=Ca<CHROMA_EPS?Cb<CHROMA_EPS?0:hueB:hueA,dh=(Cb<CHROMA_EPS?h1:hueB)-h1;mode==="oklchShort"?(dh>.5&&(dh-=1),dh<-.5&&(dh+=1)):dh>0&&dh<.5?dh-=1:dh<=0&&dh>-.5&&(dh+=1);let C=Ca+(Cb-Ca)*t,H=(h1+dh*t)*TWO_PI;return oklabToSrgb(L,Math.cos(H)*C,Math.sin(H)*C)}if(mode==="hsvShort"||mode==="hsvLong"){let ha=rgbToHsv(a[0],a[1],a[2]),hb=rgbToHsv(b[0],b[1],b[2]),h1=ha[1]===0?hb[0]:ha[0],dh=(hb[1]===0?h1:hb[0])-h1;return mode==="hsvShort"?(dh>.5&&(dh-=1),dh<-.5&&(dh+=1)):dh>0&&dh<.5?dh-=1:dh<=0&&dh>-.5&&(dh+=1),hsvToRgbTuple(h1+dh*t,ha[1]+(hb[1]-ha[1])*t,ha[2]+(hb[2]-ha[2])*t)}return[a[0]+(b[0]-a[0])*t,a[1]+(b[1]-a[1])*t,a[2]+(b[2]-a[2])*t]}function stopAlpha(stop){let a=stop.alpha;return a===void 0||!Number.isFinite(a)?1:Math.max(0,Math.min(1,a))}function mixStopAlpha(a,b,t,mode){mode==="smooth"&&(t=t*t*(3-2*t));let aa=stopAlpha(a);return aa+(stopAlpha(b)-aa)*t}function sampleSortedRampRGBA(stops,mode,wrap,t){if(stops.length===0)return[255,255,255,1];if(stops.length===1)return[...stops[0].color,stopAlpha(stops[0])];t=Math.max(0,Math.min(1,t));let first=stops[0],last=stops[stops.length-1];if(t<=first.position||t>=last.position){if(!wrap){let edge=t<=first.position?first:last;return[...edge.color,stopAlpha(edge)]}let span=1-last.position+first.position,local=span<=0?0:(t>=last.position?t-last.position:t+1-last.position)/span;return mode==="step"?[...last.color,stopAlpha(last)]:[...mixRampColors(last.color,first.color,local,mode),mixStopAlpha(last,first,local,mode)]}for(let i=0;i<stops.length-1;i++){let a=stops[i],b=stops[i+1];if(t>b.position)continue;if(mode==="step")return[...a.color,stopAlpha(a)];let span=b.position-a.position,local=span<=0?0:(t-a.position)/span;return[...mixRampColors(a.color,b.color,local,mode),mixStopAlpha(a,b,local,mode)]}return[...last.color,stopAlpha(last)]}function buildRampLUT(ramp){let sorted=[...ramp.stops].sort((a,b)=>a.position-b.position),lut=new Uint8Array(256*3);for(let i=0;i<256;i++){let[r,g,b]=sampleSortedRampRGBA(sorted,ramp.mode,ramp.wrap,i/255);lut[i*3]=clampByte(r),lut[i*3+1]=clampByte(g),lut[i*3+2]=clampByte(b)}return lut}function buildRampLUTRGBA(ramp){let sorted=[...ramp.stops].sort((a,b)=>a.position-b.position),lut=new Uint8Array(256*4);for(let i=0;i<256;i++){let[r,g,b,a]=sampleSortedRampRGBA(sorted,ramp.mode,ramp.wrap,i/255);lut[i*4]=clampByte(r),lut[i*4+1]=clampByte(g),lut[i*4+2]=clampByte(b),lut[i*4+3]=clampByte(a*255)}return lut}function normalizePatternCode(code){return code.replace(/^\s*import\s+.*?;?\s*$/gm,"").replace(/\bexport\s+function\b/g,"function")}var WRAPPER_LINES_BEFORE_CODE=2,functionPreambleLines=null;function stackLocation(error){let stack=error instanceof Error?error.stack:null;if(!stack)return null;let match=stack.match(/(?:<anonymous>|Function|eval):(\d+):(\d+)/);return match?{line:Number(match[1]),column:Number(match[2])}:null}function getFunctionPreambleLines(){if(functionPreambleLines!==null)return functionPreambleLines;functionPreambleLines=2;try{new Function("throw new Error('probe');")()}catch(error){let location=stackLocation(error);location&&(functionPreambleLines=location.line-1)}return functionPreambleLines}function describePatternError(error,code){let message=error instanceof Error?error.message:String(error);if(!code)return message;let location=stackLocation(error);if(!location)return message;let line=location.line-getFunctionPreambleLines()-WRAPPER_LINES_BEFORE_CODE,sourceLines=code.split(`
 `);if(line<1||line>sourceLines.length)return message;let source=sourceLines[line-1].trim(),quoted=source.length>80?`${source.slice(0,79)}\u2026`:source;return`${message}
 line ${line}: ${quoted}`}function compilePatternCode(code){let wrapper=`
     "use strict";
@@ -29,7 +29,7 @@
       update: typeof update === "function" ? update : undefined,
       draw: typeof draw === "function" ? draw : undefined
     };
-  `,moduleObject=new Function(wrapper)();if(typeof moduleObject.draw!="function")throw new Error("Pattern must export draw(display, params, time).");return moduleObject}var PatternRuntime=class{constructor(width=128,height=64){this.ramp=null;this.recolor=!1;this.rampLUT=null;this.rampLUTA=null;this.module=null;this.params={};this.source=null;this.loadError=null;this.width=width,this.height=height,this.data=new Uint8ClampedArray(width*height*4),this.display={width,height,setPixel:(x,y,r,g,b)=>{var _a,_b,_c;let xi=Math.floor(x),yi=Math.floor(y);if(xi<0||xi>=this.width||yi<0||yi>=this.height)return;let cr,cg,cb;Array.isArray(r)?(cr=(_a=r[0])!=null?_a:0,cg=(_b=r[1])!=null?_b:0,cb=(_c=r[2])!=null?_c:0):(cr=r,cg=g!=null?g:0,cb=b!=null?b:0);let index=(yi*this.width+xi)*4;this.data[index]=clampByte(cr),this.data[index+1]=clampByte(cg),this.data[index+2]=clampByte(cb),this.data[index+3]=255},setValue:(x,y,v)=>{let xi=Math.floor(x),yi=Math.floor(y);if(xi<0||xi>=this.width||yi<0||yi>=this.height)return;let value=Number.isFinite(v)?Math.max(0,Math.min(1,v)):0,index=(yi*this.width+xi)*4,lut=this.rampLUTA;if(lut){let li=Math.round(value*255)*4;this.data[index]=lut[li],this.data[index+1]=lut[li+1],this.data[index+2]=lut[li+2],this.data[index+3]=lut[li+3]}else{let byte=Math.round(value*255);this.data[index]=byte,this.data[index+1]=byte,this.data[index+2]=byte,this.data[index+3]=255}}}}setRamp(ramp){this.ramp=ramp,this.rampLUT=ramp&&ramp.stops.length>0?buildRampLUT(ramp):null,this.rampLUTA=ramp&&ramp.stops.length>0?buildRampLUTRGBA(ramp):null}loadCode(code){var _a,_b;this.source=code;try{return this.module=compilePatternCode(code),this.params={},this.data.fill(0),(_b=(_a=this.module).setup)==null||_b.call(_a,this.params),this.loadError=null,{ok:!0}}catch(error){return this.module=null,this.loadError=describePatternError(error,code),{ok:!1,error:this.loadError}}}renderFrame(dt,time,input){var _a,_b,_c;if(!this.module)return{ok:!1,error:(_a=this.loadError)!=null?_a:"No pattern loaded."};try{if(this.params.knobValues=input.knobValues,this.params.knobNormalized=input.knobNormalized,this.params.knobDeltas=input.knobDeltas,this.params.knobRanges=input.knobRanges,this.params.btnPressed=input.btnPressed,this.params.btnHeld=input.btnHeld,(_c=(_b=this.module).update)==null||_c.call(_b,dt,input,this.params),this.data.fill(0),this.module.draw(this.display,this.params,time),this.recolor&&this.rampLUTA){let lut=this.rampLUTA,data=this.data;for(let index=0;index<data.length;index+=4){if(data[index+3]===0)continue;let li=Math.round(.2126*data[index]+.7152*data[index+1]+.0722*data[index+2])*4;data[index]=lut[li],data[index+1]=lut[li+1],data[index+2]=lut[li+2],data[index+3]=lut[li+3]}}return{ok:!0}}catch(error){return{ok:!1,error:describePatternError(error,this.source)}}}getParamsSnapshot(){return JSON.parse(JSON.stringify(this.params))}};function knobTargetToDelta(previous,next,wrap=!1,unitsPerTurn=1){let delta=next-previous;return wrap&&(delta>.5&&(delta-=1),delta<-.5&&(delta+=1)),delta*(24/unitsPerTurn)}function hexToRgb(hex){let value=parseInt(hex.slice(1),16);return[value>>16&255,value>>8&255,value&255]}var DEFAULT_MATRIX={width:128,height:64};var MATRIX_MIN=8,MATRIX_MAX=512,MATRIX_LINE_RE=/^[ \t]*\/\/[ \t]*@matrix[ \t]+(\d{1,4})[ \t]*[x×*][ \t]*(\d{1,4})[ \t]*$/m;function clampDimension(value){if(!Number.isFinite(value))return null;let rounded=Math.round(value);return rounded<MATRIX_MIN||rounded>MATRIX_MAX?null:rounded}var MATRIX_HEAVY_PIXELS=8192*4;function parseMatrixAnnotation(code){let match=code.match(MATRIX_LINE_RE);if(!match)return null;let width=clampDimension(Number(match[1])),height=clampDimension(Number(match[2]));return width===null||height===null?null:{width,height}}function matrixFromCode(code){var _a;return(_a=parseMatrixAnnotation(code))!=null?_a:DEFAULT_MATRIX}var MAX_ANNOTATION_STOPS=64,RAMP_LINE_RE=/^[ \t]*\/\/[ \t]*@ramp[ \t]+(.+)$/m,STOP_RE=/^(\d*\.?\d+):(#[0-9a-fA-F]{6})$/;function parseRampAnnotation(code){let match=code.match(RAMP_LINE_RE);if(!match)return null;let tokens=match[1].trim().split(/\s+/);if(tokens.length===0)return null;let mode=RAMP_MODES.includes(tokens[0])?tokens[0]:null;if(!mode)return null;let wrap=!1,recolor=!1,stops=[];for(let token of tokens.slice(1)){if(token==="wrap"){wrap=!0;continue}if(token==="recolor"){recolor=!0;continue}let stop=token.match(STOP_RE);if(!stop||stops.length>=MAX_ANNOTATION_STOPS)continue;let position=Number(stop[1]);Number.isFinite(position)&&stops.push({position:Math.max(0,Math.min(1,position)),color:stop[2].toLowerCase()})}return stops.length===0?null:{stops,mode,wrap,recolor}}var DEFAULT_RAMP={stops:[{position:0,color:[8,24,64]},{position:.55,color:[255,77,0]},{position:1,color:[255,232,154]}],mode:"linear",wrap:!1};function load(code,frame){let runtime=new PatternRuntime(frame.width,frame.height),annotation=parseRampAnnotation(code),ramp=annotation?{stops:annotation.stops.map(stop=>({position:stop.position,color:hexToRgb(stop.color)})),mode:annotation.mode,wrap:annotation.wrap}:DEFAULT_RAMP;runtime.setRamp(ramp),runtime.recolor=!!(annotation!=null&&annotation.recolor);let result=runtime.loadCode(code);return{loaded:{runtime},ok:result.ok,error:result.error}}function render(loaded,dt,time,input){return loaded.runtime.renderFrame(dt,time,input)}function makeInput(deltas,values,normalized,ranges){let flags=[!1,!1,!1,!1];return{knobDeltas:deltas!=null?deltas:[0,0,0,0],knobValues:values,knobNormalized:normalized,knobRanges:ranges,btnPressed:flags,btnHeld:flags.slice()}}function normalize(values,ranges){return values.map((v,i)=>{var _a;let range=(_a=ranges[i])!=null?_a:[0,1],span=Math.max(.001,range[1]-range[0]);return(v-range[0])/span})}var canvas=document.getElementById("screen"),context=canvas.getContext("2d"),imageData=context.createImageData(canvas.width,canvas.height);function resizeLive(frame){canvas.width===frame.width&&canvas.height===frame.height||(canvas.width=frame.width,canvas.height=frame.height,imageData=context.createImageData(frame.width,frame.height))}var MAX_STEP=.05,MAX_CATCHUP=.25,live={loaded:null,running:!0,simTime:0,lastNow:0,knobValues:[.5,.5,.5,.5],knobRanges:[[0,1],[0,1],[0,1],[0,1]],knobWrap:[!1,!1,!1,!1],knobUnitsPerTurn:[1,1,1,1],prevKnobs:null,failed:!1,painted:!1,frame:0,get runtime(){var _a,_b;return(_b=(_a=this.loaded)==null?void 0:_a.runtime)!=null?_b:null}};function paint(loaded){imageData.data.set(loaded.runtime.data),context.putImageData(imageData,0,0)}function post(message){parent.postMessage(message,"*")}function step(dt,withKnobDeltas){var _a;if(!live.loaded)return!1;live.simTime+=dt;let deltas=null;if(withKnobDeltas){let prev=(_a=live.prevKnobs)!=null?_a:live.knobValues;deltas=live.knobValues.map((v,i)=>knobTargetToDelta(prev[i],v,live.knobWrap[i],live.knobUnitsPerTurn[i]||1)),live.prevKnobs=live.knobValues.slice()}let input=makeInput(deltas,live.knobValues,normalize(live.knobValues,live.knobRanges),live.knobRanges),result=render(live.loaded,dt,live.simTime,input);return result.ok?!0:(live.failed=!0,post({type:"pf-status",ok:!1,error:result.error}),!1)}function wake(){live.frame!==0||live.failed||!live.loaded||(live.lastNow=performance.now(),live.frame=requestAnimationFrame(tick))}function tick(now){live.frame=0;let loaded=live.loaded;if(!loaded||live.failed)return;let elapsed=Math.min(Math.max(0,(now-live.lastNow)/1e3),MAX_CATCHUP);if(live.lastNow=now,!live.running){!live.painted&&step(0,!0)&&(paint(loaded),live.painted=!0);return}let remaining=elapsed,first=!0;do{let slice=remaining>MAX_STEP?MAX_STEP:remaining;if(!step(slice,first))return;remaining-=slice,first=!1}while(remaining>1e-5);paint(loaded),live.painted=!0,live.frame=requestAnimationFrame(tick)}function renderStill(request){var _a,_b,_c;let code=String((_a=request.code)!=null?_a:""),frame=matrixFromCode(code),{loaded,ok,error}=load(code,frame);if(!ok)return{ok:!1,error};let fps=request.fps||15,seconds=typeof request.seconds=="number"?request.seconds:.9,frames=Math.max(1,Math.floor(seconds*fps)),values=(_b=request.knobValues)!=null?_b:[.5,.5,.5,.5],ranges=(_c=request.knobRanges)!=null?_c:[[0,1],[0,1],[0,1],[0,1]],normalizedValues=normalize(values,ranges);for(let f=0;f<frames;f++){let result=render(loaded,1/fps,f/fps,makeInput(null,values,normalizedValues,ranges));if(!result.ok)return{ok:!1,error:result.error}}let off=document.createElement("canvas");off.width=frame.width,off.height=frame.height;let offContext=off.getContext("2d"),offImage=offContext.createImageData(frame.width,frame.height);return offImage.data.set(loaded.runtime.data),offContext.putImageData(offImage,0,0),{ok:!0,dataUrl:off.toDataURL("image/png")}}window.addEventListener("message",event=>{var _a;let msg=event.data;if(!(!msg||typeof msg.type!="string")){if(msg.type==="pf-load"){let code=String((_a=msg.code)!=null?_a:""),frame=matrixFromCode(code);resizeLive(frame),live.simTime=0,live.lastNow=performance.now(),live.failed=!1,live.prevKnobs=null,live.painted=!1,Array.isArray(msg.knobValues)&&(live.knobValues=msg.knobValues.slice(0,4)),Array.isArray(msg.knobRanges)&&(live.knobRanges=msg.knobRanges),Array.isArray(msg.knobWrap)&&(live.knobWrap=msg.knobWrap),Array.isArray(msg.knobUnitsPerTurn)&&(live.knobUnitsPerTurn=msg.knobUnitsPerTurn),typeof msg.running=="boolean"&&(live.running=msg.running);let{loaded,ok,error}=load(code,frame);live.loaded=loaded,ok?(paint(loaded),post({type:"pf-status",ok:!0}),wake()):(live.failed=!0,post({type:"pf-status",ok:!1,error}))}else if(msg.type==="pf-knobs")Array.isArray(msg.values)&&(live.knobValues=msg.values.slice(0,4)),Array.isArray(msg.ranges)&&(live.knobRanges=msg.ranges),live.painted=!1,wake();else if(msg.type==="pf-run")live.running=!!msg.running,wake();else if(msg.type==="pf-still"){let result;try{result=renderStill(msg)}catch(error){result={ok:!1,error:error instanceof Error?error.message:String(error)}}post({...result,type:"pf-still-result",id:msg.id})}}});globalThis.__pfLive=live;post({type:"pf-ready"});})();
+  `,moduleObject=new Function(wrapper)();if(typeof moduleObject.draw!="function")throw new Error("Pattern must export draw(display, params, time).");return moduleObject}var PatternRuntime=class{constructor(width=PATTERN_MATRIX_WIDTH,height=PATTERN_MATRIX_HEIGHT){this.ramp=null;this.recolor=!1;this.rampLUT=null;this.rampLUTA=null;this.module=null;this.params={};this.source=null;this.loadError=null;this.width=width,this.height=height,this.data=new Uint8ClampedArray(width*height*4),this.display={width,height,setPixel:(x,y,r,g,b)=>{var _a,_b,_c;let xi=Math.floor(x),yi=Math.floor(y);if(xi<0||xi>=this.width||yi<0||yi>=this.height)return;let cr,cg,cb;Array.isArray(r)?(cr=(_a=r[0])!=null?_a:0,cg=(_b=r[1])!=null?_b:0,cb=(_c=r[2])!=null?_c:0):(cr=r,cg=g!=null?g:0,cb=b!=null?b:0);let index=(yi*this.width+xi)*4;this.data[index]=clampByte(cr),this.data[index+1]=clampByte(cg),this.data[index+2]=clampByte(cb),this.data[index+3]=255},setValue:(x,y,v)=>{let xi=Math.floor(x),yi=Math.floor(y);if(xi<0||xi>=this.width||yi<0||yi>=this.height)return;let value=Number.isFinite(v)?Math.max(0,Math.min(1,v)):0,index=(yi*this.width+xi)*4,lut=this.rampLUTA;if(lut){let li=Math.round(value*255)*4;this.data[index]=lut[li],this.data[index+1]=lut[li+1],this.data[index+2]=lut[li+2],this.data[index+3]=lut[li+3]}else{let byte=Math.round(value*255);this.data[index]=byte,this.data[index+1]=byte,this.data[index+2]=byte,this.data[index+3]=255}}}}setRamp(ramp){this.ramp=ramp,this.rampLUT=ramp&&ramp.stops.length>0?buildRampLUT(ramp):null,this.rampLUTA=ramp&&ramp.stops.length>0?buildRampLUTRGBA(ramp):null}loadCode(code){var _a,_b;this.source=code;try{return this.module=compilePatternCode(code),this.params={},this.data.fill(0),(_b=(_a=this.module).setup)==null||_b.call(_a,this.params),this.loadError=null,{ok:!0}}catch(error){return this.module=null,this.loadError=describePatternError(error,code),{ok:!1,error:this.loadError}}}renderFrame(dt,time,input){var _a,_b,_c;if(!this.module)return{ok:!1,error:(_a=this.loadError)!=null?_a:"No pattern loaded."};try{if(this.params.knobValues=input.knobValues,this.params.knobNormalized=input.knobNormalized,this.params.knobDeltas=input.knobDeltas,this.params.knobRanges=input.knobRanges,this.params.btnPressed=input.btnPressed,this.params.btnHeld=input.btnHeld,(_c=(_b=this.module).update)==null||_c.call(_b,dt,input,this.params),this.data.fill(0),this.module.draw(this.display,this.params,time),this.recolor&&this.rampLUTA){let lut=this.rampLUTA,data=this.data;for(let index=0;index<data.length;index+=4){if(data[index+3]===0)continue;let li=Math.round(.2126*data[index]+.7152*data[index+1]+.0722*data[index+2])*4;data[index]=lut[li],data[index+1]=lut[li+1],data[index+2]=lut[li+2],data[index+3]=lut[li+3]}}return{ok:!0}}catch(error){return{ok:!1,error:describePatternError(error,this.source)}}}getParamsSnapshot(){return JSON.parse(JSON.stringify(this.params))}};function knobTargetToDelta(previous,next,wrap=!1,unitsPerTurn=1){let delta=next-previous;return wrap&&(delta>.5&&(delta-=1),delta<-.5&&(delta+=1)),delta*(PATTERN_DETENTS_PER_TURN/unitsPerTurn)}function hexToRgb(hex){let value=parseInt(hex.slice(1),16);return[value>>16&255,value>>8&255,value&255]}var DEFAULT_MATRIX={width:PANEL_GEOMETRIES[PANEL_GEOM_DEFAULT].resW,height:PANEL_GEOMETRIES[PANEL_GEOM_DEFAULT].resH};var MATRIX_MIN=8,MATRIX_MAX=512,MATRIX_LINE_RE=/^[ \t]*\/\/[ \t]*@matrix[ \t]+(\d{1,4})[ \t]*[x×*][ \t]*(\d{1,4})[ \t]*$/m;function clampDimension(value){if(!Number.isFinite(value))return null;let rounded=Math.round(value);return rounded<MATRIX_MIN||rounded>MATRIX_MAX?null:rounded}var MATRIX_HEAVY_PIXELS=DEFAULT_MATRIX.width*DEFAULT_MATRIX.height*4;function parseMatrixAnnotation(code){let match=code.match(MATRIX_LINE_RE);if(!match)return null;let width=clampDimension(Number(match[1])),height=clampDimension(Number(match[2]));return width===null||height===null?null:{width,height}}function matrixFromCode(code){var _a;return(_a=parseMatrixAnnotation(code))!=null?_a:DEFAULT_MATRIX}var MAX_ANNOTATION_STOPS=64,RAMP_LINE_RE=/^[ \t]*\/\/[ \t]*@ramp[ \t]+(.+)$/m,STOP_RE=/^(\d*\.?\d+):(#[0-9a-fA-F]{6})$/;function parseRampAnnotation(code){let match=code.match(RAMP_LINE_RE);if(!match)return null;let tokens=match[1].trim().split(/\s+/);if(tokens.length===0)return null;let mode=RAMP_MODES.includes(tokens[0])?tokens[0]:null;if(!mode)return null;let wrap=!1,recolor=!1,stops=[];for(let token of tokens.slice(1)){if(token==="wrap"){wrap=!0;continue}if(token==="recolor"){recolor=!0;continue}let stop=token.match(STOP_RE);if(!stop||stops.length>=MAX_ANNOTATION_STOPS)continue;let position=Number(stop[1]);Number.isFinite(position)&&stops.push({position:Math.max(0,Math.min(1,position)),color:stop[2].toLowerCase()})}return stops.length===0?null:{stops,mode,wrap,recolor}}var DEFAULT_RAMP={stops:[{position:0,color:[8,24,64]},{position:.55,color:[255,77,0]},{position:1,color:[255,232,154]}],mode:"linear",wrap:!1};function load(code,frame){let runtime=new PatternRuntime(frame.width,frame.height),annotation=parseRampAnnotation(code),ramp=annotation?{stops:annotation.stops.map(stop=>({position:stop.position,color:hexToRgb(stop.color)})),mode:annotation.mode,wrap:annotation.wrap}:DEFAULT_RAMP;runtime.setRamp(ramp),runtime.recolor=!!(annotation!=null&&annotation.recolor);let result=runtime.loadCode(code);return{loaded:{runtime},ok:result.ok,error:result.error}}function render(loaded,dt,time,input){return loaded.runtime.renderFrame(dt,time,input)}function makeInput(deltas,values,normalized,ranges){let flags=[!1,!1,!1,!1];return{knobDeltas:deltas!=null?deltas:[0,0,0,0],knobValues:values,knobNormalized:normalized,knobRanges:ranges,btnPressed:flags,btnHeld:flags.slice()}}function normalize(values,ranges){return values.map((v,i)=>{var _a;let range=(_a=ranges[i])!=null?_a:[0,1],span=Math.max(.001,range[1]-range[0]);return(v-range[0])/span})}var canvas=document.getElementById("screen"),context=canvas.getContext("2d"),imageData=context.createImageData(canvas.width,canvas.height);function resizeLive(frame){canvas.width===frame.width&&canvas.height===frame.height||(canvas.width=frame.width,canvas.height=frame.height,imageData=context.createImageData(frame.width,frame.height))}var MAX_STEP=.05,MAX_CATCHUP=.25,live={loaded:null,running:!0,simTime:0,lastNow:0,knobValues:[.5,.5,.5,.5],knobRanges:[[0,1],[0,1],[0,1],[0,1]],knobWrap:[!1,!1,!1,!1],knobUnitsPerTurn:[1,1,1,1],prevKnobs:null,failed:!1,painted:!1,frame:0,get runtime(){var _a,_b;return(_b=(_a=this.loaded)==null?void 0:_a.runtime)!=null?_b:null}};function paint(loaded){imageData.data.set(loaded.runtime.data),context.putImageData(imageData,0,0)}function post(message){parent.postMessage(message,"*")}function step(dt,withKnobDeltas){var _a;if(!live.loaded)return!1;live.simTime+=dt;let deltas=null;if(withKnobDeltas){let prev=(_a=live.prevKnobs)!=null?_a:live.knobValues;deltas=live.knobValues.map((v,i)=>knobTargetToDelta(prev[i],v,live.knobWrap[i],live.knobUnitsPerTurn[i]||1)),live.prevKnobs=live.knobValues.slice()}let input=makeInput(deltas,live.knobValues,normalize(live.knobValues,live.knobRanges),live.knobRanges),result=render(live.loaded,dt,live.simTime,input);return result.ok?!0:(live.failed=!0,post({type:"pf-status",ok:!1,error:result.error}),!1)}function wake(){live.frame!==0||live.failed||!live.loaded||(live.lastNow=performance.now(),live.frame=requestAnimationFrame(tick))}function tick(now){live.frame=0;let loaded=live.loaded;if(!loaded||live.failed)return;let elapsed=Math.min(Math.max(0,(now-live.lastNow)/1e3),MAX_CATCHUP);if(live.lastNow=now,!live.running){!live.painted&&step(0,!0)&&(paint(loaded),live.painted=!0);return}let remaining=elapsed,first=!0;do{let slice=remaining>MAX_STEP?MAX_STEP:remaining;if(!step(slice,first))return;remaining-=slice,first=!1}while(remaining>1e-5);paint(loaded),live.painted=!0,live.frame=requestAnimationFrame(tick)}function renderStill(request){var _a,_b,_c;let code=String((_a=request.code)!=null?_a:""),frame=matrixFromCode(code),{loaded,ok,error}=load(code,frame);if(!ok)return{ok:!1,error};let fps=request.fps||15,seconds=typeof request.seconds=="number"?request.seconds:.9,frames=Math.max(1,Math.floor(seconds*fps)),values=(_b=request.knobValues)!=null?_b:[.5,.5,.5,.5],ranges=(_c=request.knobRanges)!=null?_c:[[0,1],[0,1],[0,1],[0,1]],normalizedValues=normalize(values,ranges);for(let f=0;f<frames;f++){let result=render(loaded,1/fps,f/fps,makeInput(null,values,normalizedValues,ranges));if(!result.ok)return{ok:!1,error:result.error}}let off=document.createElement("canvas");off.width=frame.width,off.height=frame.height;let offContext=off.getContext("2d"),offImage=offContext.createImageData(frame.width,frame.height);return offImage.data.set(loaded.runtime.data),offContext.putImageData(offImage,0,0),{ok:!0,dataUrl:off.toDataURL("image/png")}}window.addEventListener("message",event=>{var _a;let msg=event.data;if(!(!msg||typeof msg.type!="string")){if(msg.type==="pf-load"){let code=String((_a=msg.code)!=null?_a:""),frame=matrixFromCode(code);resizeLive(frame),live.simTime=0,live.lastNow=performance.now(),live.failed=!1,live.prevKnobs=null,live.painted=!1,Array.isArray(msg.knobValues)&&(live.knobValues=msg.knobValues.slice(0,PATTERN_KNOB_COUNT)),Array.isArray(msg.knobRanges)&&(live.knobRanges=msg.knobRanges),Array.isArray(msg.knobWrap)&&(live.knobWrap=msg.knobWrap),Array.isArray(msg.knobUnitsPerTurn)&&(live.knobUnitsPerTurn=msg.knobUnitsPerTurn),typeof msg.running=="boolean"&&(live.running=msg.running);let{loaded,ok,error}=load(code,frame);live.loaded=loaded,ok?(paint(loaded),post({type:"pf-status",ok:!0}),wake()):(live.failed=!0,post({type:"pf-status",ok:!1,error}))}else if(msg.type==="pf-knobs")Array.isArray(msg.values)&&(live.knobValues=msg.values.slice(0,PATTERN_KNOB_COUNT)),Array.isArray(msg.ranges)&&(live.knobRanges=msg.ranges),live.painted=!1,wake();else if(msg.type==="pf-run")live.running=!!msg.running,wake();else if(msg.type==="pf-still"){let result;try{result=renderStill(msg)}catch(error){result={ok:!1,error:error instanceof Error?error.message:String(error)}}post({...result,type:"pf-still-result",id:msg.id})}}});globalThis.__pfLive=live;post({type:"pf-ready"});})();
 </script>
 </body>
 </html>
diff --git a/web/src/lib/guide/deviceSim.ts b/web/src/lib/guide/deviceSim.ts
index dae2d1da0..ce21954d0 100644
--- a/web/src/lib/guide/deviceSim.ts
+++ b/web/src/lib/guide/deviceSim.ts
@@ -13,13 +13,14 @@
 // device prints on its KNOB MAP screen. Where each one sits on the front is
 // the 3D stage's business.
 
-import { PATTERN_DETENTS_PER_TURN, PatternRuntime, type ColorRamp, type PatternInput } from "@/lib/pattern/harness";
+import { PatternRuntime, type ColorRamp, type PatternInput } from "@/lib/pattern/harness";
 import { parseRampAnnotation } from "@/lib/pattern/ramp";
 import { hexToRgb } from "@/lib/pattern/color";
 import { knobSetupFromCode } from "@/lib/community/knobs";
 import { LOGICAL_KNOB_DEFAULTS, knobUnitsPerTurn } from "@/lib/pattern/controls";
 import { livePresets } from "@/lib/presets";
 import { BASICS_PACK } from "@/lib/pattern/packs";
+import { BUS_MAX, BUS_UNITS_PER_CLICK, DETENTS_PER_TURN, EDGES_PER_DETENT, KNOB_COUNT } from "@/lib/shared/constants";
 import { BASICS_NAMES } from "./basicsNames";
 import {
   brightnessPercent,
@@ -145,7 +146,6 @@ export type SimConsoleState = {
 // write. A channel is held once written; a change of the held value reaches
 // a pattern as clicks, ten bus units each, the remainder carried; a hand on
 // that encoder takes it back after a grace.
-const BUS_UNITS_PER_CLICK = 10;
 const BUS_RELEASE_GRACE_MS = 250;
 
 // The lanes (docs/audio-ws-spec.md): what sound writes. A lane is an absolute
@@ -197,7 +197,7 @@ export class DeviceSim {
   private now = 0;
   private time = 0;
 
-  private knobs: Knob[] = Array.from({ length: 4 }, () => ({
+  private knobs: Knob[] = Array.from({ length: KNOB_COUNT }, () => ({
     down: false,
     downAt: 0,
     longFired: false,
@@ -330,7 +330,7 @@ export class DeviceSim {
    * the AUD row switched off stops all four.
    */
   setLane(source: SimLaneSource, knob: number, value: number) {
-    if (source !== this.laneSource || !Number.isInteger(knob) || knob < 0 || knob > 3 || !Number.isFinite(value)) return;
+    if (source !== this.laneSource || !Number.isInteger(knob) || knob < 0 || knob >= KNOB_COUNT || !Number.isFinite(value)) return;
     this.laneValue[knob] = clamp(value, 0, 1);
     this.laneAt[knob] = this.now;
   }
@@ -499,8 +499,8 @@ export class DeviceSim {
    * (core_bus.h applyRemoteParam). The 3D knob does not turn — nothing did.
    */
   applyRemoteParam(knob: number, value: number) {
-    if (knob < 0 || knob > 3 || !Number.isFinite(value)) return;
-    const v = clamp(Math.round(value), 0, 1000);
+    if (knob < 0 || knob >= KNOB_COUNT || !Number.isFinite(value)) return;
+    const v = clamp(Math.round(value), 0, BUS_MAX);
     if (this.busHeld[knob]) {
       const acc = this.busResidual[knob] + (v - this.busValue[knob]);
       const d = Math.trunc(acc / BUS_UNITS_PER_CLICK);
@@ -520,9 +520,9 @@ export class DeviceSim {
 
   /** The /knobs page: which way each encoder counts and how many of its 4 edges make a click. */
   setKnobSettings(invert: boolean[], edgesPerClick: number[]) {
-    for (let i = 0; i < 4; i++) {
-      const sub = [1, 2, 4].includes(edgesPerClick[i]) ? edgesPerClick[i] : 4;
-      this.clickScale[i] = (invert[i] ? -1 : 1) * (4 / sub);
+    for (let i = 0; i < KNOB_COUNT; i++) {
+      const sub = [1, 2, 4].includes(edgesPerClick[i]) ? edgesPerClick[i] : EDGES_PER_DETENT;
+      this.clickScale[i] = (invert[i] ? -1 : 1) * (EDGES_PER_DETENT / sub);
     }
   }
 
@@ -700,7 +700,7 @@ export class DeviceSim {
       const d = detents[i];
       if (!d) continue;
       const [min, max] = this.ranges[i] ?? [0, 1];
-      const next = values[i] + d * (knobUnitsPerTurn([min, max]) / PATTERN_DETENTS_PER_TURN);
+      const next = values[i] + d * (knobUnitsPerTurn([min, max]) / DETENTS_PER_TURN);
       values[i] = this.wraps[i] ? wrap(next, min, max) : clamp(next, min, max);
     }
   }
@@ -710,7 +710,7 @@ export class DeviceSim {
     // SELECT clears the name card (patternflow.ino:1731).
     if (mode === "select") this.noticeUntil = -1;
     // SELECT drops every held bus channel, so browsing never fights one (patternflow.ino).
-    if (mode === "select") for (let i = 0; i < 4; i++) if (this.busHeld[i]) this.releaseBus(i);
+    if (mode === "select") for (let i = 0; i < KNOB_COUNT; i++) if (this.busHeld[i]) this.releaseBus(i);
     this.mode = mode;
     this.idleAt = this.now;
     this.onModeChange?.(mode);
diff --git a/web/src/lib/guide/panelScreens.ts b/web/src/lib/guide/panelScreens.ts
index 5fdced609..59048832e 100644
--- a/web/src/lib/guide/panelScreens.ts
+++ b/web/src/lib/guide/panelScreens.ts
@@ -10,8 +10,9 @@
 //   firmware/patternflow/src/hub75/ESP32-HUB75-MatrixPanel-I2S-DMA.h
 //                                              drawPixel/fillRect overrides, the
 //                                              rotation transform, RGB565 -> 888
-// Line numbers cited here are from those files at v3.10.4. When a screen
-// changes there, change it here - the test pins a few pixels so drift shows.
+// Firmware constants are cited by name. Other line numbers cited here are
+// from those files at v3.10.4. When a screen changes there, change it here -
+// the test pins a few pixels so drift shows.
 //
 // Things the port reproduces on purpose, because the panel does them:
 //  - Adafruit GFX's text wrap is on (the default; nothing in the firmware turns
@@ -36,11 +37,18 @@
 // License: MIT. The two font tables this draws with are BSD - see glcdFont.ts
 // and tomThumbFont.ts for their notices.
 
+import {
+  BUTTON_DEBOUNCE_MS,
+  EDGES_PER_DETENT,
+  LONG_PRESS_MS,
+  PANEL_GEOMETRIES,
+  PANEL_GEOM_DEFAULT,
+} from "@/lib/shared/constants";
 import { GLCD_FONT } from "./glcdFont";
 import { TOM_THUMB, type GfxFont } from "./tomThumbFont";
 
-export const PANEL_W = 128;
-export const PANEL_H = 64;
+export const PANEL_W: number = PANEL_GEOMETRIES[PANEL_GEOM_DEFAULT].resW;
+export const PANEL_H: number = PANEL_GEOMETRIES[PANEL_GEOM_DEFAULT].resH;
 const FRAME_BYTES = PANEL_W * PANEL_H * 4;
 
 export type Rgb = readonly [number, number, number];
@@ -71,15 +79,15 @@ export type PanelOverlay =
       wifi: WifiStatusText | (string & {});
       /** ipString(): the dotted IP, or "-" when not connected (src/core_wifi.h:629-632). */
       ip: string;
-      /** Feature toggle rows; a core build has none. At most two are drawn (patternflow.ino:759). */
+      /** Feature toggle rows; a core build has none. At most two are drawn (MAX_FEATURE_ROWS, patternflow.ino). */
       rows?: { name: string; on: boolean }[];
       /** The hotspot's name, e.g. "patternflow-a1b2", when the panel's own AP is up. Shown only while not connected. */
       hotspotName?: string;
       /** PatternflowWifi::isConnected(). Defaults to wifi === "CONNECTED". */
       connected?: boolean;
-      /** "K1 = SLEEP" line; true unless a build compiles sleep out (config.h:247-248). */
+      /** "K1 = SLEEP" line; true unless a build compiles sleep out (PF_SLEEP_ENABLED, config.h). */
       sleepHint?: boolean;
-      /** "K4=UPDATE" line; true unless a build compiles the web update out (net_config.h:172-173). */
+      /** "K4=UPDATE" line; true unless a build compiles the web update out (PF_WEBUPDATE_ENABLED, net_config.h). */
       updateHint?: boolean;
     }
   | {
@@ -123,7 +131,7 @@ export type PanelOverlay =
 
 // ── Firmware constants ──────────────────────────────────────────────────────
 
-const DEFAULT_BRIGHTNESS = 204; // firmware/patternflow/config.h:241 ("80%")
+const DEFAULT_BRIGHTNESS = 204; // DEFAULT_BRIGHTNESS, firmware/patternflow/config.h ("80%")
 
 /** The percentage the panel prints for a brightness byte (patternflow.ino:693). */
 export function brightnessPercent(level: number): number {
@@ -155,50 +163,53 @@ export interface FirmwareConstants {
 }
 
 export const FIRMWARE: Readonly<FirmwareConstants> = Object.freeze({
-  // MODE_HOLD_MS, patternflow.ino:269. Fires WHILE still held, on the first
-  // frame the hold exceeds it (strict >, src/core_encoders.h:172); the release
-  // that follows is not a click (core_encoders.h:151-154).
-  longPressMs: 1000,
-  // Button edges closer than this are ignored (src/core_encoders.h:143).
-  buttonDebounceMs: 50,
-  // Quadrature edges per detent (knobSubSteps default, src/core_encoders.h:76);
-  // one detent = one knob delta (patternflow.ino:1168-1182, no acceleration).
-  edgesPerDetent: 4,
-  // BRIGHTNESS_IDLE_MS, patternflow.ino:270; checked with > at :1566. The timer
-  // restarts on entry (:1539) and only when a turn actually changes the level
-  // (:1555-1559) - turning against the 5/255 clamp does not keep it open.
+  // MODE_HOLD_MS in patternflow.ino, LONG_PRESS_MS in shared/constants.json.
+  // Fires WHILE still held, on the first frame the hold exceeds it (strict >,
+  // Button::longPressed in src/core_encoders.h); the release that follows is
+  // not a click (Button::pressed).
+  longPressMs: LONG_PRESS_MS,
+  // Button edges closer than this are ignored (Button::pressed in
+  // src/core_encoders.h, BUTTON_DEBOUNCE_MS in shared/constants.json).
+  buttonDebounceMs: BUTTON_DEBOUNCE_MS,
+  // Quadrature edges per detent (the knobSubSteps default in
+  // src/core_encoders.h, EDGES_PER_DETENT in shared/constants.json); one
+  // detent = one knob delta (readInputFrame in patternflow.ino, no acceleration).
+  edgesPerDetent: EDGES_PER_DETENT,
+  // BRIGHTNESS_IDLE_MS in patternflow.ino, checked with > in loop(). The timer
+  // restarts on entry and only when a turn actually changes the level -
+  // turning against the 5/255 clamp does not keep it open.
   brightnessIdleExitMs: 5000,
-  // BRIGHTNESS_SAVE_DELAY_MS, patternflow.ino:273 (NVS write after the mode closes).
+  // BRIGHTNESS_SAVE_DELAY_MS in patternflow.ino (NVS write after the mode closes).
   brightnessSaveDelayMs: 3000,
-  // OSC_INFO_IDLE_MS (the NETWORK screen's timer despite the name), patternflow.ino:274, :1658.
+  // OSC_INFO_IDLE_MS in patternflow.ino (the NETWORK screen's timer despite the name).
   networkIdleExitMs: 8000,
-  // KNOB_MAP_IDLE_MS, patternflow.ino:276, :1687.
+  // KNOB_MAP_IDLE_MS in patternflow.ino.
   knobmapIdleExitMs: 8000,
-  // KNOB_MAP_HILITE_MS, patternflow.ino:277; a knob stays lit this long after its last detent (:1005-1006).
+  // KNOB_MAP_HILITE_MS in patternflow.ino: a knob stays lit this long after its last detent (drawKnobMap).
   knobmapHighlightMs: 600,
-  // UPDATE_IDLE_MS, patternflow.ino:278, :1711 (not while flashing).
+  // UPDATE_IDLE_MS in patternflow.ino (not while flashing).
   updateIdleExitMs: 600000,
-  // NET_INFO_REDRAW_MS, patternflow.ino:275: info screens repaint at most this often (or on a change).
+  // NET_INFO_REDRAW_MS in patternflow.ino: info screens repaint at most this often (or on a change).
   infoRedrawMs: 250,
-  // SELECT_DETENTS_PER_STEP, patternflow.ino:240; see stepSelect().
+  // SELECT_DETENTS_PER_STEP in patternflow.ino; see stepSelect().
   selectDetentsPerStep: 3,
-  // SELECT_SETTLE_MS, patternflow.ino:234: the highlighted pattern loads once K4 has rested this long (:1943).
+  // SELECT_SETTLE_MS in patternflow.ino: the highlighted pattern loads once K4 has rested this long.
   selectSettleMs: 350,
-  // PATTERN_SAVE_DELAY_MS, patternflow.ino:207 (only once SELECT is left, :313).
+  // PATTERN_SAVE_DELAY_MS in patternflow.ino (only once SELECT is left, savePatternIfSettled).
   patternSaveDelayMs: 3000,
-  // CONTENT_NOTICE_SECONDS, patternflow.ino:279 - the name card after a remote pick; SELECT never shows it.
+  // CONTENT_NOTICE_SECONDS in patternflow.ino - the name card after a remote pick; SELECT never shows it.
   contentNoticeMs: 1000,
-  // constrain(currentBrightness + d * 5, 5, 255), patternflow.ino:1554.
+  // constrain(currentBrightness + d * 5, 5, 255) in loop(), patternflow.ino.
   brightnessMin: 5,
   brightnessMax: 255,
   brightnessStepPerDetent: 5,
-  // DEFAULT_BRIGHTNESS, config.h:241 - a byte, not a percent.
+  // DEFAULT_BRIGHTNESS in config.h - a byte, not a percent.
   defaultBrightness: DEFAULT_BRIGHTNESS,
   // brightnessPercent(204) = 80.
   defaultBrightnessPercent: brightnessPercent(DEFAULT_BRIGHTNESS),
-  // MAX_FEATURE_ROWS, patternflow.ino:759.
+  // MAX_FEATURE_ROWS in drawNetworkInfo, patternflow.ino.
   networkMaxFeatureRows: 2,
-  // WAKE_GUARD_MS, src/core_sleep.h:64: input ignored this long after falling asleep.
+  // WAKE_GUARD_MS in src/core_sleep.h: input ignored this long after falling asleep.
   wakeGuardMs: 800,
 });
 
@@ -224,7 +235,7 @@ export function wrapIndex(index: number, count: number): number {
   return ((index % count) + count) % count;
 }
 
-// Fixed-size name buffers: MODULE_NAME_BYTES, firmware/patternflow/pattern_registry.h:139.
+// Fixed-size name buffers: MODULE_NAME_BYTES, firmware/patternflow/pattern_registry.h.
 const MODULE_NAME_BYTES = 40;
 const LATIN1_FOLD =
   "AAAAAAACEEEEIIII" + // C0-CF
@@ -235,8 +246,8 @@ const LATIN1_FOLD =
 /**
  * A pattern name as the panel prints it: asciiFold (patternflow.ino:577-601)
  * over the UTF-8 bytes. Latin-1 letters lose their accent, anything else
- * becomes one '?'. Stored names live in 40-byte buffers (pattern_registry.h:139,
- * snprintf at :217), so at most 39 bytes of the name survive.
+ * becomes one '?'. Stored names live in 40-byte buffers (MODULE_NAME_BYTES in
+ * pattern_registry.h, filled with snprintf), so at most 39 bytes of the name survive.
  */
 export function asciiFold(name: string): string {
   const bytes = new TextEncoder().encode(name).subarray(0, MODULE_NAME_BYTES - 1);
@@ -282,17 +293,17 @@ const rgb565 = (r: number, g: number, b: number): Rgb => color565to888(color565(
 /** The firmware's panel palette, as it lands in the frame buffer. */
 export const PANEL_COLORS = Object.freeze({
   black: rgb565(0, 0, 0),
-  led: rgb565(232, 85, 46), //     pfLedC,   patternflow.ino:635
-  white: rgb565(255, 255, 255), // pfWhiteC, :636
-  gray: rgb565(140, 140, 140), //  pfGrayC,  :637
-  dim: rgb565(90, 90, 90), //      pfDimC,   :638
-  rule: rgb565(60, 60, 60), //     pfRuleC,  :639
-  green: rgb565(80, 220, 130), //  pfGreenC, :640
-  red: rgb565(255, 80, 80), //     pfRedC,   :641
-  blue: rgb565(120, 180, 255), //  pfBlueC,  :642
-  selectPage: rgb565(190, 190, 190), //    "i / N", :1054
-  selectHint: rgb565(200, 200, 200), //    "HOLD TO SELECT", :1084
-  knobActiveFill: rgb565(74, 27, 15), //   KNOB MAP active disc, :1009
+  led: rgb565(232, 85, 46), //     pfLedC in patternflow.ino
+  white: rgb565(255, 255, 255), // pfWhiteC
+  gray: rgb565(140, 140, 140), //  pfGrayC
+  dim: rgb565(90, 90, 90), //      pfDimC
+  rule: rgb565(60, 60, 60), //     pfRuleC
+  green: rgb565(80, 220, 130), //  pfGreenC
+  red: rgb565(255, 80, 80), //     pfRedC
+  blue: rgb565(120, 180, 255), //  pfBlueC
+  selectPage: rgb565(190, 190, 190), //    "i / N", drawSelectingMode
+  selectHint: rgb565(200, 200, 200), //    "HOLD TO SELECT", drawSelectingMode
+  knobActiveFill: rgb565(74, 27, 15), //   KNOB MAP active disc, drawKnobMap
 });
 
 // ── A small Adafruit GFX over an RGBA frame ─────────────────────────────────
@@ -729,8 +740,8 @@ function drawUiLine(g: PanelGfx, font: GfxFont | null, text: string, yTop: numbe
 }
 
 // PatternflowUiText::drawWrappedName, src/core_ui_text.h:447-449 -> drawWrapped
-// (:388-445) with PF_UI_FONT_SELECT = the built-in 5x7 (core_ui_fonts.h:50-52)
-// and pitch 9 (:64-66).
+// (:388-445) with PF_UI_FONT_SELECT = the built-in 5x7 and PF_UI_PITCH_SELECT
+// = 9 (both in core_ui_fonts.h).
 //
 // Only drawWrapped's first branch is ported, because it is the only one that
 // runs: it measures the whole name with getTextBounds, and with GFX wrap on,
diff --git a/web/src/lib/pattern/controls.ts b/web/src/lib/pattern/controls.ts
index 7c945677b..0f84f834e 100644
--- a/web/src/lib/pattern/controls.ts
+++ b/web/src/lib/pattern/controls.ts
@@ -1,16 +1,17 @@
-import { PATTERN_DETENTS_PER_TURN } from "./harness";
+import { BUS_MAX, DETENTS_PER_TURN, TURNS_PER_FULL_RANGE } from "@/lib/shared/constants";
 
 // Detents in one full turn of the physical encoder. One fact, one constant:
-// harness.ts owns it (see the note there — the reference Bourns
-// PEC11R-...-S0024 is 24, not the 20 assumed for a long time) and this is the
-// name the knob math has always used for it.
-export const ENCODER_CLICKS_PER_TURN = PATTERN_DETENTS_PER_TURN;
+// shared/constants.json owns it (see the note in harness.ts — the reference
+// Bourns PEC11R-...-S0024 is 24, not the 20 assumed for a long time) and this
+// is the name the knob math has always used for it.
+export const ENCODER_CLICKS_PER_TURN = DETENTS_PER_TURN;
 
 // The device's absolute bus speaks integers 0..1000 (PF_BUS_MAX in
-// firmware/patternflow/src/core_bus.h). Everything here that writes a wire
-// value — the Director's bake, the .pfs codec, the MIDI export — uses this
-// rather than the literal, so the two sides can only disagree in one place.
-export const BUS_WIRE_MAX = 1000;
+// firmware/patternflow/src/core_bus.h, BUS_MAX in shared/constants.json).
+// Everything here that writes a wire value — the Director's bake, the .pfs
+// codec, the MIDI export — uses this rather than the literal, so the two sides
+// can only disagree in one place.
+export const BUS_WIRE_MAX = BUS_MAX;
 
 // How many full turns cross a parameter's ENTIRE range.
 //
@@ -21,7 +22,7 @@ export const BUS_WIRE_MAX = 1000;
 // Deriving travel from the range makes every knob feel the same regardless of
 // what it controls, and keeps the web preview and the encoder in step because
 // both read the value from here.
-export const TURNS_PER_FULL_RANGE = 2;
+export { TURNS_PER_FULL_RANGE };
 
 /** Value units covered by one full turn, for a parameter spanning `range`. */
 export function knobUnitsPerTurn(range: readonly [number, number]) {
diff --git a/web/src/lib/pattern/harness.ts b/web/src/lib/pattern/harness.ts
index 8fbf77296..e1aa9564d 100644
--- a/web/src/lib/pattern/harness.ts
+++ b/web/src/lib/pattern/harness.ts
@@ -1,14 +1,16 @@
-export const PATTERN_MATRIX_WIDTH = 128;
-export const PATTERN_MATRIX_HEIGHT = 64;
-export const PATTERN_KNOB_COUNT = 4;
+import { DETENTS_PER_TURN, KNOB_COUNT, PANEL_GEOMETRIES, PANEL_GEOM_DEFAULT } from "@/lib/shared/constants";
+
+export const PATTERN_MATRIX_WIDTH: number = PANEL_GEOMETRIES[PANEL_GEOM_DEFAULT].resW;
+export const PATTERN_MATRIX_HEIGHT: number = PANEL_GEOMETRIES[PANEL_GEOM_DEFAULT].resH;
+export const PATTERN_KNOB_COUNT = KNOB_COUNT;
 // Detents in one full turn of the physical encoder. The BOM reference part is
 // Bourns PEC11R-4220F-S0024 — the S0024 suffix means 24 detents / 24 PPR, which
 // distributors confirm. This was 20 for a long time, which silently put the web
 // preview 20 % out of step with the hardware it claims to mirror.
 // Sourcing a different encoder? Generic EC11s ship as 20, 24 or 30 detents —
-// this constant has to match whatever is actually in the build.
-// Keep in sync with ENCODER_CLICKS_PER_TURN in patternflowControls.ts.
-export const PATTERN_DETENTS_PER_TURN = 24;
+// DETENTS_PER_TURN in shared/constants.json has to match whatever is actually
+// in the build. controls.ts reads the same value as ENCODER_CLICKS_PER_TURN.
+export const PATTERN_DETENTS_PER_TURN = DETENTS_PER_TURN;
 
 export type PatternParams = Record<string, unknown>;
 
diff --git a/web/src/lib/pattern/matrix.ts b/web/src/lib/pattern/matrix.ts
index 10b328c4f..4ecc7ce43 100644
--- a/web/src/lib/pattern/matrix.ts
+++ b/web/src/lib/pattern/matrix.ts
@@ -24,10 +24,15 @@
 // public/pattern-sandbox.html is built from this module
 // (scripts/build-sandbox.ts), so there is no second parser to keep in step.
 
+import { PANEL_GEOMETRIES, PANEL_GEOM_DEFAULT } from "@/lib/shared/constants";
+
 export type MatrixSize = { width: number; height: number };
 
 /** The stock Patternflow panel. Used whenever a pattern carries no @matrix. */
-export const DEFAULT_MATRIX: MatrixSize = { width: 128, height: 64 };
+export const DEFAULT_MATRIX: MatrixSize = {
+  width: PANEL_GEOMETRIES[PANEL_GEOM_DEFAULT].resW,
+  height: PANEL_GEOMETRIES[PANEL_GEOM_DEFAULT].resH,
+};
 
 /**
  * The stock panel in either orientation — the board is mounted whichever way
@@ -69,7 +74,7 @@ export function clampMatrixDimension(value: number): number | null {
  * Pixels per frame beyond which the JS preview starts to struggle — four times
  * the stock panel. Not a limit, just the point worth warning about.
  */
-export const MATRIX_HEAVY_PIXELS = 128 * 64 * 4;
+export const MATRIX_HEAVY_PIXELS = DEFAULT_MATRIX.width * DEFAULT_MATRIX.height * 4;
 
 export function isValidMatrix(size: Partial<MatrixSize> | null | undefined): boolean {
   if (!size) return false;