@rig-c/review 0.5.0 → 0.7.0

package/web/retarget-panel.ts

@@ -0,0 +1,203 @@
+/**
+ * Animate · Retarget (#114), page side: a `rig-pose-map/1` editor — per chain, include it and pick the rig bone that
+ * carries each segment (and its bend), the translated bone and its scale points — the clean and retarget flags as typed
+ * controls, the declared pose sequence to read, then Apply · Retarget. The server runs the installed `rig-pose clean`,
+ * `rig-pose retarget` and the compile into scratch; this draws what came back: the producer's lines (every refusal
+ * verbatim) and the run's FEET / STANCE / FLIP / SHORT / END-ON / LEG-SCALE / REACH lines, each a button that seeks to
+ * its frame. The map starts from a loaded `rig-pose-map/1` file (read in the page, sent by content) or the body-18
+ * chains with no bone picked. Review authors no keys: the motion is the producer's.
+ */
+import {DEFAULT_CLEAN,DEFAULT_FLAGS,POSE_MAP_SCHEMA,type RetargetFlags,type RetargetLine} from '../src/retarget.ts';
+import type {RetargetJobView,RetargetStatusView,RebuildRefusal} from './rebuild-client.ts';
+
+type Chain={name:string;bones:string[];joints:string[];bend?:string;[key:string]:unknown};
+export type PoseMap={spec:typeof POSE_MAP_SCHEMA;chains:Chain[];translate?:{bone:string;joint:string;scale?:{pose:[string,string];rig:[string,string]}};[key:string]:unknown};
+/** The body-18 chains a front-facing figure maps (README, "The map"), no bone picked: the editor's start without a map file. */
+export function templateMap():PoseMap {
+ return {spec:POSE_MAP_SCHEMA,chains:[
+  {name:'trunk',bones:[''],joints:['mid_hip','neck'],aim:['neck']},
+  {name:'arm_r',bones:['',''],joints:['r_shoulder','r_elbow','r_wrist'],bend:'free'},
+  {name:'arm_l',bones:['',''],joints:['l_shoulder','l_elbow','l_wrist'],bend:'free'},
+  {name:'leg_r',bones:['',''],joints:['r_hip','r_knee','r_ankle'],bend:'free'},
+  {name:'leg_l',bones:['',''],joints:['l_hip','l_knee','l_ankle'],bend:'free'},
+ ],translate:{bone:'',joint:'mid_hip',scale:{pose:['mid_hip','neck'],rig:['','']}}};
+}
+/** A bone not yet picked, refused before anything is sent; whether a picked bone is the rig's is the producer's to say. */
+export function mapPrecheck(map:PoseMap):string|null {
+ if(!map.chains.length)return 'RETARGET_MAP_INCOMPLETE: no chain is included';
+ for(const c of map.chains){const i=c.bones.findIndex(b=>!b);if(i>=0)return `RETARGET_MAP_INCOMPLETE: chain "${c.name}" bone ${i+1} (${c.joints[i]} → ${c.joints[i+1]??'?'}) is not picked`;}
+ if(map.translate&&!map.translate.bone)return 'RETARGET_MAP_INCOMPLETE: the translated bone is not picked';
+ if(map.translate?.scale&&map.translate.scale.rig.some(b=>!b))return 'RETARGET_MAP_INCOMPLETE: the translate scale\'s rig points are not picked';
+ return null;
+}
+/** A document read from a file or the JSON field: a `rig-pose-map/1` with chains, else the line saying why not. */
+export function readMap(text:string):{map:PoseMap}|{error:string} {
+ let value:unknown;try{value=JSON.parse(text);}catch(error){return {error:`RETARGET_MAP_INVALID: ${error instanceof Error?error.message:String(error)}`};}
+ const v=value as PoseMap;
+ if(!v||typeof v!=='object'||v.spec!==POSE_MAP_SCHEMA||!Array.isArray(v.chains)||!v.chains.every(c=>c&&typeof c.name==='string'&&Array.isArray(c.bones)&&Array.isArray(c.joints)))return {error:`RETARGET_MAP_INVALID: expected a ${POSE_MAP_SCHEMA} document with chains of {name, bones, joints}`};
+ return {map:JSON.parse(JSON.stringify(v)) as PoseMap};
+}
+
+export interface RetargetPanelDeps {
+ apply:(body:{sequence:string;map:PoseMap;flags:RetargetFlags})=>Promise<RetargetJobView|RebuildRefusal|null>;
+ reset:()=>void;
+ seek:(animation:string,frame:number,time:number|null,label:string)=>void;
+}
+export interface RetargetPanel {
+ load(status:RetargetStatusView|null,reason:string|null):void;
+ map():PoseMap;setMap(map:PoseMap):void;
+ /** Include or leave out a chain by name. */
+ include(chain:string,on:boolean):void;
+ pick(chain:string,index:number,bone:string):void;
+ flags():RetargetFlags|{error:string};setFlags(flags:Partial<RetargetFlags>):void;
+ sequence():string;
+ busy(value:boolean):void;
+ status(text:string,error:boolean):void;
+ line(text:string):void;
+ result(job:RetargetJobView|RebuildRefusal|null):void;
+ shownLines():string[];
+}
+
+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;};
+// A checkbox reads after its box; a field after its name.
+const labelled=(text:string,control:HTMLElement)=>control instanceof HTMLInputElement&&control.type==='checkbox'?make('label',{},control,text):make('label',{},text,control);
+const numberInput=(id:string,value:number,step:string,label:string)=>{const n=make('input',{id,type:'number',step,value:String(value)});n.setAttribute('aria-label',label);return n;};
+const checkbox=(id:string,checked=false)=>make('input',{id,type:'checkbox',checked});
+
+export function bindRetargetPanel(deps:RetargetPanelDeps):RetargetPanel {
+ const body=node('retarget-body');
+ let status:RetargetStatusView|null=null,entries:{chain:Chain;on:boolean}[]=[],rest:Omit<PoseMap,'chains'>={spec:POSE_MAP_SCHEMA},shown:string[]=[],isBusy=false;
+ const log:string[]=[];
+ // Controls.
+ const sequence=make('select',{id:'retarget-sequence'});sequence.setAttribute('aria-label','Pose sequence');
+ const person=make('select',{id:'retarget-person'});person.setAttribute('aria-label','Person');
+ const template=make('button',{type:'button',textContent:'Body-18 chains'}),file=make('input',{id:'retarget-map-file',type:'file',accept:'.json,application/json'});file.setAttribute('aria-label','Load a rig-pose-map/1 file');
+ const chains=make('div',{id:'retarget-chains',className:'retarget-chains'}),translate=make('div',{id:'retarget-translate',className:'row retarget-translate'});
+ const json=make('textarea',{id:'retarget-map-json',rows:8,spellcheck:false}),useJson=make('button',{type:'button',textContent:'Use this JSON'});json.setAttribute('aria-label','Map JSON');
+ const clean=checkbox('retarget-clean',true),loop=checkbox('retarget-loop'),legs=numberInput('retarget-legs',DEFAULT_CLEAN.legs,'2','clean legs window'),restWin=numberInput('retarget-rest',DEFAULT_CLEAN.rest,'2','clean rest window'),hold=checkbox('retarget-hold',true),hips=checkbox('retarget-hips-inferred');
+ const animation=make('input',{id:'retarget-animation',type:'text',value:DEFAULT_FLAGS.animation,autocomplete:'off'});animation.setAttribute('aria-label','New animation name');
+ const opt=(id:string,value:number,step:string,label:string)=>({on:checkbox(`${id}-on`),value:numberInput(id,value,step,label)});
+ const minScore=opt('retarget-min-score',0.3,'0.05','min score'),flip=opt('retarget-flip',90,'1','flip degrees'),short=opt('retarget-short',0.35,'0.05','short fraction'),tolerance=opt('retarget-bend-tolerance',0,'1','bend tolerance degrees'),stance=opt('retarget-stance',0.07,'0.01','stance leg lengths');
+ const bends=make('select',{id:'retarget-bends'},make('option',{value:'refuse',textContent:'refuse'}),make('option',{value:'clamp',textContent:'clamp'}));bends.setAttribute('aria-label','Wrong-way bends');
+ const legScale={on:checkbox('retarget-leg-scale-on'),min:numberInput('retarget-leg-scale-min',0.8,'0.01','leg scale min'),max:numberInput('retarget-leg-scale-max',1.05,'0.01','leg scale max')};
+ const plant=checkbox('retarget-plant-feet'),raised=checkbox('retarget-raised-by-head'),carry=checkbox('retarget-carry-idle');
+ const apply=make('button',{id:'retarget-apply',type:'button',className:'primary',textContent:'Apply · Retarget',disabled:true}),reset=make('button',{id:'retarget-reset',type:'button',textContent:'Reset'});
+ const statusLine=make('p',{id:'retarget-status',className:'hint'});statusLine.setAttribute('aria-live','polite');
+ const logView=make('pre',{id:'retarget-log',className:'retarget-log',hidden:true}),refusals=make('ul',{id:'retarget-refusals',className:'requirements-refusals'}),readings=make('ul',{id:'retarget-lines',className:'readings-worst'});readings.setAttribute('aria-label','Retarget lines');
+ body.append(
+  make('div',{className:'row'},labelled('Sequence',sequence),labelled('Person',person)),
+  make('div',{className:'row'},make('span',{className:'eyebrow',textContent:'MAP · rig-pose-map/1'}),template,file),
+  chains,translate,
+  make('details',{className:'retarget-json'},make('summary',{textContent:'Map JSON (aims, ranges, alternates…)'}),json,make('div',{className:'row'},useJson)),
+  make('div',{className:'row'},make('span',{className:'eyebrow',textContent:'CLEAN'}),labelled('clean first',clean),labelled('loop',loop),labelled('legs',legs),labelled('rest',restWin),labelled('hold',hold),labelled('hips inferred',hips)),
+  make('div',{className:'row'},make('span',{className:'eyebrow',textContent:'RETARGET'}),labelled('as',animation)),
+  make('div',{className:'row'},labelled('flip °',flip.on),flip.value,labelled('short',short.on),short.value,labelled('min score',minScore.on),minScore.value),
+  make('div',{className:'row'},labelled('bends',bends),labelled('tolerance °',tolerance.on),tolerance.value,labelled('leg scale',legScale.on),legScale.min,legScale.max),
+  make('div',{className:'row'},labelled('plant feet',plant),labelled('stance',stance.on),stance.value,labelled('raised by head',raised),labelled('carry idle',carry)),
+  make('div',{className:'row'},apply,reset),statusLine,refusals,logView,readings,
+ );
+
+ const bonesOf=()=>status?.bones??[];
+ const boneSelect=(value:string,label:string,change:(v:string)=>void)=>{
+  const s=make('select');s.setAttribute('aria-label',label);
+  const names=bonesOf(),options=[make('option',{value:'',textContent:'— pick a bone —'}),...names.map(n=>make('option',{value:n,textContent:n}))];
+  // A bone the map names that the rig lacks stays visible: Apply sends it and the producer refuses it by name.
+  if(value&&!names.includes(value))options.push(make('option',{value,textContent:`${value} (not in the rig)`}));
+  s.append(...options);s.value=value;s.onchange=()=>change(s.value);return s;
+ };
+ const map=():PoseMap=>({...JSON.parse(JSON.stringify(rest)),chains:entries.filter(e=>e.on).map(e=>JSON.parse(JSON.stringify(e.chain)))}) as PoseMap;
+ function render(){
+  chains.replaceChildren(...entries.map((e,ci)=>{
+   const on=checkbox(`retarget-chain-${ci}`,e.on);on.onchange=()=>{e.on=on.checked;render();};
+   const row=make('div',{className:`retarget-chain${e.on?'':' off'}`},labelled(e.chain.name,on));
+   e.chain.bones.forEach((bone,bi)=>{row.append(make('code',{textContent:`${e.chain.joints[bi]??'?'}→${e.chain.joints[bi+1]??'?'}`}),boneSelect(bone,`${e.chain.name} bone ${bi+1}`,v=>{e.chain.bones[bi]=v;render();}));});
+   const bend=make('select',{},...['','rest','free','ccw','cw'].map(v=>make('option',{value:v,textContent:v||'bend: rest (default)'})));bend.setAttribute('aria-label',`${e.chain.name} bend`);bend.value=typeof e.chain.bend==='string'?e.chain.bend:'';bend.onchange=()=>{if(bend.value)e.chain.bend=bend.value;else delete e.chain.bend;render();};
+   row.append(bend);return row;
+  }));
+  translate.replaceChildren();
+  const t=rest.translate as PoseMap['translate'];
+  if(t){
+   translate.append(make('span',{textContent:`translate ${t.joint} →`}),boneSelect(t.bone,'translated bone',v=>{t.bone=v;render();}));
+   if(t.scale){translate.append(make('span',{textContent:`scale ${t.scale.pose.join('→')} =`}));t.scale.rig.forEach((b,i)=>translate.append(boneSelect(b,`scale rig point ${i+1}`,v=>{t.scale!.rig[i]=v;render();})));}
+  }
+  if(document.activeElement!==json)json.value=JSON.stringify(map(),null,1);
+  syncApply();
+ }
+ function setMap(next:PoseMap){const {chains:list,...others}=JSON.parse(JSON.stringify(next)) as PoseMap;rest=others;entries=list.map(chain=>({chain,on:true}));render();}
+ function syncApply(){apply.disabled=isBusy||!status?.available||!sequence.value;}
+ function people(){const s=status?.sequences.find(x=>x.id===sequence.value);person.replaceChildren(make('option',{value:'',textContent:s&&s.people.length>1?'— pick —':'(the one person)'}),...(s?.people??[]).map(p=>make('option',{value:p,textContent:p})));}
+ const say=(text:string,error:boolean)=>{statusLine.textContent=text;statusLine.title=text;statusLine.classList.toggle('error',error);};
+
+ template.onclick=()=>setMap(templateMap());
+ file.onchange=()=>{const f=file.files?.[0];if(!f)return;void f.text().then(text=>{const read=readMap(text);if('error' in read)say(read.error,true);else{setMap(read.map);say(`Map loaded from ${f.name} (by content; nothing is sent until Apply).`,false);}file.value='';});};
+ useJson.onclick=()=>{const read=readMap(json.value);if('error' in read)say(read.error,true);else{setMap(read.map);say('Map taken from the JSON field.',false);}};
+ sequence.onchange=()=>{people();syncApply();};
+ reset.onclick=()=>deps.reset();
+
+ function flags():RetargetFlags|{error:string}{
+  const n=(input:HTMLInputElement,what:string)=>{const v=Number(input.value);return input.value.trim()&&Number.isFinite(v)?v:null;};
+  const optional=(o:{on:HTMLInputElement;value:HTMLInputElement},what:string):number|null|{error:string}=>{if(!o.on.checked)return null;const v=n(o.value,what);return v===null?{error:`RETARGET_FLAG_INCOMPLETE: ${what}`}:v;};
+  const name=animation.value.trim();if(!name)return {error:'RETARGET_FLAG_INCOMPLETE: name the new animation'};
+  const values:Record<string,number|null>={};
+  for(const [key,o,what] of [['minScore',minScore,'min score'],['flip',flip,'flip degrees'],['short',short,'short fraction'],['bendTolerance',tolerance,'bend tolerance'],['stance',stance,'stance']] as const){const v=optional(o,what);if(v&&typeof v==='object')return v;values[key]=v;}
+  const lmin=n(legScale.min,'leg scale min'),lmax=n(legScale.max,'leg scale max');
+  if(legScale.on.checked&&(lmin===null||lmax===null))return {error:'RETARGET_FLAG_INCOMPLETE: leg scale min and max'};
+  const l=n(legs,'legs'),r=n(restWin,'rest');if(clean.checked&&(l===null||r===null))return {error:'RETARGET_FLAG_INCOMPLETE: clean windows'};
+  return {animation:name,person:person.value||null,clean:clean.checked?{loop:loop.checked,legs:l!,rest:r!,hold:hold.checked,hipsInferred:hips.checked}:null,
+   minScore:values.minScore??null,flip:values.flip??null,short:values.short??null,bends:bends.value as 'refuse'|'clamp',bendTolerance:values.bendTolerance??null,
+   legScale:legScale.on.checked?[lmin!,lmax!]:null,plantFeet:plant.checked,stance:values.stance??null,raisedByHead:raised.checked,carryIdle:carry.checked};
+ }
+ function setFlags(f:Partial<RetargetFlags>){
+  if(f.animation!==undefined)animation.value=f.animation;
+  if(f.person!==undefined)person.value=f.person??'';
+  if(f.clean!==undefined){clean.checked=!!f.clean;if(f.clean){loop.checked=f.clean.loop;legs.value=String(f.clean.legs);restWin.value=String(f.clean.rest);hold.checked=f.clean.hold;hips.checked=f.clean.hipsInferred;}}
+  for(const [key,o] of [['minScore',minScore],['flip',flip],['short',short],['bendTolerance',tolerance],['stance',stance]] as const){const v=f[key];if(v===undefined)continue;o.on.checked=v!==null;if(v!==null)o.value.value=String(v);}
+  if(f.bends)bends.value=f.bends;
+  if(f.legScale!==undefined){legScale.on.checked=!!f.legScale;if(f.legScale){legScale.min.value=String(f.legScale[0]);legScale.max.value=String(f.legScale[1]);}}
+  if(f.plantFeet!==undefined)plant.checked=f.plantFeet;if(f.raisedByHead!==undefined)raised.checked=f.raisedByHead;if(f.carryIdle!==undefined)carry.checked=f.carryIdle;
+ }
+
+ apply.onclick=()=>{
+  const m=map(),problem=mapPrecheck(m);if(problem){say(`${problem} (review pre-check; nothing sent)`,true);return;}
+  const f=flags();if('error' in f){say(`${f.error} (review pre-check; nothing sent)`,true);return;}
+  log.length=0;logView.textContent='';logView.hidden=true;
+  void deps.apply({sequence:sequence.value,map:m,flags:f});
+ };
+
+ function lineItem(r:RetargetLine,animationName:string){
+  const item=make('li',{className:'readings-line scratch'}),swatch=make('span',{className:'tick-swatch scratch'});swatch.setAttribute('aria-hidden','true');
+  if(r.frame!==null){const go=make('button',{type:'button',className:'readings-go',textContent:r.line,title:r.line});go.onclick=()=>deps.seek(animationName,r.frame!,r.time,`${r.code} F${r.frame}`);item.append(swatch,go);}
+  else item.append(swatch,make('code',{textContent:r.line,title:r.line}));
+  return item;
+ }
+ return {
+  load(next,reason){
+   status=next;const prior=sequence.value;
+   sequence.replaceChildren(...(next?.sequences??[]).map(s=>make('option',{value:s.id,textContent:`${s.label} · ${s.frames} frame(s) · ${s.cleaned?'cleaned':'raw'}`})));
+   if(prior&&next?.sequences.some(s=>s.id===prior))sequence.value=prior;
+   const s=next?.sequences.find(x=>x.id===sequence.value);if(s?.cleaned&&!prior)clean.checked=false;
+   people();if(!entries.length)setMap(templateMap());else render();
+   say(next?.available?`${next.producer?.package} ${next.producer?.version} with ${next.compiler?.package} ${next.compiler?.version} on the handoff rig${next.rig?` (${next.rig})`:''} · ${next.bones.length} bone(s), animations ${next.animations.join(', ')||'none'}`:(next?.reason??reason??'RETARGET_UNAVAILABLE'),!next?.available);
+   syncApply();
+  },
+  map,setMap,
+  include(name,on){const e=entries.find(x=>x.chain.name===name);if(e){e.on=on;render();}},
+  pick(name,index,bone){const e=entries.find(x=>x.chain.name===name);if(e&&index>=0&&index<e.chain.bones.length){e.chain.bones[index]=bone;render();}},
+  flags,setFlags,sequence:()=>sequence.value,
+  busy(value){isBusy=value;apply.textContent=value?'Retargeting…':'Apply · Retarget';syncApply();},
+  status:say,
+  line(text){log.push(text);logView.hidden=false;logView.textContent=log.slice(-12).join('\n');},
+  result(job){
+   refusals.replaceChildren();readings.replaceChildren();shown=[];
+   if(!job)return;
+   if(!('id' in job)){refusals.append(make('li',{},make('code',{textContent:job.producerLine??job.error})));return;}
+   for(const line of job.refusals??[])refusals.append(make('li',{},make('code',{textContent:line})));
+   if(job.status!=='built')return;
+   const name=job.request.record.flags.animation;
+   for(const r of job.readings){readings.append(lineItem(r,name));shown.push(r.line);}
+   if(!job.readings.length)readings.append(make('li',{className:'hint',textContent:'No FEET / STANCE / FLIP / SHORT / END-ON / LEG-SCALE / REACH line in this run (FEET needs both legs mapped; FLIP and SHORT their flags).'}));
+  },
+  shownLines:()=>[...shown],
+ };
+}

package/web/rig-fields-panel.ts

@@ -0,0 +1,269 @@
+/**
+ * Setup · Rig fields (#110), page side: the bone a rigid part rides (`regions.<part>`), a lash's blink still row dragged
+ * on the stage (`motion.blink.still.<part>`), each stop's inward / outward arc dragged at its pivot (`stops[i]`), a bone's
+ * inherit mode (`bones[i].inherit`, a chain's `link_inherit`), and `turn`'s pivot and per-part depth with a live dial —
+ * play's `adjust` holding the `turn` bone's x, labelled "preview — Apply decides" and never recorded. Every edit is a
+ * pending config patch op with a per-op revert; Apply is the whole-rig runner (`rig --config`, then `check`) behind the
+ * baseline guard; Reset returns to the inspected build. The source draft keeps the pending ops (`#rig-fields-pending`);
+ * the generated controls carry no ids.
+ */
+import {arcBound,dragRow,readingPair,fieldsApplyEnabled,fieldsDraftEdits,fieldsDraftText,INHERIT_MODES,rigFieldOps,rigFieldsSource,seedStill,setInherit,setRegion,setStill,setStop,setTurn,stillParts,stopArcs,turnDial,TURN_DIAL_RANGE,TURN_PREVIEW_LABEL,type FieldEdit,type RigFieldsSource,type RigPoint,type StillEntry} from '../src/rig-fields.ts';
+import type {JsonValue,PatchOp} from '../src/config-patch.ts';
+
+export type DialAdjust=((bones:{bone(name:string):{x:number}})=>void)|null;
+export interface PaneBox {left:number;right:number;top:number;bottom:number}
+export interface RigFieldsDeps {
+ apply:(ops:PatchOp[])=>Promise<void>;
+ reset:()=>Promise<void>;
+ /** The angle-range reading (#108) of a bone relative to another, on the inspected and the latest scratch build. */
+ reading:(bone:string,relative:string)=>Promise<void>;
+ /** The selected part's slot, if any. */
+ part:()=>string|null;
+ /** Rig px (y down) → pane px of the stage handles' layer; null when nothing is drawn or the crop mapping is unavailable. */
+ toPane:(x:number,y:number)=>{x:number;y:number}|null;
+ /** Pane px → rig px; null as above. */
+ toRig:(x:number,y:number)=>RigPoint|null;
+ /** The drawn box of a slot in pane px, or null. */
+ slotBox:(slot:string)=>PaneBox|null;
+ /** Hand the dial to the player (`adjust` on the `turn` bone), or null to clear it. */
+ dial:(fn:DialAdjust)=>void;
+ /** Whether the `turn` bone is in the drawn model. */
+ hasTurn:()=>boolean;
+ inspector:()=>string|undefined;
+ pause:()=>void;
+ saved:()=>void;
+}
+export interface RigFieldsPanel {
+ load(config:unknown|null,reason:string|null):void;
+ source():RigFieldsSource|null;edits():FieldEdit[];ops():PatchOp[];
+ region(part:string,bone:string):void;
+ still(part:string,entry:StillEntry|null):void;
+ stop(index:number,bounds:{inward?:number;outward?:number}):void;
+ inherit(index:number,mode:string|null,link?:string):void;
+ turn(target:{pivot:number}|{part:string;depth:number}):void;
+ select(kind:'part'|'still'|'stop'|'bone',value:string|number|null):void;
+ /** The dial (rig px), and whether its preview is on with its label. */
+ setDial(x:number):void;dialState():{x:number;on:boolean;label:string};
+ /** The stage handles' client positions, for automation that drags with a real pointer. */
+ handles():{kind:string;x:number;y:number}[];
+ revert(path:string):void;
+ applied(ops:readonly PatchOp[]|null):void;
+ status(text:string,error:boolean):void;
+ readout(lines:{name:string;before:string;after:string}[]):void;
+ busy(value:boolean):void;
+ place():void;restore():void;clear():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 SVG='http://www.w3.org/2000/svg';
+const svg=<K extends keyof SVGElementTagNameMap>(tag:K,attrs:Record<string,string|number>):SVGElementTagNameMap[K]=>{const e=document.createElementNS(SVG,tag);for(const [k,v] of Object.entries(attrs))e.setAttribute(k,String(v));return e;};
+const shown=(v:JsonValue|undefined)=>v===undefined?'(absent)':typeof v==='string'?v:JSON.stringify(v);
+/** Arc radius on the stage, pane px. */
+const ARC_R=46;
+const rad=(deg:number)=>deg*Math.PI/180;
+/** A point on a circle at a Spine angle (counter-clockwise, y up) in pane px (y down). */
+const onCircle=(c:{x:number;y:number},deg:number,r=ARC_R)=>({x:c.x+r*Math.cos(rad(deg)),y:c.y-r*Math.sin(rad(deg))});
+/** The SVG path of an arc from Spine angle `a` to `b` (b >= a), counter-clockwise on the page. */
+export function arcPath(c:{x:number;y:number},a:number,b:number,r=ARC_R):string {
+ const p=onCircle(c,a,r),q=onCircle(c,b,r),large=b-a>180?1:0;
+ return `M ${c.x} ${c.y} L ${p.x.toFixed(2)} ${p.y.toFixed(2)} A ${r} ${r} 0 ${large} 0 ${q.x.toFixed(2)} ${q.y.toFixed(2)} Z`;
+}
+
+export function bindRigFieldsPanel(deps:RigFieldsDeps):RigFieldsPanel {
+ const stateLine=node('rig-fields-state'),regionArea=node('rig-fields-region'),stillArea=node('rig-fields-still'),stopsArea=node('rig-fields-stops'),inheritArea=node('rig-fields-inherit'),turnArea=node('rig-fields-turn');
+ const pending=node('rig-fields-pending-list'),applyButton=node<HTMLButtonElement>('rig-fields-apply'),resetButton=node<HTMLButtonElement>('rig-fields-reset'),readingButton=node<HTMLButtonElement>('rig-fields-reading');
+ const statusOut=node('rig-fields-status'),readoutArea=node('rig-fields-readout'),draft=node<HTMLTextAreaElement>('rig-fields-pending'),stage=node('rig-fields-stage'),dialLabel=node('rig-fields-dial-label');
+ let source:RigFieldsSource|null=null,edits=new Map<string,FieldEdit>(),appliedOps:string[]=[],busy=false,dial=0;
+ let selPart:string|null=null,selStill:string|null=null,selStop:number|null=null,selBone:number|null=null;
+ let drag:{kind:'still'|'inward'|'outward';pointer:number;start:number;from:number}|null=null;
+
+ function panelStatus(text:string,error:boolean){statusOut.textContent=text;statusOut.title=text;statusOut.classList.toggle('error',error);}
+ const ops=()=>source?rigFieldOps(source,edits):[];
+ const save=()=>{draft.value=fieldsDraftText(edits);draft.dispatchEvent(new Event('input',{bubbles:true}));deps.saved();};
+ const change=(make:()=>Map<string,FieldEdit>,persist=true)=>{try{edits=make();if(persist)save();render();}catch(error){panelStatus(error instanceof Error?error.message:String(error),true);}};
+ const valueAt=(path:string,fallback:JsonValue|undefined)=>edits.has(path)?(edits.get(path)!.op==='remove'?undefined:edits.get(path)!.value):fallback;
+ const select=(options:{value:string;label:string}[],value:string,aria:string,onchange:(v:string)=>void)=>{const s=make('select',{disabled:busy});s.setAttribute('aria-label',aria);s.append(...options.map(o=>make('option',{value:o.value,textContent:o.label})));s.value=value;s.onchange=()=>onchange(s.value);return s;};
+ const number=(value:number,aria:string,step:string,commit:(v:number)=>void)=>{const n=make('input',{type:'number',step,value:String(value),disabled:busy,inputMode:'decimal'});n.setAttribute('aria-label',aria);n.onchange=()=>{const v=Number(n.value);if(!n.value.trim()||!Number.isFinite(v)){panelStatus(`RIG_FIELDS_VALUE_INVALID: ${aria} must be a number`,true);return;}commit(v);};return n;};
+ const title=(text:string,hint?:string)=>[make('p',{className:'eyebrow',textContent:text}),...(hint?[make('p',{className:'hint',textContent:hint})]:[])];
+ const boneOptions=()=>(source?.boneNames??[]).map(b=>({value:b,label:b}));
+
+ function renderRegion(){
+  if(!source?.regions){regionArea.replaceChildren(...title('REGIONS.<PART> · THE BONE A RIGID PART RIDES','The config states no regions.'));return;}
+  const parts=Object.keys(source.regions).sort(),slot=deps.part();
+  if(slot&&source.regions[slot]!==undefined&&selPart===null)selPart=slot;
+  const part=selPart&&source.regions[selPart]!==undefined?selPart:null;
+  const pick=select([{value:'',label:'Pick a rigid part (or select it on the stage)'},...parts.map(p=>({value:p,label:`${p} · ${valueAt(`/regions/${p}`,source!.regions![p])}`}))],part??'','Rigid part',v=>{selPart=v||null;render();});
+  const rows:Node[]=[pick];
+  if(part){
+   const now=String(valueAt(`/regions/${part}`,source.regions[part]));
+   rows.push(make('div',{className:'row'},make('span',{textContent:`${part} rides`}),select(boneOptions(),now,`regions.${part} bone`,v=>change(()=>setRegion(source!,edits,part,v)))));
+   if(slot&&source.regions[slot]===undefined)rows.push(make('p',{className:'hint',textContent:`${slot} is not a rigid part (its mesh rides its weights).`}));
+  }
+  regionArea.replaceChildren(...title('REGIONS.<PART> · THE BONE A RIGID PART RIDES'),...rows);
+ }
+ function renderStill(){
+  if(!source?.blink){stillArea.replaceChildren(...title('MOTION.BLINK.STILL · A LASH\'S STILL ROW','The config states no motion.blink.'));return;}
+  const parts=stillParts(source);
+  if(!parts.length){stillArea.replaceChildren(...title('MOTION.BLINK.STILL · A LASH\'S STILL ROW',`No region part rides a bone the blink's eyes name (${source.blink.eyes.join(', ')||'none'}).`));return;}
+  const stillOf=(part:string)=>valueAt(`/motion/blink/still/${part}`,source!.blink!.still?.[part] as JsonValue|undefined) as StillEntry|undefined;
+  const part=selStill&&parts.includes(selStill)?selStill:null;
+  const pick=select([{value:'',label:'Pick a part on an eye bone'},...parts.map(p=>{const e=stillOf(p);return {value:p,label:`${p} · ${e?`row ${e.row} on ${e.bone}`:'no still row'}`};})],part??'','Still row part',v=>{selStill=v||null;if(selStill)deps.pause();render();});
+  const rows:Node[]=[pick];
+  if(part){
+   const now=stillOf(part);
+   if(!now){const add=make('button',{type:'button',textContent:'Add still row',disabled:busy});add.onclick=()=>{const seed=seedStill(source!,part);if(!seed){panelStatus(`RIG_FIELDS_NO_SEED: ${part}'s eye bone states no origin`,true);return;}change(()=>setStill(source!,edits,part,seed));};rows.push(make('div',{className:'row'},make('span',{className:'hint',textContent:`${part}: no still row`}),add));}
+   else{const remove=make('button',{type:'button',textContent:'Remove',disabled:busy});remove.onclick=()=>change(()=>setStill(source!,edits,part,null));
+    rows.push(make('div',{className:'row'},make('span',{textContent:`${part} row`}),number(now.row,`${part} still row`,'1',v=>change(()=>setStill(source!,edits,part,{...now,row:v}))),make('span',{textContent:'on'}),select(boneOptions(),now.bone,`${part} still bone`,v=>change(()=>setStill(source!,edits,part,{...now,bone:v}))),remove));}
+  }
+  stillArea.replaceChildren(...title('MOTION.BLINK.STILL · A LASH\'S STILL ROW','Rows above the line (rig px, y down) are drawn on the still bone and do not blink. propose drafts one for a lash; the producer takes any region on an eye bone. Drag the row on the stage.'),...rows);
+ }
+ function renderStops(){
+  if(!source?.stops?.length){stopsArea.replaceChildren(...title('STOPS · INWARD / OUTWARD ARCS','The config states no stops (adding one is out of scope).'));return;}
+  const rows=source.stops.map(stop=>{
+   const now=valueAt(`/stops/${stop.index}`,stop.raw) as Record<string,number>;
+   const pick=make('button',{type:'button',className:'physics-row-pick',textContent:`stops[${stop.index}] ${stop.chain} against ${stop.against}`});pick.setAttribute('aria-pressed',String(selStop===stop.index));pick.onclick=()=>{selStop=selStop===stop.index?null:stop.index;deps.pause();render();};
+   return make('div',{className:'row'},pick,make('span',{textContent:'in'}),number(now.inward!,`stops[${stop.index}] inward`,'1',v=>change(()=>setStop(source!,edits,stop.index,{inward:v}))),make('span',{textContent:'out'}),number(now.outward!,`stops[${stop.index}] outward`,'1',v=>change(()=>setStop(source!,edits,stop.index,{outward:v}))));
+  });
+  stopsArea.replaceChildren(...title('STOPS · INWARD / OUTWARD ARCS','Degrees around the rest aim from the first stopped link\'s origin; pick a stop to drag its arc ends on the stage.'),...rows);
+ }
+ function renderInherit(){
+  const bones=source?.bones??[];
+  if(!bones.length){inheritArea.replaceChildren(...title('BONES[I].INHERIT','The config states no bones.'));return;}
+  const bone=bones.find(b=>b.index===selBone)??null;
+  const pick=select([{value:'',label:'Pick a bone'},...bones.map(b=>({value:String(b.index),label:`${b.name}${b.chain?' (chain)':''} · ${b.chain?Object.keys(b.linkInherit??{}).length?'link_inherit':'normal':b.inherit??'normal'}`}))],bone?String(bone.index):'','Bone for inherit',v=>{selBone=v===''?null:Number(v);render();});
+  const modes=[{value:'',label:'(absent: normal)'},...INHERIT_MODES.map(m=>({value:m,label:m}))];
+  const rows:Node[]=[pick];
+  if(bone&&!bone.chain){const now=valueAt(`/bones/${bone.index}/inherit`,bone.inherit??undefined) as string|undefined;rows.push(make('div',{className:'row'},make('span',{textContent:`${bone.name} inherit`}),select(modes,now??'',`${bone.name} inherit`,v=>change(()=>setInherit(source!,edits,bone.index,v||null)))));}
+  if(bone?.chain){const now=(valueAt(`/bones/${bone.index}/link_inherit`,bone.linkInherit??undefined) as Record<string,string>|undefined)??{};
+   rows.push(...bone.links.map(link=>make('div',{className:'row'},make('span',{textContent:`${link} inherit`}),select(modes,now[link]??'',`${link} inherit`,v=>change(()=>setInherit(source!,edits,bone.index,v||null,link))))));}
+  inheritArea.replaceChildren(...title('BONES[I].INHERIT · WHAT A BONE TAKES FROM ITS PARENT'),...rows);
+ }
+ function renderTurn(){
+  if(!source?.turn){turnArea.replaceChildren(...title('TURN · DEPTH, PIVOT AND THE DIAL','The config states no turn.'));dialLabel.hidden=true;return;}
+  const t=source.turn,parts=Object.keys(t.depths).sort(),depths=Object.values(t.depths),lo=Math.min(...depths,t.pivot),hi=Math.max(...depths,t.pivot);
+  const slider=(value:number,aria:string,commit:(v:number)=>void)=>{const r=make('input',{type:'range',min:String(Math.max(0,lo-.1)),max:String(hi+.1),step:'0.001',value:String(value),disabled:busy});r.setAttribute('aria-label',aria);r.onchange=()=>commit(Number(r.value));return r;};
+  const pivot=valueAt('/turn/pivot',t.pivot) as number;
+  const slot=deps.part();const part=selPart&&t.depths[selPart]!==undefined?selPart:slot&&t.depths[slot]!==undefined?slot:null;
+  const rows:Node[]=[make('div',{className:'physics-control'},make('span',{textContent:'pivot'}),slider(pivot,'turn.pivot',v=>change(()=>setTurn(source!,edits,{pivot:v}))),number(pivot,'turn.pivot value','any',v=>change(()=>setTurn(source!,edits,{pivot:v}))))];
+  rows.push(select([{value:'',label:'Pick a part for its depth'},...parts.map(p=>({value:p,label:`${p} · ${valueAt(`/turn/depths/${p}`,t.depths[p])}`}))],part??'','Part for turn depth',v=>{selPart=v||null;render();}));
+  if(part){const d=valueAt(`/turn/depths/${part}`,t.depths[part]) as number;rows.push(make('div',{className:'physics-control'},make('span',{textContent:`${part} depth`}),slider(d,`turn.depths.${part}`,v=>change(()=>setTurn(source!,edits,{part,depth:v}))),number(d,`turn.depths.${part} value`,'any',v=>change(()=>setTurn(source!,edits,{part,depth:v})))));}
+  const has=deps.hasTurn();
+  const dialInput=make('input',{type:'range',min:String(-TURN_DIAL_RANGE),max:String(TURN_DIAL_RANGE),step:'1',value:String(dial),disabled:!has});dialInput.setAttribute('aria-label','turn dial (rig px)');
+  dialInput.oninput=()=>panel.setDial(Number(dialInput.value));
+  const zero=make('button',{type:'button',textContent:'0',disabled:!has});zero.setAttribute('aria-label','Dial back to 0');zero.onclick=()=>panel.setDial(0);
+  rows.push(make('div',{className:'physics-control'},make('span',{textContent:'dial'}),dialInput,make('output',{textContent:`${dial} px`}),zero));
+  rows.push(make('p',{className:'hint',textContent:has?'The dial holds the drawn build\'s turn bone at x (play adjust): it shows the build on the stage, not the pending depths — Apply builds those. Nothing is recorded.':'The drawn model has no turn bone; the dial is off.'}));
+  turnArea.replaceChildren(...title('TURN · DEPTH, PIVOT AND THE DIAL','(pivot − depth) / (pivot − nearest depth) of the dial carries each part; turn.deform is out of scope.'),...rows);
+ }
+ function renderPending(){
+  const items=[...edits.values()];
+  pending.replaceChildren(...items.map(e=>{
+   const revert=make('button',{type:'button',textContent:'Revert',disabled:busy});revert.setAttribute('aria-label',`Revert ${e.path}`);revert.onclick=()=>panel.revert(e.path);
+   const applied=appliedOps.includes(JSON.stringify({path:e.path,value:e.value??null}));
+   return make('li',{className:applied?'applied':''},make('code',{textContent:`${e.op} ${e.path}`}),` ${shown(e.from)} → ${e.op==='remove'?'(removed)':shown(e.value)}${e.name?` · ${e.name}`:''}${applied?' · applied':''}`,revert);
+  }));
+  if(!items.length)pending.append(make('li',{className:'hint',textContent:'No pending ops.'}));
+  applyButton.disabled=!fieldsApplyEnabled({busy,pending:items.length});resetButton.disabled=busy;
+  const pair=pairNow();readingButton.disabled=busy||!pair;readingButton.title=pair?`angle-range ${pair.bone}:${pair.relative}`:'Pick a bone with a parent (inherit) or a rigid part';
+  readingButton.textContent=pair?`Angle range ${pair.bone}:${pair.relative}`:'Angle range';
+ }
+ const pairNow=()=>source?readingPair(source,edits,{bone:selBone,part:selPart}):null;
+ function renderLabel(){
+  const on=dial!==0&&deps.hasTurn();dialLabel.hidden=!on;dialLabel.textContent=on?`${TURN_PREVIEW_LABEL} · turn x ${dial} px`:TURN_PREVIEW_LABEL;dialLabel.title=dialLabel.textContent;
+ }
+ function render(){renderRegion();renderStill();renderStops();renderInherit();renderTurn();renderPending();renderLabel();place();}
+
+ // ---- stage: the still row and the stop arcs ----
+ const svgLayer=svg('svg',{class:'rig-fields-svg','aria-hidden':'true'});
+ function stillGeometry(){
+  if(!source||!selStill)return null;const now=valueAt(`/motion/blink/still/${selStill}`,source.blink?.still?.[selStill] as JsonValue|undefined) as StillEntry|undefined;if(!now)return null;
+  const eye=source.bones.find(b=>!b.chain&&b.name===source!.regions?.[selStill!]),box=deps.slotBox(selStill),cx=eye?.at?.[0]??0;
+  const a=deps.toPane(cx,now.row);if(!a)return null;
+  const left=box?box.left-8:a.x-50,right=box?box.right+8:a.x+50;
+  return {row:now.row,y:a.y,left,right};
+ }
+ function stopGeometry(){
+  if(!source?.stops||selStop===null)return null;const stop=source.stops.find(s=>s.index===selStop);if(!stop)return null;
+  const now=valueAt(`/stops/${stop.index}`,stop.raw) as Record<string,number>,arcs=stopArcs(source,stop,{inward:now.inward!,outward:now.outward!});
+  if('reason' in arcs)return {reason:arcs.reason};const c=deps.toPane(...arcs.pivot);if(!c)return null;
+  return {stop,arcs,c};
+ }
+ function place(){
+  const visible=deps.inspector()==='rig'&&!!source;const still=visible?stillGeometry():null,stop=visible?stopGeometry():null;
+  if(!still&&(!stop||'reason' in stop)){stage.hidden=true;return;}
+  stage.hidden=false;svgLayer.replaceChildren();
+  const handles:HTMLButtonElement[]=[];
+  const handle=(kind:'still'|'inward'|'outward',at:{x:number;y:number},label:string)=>{const h=make('button',{type:'button',className:`rig-fields-handle ${kind}`});h.dataset.kind=kind;h.setAttribute('aria-label',label);h.style.left=`${at.x}px`;h.style.top=`${at.y}px`;h.append(make('span',{textContent:label}));h.onpointerdown=event=>down(event,kind);handles.push(h);};
+  if(still){svgLayer.append(svg('line',{class:'rig-fields-still-line',x1:still.left,y1:still.y,x2:still.right,y2:still.y}));handle('still',{x:still.right,y:still.y},`${selStill} still row ${still.row}`);}
+  if(stop&&!('reason' in stop)){
+   const {arcs,c}=stop;
+   svgLayer.append(svg('path',{class:'rig-fields-arc inward',d:arcPath(c,arcs.from,arcs.rest)}),svg('path',{class:'rig-fields-arc outward',d:arcPath(c,arcs.rest,arcs.to)}));
+   const r=onCircle(c,arcs.rest,ARC_R+14);svgLayer.append(svg('line',{class:'rig-fields-rest',x1:c.x,y1:c.y,x2:r.x,y2:r.y}));
+   handle('inward',onCircle(c,arcs.from),`inward ${Number((arcs.rest-arcs.from).toFixed(3))}°`);handle('outward',onCircle(c,arcs.to),`outward ${Number((arcs.to-arcs.rest).toFixed(3))}°`);
+  }
+  stage.replaceChildren(svgLayer,...handles);
+ }
+ const angleAt=(event:PointerEvent,c:{x:number;y:number})=>{const rect=stage.getBoundingClientRect();return Math.atan2(-(event.clientY-rect.top-c.y),event.clientX-rect.left-c.x)*180/Math.PI;};
+ function down(event:PointerEvent,kind:'still'|'inward'|'outward'){
+  if(busy||!source)return;event.preventDefault();event.stopPropagation();deps.pause();
+  const rect=stage.getBoundingClientRect();
+  if(kind==='still'){const g=stillGeometry();const rig=deps.toRig(event.clientX-rect.left,event.clientY-rect.top);if(!g||!rig)return;drag={kind,pointer:event.pointerId,start:rig[1],from:g.row};}
+  else drag={kind,pointer:event.pointerId,start:0,from:0};
+  // The handles are redrawn while dragging, so the drag follows the window, not the handle.
+  window.addEventListener('pointermove',moveDrag,true);window.addEventListener('pointerup',endDrag,true);window.addEventListener('pointercancel',endDrag,true);
+ }
+ function dragValue(event:PointerEvent):(()=>Map<string,FieldEdit>)|null {
+  if(!drag||!source||event.pointerId!==drag.pointer)return null;
+  const rect=stage.getBoundingClientRect();
+  if(drag.kind==='still'){const rig=deps.toRig(event.clientX-rect.left,event.clientY-rect.top),part=selStill!,now=valueAt(`/motion/blink/still/${part}`,source.blink?.still?.[part] as JsonValue|undefined) as StillEntry|undefined;if(!rig||!now)return null;const row=dragRow(drag.from,drag.start,rig[1]);return ()=>setStill(source!,edits,part,{...now,row});}
+  const g=stopGeometry();if(!g||'reason' in g)return null;const angle=angleAt(event,g.c),v=arcBound(g.arcs.rest,drag.kind,angle),key=drag.kind;
+  return ()=>setStop(source!,edits,g.stop.index,{[key]:v});
+ }
+ function moveDrag(event:PointerEvent){const next=dragValue(event);if(next){event.stopPropagation();change(next,false);}}
+ function endDrag(event:PointerEvent){if(!drag||event.pointerId!==drag.pointer)return;const next=dragValue(event);drag=null;unlisten();if(next)change(next);else save();}
+ const unlisten=()=>{window.removeEventListener('pointermove',moveDrag,true);window.removeEventListener('pointerup',endDrag,true);window.removeEventListener('pointercancel',endDrag,true);};
+
+ applyButton.onclick=()=>{if(!edits.size||busy)return;panel.setDial(0);void deps.apply(ops());};
+ resetButton.onclick=()=>{if(busy)return;void deps.reset();};
+ readingButton.onclick=()=>{const pair=pairNow();if(pair&&!busy)void deps.reading(pair.bone,pair.relative);};
+ const observer=new MutationObserver(()=>place());
+ for(const selector of document.querySelectorAll('[data-inspector]'))observer.observe(selector,{attributes:true,attributeFilter:['aria-pressed','aria-selected']});
+
+ const panel:RigFieldsPanel={
+  load(config,reason){
+   if(config===null){source=null;edits=new Map();stateLine.textContent=reason??'RIG_FIELDS_UNAVAILABLE: no producer handoff';stateLine.classList.add('error');render();return;}
+   source=rigFieldsSource(config);edits=fieldsDraftEdits(draft.value,source);
+   const s=source,count=(n:number|undefined,what:string)=>`${n??0} ${what}`;
+   stateLine.classList.toggle('error',!!s.skipped.length);
+   stateLine.textContent=[count(s.regions?Object.keys(s.regions).length:0,'regions'),s.blink?`blink (${s.blink.still?Object.keys(s.blink.still).length:0} still rows)`:'no blink',count(s.stops?.length,'stops'),`${s.bones.filter(b=>b.inherit||b.linkInherit).length} of ${s.bones.length} bones state inherit`,s.turn?`turn (${Object.keys(s.turn.depths).length} depths)`:'no turn',...(s.skipped.length?[`not read: ${s.skipped.join('; ')}`]:[])].join(' · ');
+   render();
+  },
+  source:()=>source?structuredClone(source):null,
+  edits:()=>[...edits.values()].map(e=>structuredClone(e)),ops,
+  region(part,bone){if(source)change(()=>setRegion(source!,edits,part,bone));},
+  still(part,entry){if(source)change(()=>setStill(source!,edits,part,entry));},
+  stop(index,bounds){if(source)change(()=>setStop(source!,edits,index,bounds));},
+  inherit(index,mode,link){if(source)change(()=>setInherit(source!,edits,index,mode,link));},
+  turn(target){if(source)change(()=>setTurn(source!,edits,target));},
+  select(kind,value){if(kind==='part')selPart=value===null?null:String(value);else if(kind==='still')selStill=value===null?null:String(value);else if(kind==='stop')selStop=value===null?null:Number(value);else selBone=value===null?null:Number(value);render();},
+  setDial(x){
+   const v=Math.max(-TURN_DIAL_RANGE,Math.min(TURN_DIAL_RANGE,Math.round(Number.isFinite(x)?x:0)));dial=deps.hasTurn()?v:0;
+   deps.dial(dial!==0?turnDial(dial):null);renderLabel();
+   const out=turnArea.querySelector('output');if(out)out.textContent=`${dial} px`;const r=turnArea.querySelector<HTMLInputElement>('input[aria-label="turn dial (rig px)"]');if(r&&Number(r.value)!==dial)r.value=String(dial);
+  },
+  dialState:()=>({x:dial,on:!dialLabel.hidden,label:dialLabel.textContent??''}),
+  handles(){const rect=stage.getBoundingClientRect();return stage.hidden?[]:[...stage.querySelectorAll<HTMLElement>('.rig-fields-handle')].map(h=>({kind:h.dataset.kind!,x:rect.left+parseFloat(h.style.left),y:rect.top+parseFloat(h.style.top)}));},
+  revert(path){const next=new Map(edits);next.delete(path);change(()=>next);},
+  applied(list){appliedOps=(list??[]).map(o=>JSON.stringify({path:o.path,value:o.value??null}));renderPending();},
+  status:panelStatus,
+  readout(lines){readoutArea.replaceChildren(...lines.flatMap(l=>[make('div',{className:'physics-readout-line'},make('span',{className:'eyebrow',textContent:'BEFORE'}),make('code',{textContent:l.before,title:l.before})),make('div',{className:'physics-readout-line'},make('span',{className:'eyebrow',textContent:'AFTER'}),make('code',{textContent:l.after,title:l.after}))]));},
+  busy(value){busy=value;render();},
+  place,
+  restore(){if(source){edits=fieldsDraftEdits(draft.value,source);render();}},
+  clear(){edits=new Map();save();render();},
+  dispose(){observer.disconnect();unlisten();panel.setDial(0);stage.replaceChildren();},
+ };
+ render();
+ return panel;
+}