@rig-c/review 0.5.0 → 0.7.0

package/web/chest-editor.ts

@@ -0,0 +1,294 @@
+/**
+ * The chest-region editor (Setup): a view-bar toggle, an editor bar of R / L circles and direct manipulation of the
+ * circles on the rig pane. The values live in the Chest regions detail block's fields (row 0 = R, row 1 = L), so the
+ * draft, export and binding are the detail block's. Review builds no mesh itself: Apply · Rebuild hands the rows to the
+ * host, which sends them to the installed producer (#99); this module never reaches a process or the server.
+ */
+import {clampNonOverlapping,CHEST_CIRCLE_LIMITS,type ChestCircle,type CropWorldMapping} from '../src/chest-regions.ts';
+import {BUST_DEFAULTS,deriveBust,type BustDerivation,type BustSpec,type RigPoint} from '../src/chest-landmarks.ts';
+import {chestRowId,type ChestFieldReader} from './chest-regions-tool.ts';
+import {projectCircle,type OverlayPoint,type OverlayProject} from './rig-overlays.ts';
+import {textEntryFocused} from './view-controls.ts';
+
+export type BustSide='r'|'l';
+export type BustMode='move'|'r'|'band';
+export const bustSides=[{side:'r',row:0,tag:'R'},{side:'l',row:1,tag:'L'}] as const;
+export const bustFields=['x','y','r','band'] as const;
+export const bustInputId=(side:BustSide,field:typeof bustFields[number])=>`bust-${side}-${field}`;
+export const CHEST_REGIONS_CLAMPED='CHEST_REGIONS_CLAMPED';
+const sideRow=(side:BustSide)=>side==='r'?0:1;
+const sideTag=(side:BustSide)=>side==='r'?'R':'L';
+
+/** The toggle belongs to Setup only. */
+export function chestEditVisible(inspector:string|undefined):boolean {return inspector==='rig';}
+
+const number=(read:ChestFieldReader,id:string)=>{const raw=(read(id)?.value??'').trim();if(!raw)return null;const value=Number(raw);return Number.isFinite(value)?value:null;};
+/** A row is a circle when its semi-axes are equal and it has no medial clip; then r is that semi-axis. */
+export function rowCircle(read:ChestFieldReader,row:number):ChestCircle|null {
+ const cx=number(read,chestRowId(row,'cx')),cy=number(read,chestRowId(row,'cy')),ax=number(read,chestRowId(row,'ax')),ay=number(read,chestRowId(row,'ay')),band=number(read,chestRowId(row,'band'));
+ if(cx===null||cy===null||ax===null||band===null||ax<=0||ay!==ax||(read(chestRowId(row,'clip'))?.value??'').trim())return null;
+ return {cx,cy,r:ax,band};
+}
+/** Field values that store a circle in a detail row: r writes both semi-axes. */
+export function circleFields(row:number,circle:Partial<ChestCircle>):Record<string,string> {
+ const out:Record<string,string>={};
+ if(circle.cx!==undefined)out[chestRowId(row,'cx')]=String(circle.cx);
+ if(circle.cy!==undefined)out[chestRowId(row,'cy')]=String(circle.cy);
+ if(circle.r!==undefined){out[chestRowId(row,'ax')]=String(circle.r);out[chestRowId(row,'ay')]=String(circle.r);}
+ if(circle.band!==undefined)out[chestRowId(row,'band')]=String(circle.band);
+ return out;
+}
+export const bustLabel=(side:BustSide,c:ChestCircle)=>`${sideTag(side)} (${Math.round(c.cx)},${Math.round(c.cy)}) r:${Math.round(c.r)} b:${Math.round(c.band)}`;
+
+export interface ProjectedBust {side:BustSide;center:OverlayPoint;pxR:number;pxBand:number}
+/** The example's hit order: core handle or core edge → r, band handle or outer edge → band, inside the core → move. */
+export function hitBustHandle(circles:readonly ProjectedBust[],p:OverlayPoint):{side:BustSide;mode:BustMode}|null {
+ for(const c of circles){
+  const toR=Math.hypot(p.x-(c.center.x+c.pxR),p.y-c.center.y),toBand=Math.hypot(p.x-c.center.x,p.y-(c.center.y-c.pxBand)),toCenter=Math.hypot(p.x-c.center.x,p.y-c.center.y);
+  if(toR<=10||Math.abs(toCenter-c.pxR)<=6)return {side:c.side,mode:'r'};
+  if(toBand<=10||Math.abs(toCenter-c.pxBand)<=6)return {side:c.side,mode:'band'};
+  if(toCenter<=Math.max(12,c.pxR))return {side:c.side,mode:'move'};
+ }
+ return null;
+}
+const limit=(value:number,[low,high]:readonly [number,number])=>Math.max(low,Math.min(high,value));
+export interface BustDrag {side:BustSide;mode:BustMode;start:OverlayPoint;centre:OverlayPoint;from:ChestCircle}
+/** Pointer (canvas px) → source px through the camera scale (canvas px per source px), rounded as the example does. */
+export function dragBust(drag:BustDrag,p:OverlayPoint,scale:number):ChestCircle {
+ const from=drag.from;if(!(scale>0)||!Number.isFinite(scale))return {...from};
+ if(drag.mode==='move')return {...from,cx:Math.round(from.cx+(p.x-drag.start.x)/scale),cy:Math.round(from.cy+(p.y-drag.start.y)/scale)};
+ const distance=Math.hypot(p.x-drag.centre.x,p.y-drag.centre.y)/scale;
+ if(drag.mode==='r')return {...from,r:limit(Math.round(distance),CHEST_CIRCLE_LIMITS.r)};
+ return {...from,band:limit(Math.round(distance-from.r),CHEST_CIRCLE_LIMITS.band)};
+}
+/** Mirror: L takes R's y, core radius and band; L keeps its own x. */
+export const mirrorBust=(right:ChestCircle,left:Pick<ChestCircle,'cx'>):ChestCircle=>({cx:left.cx,cy:right.cy,r:right.r,band:right.band});
+const same=(a:ChestCircle,b:ChestCircle)=>a.cx===b.cx&&a.cy===b.cy&&a.r===b.r&&a.band===b.band;
+/** Live non-overlap clamp for a pair of circles; names the sides it changed. */
+export function settleBust(right:ChestCircle,left:ChestCircle):{right:ChestCircle;left:ChestCircle;clamped:BustSide[]} {
+ const out=clampNonOverlapping(right,left),round=clampNonOverlapping(right,left,-Infinity);
+ // `round` is the same integer/range pass without the distance rule (−∞ margin leaves every pair fitting), so only the non-overlap change flashes.
+ return {right:out.right,left:out.left,clamped:(['r','l'] as const).filter(side=>!same(side==='r'?out.right:out.left,side==='r'?round.right:round.left))};
+}
+/** The editor-bar status: a held rebuild notice (its latest line, or the producer's refusal verbatim) wins over the drag help. */
+export function editorStatus(notice:{text:string;error:boolean}|null,mapping:CropWorldMapping,mode:'circles'|'landmarks'='circles'):{text:string;error:boolean} {
+ if(notice)return notice;
+ if(mapping.available&&mode==='landmarks')return {text:'Click the part to place the armed landmark · drag a marker to move it · Space-drag pans',error:false};
+ return mapping.available?{text:'Drag a centre to move · the right-edge handle sets r · the dashed top handle sets band · Space-drag pans',error:false}:{text:`${mapping.reason} — the values still edit and export; nothing is drawn on the stage.`,error:true};
+}
+
+/** Circles (#92/#99: the R / L rows) or Landmarks (#105: `contour.bust`). The mode lives in a hidden input, so the draft keeps it. */
+export type ChestMode='circles'|'landmarks';
+export const LANDMARKS=[{key:'apex_r',tag:'Apex R'},{key:'apex_l',tag:'Apex L'},{key:'cleavage',tag:'Cleavage'}] as const;
+export type LandmarkKey=typeof LANDMARKS[number]['key'];
+export const landmarkInputId=(key:LandmarkKey,axis:'x'|'y')=>`lm-${key}-${axis}`;
+/** Slider ranges; the producer's defaults sit inside them. */
+export const LANDMARK_SLIDERS={alpha:{min:0.05,max:0.95,step:0.01},clearance:{min:0,max:40,step:0.1}} as const;
+export type LandmarkRead={spec:BustSpec;derived:BustDerivation}|{missing:LandmarkKey[]}|{error:string};
+/**
+ * The landmark fields → the `contour.bust` entry and the producer's derivation of it. Points are rig px (integers from a
+ * click, any 1/256 value typed); alpha and clearance are always stated; an empty bone field is the producer's default.
+ */
+export function readLandmarks(read:ChestFieldReader):LandmarkRead {
+ const value=(id:string)=>(read(id)?.value??'').trim();
+ const points:Partial<Record<LandmarkKey,RigPoint>>={},missing:LandmarkKey[]=[];
+ for(const {key} of LANDMARKS){
+  const x=value(landmarkInputId(key,'x')),y=value(landmarkInputId(key,'y'));
+  if(!x||!y){missing.push(key);continue;}
+  const p:RigPoint=[Number(x),Number(y)];
+  if(!p.every(Number.isFinite))return {error:`LANDMARK_VALUE_INVALID: ${key}`};
+  if(!p.every(n=>Number.isInteger(n*256)))return {error:`LANDMARK_VALUE_INVALID: ${key} is off the 1/256 px grid`};
+  points[key]=p;
+ }
+ if(missing.length)return {missing};
+ const alpha=Number(value('lm-alpha')||BUST_DEFAULTS.alpha),clearance=Number(value('lm-clearance')||BUST_DEFAULTS.clearance);
+ if(!Number.isFinite(alpha)||alpha<=0||alpha>=1)return {error:'LANDMARK_VALUE_INVALID: alpha is a core ratio in (0, 1)'};
+ if(!Number.isFinite(clearance))return {error:'LANDMARK_VALUE_INVALID: clearance'};
+ const spec:BustSpec={apex_r:points.apex_r!,apex_l:points.apex_l!,cleavage:points.cleavage!,alpha,clearance};
+ for(const key of ['bone_r','bone_l'] as const){const bone=value(`lm-${key}`);if(bone)spec[key]=bone;}
+ return {spec,derived:deriveBust(spec)};
+}
+/** The landmark bar's readout: the derived circles, the producer's refusal verbatim, or which click comes next. */
+export function landmarkReadout(result:LandmarkRead):{text:string;error:boolean} {
+ if('error' in result)return {text:result.error,error:true};
+ if('missing' in result)return {text:`Click the part to place ${LANDMARKS.find(l=>l.key===result.missing[0])!.tag}${result.missing.length>1?` (then ${result.missing.slice(1).map(k=>LANDMARKS.find(l=>l.key===k)!.tag).join(', ')})`:''} · drag a marker to move it`,error:false};
+ if(result.derived.refusal)return {text:result.derived.refusal,error:true};
+ const [r,l]=result.derived.regions;
+ return {text:`bust_r (${r.cx},${r.cy}) r ${r.r} band ${r.band} → ${r.bone} · bust_l (${l.cx},${l.cy}) r ${l.r} band ${l.band} → ${l.bone} · D ${result.derived.D.toFixed(2)} px · the producer derives these again`,error:false};
+}
+/** The next point a click places: the armed one, else the first one not yet placed, else none. */
+export function nextLandmark(armed:LandmarkKey|null,missing:readonly LandmarkKey[]):LandmarkKey|null {return armed??missing[0]??null;}
+/**
+ * Canvas px → crop px through the camera projection and the crop → world mapping, both affine: each is read off three
+ * points and inverted. Null when either is degenerate.
+ */
+export function canvasToCrop(project:OverlayProject,toWorld:(x:number,y:number)=>{x:number;y:number},p:OverlayPoint):RigPoint|null {
+ const invert=(f:(x:number,y:number)=>{x:number;y:number},q:{x:number;y:number})=>{
+  const o=f(0,0),ex=f(1,0),ey=f(0,1),a=ex.x-o.x,b=ey.x-o.x,c=ex.y-o.y,d=ey.y-o.y,det=a*d-b*c;
+  if(!Number.isFinite(det)||Math.abs(det)<1e-12)return null;
+  const dx=q.x-o.x,dy=q.y-o.y;return {x:(d*dx-b*dy)/det,y:(a*dy-c*dx)/det};
+ };
+ const world=invert(project,p);if(!world)return null;
+ const crop=invert(toWorld,world);return crop?[crop.x,crop.y]:null;
+}
+/** The marker under the pointer (canvas px), within 10 px. */
+export function hitLandmark(markers:readonly {key:LandmarkKey;at:OverlayPoint}[],p:OverlayPoint):LandmarkKey|null {
+ let best:LandmarkKey|null=null,distance=10;
+ for(const m of markers){const d=Math.hypot(p.x-m.at.x,p.y-m.at.y);if(d<=distance){best=m.key;distance=d;}}
+ return best;
+}
+
+export interface ChestEditorHost {
+ /** Receives capture-phase pointer events before the viewport's pan. */
+ pane:HTMLElement;
+ /** The overlay canvas: pointer coordinates are local to it, as the projection's are. */
+ canvas:HTMLElement;
+ project:()=>OverlayProject|null;
+ mapping:()=>CropWorldMapping;
+ /** Re-render the detail block and the overlay after a value changed. */
+ changed:()=>void;
+ download:()=>void;
+ /** Apply · Rebuild: the host runs the installed producer on the current rows and reloads the stage. */
+ apply:()=>void;
+ /** Reset: the host reloads the inspected build. */
+ reset:()=>void;
+ message:(text:string,error?:boolean)=>void;
+ inspector:()=>string|undefined;
+}
+export interface ChestEditor {active:()=>boolean;flashing:(side:BustSide)=>boolean;sync:()=>void;dispose:()=>void;
+ /** Circles or Landmarks; Apply sends regions or `contour.bust` accordingly. */
+ mode:()=>ChestMode;
+ /** The landmark fields read as the producer's entry and derivation (Landmarks mode). */
+ landmarks:()=>LandmarkRead;
+ /** The point the next click places, for the overlay's highlight. */
+ armed:()=>LandmarkKey|null;
+ /** Hold a status line (null clears it); `log` is the producer's latest lines. */
+ notify:(text:string|null,error?:boolean,log?:readonly string[])=>void;
+ /** Apply is disabled while a rebuild runs; Reset is enabled while a rebuilt build is on the stage. */
+ rebuildState:(state:{busy:boolean;applied:boolean})=>void}
+
+export function bindChestEditor(host:ChestEditorHost):ChestEditor {
+ const node=<T extends HTMLElement>(id:string)=>document.getElementById(id) as T;
+ const toggle=node<HTMLButtonElement>('chest-edit'),bar=node<HTMLElement>('chest-editor-bar'),status=node<HTMLElement>('chest-editor-status');
+ const field=(id:string)=>document.getElementById(id) as HTMLInputElement|null;
+ const read:ChestFieldReader=id=>{const f=field(id);return f?{value:f.value}:undefined;};
+ const log=node<HTMLElement>('chest-editor-log'),apply=node<HTMLButtonElement>('bust-apply'),reset=node<HTMLButtonElement>('bust-reset');
+ let notice:{text:string;error:boolean}|null=null;
+ const modeInput=field('bust-mode'),landmarkGroups=[...bar.querySelectorAll<HTMLElement>('[data-chest-mode]')],readout=node<HTMLElement>('lm-derived');
+ const mode=():ChestMode=>modeInput?.value==='landmarks'?'landmarks':'circles';
+ let armed:LandmarkKey|null=null,landmarkDrag:{key:LandmarkKey;pointer:number}|null=null;
+ const writePoint=(key:LandmarkKey,[x,y]:RigPoint)=>{for(const [axis,v] of [['x',x],['y',y]] as const){const f=field(landmarkInputId(key,axis));if(f)f.value=String(Math.round(v));}};
+ const landmarkMarkers=():{key:LandmarkKey;at:OverlayPoint}[]=>{
+  const project=host.project(),mapping=host.mapping();if(!project||!mapping.available)return [];
+  return LANDMARKS.flatMap(({key})=>{const x=Number((read(landmarkInputId(key,'x'))?.value??'').trim()||NaN),y=Number((read(landmarkInputId(key,'y'))?.value??'').trim()||NaN);if(!Number.isFinite(x)||!Number.isFinite(y))return [];const w=mapping.toWorld(x,y);return [{key,at:project(w.x,w.y)}];});
+ };
+ const cropAt=(p:OverlayPoint):RigPoint|null=>{const project=host.project(),mapping=host.mapping();return project&&mapping.available?canvasToCrop(project,mapping.toWorld,p):null;};
+ let active=false,space=false,drag:(BustDrag&{pointer:number;other:ChestCircle|null})|null=null,flashTimer:ReturnType<typeof setTimeout>|null=null;
+ const flash=new Set<BustSide>();
+ const write=(row:number,circle:Partial<ChestCircle>)=>{for(const [id,value] of Object.entries(circleFields(row,circle))){const f=field(id);if(f)f.value=value;}};
+ const flashSides=(sides:readonly BustSide[])=>{
+  if(!sides.length)return;for(const side of sides)flash.add(side);
+  host.message(`${CHEST_REGIONS_CLAMPED}: ${sides.map(sideTag).join(' and ')} — both cores plus 8 px must fit the centre distance minus 2 px and the bands share the rest`,true);
+  if(flashTimer)clearTimeout(flashTimer);flashTimer=setTimeout(()=>{flash.clear();flashTimer=null;host.changed();},700);
+ };
+ /** Writes a changed side; when both rows are circles the pair is clamped as the rebuild script would. */
+ const commit=(side:BustSide,next:ChestCircle,other:ChestCircle|null)=>{
+  if(!other){write(sideRow(side),next);return;}
+  const [right,left]=side==='r'?[next,other]:[other,next],settled=settleBust(right,left);
+  write(0,settled.right);write(1,settled.left);flashSides(settled.clamped);
+ };
+ const projected=():ProjectedBust[]=>{
+  const project=host.project(),mapping=host.mapping();if(!project||!mapping.available)return [];
+  return bustSides.flatMap(({side,row})=>{const c=rowCircle(read,row);if(!c)return [];const at=projectCircle(project,{center:mapping.toWorld(c.cx,c.cy),r:c.r,band:c.band});return at?[{side,...at}]:[];});
+ };
+ const local=(event:PointerEvent):OverlayPoint=>{const rect=host.canvas.getBoundingClientRect();return {x:event.clientX-rect.left,y:event.clientY-rect.top};};
+ const scale=()=>{const project=host.project();if(!project)return 0;const a=project(0,0),b=project(1,0);return Math.hypot(b.x-a.x,b.y-a.y);};
+ const sync=()=>{
+  const visible=chestEditVisible(host.inspector());toggle.hidden=!visible;
+  if(!visible&&active)setActive(false);
+  for(const {side,row} of bustSides){
+   const circle=rowCircle(read,row),values={x:read(chestRowId(row,'cx'))?.value??'',y:read(chestRowId(row,'cy'))?.value??'',r:circle?String(circle.r):'',band:read(chestRowId(row,'band'))?.value??''};
+   for(const f of bustFields){const input=field(bustInputId(side,f));if(input&&document.activeElement!==input)input.value=values[f];}
+   const r=field(bustInputId(side,'r'));if(r)r.placeholder=circle||!(read(chestRowId(row,'ax'))?.value??'').trim()?'':'ellipse';
+  }
+  const m=mode();
+  for(const group of landmarkGroups)group.hidden=group.dataset.chestMode!==m;
+  for(const button of bar.querySelectorAll<HTMLButtonElement>('[data-bust-mode]'))button.setAttribute('aria-pressed',String(button.dataset.bustMode===m));
+  const landmarks=readLandmarks(read),shownReadout=landmarkReadout(landmarks),next=nextLandmark(armed,'missing' in landmarks?landmarks.missing:[]);
+  readout.textContent=shownReadout.text;readout.title=shownReadout.text;readout.classList.toggle('error',shownReadout.error);
+  for(const button of bar.querySelectorAll<HTMLButtonElement>('[data-landmark]'))button.setAttribute('aria-pressed',String(button.dataset.landmark===next));
+  for(const id of ['lm-alpha','lm-clearance']){const out=document.getElementById(`${id}-value`);const f=field(id);if(out&&f)out.textContent=f.value;}
+  const shown=editorStatus(notice,host.mapping(),m);
+  status.textContent=shown.text;status.title=shown.text;status.classList.toggle('error',shown.error);
+ };
+ const setActive=(on:boolean)=>{active=on;toggle.setAttribute('aria-pressed',String(on));bar.hidden=!on;if(!on){drag=null;landmarkDrag=null;armed=null;delete host.pane.dataset.chestHover;}sync();host.changed();};
+ toggle.addEventListener('click',()=>setActive(!active));
+ bar.addEventListener('input',event=>{
+  const target=event.target as HTMLInputElement,match=/^bust-([rl])-(x|y|r|band)$/.exec(target.id);if(!match)return;
+  const value=Number(target.value);if(!target.value.trim()||!Number.isFinite(value))return;
+  const side=match[1] as BustSide,key=({x:'cx',y:'cy',r:'r',band:'band'} as const)[match[2] as typeof bustFields[number]];
+  write(sideRow(side),{[key]:value});host.changed();
+ });
+ bar.addEventListener('change',event=>{
+  const target=event.target as HTMLInputElement,match=/^bust-([rl])-/.exec(target.id);if(!match)return;
+  const side=match[1] as BustSide,mine=rowCircle(read,sideRow(side)),other=rowCircle(read,sideRow(side==='r'?'l':'r'));
+  if(mine)commit(side,{...mine,r:limit(Math.round(mine.r),CHEST_CIRCLE_LIMITS.r),band:limit(Math.round(mine.band),CHEST_CIRCLE_LIMITS.band)},other);
+  sync();host.changed();
+ });
+ for(const button of bar.querySelectorAll<HTMLButtonElement>('[data-bust-mode]'))button.addEventListener('click',()=>{if(modeInput){modeInput.value=button.dataset.bustMode==='landmarks'?'landmarks':'circles';modeInput.dispatchEvent(new Event('input',{bubbles:true}));}armed=null;sync();host.changed();});
+ for(const button of bar.querySelectorAll<HTMLButtonElement>('[data-landmark]'))button.addEventListener('click',()=>{const key=button.dataset.landmark as LandmarkKey;armed=armed===key?null:key;sync();host.changed();});
+ bar.addEventListener('input',event=>{const id=(event.target as HTMLElement).id;if(/^lm-/.test(id)){sync();host.changed();}});
+ node<HTMLButtonElement>('bust-mirror').addEventListener('click',()=>{
+  const right=rowCircle(read,0),leftX=Number((read(chestRowId(1,'cx'))?.value??'').trim()||NaN);
+  if(!right||!Number.isFinite(leftX)){host.message('Mirror needs a complete R circle and an L x.',true);return;}
+  commit('l',mirrorBust(right,{cx:leftX}),right);sync();host.changed();
+ });
+ node<HTMLButtonElement>('bust-download').addEventListener('click',()=>host.download());
+ apply.addEventListener('click',()=>host.apply());
+ reset.addEventListener('click',()=>host.reset());
+ const keyDown=(event:KeyboardEvent)=>{if(event.code==='Space'&&!textEntryFocused(event.target))space=true;};
+ const keyUp=(event:KeyboardEvent)=>{if(event.code==='Space')space=false;};
+ const blur=()=>{space=false;};
+ const down=(event:PointerEvent)=>{
+  if(!active||space||!event.isPrimary||event.button!==0)return;
+  const target=event.target;if(target instanceof Element&&target.closest('button,input,select,textarea,a'))return;
+  if(mode()==='landmarks'){
+   const p=local(event),hitKey=hitLandmark(landmarkMarkers(),p),landmarks=readLandmarks(read),place=hitKey?null:nextLandmark(armed,'missing' in landmarks?landmarks.missing:[]);
+   if(!hitKey&&!place)return;
+   const at=cropAt(p);if(!at)return;
+   // A landmark click or drag edits values; it never reaches the viewport's pan.
+   event.stopPropagation();event.preventDefault();
+   const key=(hitKey??place)!;writePoint(key,at);if(place)armed=null;
+   landmarkDrag={key,pointer:event.pointerId};host.pane.setPointerCapture(event.pointerId);host.pane.dataset.chestHover='move';
+   sync();host.changed();return;
+  }
+  const p=local(event),circles=projected(),hit=hitBustHandle(circles,p);if(!hit)return;
+  const row=sideRow(hit.side),from=rowCircle(read,row),at=circles.find(c=>c.side===hit.side);if(!from||!at)return;
+  // A handle drag edits values; it never reaches the viewport's pan and never moves the camera.
+  event.stopPropagation();event.preventDefault();
+  drag={side:hit.side,mode:hit.mode,start:p,centre:at.center,from,pointer:event.pointerId,other:rowCircle(read,sideRow(hit.side==='r'?'l':'r'))};
+  host.pane.setPointerCapture(event.pointerId);host.pane.dataset.chestHover=hit.mode;
+ };
+ const move=(event:PointerEvent)=>{
+  if(landmarkDrag&&event.pointerId===landmarkDrag.pointer){event.stopPropagation();const at=cropAt(local(event));if(at){writePoint(landmarkDrag.key,at);sync();host.changed();}return;}
+  if(active&&!space&&mode()==='landmarks'){if(hitLandmark(landmarkMarkers(),local(event)))host.pane.dataset.chestHover='move';else delete host.pane.dataset.chestHover;return;}
+  if(drag&&event.pointerId===drag.pointer){event.stopPropagation();commit(drag.side,dragBust(drag,local(event),scale()),drag.other);sync();host.changed();return;}
+  if(active&&!space&&!drag){const hit=hitBustHandle(projected(),local(event));if(hit)host.pane.dataset.chestHover=hit.mode;else delete host.pane.dataset.chestHover;}
+ };
+ const end=(event:PointerEvent)=>{
+  if(landmarkDrag&&event.pointerId===landmarkDrag.pointer){landmarkDrag=null;delete host.pane.dataset.chestHover;if(host.pane.hasPointerCapture(event.pointerId))host.pane.releasePointerCapture(event.pointerId);host.changed();return;}
+  if(!drag||event.pointerId!==drag.pointer)return;drag=null;delete host.pane.dataset.chestHover;if(host.pane.hasPointerCapture(event.pointerId))host.pane.releasePointerCapture(event.pointerId);host.changed();};
+ host.pane.addEventListener('pointerdown',down,true);host.pane.addEventListener('pointermove',move,true);
+ for(const type of ['pointerup','pointercancel','lostpointercapture'] as const)host.pane.addEventListener(type,end,true);
+ document.addEventListener('keydown',keyDown,true);window.addEventListener('keyup',keyUp,true);window.addEventListener('blur',blur);
+ // The selected section is the header switch's pressed state; follow it without touching the switch's own wiring.
+ const observer=new MutationObserver(()=>sync());
+ for(const selector of document.querySelectorAll('[data-inspector]'))observer.observe(selector,{attributes:true,attributeFilter:['aria-pressed','aria-selected']});
+ sync();
+ return {
+  active:()=>active,flashing:side=>flash.has(side),sync,mode,landmarks:()=>readLandmarks(read),armed:()=>{const l=readLandmarks(read);return nextLandmark(armed,'missing' in l?l.missing:[]);},
+  notify:(text,error=false,lines)=>{notice=text===null?null:{text,error};if(lines){log.textContent=lines.join('\n');log.hidden=!lines.length;log.scrollTop=log.scrollHeight;}sync();},
+  rebuildState:({busy,applied})=>{apply.disabled=busy;apply.setAttribute('aria-busy',String(busy));reset.disabled=busy||!applied;},
+  dispose:()=>{observer.disconnect();if(flashTimer)clearTimeout(flashTimer);host.pane.removeEventListener('pointerdown',down,true);host.pane.removeEventListener('pointermove',move,true);for(const type of ['pointerup','pointercancel','lostpointercapture'] as const)host.pane.removeEventListener(type,end,true);document.removeEventListener('keydown',keyDown,true);window.removeEventListener('keyup',keyUp,true);window.removeEventListener('blur',blur);},
+ };
+}

package/web/chest-regions-tool.ts

@@ -27,7 +27,8 @@ export function readChestForm(read:ChestFieldReader,mapping:CropWorldMapping,bon
  const crop=mapping.available?mapping.crop:{w:numberField(read,'chest-crop-w','crop w')!,h:numberField(read,'chest-crop-h','crop h')!};
  const contour={tolerance:0,margin:0,spacing:0,maxEdge:0,stray:0,bridges:read('chest-bridges')?.checked===true};
  for(const [key,id] of chestContourFields)contour[key]=numberField(read,id,`contour ${key}`)!;
- const regions=chestRegionRows.map(row=>{
+ // A row without a centre x is not designated (#118): one row exports alone, as Apply · Rebuild sends it.
+ const regions=chestRegionRows.filter(row=>(read(chestRowId(row,'cx'))?.value??'').trim()).map(row=>{
   const name=(read(chestRowId(row,'name'))?.value??'').trim()||`row ${row+1}`,num=(field:typeof chestRegionFields[number],optional=false)=>numberField(read,chestRowId(row,field),`${name} ${field}`,optional);
   const clip=num('clip',true);
   return {name:(read(chestRowId(row,'name'))?.value??'').trim(),bone:read(chestRowId(row,'bone'))?.value??'',center:[num('cx')!,num('cy')!] as [number,number],semiAxes:[num('ax')!,num('ay')!] as [number,number],spacing:num('spacing')!,band:num('band')!,...(clip===undefined?{}:{clip})};
@@ -44,8 +45,13 @@ export function evaluateChestForm(read:ChestFieldReader,mapping:CropWorldMapping
  catch(error){if(error instanceof ChestRegionError)return {ok:false,error:error.message};throw error;}
 }
 
-/** Polygons in rig world coordinates for the overlay; none without a model-fixed mapping. */
-export function chestOverlayPolygons(evaluation:ChestEvaluation,mapping:CropWorldMapping):{name:string;points:{x:number;y:number}[]}[] {
+/** Polygon regions in rig world coordinates for the overlay; none without a model-fixed mapping. Circles are drawn as circles. */
+export function chestOverlayPolygons(evaluation:ChestEvaluation,mapping:CropWorldMapping):{name:string;row:number;points:{x:number;y:number}[]}[] {
  if(!evaluation.ok||!mapping.available)return [];
- return evaluation.document.mesh.value.contour.regions.map(region=>({name:region.name,points:region.points.map(([x,y])=>mapping.toWorld(x,y))}));
+ return evaluation.document.mesh.value.contour.regions.flatMap((region,row)=>region.shape==='polygon'?[{name:region.name,row,points:region.points.map(([x,y])=>mapping.toWorld(x,y))}]:[]);
+}
+/** Circle regions of a valid designation: world centre, core r and band (crop px = world px under the mapping). */
+export function chestOverlayCircles(evaluation:ChestEvaluation,mapping:CropWorldMapping):{name:string;row:number;center:{x:number;y:number};r:number;band:number}[] {
+ if(!evaluation.ok||!mapping.available)return [];
+ return evaluation.document.mesh.value.contour.regions.flatMap((region,row)=>region.shape==='circle'?[{name:region.name,row,center:mapping.toWorld(region.cx,region.cy),r:region.r,band:region.band}]:[]);
 }

package/web/cuts-panel.ts

@@ -0,0 +1,266 @@
+/**
+ * Setup · Cuts (#115), page side: the producer config's `assemble.cuts` polygons, `assemble.patches` boxes and each limb
+ * joint with its `range` arc, drawn on the stage in rig px of the setup pose (the crop → world mapping the chest, mesh
+ * and bones views use) and edited there: drag a cut vertex or a box corner, drag a joint (its lower bone's origin — a
+ * `bones` op, since the joint is the bone's origin), type a range; place a new cut polygon or a new patch box by
+ * clicking. Every edit is a config patch op (`src/cut-edits.ts`); Apply sends them as one `rig` patch, which the server
+ * runs as `rig-parts build` (assemble → rig → check) from the handoff's painting and runs, and the scratch build reloads
+ * in place. The producer's refusals (`ASSEMBLE_CUT_*`, `ASSEMBLE_UNDER_*`, `CONFIG_LIMB_*`, `CONFIG_PART_UNIQUE`, …) come
+ * back verbatim; `LIMB_ONE_BONE` and `SEAM_OVER_RANGE` are check's bars, read from the build's check. Review paints no
+ * `under` or `cap` image: a new cut names none. The draft keeps the pending edits (`#cuts-pending`).
+ */
+import {anchorAt,boneAnchors,configBones,setAnchor,type BoneAnchor,type BoneEdit} from '../src/bone-anchors.ts';
+import type {PatchOp} from '../src/config-patch.ts';
+import type {CropWorldMapping} from '../src/chest-regions.ts';
+import {
+ boxAt,CutEditError,cutOps,cutsDraft,cutsDraftText,cutsSource,dragPoint,rangeArc,rangeAt,setBox,setRange,setVertex,vertexAt,
+ type CutAdd,type CutDraw,type CutEdit,type CutsSource,type PatchBox,type RigPoint,
+} from '../src/cut-edits.ts';
+import {canvasToCrop} from './chest-editor.ts';
+import type {OverlayMarker,OverlayPoint,OverlayProject,OverlayRegion} from './rig-overlays.ts';
+import {textEntryFocused} from './view-controls.ts';
+import type {PatchJobView,RebuildRefusal} from './rebuild-client.ts';
+
+export interface CutsPanelDeps {
+ pane:HTMLElement;canvas:HTMLElement;
+ project:()=>OverlayProject|null;mapping:()=>CropWorldMapping;inspector:()=>string|undefined;
+ pause:()=>void;changed:()=>void;saved:()=>void;
+ apply:(ops:PatchOp[])=>Promise<PatchJobView|RebuildRefusal|null>;
+ reset:()=>Promise<void>;
+ token:(name:string)=>string;
+ /** The served URL of a page-relative route (the capability-bearing access route). */
+ route:(path:string)=>string;
+}
+/** One drawn handle: a cut vertex, a patch box corner or a limb joint. */
+export interface CutHandle {id:string;label:string;at:RigPoint}
+export interface CutsPanel {
+ load(config:unknown|null,bones:unknown[]|null,reason:string|null,build:string|null):void;
+ source():CutsSource;ops():PatchOp[];
+ setVertex(cut:number,k:number,value:RigPoint):void;setBox(patch:number,value:PatchBox):void;setRange(limb:string,k:number,value:[number,number]|null):void;
+ active():boolean;setActive(on:boolean):void;
+ handles():{id:string;label:string;x:number;y:number}[];
+ overlayRegions():OverlayRegion[];overlayMarkers():OverlayMarker[];
+ apply():Promise<PatchJobView|RebuildRefusal|null>;
+ shown(job:PatchJobView|RebuildRefusal|null):void;
+ status(text:string,error:boolean):void;busy(value:boolean):void;
+ restore():void;clear():void;sync():void;dispose():void;
+}
+const node=<T extends HTMLElement>(id:string)=>{const found=document.getElementById(id);if(!found)throw new Error(`Missing UI element: ${id}`);return found as T;};
+const make=<K extends keyof HTMLElementTagNameMap>(tag:K,props:Record<string,unknown>={},...children:(Node|string)[]):HTMLElementTagNameMap[K]=>{const item=document.createElement(tag);Object.assign(item,props);item.append(...children);return item;};
+const fmt=(p:readonly number[])=>`[${p.join(', ')}]`;
+/** The handle under the pointer (canvas px), within 9 px; the nearest wins. */
+export function hitHandle(points:readonly {id:string;at:OverlayPoint}[],p:OverlayPoint):string|null {
+ let best:string|null=null,distance=9;
+ for(const h of points){const d=Math.hypot(h.at.x-p.x,h.at.y-p.y);if(d<=distance){best=h.id;distance=d;}}
+ return best;
+}
+const drawText=(d:CutDraw)=>typeof d==='string'?d:`before ${d.before}`;
+
+export function bindCutsPanel(deps:CutsPanelDeps):CutsPanel {
+ const state=node('cuts-panel-state'),toggle=node<HTMLButtonElement>('cuts-edit'),picker=node<HTMLSelectElement>('cuts-select'),editor=node('cuts-editor'),pending=node('cuts-pending-list');
+ const applyButton=node<HTMLButtonElement>('cuts-apply'),resetButton=node<HTMLButtonElement>('cuts-reset'),statusOut=node('cuts-status'),readout=node('cuts-readout'),draft=node<HTMLTextAreaElement>('cuts-pending');
+ const addForm=node('cuts-add');
+ let config:unknown=null,source:CutsSource={cuts:[],patches:[],segments:[],plan:[],skipped:[]},anchors:BoneAnchor[]=[],buildReason:string|null=null,loaded=false;
+ let edits=new Map<string,CutEdit>(),joints=new Map<string,BoneEdit>(),adds:CutAdd[]=[];
+ let selected='',active=false,busy=false,space=false,hover:string|null=null;
+ let drag:{id:string;pointer:number;start:RigPoint;from:RigPoint}|null=null;
+ let placing:{kind:'cut'|'patch';points:RigPoint[]}|null=null;
+
+ const panelStatus=(text:string,error:boolean)=>{statusOut.textContent=text;statusOut.title=text;statusOut.classList.toggle('error',error);};
+ const save=()=>{draft.value=JSON.stringify({cuts:JSON.parse(cutsDraftText(edits,adds)),joints:[...joints.values()]});draft.dispatchEvent(new Event('input',{bubbles:true}));deps.saved();};
+ const jointAnchor=(bone:string)=>anchors.find(a=>a.label===bone&&(a.kind==='at'||a.kind==='point'));
+ const allOps=():PatchOp[]=>[...cutOps(edits,adds,config),...[...joints.values()].map(e=>({op:'replace' as const,path:e.path,value:[...e.value],name:e.name}))];
+ const guard=(fn:()=>void)=>{try{fn();}catch(error){if(error instanceof CutEditError){panelStatus(error.message,true);return;}throw error;}};
+ const change=(persist=true)=>{if(persist)save();render();deps.changed();};
+
+ /** Every handle in rig px: each cut's vertices, each patch box's two corners, each joint below a limb's upper segment. */
+ function handlesRig():CutHandle[] {
+  const out:CutHandle[]=[];
+  for(const c of source.cuts)c.polygon.forEach((_,k)=>out.push({id:`v:${c.index}:${k}`,label:`${c.into} vertex ${k}`,at:vertexAt(edits,c,k)}));
+  for(const q of source.patches){const b=boxAt(edits,q);out.push({id:`b0:${q.index}`,label:`${q.name} box min`,at:[b[0],b[1]]},{id:`b1:${q.index}`,label:`${q.name} box max`,at:[b[2],b[3]]});}
+  for(const s of source.segments){if(!s.joint)continue;const a=jointAnchor(s.bone);if(a)out.push({id:`j:${a.path}`,label:`${s.limb} ${s.joint} (${s.bone} origin)`,at:anchorAt(a,joints)});}
+  return out;
+ }
+ const projected=()=>{const project=deps.project(),mapping=deps.mapping();if(!project||!mapping.available)return [];return handlesRig().map(h=>{const w=mapping.toWorld(h.at[0],h.at[1]);return {id:h.id,at:project(w.x,w.y)};});};
+ const local=(event:PointerEvent):OverlayPoint=>{const rect=deps.canvas.getBoundingClientRect();return {x:event.clientX-rect.left,y:event.clientY-rect.top};};
+ const cropAt=(p:OverlayPoint):RigPoint|null=>{const project=deps.project(),mapping=deps.mapping();return project&&mapping.available?canvasToCrop(project,mapping.toWorld,p):null;};
+ /** Move one handle to a rig px value. */
+ function moveHandle(id:string,value:RigPoint){
+  const [kind,a,b]=id.split(':');
+  if(kind==='v'){const cut=source.cuts.find(c=>c.index===Number(a))!;edits=setVertex(edits,cut,Number(b),value);}
+  else if(kind==='b0'||kind==='b1'){const q=source.patches.find(p=>p.index===Number(a))!,box=[...boxAt(edits,q)] as PatchBox;if(kind==='b0'){box[0]=value[0];box[1]=value[1];}else{box[2]=value[0];box[3]=value[1];}edits=setBox(edits,q,box);}
+  else if(kind==='j'){const anchor=anchors.find(x=>x.path===id.slice(2))!;joints=setAnchor(joints,anchor,value);}
+ }
+
+ function renderPicker(){
+  const keep=selected;
+  const options=[make('option',{value:'',textContent:source.cuts.length||source.patches.length||source.segments.length?'Pick a cut, patch or limb (or drag a handle)':'The config states no cut, patch or limb'}),
+   ...source.cuts.map(c=>make('option',{value:`cut:${c.index}`,textContent:`cut ${c.into} ← ${c.from} · assemble.cuts[${c.index}]`})),
+   ...source.patches.map(q=>make('option',{value:`patch:${q.index}`,textContent:`patch ${q.name} · assemble.patches[${q.index}]`})),
+   ...source.segments.filter(s=>s.joint).map(s=>make('option',{value:`seg:${s.limb}:${s.index}`,textContent:`limb ${s.limb} · ${s.joint} → ${s.part} (${s.bone})`}))];
+  picker.replaceChildren(...options);picker.value=[...picker.options].some(o=>o.value===keep)?keep:'';picker.disabled=busy||options.length<2;
+ }
+ const numberInput=(label:string,value:number,set:(v:number)=>void,step='1')=>{const input=make('input',{type:'number',step,value:String(value),disabled:busy,inputMode:'numeric'});input.setAttribute('aria-label',label);input.onchange=()=>{const v=Number(input.value);if(!input.value.trim()||!Number.isFinite(v)){panelStatus(`CUTS_VALUE_INVALID: ${label} must be a number`,true);return;}guard(()=>{set(v);change();});};return input;};
+ function renderEditor(){
+  const [kind,a,b]=selected.split(':');
+  if(kind==='cut'){const c=source.cuts.find(x=>x.index===Number(a));if(!c){editor.replaceChildren();return;}
+   editor.replaceChildren(make('p',{className:'physics-editor-title'},make('strong',{textContent:c.into}),` · cut from ${c.from} · draw ${drawText(c.draw)} · overlap ${c.overlap}${c.under?` · under ${c.under} (the polygon box's size — moving the box's edge is the producer's ASSEMBLE_UNDER_SIZE)`:''}`),
+    ...c.polygon.map((_,k)=>{const now=vertexAt(edits,c,k);return make('div',{className:edits.has(`/assemble/cuts/${c.index}/polygon/${k}`)?'bones-anchor pending':'bones-anchor'},make('code',{textContent:`/assemble/cuts/${c.index}/polygon/${k}`}),numberInput(`${c.into} vertex ${k} x`,now[0],v=>{edits=setVertex(edits,c,k,[v,vertexAt(edits,c,k)[1]]);}),numberInput(`${c.into} vertex ${k} y`,now[1],v=>{edits=setVertex(edits,c,k,[vertexAt(edits,c,k)[0],v]);}));}));
+   return;}
+  if(kind==='patch'){const q=source.patches.find(x=>x.index===Number(a));if(!q){editor.replaceChildren();return;}const box=boxAt(edits,q);
+   editor.replaceChildren(make('p',{className:'physics-editor-title'},make('strong',{textContent:q.name}),` · patch · alpha ${q.alpha} · draw ${drawText(q.draw)} · box [x0, y0, x1, y1), x1 / y1 exclusive`),
+    make('div',{className:'bones-anchor'},make('code',{textContent:`/assemble/patches/${q.index}/box`}),...box.map((v,i)=>numberInput(`${q.name} box ${['x0','y0','x1','y1'][i]}`,v,n=>{const next=[...boxAt(edits,q)] as PatchBox;next[i]=n;edits=setBox(edits,q,next);}))));
+   return;}
+  if(kind==='seg'){const s=source.segments.find(x=>x.limb===a&&x.index===Number(b));if(!s){editor.replaceChildren();return;}const range=rangeAt(edits,s),anchor=jointAnchor(s.bone);
+   const none=make('input',{type:'checkbox',checked:!range,disabled:busy});none.setAttribute('aria-label',`${s.part} no range`);none.onchange=()=>guard(()=>{edits=setRange(edits,s,none.checked?null:rangeAt(edits,s)??[-30,30]);change();});
+   editor.replaceChildren(make('p',{className:'physics-editor-title'},make('strong',{textContent:`${s.limb} · ${s.joint}`}),` · ${s.part} on ${s.bone}, cut from ${s.from} · range is degrees from rest, min ≤ 0 ≤ max (check poses the joint there: SEAM_OVER_RANGE)`),
+    make('div',{className:'bones-anchor'},make('code',{textContent:`/limbs/${s.limb}/segments/${s.index}/range`}),...(range?[numberInput(`${s.part} range min`,range[0],v=>{edits=setRange(edits,s,[v,rangeAt(edits,s)![1]]);},'any'),numberInput(`${s.part} range max`,range[1],v=>{edits=setRange(edits,s,[rangeAt(edits,s)![0],v]);},'any')]:[]),make('label',{},none,' no range')),
+    ...(anchor?[make('div',{className:joints.has(anchor.path)?'bones-anchor pending':'bones-anchor'},make('code',{textContent:anchor.path}),make('span',{textContent:`joint = ${s.bone} origin`}),...[0,1].map(i=>numberInput(`${s.joint} ${i?'y':'x'}`,anchorAt(anchor,joints)[i]!,v=>{const p=[...anchorAt(anchor,joints)] as RigPoint;p[i]=v;joints=setAnchor(joints,anchor,p);})))]:[make('p',{className:'hint',textContent:`${s.bone}'s origin is not a config bone anchor; the joint is not drawn`})]));
+   return;}
+  editor.replaceChildren(make('p',{className:'hint',textContent:'Pick a cut, a patch or a limb joint to edit it by number, or drag a handle on the stage.'}));
+ }
+ function renderPending(){
+  const items:HTMLElement[]=[];
+  for(const e of edits.values()){const revert=make('button',{type:'button',textContent:'Revert',disabled:busy});revert.onclick=()=>{edits.delete(e.path);change();};
+   items.push(make('li',{},make('code',{textContent:`${e.kind==='range'&&e.value===null?'remove':e.kind==='range'&&e.from===null?'add':'replace'} ${e.path}`}),` ${e.from?fmt(e.from):'—'} → ${e.value?fmt(e.value):'—'} · ${e.name}`,revert));}
+  for(const e of joints.values()){const revert=make('button',{type:'button',textContent:'Revert',disabled:busy});revert.onclick=()=>{joints.delete(e.path);change();};
+   items.push(make('li',{},make('code',{textContent:`replace ${e.path}`}),` ${fmt(e.from)} → ${fmt(e.value)} · ${e.name} (a joint is its bone's origin)`,revert));}
+  adds.forEach((a,i)=>{const revert=make('button',{type:'button',textContent:'Revert',disabled:busy});revert.onclick=()=>{adds.splice(i,1);change();};
+   items.push(make('li',{},make('code',{textContent:`add /assemble/${a.kind==='cut'?'cuts':'patches'}/-`}),` ${a.kind==='cut'?`cut ${a.into} ← ${a.from}, ${a.polygon.length} point(s)`:`patch ${a.name} ${fmt(a.box)}`} · regions → ${a.bone}`,revert));});
+  pending.replaceChildren(...(items.length?items:[make('li',{className:'hint',textContent:'No pending ops.'})]));
+  applyButton.disabled=busy||!items.length||!!buildReason;resetButton.disabled=busy;
+  toggle.disabled=!loaded;toggle.setAttribute('aria-pressed',String(active));
+ }
+ function renderAdd(){
+  const field=(id:string)=>addForm.querySelector<HTMLInputElement|HTMLSelectElement>(`[data-cuts-add="${id}"]`);
+  const from=field('from') as HTMLSelectElement|null,before=field('draw') as HTMLSelectElement|null;
+  if(from&&from.options.length!==source.plan.length){from.replaceChildren(...source.plan.map(n=>make('option',{value:n,textContent:n})));}
+  if(before&&before.options.length!==source.plan.length+2){before.replaceChildren(make('option',{value:'front',textContent:'front'}),make('option',{value:'back',textContent:'back'}),...source.plan.map(n=>make('option',{value:`before:${n}`,textContent:`before ${n}`})));}
+  for(const el of addForm.querySelectorAll<HTMLInputElement|HTMLSelectElement|HTMLButtonElement>('input,select,button'))el.disabled=busy||!loaded;
+  const finish=addForm.querySelector<HTMLButtonElement>('[data-cuts-add="finish"]');if(finish)finish.disabled=busy||!placing||(placing.kind==='cut'?placing.points.length<3:placing.points.length<2);
+ }
+ function render(){renderPicker();renderEditor();renderPending();renderAdd();}
+ function renderState(){
+  if(!loaded)return;const mapping=deps.mapping();
+  state.classList.toggle('error',!mapping.available||!!source.skipped.length||!!buildReason);
+  state.textContent=`${source.cuts.length} cut(s) · ${source.patches.length} patch(es) · ${source.segments.filter(s=>s.joint).length} limb joint(s) in rig px of the setup pose${source.skipped.length?` · not read: ${source.skipped.join('; ')}`:''}${buildReason?` · Apply: ${buildReason}`:''}${mapping.available?'':` · ${mapping.reason}: no handles are drawn`}`;
+ }
+
+ const setActive=(on:boolean)=>{active=on&&loaded;if(active)deps.pause();if(!active){drag=null;hover=null;placing=null;delete deps.pane.dataset.cutsHover;}render();deps.changed();};
+ toggle.onclick=()=>setActive(!active);
+ picker.onchange=()=>{selected=picker.value;render();deps.changed();};
+ applyButton.onclick=()=>{void panel.apply();};
+ resetButton.onclick=()=>{if(!busy)void deps.reset();};
+ addForm.addEventListener('click',event=>{
+  const target=(event.target as HTMLElement).closest<HTMLButtonElement>('button[data-cuts-add]');if(!target)return;
+  const kind=target.dataset.cutsAdd;
+  if(kind==='place-cut'||kind==='place-patch'){placing={kind:kind==='place-cut'?'cut':'patch',points:[]};setActive(true);panelStatus(kind==='place-cut'?'Click the polygon\'s points on the stage (rig px, whole numbers), then Finish.':'Click the box\'s two corners on the stage, then Finish.',false);render();return;}
+  if(kind==='finish'&&placing){
+   const value=(id:string)=>(addForm.querySelector<HTMLInputElement|HTMLSelectElement>(`[data-cuts-add="${id}"]`)?.value??'').trim();
+   const drawValue=value('draw'),draw:CutDraw=drawValue.startsWith('before:')?{before:drawValue.slice('before:'.length)}:drawValue==='back'?'back':'front';
+   const name=value('name'),bone=value('bone');
+   if(!name||!bone){panelStatus('CUTS_ADD_INCOMPLETE: a new part needs a name and the bone its region rides',true);return;}
+   if(placing.kind==='cut')adds.push({kind:'cut',from:value('from'),into:name,polygon:placing.points.map(p=>[...p] as RigPoint),draw,overlap:Number(value('overlap')||'0'),bone});
+   else{const [p,q]=placing.points as [RigPoint,RigPoint];adds.push({kind:'patch',name,box:[Math.min(p[0],q[0]),Math.min(p[1],q[1]),Math.max(p[0],q[0]),Math.max(p[1],q[1])],alpha:value('alpha')==='box'?'box':'silhouette',draw,bone});}
+   placing=null;change();panelStatus(`Added ${name}: Apply runs rig-parts build; the producer judges the polygon or box.`,false);return;
+  }
+  if(kind==='cancel'){placing=null;render();deps.changed();}
+ });
+ const keyDown=(event:KeyboardEvent)=>{if(event.code==='Space'&&!textEntryFocused(event.target))space=true;};
+ const keyUp=(event:KeyboardEvent)=>{if(event.code==='Space')space=false;};
+ const down=(event:PointerEvent)=>{
+  if(!active||busy||space||!event.isPrimary||event.button!==0)return;
+  const target=event.target;if(target instanceof Element&&target.closest('button,input,select,textarea,a'))return;
+  const p=local(event),at=cropAt(p);if(!at)return;
+  if(placing){event.stopPropagation();event.preventDefault();placing.points.push([Math.round(at[0]),Math.round(at[1])]);if(placing.kind==='patch'&&placing.points.length>2)placing.points.shift();render();deps.changed();return;}
+  const id=hitHandle(projected(),p);if(!id)return;
+  event.stopPropagation();event.preventDefault();
+  const handle=handlesRig().find(h=>h.id===id)!;drag={id,pointer:event.pointerId,start:at,from:[...handle.at]};
+  const [kind,a,b]=id.split(':');selected=kind==='v'?`cut:${a}`:kind==='j'?(()=>{const anchor=anchors.find(x=>x.path===id.slice(2));const s=source.segments.find(g=>g.joint&&jointAnchor(g.bone)===anchor);return s?`seg:${s.limb}:${s.index}`:selected;})():`patch:${a}`;void b;
+  deps.pane.setPointerCapture(event.pointerId);deps.pane.dataset.cutsHover='move';render();deps.changed();
+ };
+ const move=(event:PointerEvent)=>{
+  if(drag&&event.pointerId===drag.pointer){event.stopPropagation();const now=cropAt(local(event));if(!now)return;guard(()=>{moveHandle(drag!.id,dragPoint(drag!.from,drag!.start,now));});render();deps.changed();return;}
+  if(!active||space)return;const id=hitHandle(projected(),local(event));if(id!==hover){hover=id;if(id)deps.pane.dataset.cutsHover='move';else delete deps.pane.dataset.cutsHover;deps.changed();}
+ };
+ const end=(event:PointerEvent)=>{if(!drag||event.pointerId!==drag.pointer)return;drag=null;delete deps.pane.dataset.cutsHover;if(deps.pane.hasPointerCapture(event.pointerId))deps.pane.releasePointerCapture(event.pointerId);save();render();deps.changed();};
+ deps.pane.addEventListener('pointerdown',down,true);deps.pane.addEventListener('pointermove',move,true);
+ for(const type of ['pointerup','pointercancel','lostpointercapture'] as const)deps.pane.addEventListener(type,end,true);
+ document.addEventListener('keydown',keyDown,true);window.addEventListener('keyup',keyUp,true);
+ const observer=new MutationObserver(()=>panel.sync());
+ for(const selector of document.querySelectorAll('[data-inspector]'))observer.observe(selector,{attributes:true,attributeFilter:['aria-pressed','aria-selected']});
+
+ const colors=()=>({stroke:deps.token('--rv-mesh-region'),fill:deps.token('--rv-mesh-region-fill'),handle:deps.token('--rv-mesh-handle'),ink:deps.token('--rv-bone-ink'),labelBg:deps.token('--rv-bone-label-bg'),joint:deps.token('--rv-landmark'),pending:deps.token('--rv-bone-pending')});
+ const world=(p:RigPoint)=>{const m=deps.mapping();return m.available?m.toWorld(p[0],p[1]):null;};
+ const restore=()=>{
+  let doc:unknown=null;try{doc=JSON.parse(draft.value||'null');}catch{doc=null;}
+  const kept=doc&&typeof doc==='object'&&'cuts' in (doc as object)?cutsDraft(JSON.stringify((doc as {cuts:unknown}).cuts),source):{edits:new Map<string,CutEdit>(),adds:[] as CutAdd[]};
+  edits=kept.edits;adds=kept.adds;joints=new Map();
+  const list=doc&&typeof doc==='object'&&Array.isArray((doc as {joints?:unknown}).joints)?(doc as {joints:BoneEdit[]}).joints:[];
+  for(const e of list){const a=anchors.find(x=>x.path===e.path&&x.name===e.name&&x.value[0]===e.from[0]&&x.value[1]===e.from[1]);if(a)joints=setAnchor(joints,a,e.value);}
+ };
+
+ const panel:CutsPanel={
+  load(next,bones,reason,build){
+   if(next===null){config=null;source={cuts:[],patches:[],segments:[],plan:[],skipped:[]};loaded=false;state.textContent=reason??'CUTS_UNAVAILABLE: no producer handoff';state.classList.add('error');setActive(false);render();return;}
+   config=next;source=cutsSource(next);anchors=boneAnchors(configBones(bones??[]).bones);buildReason=build;loaded=true;
+   restore();renderState();render();deps.changed();
+  },
+  source:()=>structuredClone(source),
+  ops:allOps,
+  setVertex(cut,k,value){const c=source.cuts.find(x=>x.index===cut);if(!c)throw new Error(`CUTS_UNKNOWN: assemble.cuts[${cut}]`);edits=setVertex(edits,c,k,value);change();},
+  setBox(index,value){const q=source.patches.find(x=>x.index===index);if(!q)throw new Error(`CUTS_UNKNOWN: assemble.patches[${index}]`);edits=setBox(edits,q,value);change();},
+  setRange(limb,k,value){const s=source.segments.find(x=>x.limb===limb&&x.index===k);if(!s)throw new Error(`CUTS_UNKNOWN: limbs.${limb}.segments[${k}]`);edits=setRange(edits,s,value);change();},
+  active:()=>active,setActive,
+  handles(){const rect=deps.canvas.getBoundingClientRect(),labels=new Map(handlesRig().map(h=>[h.id,h.label]));return projected().map(h=>({id:h.id,label:labels.get(h.id)!,x:h.at.x+rect.left,y:h.at.y+rect.top}));},
+  overlayRegions(){
+   if(!active||!loaded)return [];const c=colors(),out:OverlayRegion[]=[],handleColors={handle:c.handle,ink:c.ink,labelBg:c.labelBg};
+   const region=(name:string,points:RigPoint[],focus:boolean,extra:Partial<OverlayRegion>={})=>{const w=points.map(world);if(w.some(p=>!p))return;out.push({name,points:w as OverlayPoint[],stroke:c.stroke,fill:c.fill,handles:true,active:focus&&drag?Number(drag.id.split(':')[2]??0):null,colors:handleColors,...extra});};
+   for(const cut of source.cuts)region(cut.into,cut.polygon.map((_,k)=>vertexAt(edits,cut,k)),selected===`cut:${cut.index}`);
+   for(const q of source.patches){const b=boxAt(edits,q);region(q.name,[[b[0],b[1]],[b[2],b[1]],[b[2],b[3]],[b[0],b[3]]],false);}
+   for(const s of source.segments){
+    const r=rangeAt(edits,s),a=s.joint?jointAnchor(s.bone):undefined;if(!r||!a)continue;
+    // The rest direction: the lower bone toward its next point or tip, in config rig px.
+    const next=anchors.find(x=>x.index===a.index&&(x.kind==='point'&&a.kind==='point'?x.link===(a.link??0)+1:x.kind==='tip'));
+    if(!next)continue;region(`${s.joint} ${fmt(r)}°`,rangeArc(anchorAt(a,joints),anchorAt(next,joints),r,40),false,{handles:false});
+   }
+   if(placing&&placing.points.length)region(placing.kind==='cut'?'new cut':'new patch',placing.kind==='patch'&&placing.points.length===2?[placing.points[0]!,[placing.points[1]![0],placing.points[0]![1]],placing.points[1]!,[placing.points[0]![0],placing.points[1]![1]]]:placing.points,false,{open:placing.kind==='cut',active:placing.points.length-1});
+   for(const a of adds)region(a.kind==='cut'?a.into:a.name,a.kind==='cut'?a.polygon:[[a.box[0],a.box[1]],[a.box[2],a.box[1]],[a.box[2],a.box[3]],[a.box[0],a.box[3]]],false);
+   return out;
+  },
+  overlayMarkers(){
+   if(!active||!loaded)return [];const c=colors();
+   return source.segments.flatMap(s=>{const a=s.joint?jointAnchor(s.bone):undefined;const at=a?world(anchorAt(a,joints)):null;return at?[{at,tag:`${s.joint} · ${s.part}`,active:hover===`j:${a!.path}`||drag?.id===`j:${a!.path}`,colors:{stroke:joints.has(a!.path)?c.pending:c.joint,fill:c.joint,ink:c.ink,labelBg:c.labelBg}}]:[];});
+  },
+  async apply(){
+   const ops=allOps();if(!ops.length||busy){panelStatus('CUTS_NOTHING_PENDING: no pending ops',true);return null;}
+   const result=await deps.apply(ops);panel.shown(result);return result;
+  },
+  shown(job){
+   if(!job){readout.replaceChildren();return;}
+   const lines:HTMLElement[]=[],line=(label:string,text:string,error=false)=>lines.push(make('div',{className:'physics-readout-line'},make('span',{className:'eyebrow',textContent:label}),make('code',{textContent:text,title:text,className:error?'error':''})));
+   if(!('id' in job)){line('REFUSED',job.error,true);readout.replaceChildren(...lines);return;}
+   const a=job.assembled;
+   for(const r of a?.refusals??[])line('REFUSED',r,true);
+   for(const r of a?.checkFails??[])line('CHECK FAIL',r,true);
+   if(a){
+    if(a.recomposite.line)line('RECOMPOSITE',a.recomposite.line);
+    const before=a.recomposite.before,after=a.recomposite.after;if(before&&after)line('ERROR PX',`${before.error_px} → ${after.error_px} (uncovered ${before.uncovered_error_px} → ${after.uncovered_error_px}, holes ${before.hole_count} → ${after.hole_count})`);
+    for(const l of a.lines)line(l.startsWith('uncovered')?'HOLE':l.split(':')[0]!.toUpperCase(),l);
+    for(const l of a.seam)line('SEAM',l);for(const l of a.seamPairs)line('SEAM PAIR',l);
+    if(a.parts)line('PARTS',a.parts.changed.length?`changed: ${a.parts.changed.join(', ')} · ${a.parts.unchanged} unchanged · parts.json differs at ${a.parts.partsJson.count} path(s)`:`no part changed · parts.json differs at ${a.parts.partsJson.count} path(s)`);
+   }
+   if(job.status==='built'){line('BUILD',`${job.wallMs.op===null?'—':`${(job.wallMs.op/1000).toFixed(1)} s`} wall clock (assemble → rig → check) · compile ${job.wallMs.compile===null?'—':`${(job.wallMs.compile/1000).toFixed(1)} s`}${job.reused?' · reused':''}`);if(job.check?.line)line('CHECK',job.check.line,job.check.pass!==true);}
+   const map=a?.recomposite.errorMap;
+   readout.replaceChildren(...lines,...(map&&job.status==='built'?[make('figure',{className:'cuts-error-map'},make('img',{src:deps.route(map.url),alt:'Recomposite error map of the scratch build: red is painting no part holds, blue a part more than 40 off'}),make('figcaption',{textContent:`recomposite_error_rig.png · sha256 ${map.sha256.slice(0,12)}…`}))]:[]));
+  },
+  status:panelStatus,
+  busy(value){busy=value;render();},
+  restore(){restore();render();deps.changed();},
+  clear(){edits=new Map();joints=new Map();adds=[];placing=null;change();},
+  sync(){renderState();if(active&&deps.inspector()!=='rig')setActive(false);},
+  dispose(){observer.disconnect();deps.pane.removeEventListener('pointerdown',down,true);deps.pane.removeEventListener('pointermove',move,true);for(const type of ['pointerup','pointercancel','lostpointercapture'] as const)deps.pane.removeEventListener(type,end,true);document.removeEventListener('keydown',keyDown,true);window.removeEventListener('keyup',keyUp,true);},
+ };
+ render();
+ return panel;
+}