@rig-c/review 0.6.0 → 0.7.0

package/web/mesh-editor.ts

@@ -1,18 +1,24 @@
 /**
  * Mesh edit (Setup): a view-bar toggle, an editor bar of sub-modes (Modify / Create / Delete / Edges) and direct
- * manipulation of the selected slot's actual mesh on the rig pane. Everything is a typed delta (`src/mesh-edit.ts`)
- * previewed over the original triangulation; nothing is retriangulated, written into the package or sent to a
- * producer — Apply · Rebuild refuses by name as the chest editor's does.
+ * manipulation of the selected slot's actual mesh on the rig pane. The mesh is the slot's attachment in the compiled
+ * model document at the **setup pose** (#100): the stored vertices placed through the setup-pose bones of a never-played
+ * player (`web/setup-pose.ts`, shared with Setup · Weights) and drawn over the stage with the stage's own camera — the
+ * stage itself stays paused at the pose it held, under the veil. Everything is a typed delta (`src/mesh-edit.ts`,
+ * `basis: "setup"`) previewed over the original triangulation; nothing is retriangulated or written into the package
+ * from here. Apply · Rebuild (#135) hands the exported document to the host, which sends it through the shared runner as
+ * `rig-parts remesh --delta`; a built revision loads in place and the editor re-reads the revision's setup mesh, a
+ * refusal leaves the stage and the delta as they were. While a delta revision is on the stage, Reset returns to the
+ * inspected build, and the local draft keeps the applied delta (edits over the revision are not written to it).
  */
-import type {PosedSlot} from '@rig-c/play';
 import type {CropWorldMapping} from '../src/chest-regions.ts';
+import {placeSetupMesh,readSetupMesh,setupModel} from '../src/setup-mesh.ts';
 import {
- MESH_EDIT_NO_MESH,MESH_EDIT_PREVIEW_NOTE,MESH_EDIT_SELECT_SLOT,MeshEditSession,affineOf,applyAffine,applyMeshOps,attachmentHashText,draftOps,hitMesh,
+ MESH_EDIT_CODES,MESH_EDIT_NO_MESH,MESH_EDIT_PREVIEW_NOTE,MESH_EDIT_RIG_UNAVAILABLE,MESH_EDIT_SELECT_SLOT,MeshEditSession,affineOf,applyAffine,applyMeshOps,attachmentHashText,draftOps,hitMesh,
  invertAffine,meshEditDocument,parseMeshDraft,screenDeltaToCrop,verticesInBox,writeMeshDraft,type MeshEditDocument,type MeshEditResult,type MeshOp,type MeshSource,
  type MeshView,type ScreenPoint,type Vec,
 } from '../src/mesh-edit.ts';
-import {MODELING_INPUT_UNAVAILABLE,requestRebuild} from './chest-editor.ts';
 import type {OverlayMeshEdit,OverlayPoint,OverlayProject} from './rig-overlays.ts';
+import type {SetupPose} from './setup-pose.ts';
 import {textEntryFocused} from './view-controls.ts';
 
 export type MeshMode='modify'|'create'|'delete'|'edges';
@@ -42,33 +48,38 @@ export function meshEditShortcut(event:KeyLike,state:{active:boolean;mode:MeshMo
  const mode=meshModeKeys[key];return mode?{type:'mode',mode}:null;
 }
 
-/** World → crop through the inverse of the crop mapping (crop px, x right, y down). */
+/** World → crop through the inverse of the crop mapping (crop px, x right, y down), unrounded: the producer holds a `move.from` to 1e-3 px. */
 export function cropFromWorld(mapping:Extract<CropWorldMapping,{available:true}>):((x:number,y:number)=>Vec)|null {
  const inverse=invertAffine(affineOf((x,y)=>mapping.toWorld(x,y)));if(!inverse)return null;
- return (x,y)=>{const p=applyAffine(inverse,x,y);return [Math.round(p.x*100)/100,Math.round(p.y*100)/100];};
+ return (x,y)=>{const p=applyAffine(inverse,x,y);return [p.x,p.y];};
 }
-type SourceResult={ok:true;source:Omit<MeshSource,'hash'>;entry:unknown}|{ok:false;code:string};
+type SourceResult={ok:true;source:Omit<MeshSource,'hash'>;entry:unknown;world:number[]}|{ok:false;code:string};
 /**
- * The actual mesh of the selected slot: the active attachment's entry in the hash-verified model, and the slot's last
- * drawn posed vertices mapped to crop px. A count or triangle mismatch between the two is refused.
+ * The selected slot's mesh in setup space: its attachment's entry in the hash-verified compiled model document (the
+ * attachment the setup pose resolves), its stored vertices placed through the setup-pose bones (`world`, flat x, y)
+ * and mapped to crop px. Refuses, in order: no model document (`MESH_EDIT_MODEL_UNAVAILABLE`), whole rig, no setup pose,
+ * a non-mesh or linked attachment, no crop mapping.
  */
-export function meshEditSource(input:{slot:string|null;activeAttachment:{skin:string;attachment:string}|null;row:PosedSlot|undefined;model:unknown;mapping:CropWorldMapping}):SourceResult {
- const {slot}=input;if(!slot)return {ok:false,code:`${MESH_EDIT_SELECT_SLOT}: select one slot in the parts list; whole-rig mesh edit is not a thing`};
- const noMesh=(why:string)=>({ok:false as const,code:`${MESH_EDIT_NO_MESH} ${slot}: ${why}`});
- const active=input.activeAttachment;if(!active)return noMesh('no active attachment at the held pose');
- const model=input.model as {skins?:{name?:unknown;attachments?:Record<string,Record<string,unknown>>}[]}|null;
- const entry=model?.skins?.find(skin=>skin.name===active.skin)?.attachments?.[slot]?.[active.attachment] as {kind?:unknown;uvs?:unknown;triangles?:unknown;hull?:unknown}|undefined;
- if(!entry||entry.kind!=='mesh')return noMesh(`${active.skin} / ${active.attachment} is not a mesh attachment`);
- if(!input.row||input.row.kind!=='mesh')return noMesh('the slot is not drawn as a mesh at the held pose');
+export function meshEditSource(input:{slot:string|null;model:unknown;pose:(slot:string)=>SetupPose|null;mapping:CropWorldMapping}):SourceResult {
+ const available=setupModel(input.model,MESH_EDIT_CODES);if(!available.ok)return available;
+ const {slot}=input;if(!slot)return {ok:false,code:`${MESH_EDIT_SELECT_SLOT}: ${MESH_EDIT_CODES.selectText}`};
+ let pose:SetupPose|null;
+ try{pose=input.pose(slot);}catch(error){return {ok:false,code:`${MESH_EDIT_RIG_UNAVAILABLE}: ${error instanceof Error?error.message:String(error)}`};}
+ if(!pose)return {ok:false,code:`${MESH_EDIT_RIG_UNAVAILABLE}: no rig loaded`};
+ const read=readSetupMesh(input.model,slot,pose.identity,MESH_EDIT_CODES);if(!read.ok)return read;
+ const mesh=read.mesh,noMesh=(why:string)=>({ok:false as const,code:`${MESH_EDIT_NO_MESH} ${slot}: ${why}`});
+ if(mesh.linked)return noMesh(`${mesh.skin} / ${mesh.attachment} is a linked mesh of ${mesh.source.slot} / ${mesh.source.attachment}; edit its source mesh`);
+ if(mesh.hull===null)return noMesh('the model entry stores no hull');
  if(!input.mapping.available)return {ok:false,code:`${input.mapping.reason}: mesh edit needs the crop mapping`};
- const triangles=entry.triangles,uvs=entry.uvs,hull=entry.hull;
- if(!Array.isArray(triangles)||!Array.isArray(uvs)||typeof hull!=='number'||!Number.isSafeInteger(hull)||hull<0)return noMesh('the model entry has no triangles, uvs or hull');
- const count=uvs.length/2,posed=input.row.vertices;
- if(posed.length/2!==count||hull>count||input.row.triangles.length!==triangles.length||input.row.triangles.some((v,i)=>v!==triangles[i]))return {ok:false,code:`MESH_EDIT_SOURCE_MISMATCH: ${slot} drawn mesh (${posed.length/2} vertices) differs from the model attachment (${count})`};
+ let world:number[]|null;
+ try{world=placeSetupMesh(mesh,pose.world);}catch(error){return {ok:false,code:`${MESH_EDIT_RIG_UNAVAILABLE}: ${error instanceof Error?error.message:String(error)}`};}
+ if(!world)return {ok:false,code:`MESH_EDIT_SOURCE_MISMATCH: ${slot} has a non-finite setup-pose vertex`};
  const toCrop=cropFromWorld(input.mapping);if(!toCrop)return {ok:false,code:'MESH_EDIT_MAPPING_SINGULAR'};
- const vertices:Vec[]=[];for(let i=0;i<posed.length;i+=2)vertices.push(toCrop(posed[i]!,posed[i+1]!));
- return {ok:true,source:{slot,skin:active.skin,attachment:active.attachment,vertices,triangles:[...triangles] as number[],hull},entry};
+ const vertices:Vec[]=[];for(let i=0;i<world.length;i+=2)vertices.push(toCrop(world[i]!,world[i+1]!));
+ return {ok:true,source:{slot,skin:mesh.skin,attachment:mesh.attachment,vertices,triangles:mesh.triangles,hull:mesh.hull},entry:mesh.entry,world};
 }
+/** Apply · Rebuild with an empty delta: nothing is sent. */
+export const MESH_EDIT_NOTHING_PENDING='MESH_EDIT_NOTHING_PENDING: the delta holds no op; nothing is sent';
 export async function sha256Hex(text:string):Promise<string> {return [...new Uint8Array(await crypto.subtle.digest('SHA-256',new TextEncoder().encode(text)))].map(b=>b.toString(16).padStart(2,'0')).join('');}
 
 export interface MeshEditorHost {
@@ -76,14 +87,18 @@ export interface MeshEditorHost {
  project:()=>OverlayProject|null;
  mapping:()=>CropWorldMapping;
  inspector:()=>string|undefined;
- /** The selected slot's source, or the refusal that names why there is none. */
+ /** The selected slot's setup-space source, or the refusal that names why there is none. */
  source:()=>SourceResult;
- /** How the vertices were obtained (pose, mapping), for the export. */
- basis:()=>string;
- /** Hold the pose being edited still. */
+ /** Hold the stage still under the setup-pose overlay. */
  pause:()=>void;
  changed:()=>void;
  download:(document:MeshEditDocument)=>void;
+ /** Apply · Rebuild (#135): send the delta through the shared runner; `built` when the revision is on the stage. Lines stream to `line`. */
+ apply:(document:MeshEditDocument,line:(text:string)=>void)=>Promise<{built:boolean;text:string;error:boolean}>;
+ /** Whether the stage holds a revision this editor's Apply built. */
+ applied:()=>boolean;
+ /** Return the stage to the inspected build. */
+ resetBuild:()=>Promise<void>;
  message:(text:string,error?:boolean)=>void;
  confirm:(text:string)=>boolean;
  token:(name:string)=>string;
@@ -96,7 +111,7 @@ export function bindMeshEditor(host:MeshEditorHost):MeshEditor {
  const node=<T extends HTMLElement>(id:string)=>document.getElementById(id) as T;
  const toggle=node<HTMLButtonElement>('mesh-edit'),bar=node<HTMLElement>('mesh-editor-bar'),status=node<HTMLElement>('mesh-editor-status'),draft=node<HTMLTextAreaElement>('mesh-edit-draft');
  const chestToggle=document.getElementById('chest-edit') as HTMLButtonElement|null;
- let active=false,entering=false,mode:MeshMode|null=null,session:MeshEditSession|null=null,space=false,drag:Drag|null=null,pending:number|null=null,hover:ReturnType<typeof hitMesh>=null,note='',noteError=false;
+ let active=false,entering=false,applying=false,mode:MeshMode|null=null,session:MeshEditSession|null=null,space=false,drag:Drag|null=null,pending:number|null=null,hover:ReturnType<typeof hitMesh>=null,note='',noteError=false;
  let preview:MeshView|null=null;const selected=new Set<number>();
  const view=()=>preview??session?.view()??null;
  const cropToScreen=()=>{const project=host.project(),mapping=host.mapping();if(!project||!mapping.available)return null;return affineOf((x,y)=>{const w=mapping.toWorld(x,y);return project(w.x,w.y);});};
@@ -106,7 +121,7 @@ export function bindMeshEditor(host:MeshEditorHost):MeshEditor {
  const hint:Record<MeshMode,string>={
   modify:'drag a vertex or edge · Shift-click selects more · drag empty space to box-select · arrows nudge 1 px (Shift 10)',
   create:'click empty space to add a vertex · click an edge to split it',
-  delete:'click a vertex (with its edges) or an edge to remove it · hull edges stay',
+  delete:'click a vertex (with its edges) or an added constraint edge to remove it · hull and triangulation edges are the producer\'s',
   edges:'click vertex A then vertex B to add a constraint edge · click a constraint edge to remove it',
  };
  const sync=()=>{
@@ -114,16 +129,17 @@ export function bindMeshEditor(host:MeshEditorHost):MeshEditor {
   if(!visible&&active){setActive(false);return;}
   toggle.setAttribute('aria-pressed',String(active));bar.hidden=!active;
   for(const button of bar.querySelectorAll<HTMLButtonElement>('[data-mesh-mode]'))button.setAttribute('aria-pressed',String(button.dataset.meshMode===mode));
-  node<HTMLButtonElement>('mesh-undo').disabled=!session?.canUndo();node<HTMLButtonElement>('mesh-redo').disabled=!session?.canRedo();node<HTMLButtonElement>('mesh-reset').disabled=!session?.canUndo()&&!session?.ops().length;
+  node<HTMLButtonElement>('mesh-undo').disabled=!session?.canUndo();node<HTMLButtonElement>('mesh-redo').disabled=!session?.canRedo();node<HTMLButtonElement>('mesh-reset').disabled=!session?.canUndo()&&!session?.ops().length&&!host.applied();node<HTMLButtonElement>('mesh-apply').disabled=applying;
   if(!session){status.textContent='';return;}
   const s=session.source,count=session.ops().length;
-  status.textContent=`${note?note+' · ':''}${count} op${count===1?'':'s'} · ${MESH_EDIT_PREVIEW_NOTE} · ${mode?hint[mode]:'no sub-mode — Escape again leaves mesh edit'} · Space-drag pans`;
+  status.textContent=`${note?note+' · ':''}${count} op${count===1?'':'s'} · setup pose · ${MESH_EDIT_PREVIEW_NOTE} · ${mode?hint[mode]:'no sub-mode — Escape again leaves mesh edit'} · Space-drag pans`;
   status.title=`${s.slot} / ${s.skin} / ${s.attachment} · ${s.vertices.length} vertices · ${s.triangles.length/3} triangles · hull ${s.hull} · ${status.textContent}`;
   status.classList.toggle('error',noteError);
   if(mode)host.pane.dataset.meshMode=mode;else delete host.pane.dataset.meshMode;
  };
  const say=(text:string,error=false)=>{note=text;noteError=error;if(text)host.message(text,error);sync();};
- const persist=()=>{if(!session)return;const text=writeMeshDraft(parseMeshDraft(draft.value),session.source,session.ops());if(text.length>32768){say('MESH_EDIT_DRAFT_LIMIT: the local draft is full — download the JSON; edits after this are not kept on reload',true);return;}draft.value=text;draft.dispatchEvent(new Event('input',{bubbles:true}));};
+ // While a delta revision is on the stage the draft keeps the delta that built it: edits over the revision are not written.
+ const persist=()=>{if(!session||host.applied())return;const text=writeMeshDraft(parseMeshDraft(draft.value),session.source,session.ops());if(text.length>32768){say('MESH_EDIT_DRAFT_LIMIT: the local draft is full — download the JSON; edits after this are not kept on reload',true);return;}draft.value=text;draft.dispatchEvent(new Event('input',{bubbles:true}));};
  /** Reports a step: a refusal by its code, a no-op by its reason, a change by what it did. */
  const after=(result:MeshEditResult,what:()=>string)=>{
   if(!result.ok)say(result.code,true);
@@ -151,9 +167,29 @@ export function bindMeshEditor(host:MeshEditorHost):MeshEditor {
  const undo=()=>{if(session?.undo()){selected.clear();persist();say('');host.changed();}};
  const redo=()=>{if(session?.redo()){selected.clear();persist();say('');host.changed();}};
  node<HTMLButtonElement>('mesh-undo').addEventListener('click',undo);node<HTMLButtonElement>('mesh-redo').addEventListener('click',redo);
- node<HTMLButtonElement>('mesh-reset').addEventListener('click',()=>{if(!session)return;if(!host.confirm(`Drop the whole mesh-edit delta for ${session.source.slot} / ${session.source.attachment}? This cannot be undone.`))return;session.reset();selected.clear();persist();say('delta reset');host.changed();});
- node<HTMLButtonElement>('mesh-download').addEventListener('click',()=>{if(session)host.download(meshEditDocument(session,host.basis()));});
- node<HTMLButtonElement>('mesh-apply').addEventListener('click',()=>{const result=requestRebuild((text,error)=>host.message(text,error));say(result.error,true);});
+ /** Leave and re-read the selected slot's setup mesh from whatever model the stage now draws (the draft restores by hash). */
+ const reenter=async()=>{leave();sync();await enter();};
+ node<HTMLButtonElement>('mesh-reset').addEventListener('click',()=>{
+  if(!session||applying)return;
+  // A delta revision on the stage: Reset returns to the inspected build, whose setup mesh the draft's delta was drawn over.
+  if(host.applied()){if(!host.confirm('Return to the inspected build? The applied delta stays in the local draft.'))return;void (async()=>{applying=true;sync();try{await host.resetBuild();await reenter();say('Reset: the inspected build is on the stage; the draft\'s delta is restored over its setup mesh');}finally{applying=false;sync();}})();return;}
+  if(!host.confirm(`Drop the whole mesh-edit delta for ${session.source.slot} / ${session.source.attachment}? This cannot be undone.`))return;session.reset();selected.clear();persist();say('delta reset');host.changed();
+ });
+ node<HTMLButtonElement>('mesh-download').addEventListener('click',()=>{if(session)host.download(meshEditDocument(session));});
+ // #135: the delta goes to the producer (`rig-parts remesh --delta`) through the host's shared runner; a built revision
+ // loads in place and the editor re-reads its setup mesh; a refusal shows the producer's line verbatim and keeps the delta.
+ node<HTMLButtonElement>('mesh-apply').addEventListener('click',()=>{
+  if(!session||applying)return;
+  if(!session.ops().length){say(MESH_EDIT_NOTHING_PENDING,true);return;}
+  const doc=meshEditDocument(session);applying=true;say(`Applying ${doc.ops.length} op(s) on ${doc.slot}: remesh --delta, compile…`);
+  void (async()=>{
+   try{const result=await host.apply(doc,line=>{if(line.trim()){note=line.trim();noteError=false;sync();}});
+    if(result.built)await reenter();
+    say(result.text,result.error);
+   }catch(error){say(`REBUILD_FAILED: ${error instanceof Error?error.message:String(error)}`,true);}
+   finally{applying=false;sync();}
+  })();
+ });
  const keyDown=(event:KeyboardEvent)=>{
   if(event.code==='Space'&&!textEntryFocused(event.target))space=true;
   const action=meshEditShortcut(event,{active,mode,selected:selected.size});if(!action)return;
@@ -265,4 +301,3 @@ export function bindMeshEditor(host:MeshEditorHost):MeshEditor {
   dispose:()=>{observer.disconnect();chestObserver.disconnect();host.pane.removeEventListener('pointerdown',down,true);host.pane.removeEventListener('pointermove',move,true);for(const type of ['pointerup','pointercancel'] as const)host.pane.removeEventListener(type,end,true);document.removeEventListener('keydown',keyDown,true);window.removeEventListener('keyup',keyUp,true);window.removeEventListener('blur',blur);},
  };
 }
-export {MODELING_INPUT_UNAVAILABLE};

package/web/mesh-panel.ts

@@ -0,0 +1,273 @@
+/**
+ * Setup · Mesh panel (#106), page side: for the selected mesh part, the config's `meshes.<part>` entry as a pending
+ * entry — mode-specific sliders, regions (circles drawn as the chest overlay draws them, polygons placed and dragged
+ * on the stage with a bone and a band), segments picked from the bone list, ribs stations per chain — its diff against
+ * the config's entry, review's pre-check in the loader's names, Apply (`remesh --mesh` through the patch runner, one
+ * op at `/meshes/<part>`), Reset, the counts and `TEXTURE_STRETCH` after a build and the folds reading on the
+ * revision. The draft (`#mesh-pending`) keeps the part and its pending entry; nothing reaches the package.
+ */
+import {
+ addSegment,entryChanges,entryRegions,entrySegments,entryValue,freeRegionName,hitRegionPoint,meshDraftText,meshMode,modeNotEditable,moveRegionPoint,
+ paramsFor,parseMeshDraft,polygonRegion,precheckEntry,removeSegment,segmentChoices,setEntryValue,setRibs,snapPoint,withRegions,FLOORS,RULES,MESH_PANEL_SCHEMA,
+ type MeshEntry,type MeshMode,type MeshParam,type MeshRegion,type Point,
+} from '../src/mesh-entry.ts';
+import type {JsonValue} from '../src/config-patch.ts';
+import type {CropWorldMapping} from '../src/chest-regions.ts';
+import type {OverlayCircle,OverlayProject,OverlayRegion} from './rig-overlays.ts';
+
+export interface MeshPanelHost {
+ pane:HTMLElement;
+ project:()=>OverlayProject|null;
+ mapping:()=>CropWorldMapping;
+ /** The loaded model's bone names (segments and region bones are picked from them). */
+ bones:()=>readonly string[];
+ apply:(part:string,entry:MeshEntry)=>Promise<void>;
+ reset:()=>Promise<void>;
+ folds:()=>Promise<void>;
+ changed:()=>void;
+ saved:()=>void;
+ token:(name:string)=>string;
+}
+export interface MeshPanel {
+ /** The config's meshes entries (`GET /api/rebuild`), or the reason none can be read. */
+ load(meshes:Record<string,unknown>|null,reason:string|null):void;
+ select(part:string|null):void;
+ part():string|null;
+ entry():MeshEntry|null;
+ configEntry():MeshEntry|null;
+ set(path:readonly string[],value:JsonValue|undefined):void;
+ setEntry(entry:MeshEntry):void;
+ regions:{list():MeshRegion[];add(region:MeshRegion):void;move(region:number,vertex:number,to:Point):void;remove(index:number):void;draw(on:boolean):void;placing():Point[]|null};
+ precheck():string[];
+ restore():void;
+ status(text:string,error:boolean):void;
+ counts(lines:{label:string;text:string;error?:boolean}[]):void;
+ readout(lines:{name:string;before:string;after:string}[]):void;
+ busy(value:boolean):void;
+ overlayRegions():OverlayRegion[];
+ overlayCircles():OverlayCircle[];
+ 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 shown=(v:JsonValue|undefined)=>v===undefined?'(absent)':JSON.stringify(v);
+const isObject=(v:unknown):v is Record<string,JsonValue>=>!!v&&typeof v==='object'&&!Array.isArray(v);
+
+/** Rig px (crop, y down) → world, and pane px → rig px, through the crop mapping and the camera's projection. */
+export function paneToRig(project:OverlayProject,mapping:Extract<CropWorldMapping,{available:true}>,at:{x:number;y:number}):Point|null {
+ const o=project(0,0),ux=project(1,0),uy=project(0,1),sx=ux.x-o.x,sy=uy.y-o.y;
+ if(!sx||!sy||!Number.isFinite(sx)||!Number.isFinite(sy))return null;
+ const world={x:(at.x-o.x)/sx,y:(at.y-o.y)/sy},w0=mapping.toWorld(0,0),w1=mapping.toWorld(1,1);
+ const kx=w1.x-w0.x,ky=w1.y-w0.y;if(!kx||!ky)return null;
+ return [(world.x-w0.x)/kx,(world.y-w0.y)/ky];
+}
+
+export function bindMeshPanel(host:MeshPanelHost):MeshPanel {
+ const state=node('mesh-panel-state'),params=node('mesh-params'),regionsArea=node('mesh-regions'),segmentsList=node('mesh-segments'),diffList=node('mesh-diff'),precheckList=node('mesh-precheck');
+ const addCircle=node<HTMLButtonElement>('mesh-add-circle'),drawPolygon=node<HTMLButtonElement>('mesh-add-polygon'),dragToggle=node<HTMLButtonElement>('mesh-regions-edit');
+ const segmentBone=node<HTMLSelectElement>('mesh-segment-bone'),segmentAdd=node<HTMLButtonElement>('mesh-segment-add');
+ const applyButton=node<HTMLButtonElement>('mesh-panel-apply'),resetButton=node<HTMLButtonElement>('mesh-panel-reset'),foldsButton=node<HTMLButtonElement>('mesh-folds');
+ const statusOut=node('mesh-status'),countsArea=node('mesh-counts'),readoutArea=node('mesh-readout'),draft=node<HTMLTextAreaElement>('mesh-pending');
+ let meshes:Record<string,unknown>|null=null,loadReason:string|null=null,part:string|null=null,base:MeshEntry|null=null,pending:MeshEntry|null=null,busy=false;
+ let placing:Point[]|null=null,dragging=false,drag:{region:number;vertex:number;pointer:number}|null=null,activeRegion:number|null=null;
+
+ function save(){draft.value=pending&&part&&base&&JSON.stringify(pending)!==JSON.stringify(base)?meshDraftText({schema:MESH_PANEL_SCHEMA,part,entry:pending}):'';draft.dispatchEvent(new Event('input',{bubbles:true}));host.saved();}
+ function change(next:MeshEntry){pending=next;save();render();host.changed();}
+ function status(text:string,error:boolean){statusOut.textContent=text;statusOut.title=text;statusOut.classList.toggle('error',error);}
+ const mode=():MeshMode|null=>{if(!pending||!part)return null;const m=meshMode(pending,part);return 'mode' in m?m.mode:null;};
+ const editable=()=>{const m=mode();return !!m&&!modeNotEditable(m);};
+
+ function renderParams(){
+  const m=mode();if(!pending||!m||!editable()){params.replaceChildren();return;}
+  const rows:HTMLElement[]=[];
+  for(const p of paramsFor(m))rows.push(paramRow(p));
+  // rule and the floor are closed sets: a select each, absent first.
+  rows.push(selectRow('rule',['rule'],['',...RULES],'the weight rule: "distance" (w = 1/(d + r)^exponent, what absent means) or "heat" (bone heat over the part\'s silhouette)'));
+  rows.push(selectRow('floor',['influences','floor'],['',...FLOORS],'"cut" (shares under 0.03 dropped, what absent means) or "continuous"'));
+  if(m==='contour'){
+   const box=make('input',{type:'checkbox',checked:entryValue(pending,['contour','bridges'])===true,disabled:busy});box.setAttribute('aria-label','contour bridges');box.dataset.param='bridges';
+   box.onchange=()=>change(setEntryValue(pending!,['contour','bridges'],box.checked?true:undefined));
+   rows.push(make('label',{className:'physics-toggle mesh-param-toggle',title:'every island joined into one outline by bridges (true is its one value; absent is the one-island rule)'},box,'bridges'));
+  }
+  params.replaceChildren(make('p',{className:'physics-editor-title'},make('strong',{textContent:part!}),` · mode ${m} · config.meshes.${part}`),...rows);
+ }
+ function paramRow(p:MeshParam):HTMLElement {
+  const value=entryValue(pending!,p.path),configValue=base?entryValue(base,p.path):undefined,present=typeof value==='number';
+  const label=`${p.key}${p.path.length>1&&p.path[0]!=='contour'?` (${p.path[0]})`:''}`,current=present?value as number:p.min;
+  const changed=JSON.stringify(value)!==JSON.stringify(configValue);
+  const range=make('input',{type:'range',min:String(Math.min(p.min,current)),max:String(Math.max(p.max,current)),step:String(p.step),value:String(current),disabled:busy||!present});range.setAttribute('aria-label',label);range.dataset.param=p.path.join('.');
+  const number=make('input',{type:'number',step:'any',value:present?String(value):'',disabled:busy||!present,inputMode:'decimal',placeholder:'absent'});number.setAttribute('aria-label',`${label} value`);number.dataset.param=p.path.join('.');
+  const commit=(raw:string)=>{const v=Number(raw);if(raw.trim()===''||!Number.isFinite(v)){status(`MESH_VALUE_INVALID: ${p.path.join('.')} must be a finite number`,true);return;}change(setEntryValue(pending!,p.path,v));};
+  range.oninput=()=>{number.value=range.value;};range.onchange=()=>commit(range.value);number.onchange=()=>commit(number.value);
+  const parts:(Node|string)[]=[make('span',{textContent:label,title:p.rule}),range,number];
+  if(p.optional){const on=make('input',{type:'checkbox',checked:present,disabled:busy});on.setAttribute('aria-label',`${label} declared`);on.onchange=()=>change(setEntryValue(pending!,p.path,on.checked?(typeof configValue==='number'?configValue:p.min):undefined));parts.push(on);}
+  else parts.push(make('span'));
+  parts.push(make('output',{textContent:changed?`was ${shown(configValue)}`:''}));
+  return make('label',{className:changed?'physics-control mesh-param pending':'physics-control mesh-param',title:p.rule},...parts);
+ }
+ function selectRow(label:string,path:readonly string[],options:readonly string[],rule:string):HTMLElement {
+  const value=entryValue(pending!,path),select=make('select',{disabled:busy});select.setAttribute('aria-label',label);select.dataset.param=path.join('.');
+  select.replaceChildren(...options.map(o=>make('option',{value:o,textContent:o||'(absent)'})));select.value=typeof value==='string'?value:'';
+  select.onchange=()=>change(setEntryValue(pending!,path,select.value||undefined));
+  const changed=JSON.stringify(value)!==JSON.stringify(base?entryValue(base,path):undefined);
+  return make('label',{className:changed?'physics-control mesh-param pending':'physics-control mesh-param',title:rule},make('span',{textContent:label}),select,make('span'),make('span'),make('output',{textContent:changed?`was ${shown(base?entryValue(base,path):undefined)}`:''}));
+ }
+
+ function renderRegions(){
+  const contour=mode()==='contour'&&editable();
+  for(const b of [addCircle,drawPolygon,dragToggle])b.disabled=busy||!contour;
+  drawPolygon.setAttribute('aria-pressed',String(!!placing));dragToggle.setAttribute('aria-pressed',String(dragging));
+  if(!contour||!pending){regionsArea.replaceChildren(make('p',{className:'hint',textContent:mode()==='grid'?'A lattice (grid) entry has no regions; regions belong to the contour mode.':''}));return;}
+  const regions=entryRegions(pending),bones=host.bones();
+  const items=regions.map((r,i)=>{
+   const field=(key:string,value:JsonValue|undefined,commit:(v:string)=>void,type='number')=>{const box=make('input',{type,value:value===undefined?'':String(value),disabled:busy,step:'any'});box.setAttribute('aria-label',`${r.name} ${key}`);box.dataset.region=String(i);box.dataset.field=key;box.onchange=()=>commit(box.value);return make('label',{},key,box);};
+   const set=(key:string,raw:string,numeric=true)=>{const next=entryRegions(pending!).map(x=>({...x})) as unknown as Record<string,JsonValue>[];const v=numeric?Number(raw):raw;if(numeric&&(raw.trim()===''||!Number.isFinite(v as number))){status(`MESH_VALUE_INVALID: ${r.name}.${key} must be a finite number`,true);return;}next[i]![key]=v as JsonValue;change(withRegions(pending!,next as unknown as MeshRegion[]));};
+   const bone=make('select',{disabled:busy});bone.setAttribute('aria-label',`${r.name} bone`);bone.dataset.region=String(i);bone.dataset.field='bone';
+   bone.replaceChildren(...[...new Set([r.bone,...bones])].map(b=>make('option',{value:b,textContent:b})));bone.value=r.bone;bone.onchange=()=>set('bone',bone.value,false);
+   const remove=make('button',{type:'button',textContent:'Remove',disabled:busy});remove.setAttribute('aria-label',`Remove region ${r.name}`);remove.onclick=()=>{const next=entryRegions(pending!).filter((_,k)=>k!==i);activeRegion=null;change(withRegions(pending!,next));};
+   const shape=r.shape==='circle'?[field('cx',r.cx,v=>set('cx',v)),field('cy',r.cy,v=>set('cy',v)),field('r',r.r,v=>set('r',v))]:[make('span',{className:'hint',textContent:`${r.points.length} points (drag them on the stage)`})];
+   const row=make('fieldset',{className:activeRegion===i?'mesh-region selected':'mesh-region'},make('legend',{textContent:`${r.name} · ${r.shape}`}),field('name',r.name,v=>set('name',v,false),'text'),make('label',{},'bone',bone),field('spacing',r.spacing,v=>set('spacing',v)),field('band',r.band,v=>set('band',v)),...shape,remove);
+   return row;
+  });
+  const bust=entryValue(pending,['contour','bust']);
+  regionsArea.replaceChildren(...(items.length?items:[make('p',{className:'hint',textContent:'No regions. Add a circle, or draw a polygon on the stage.'})]),...(bust===undefined?[]:[make('p',{className:'hint',textContent:'contour.bust stays as written (the Chest regions editor\'s Landmarks mode edits it).'})]));
+ }
+ function renderSegments(){
+  const ok=editable()&&!!pending;
+  segmentBone.disabled=busy||!ok;segmentAdd.disabled=busy||!ok;
+  if(!ok||!pending){segmentsList.replaceChildren();return;}
+  const keep=segmentBone.value;
+  segmentBone.replaceChildren(make('option',{value:'',textContent:'Pick a bone'}),...segmentChoices(host.bones(),pending).map(b=>make('option',{value:b,textContent:b})));
+  if([...segmentBone.options].some(o=>o.value===keep))segmentBone.value=keep;
+  const ribs=entryValue(pending,['ribs']),contour=mode()==='contour';
+  segmentsList.replaceChildren(...entrySegments(pending).map((s,i)=>{
+   const remove=make('button',{type:'button',textContent:'Remove',disabled:busy});remove.setAttribute('aria-label',`Remove segment ${i}`);remove.onclick=()=>change(removeSegment(pending!,i));
+   const item=make('li',{},make('code',{textContent:typeof s==='string'?s:JSON.stringify(s)}),remove);
+   if(typeof s==='string'&&contour){
+    const value=isObject(ribs)&&isObject(ribs[s])?(ribs[s] as Record<string,JsonValue>).stations:undefined;
+    const stations=make('input',{type:'number',step:'1',min:'0',value:value===undefined?'':String(value),placeholder:'no ribs',disabled:busy});stations.setAttribute('aria-label',`${s} ribs stations`);stations.dataset.ribs=s;
+    stations.onchange=()=>{const raw=stations.value.trim();change(setRibs(pending!,s,raw===''?null:Number(raw)));};
+    item.append(make('label',{className:'mesh-ribs',title:'ribs: a row of vertices across the part at each link origin and at stations points between (a chain the segments name; contour mode)'},'ribs stations',stations));
+   }
+   return item;
+  }));
+ }
+ function renderDiff(){
+  const changes=pending&&base?entryChanges(base,pending):[];
+  diffList.replaceChildren(...changes.map(c=>make('li',{},make('code',{textContent:`/meshes/${part}${c.path}`}),` ${shown(c.before)} → ${shown(c.after)}`)));
+  if(!changes.length)diffList.append(make('li',{className:'hint',textContent:pending?'The pending entry is the config\'s entry.':'No mesh part selected.'}));
+  const problems=pending&&part&&editable()?precheckEntry(part,pending,host.bones()):[];
+  precheckList.replaceChildren(...problems.map(p=>make('li',{className:'error',textContent:p})));
+  applyButton.disabled=busy||!pending||!editable()||!changes.length||problems.length>0;
+  resetButton.disabled=busy||!part;foldsButton.disabled=busy;
+ }
+ function renderState(){
+  if(loadReason&&!meshes){state.textContent=loadReason;state.classList.add('error');return;}
+  state.classList.remove('error');
+  if(!part){state.textContent='Select a mesh part in the parts list.';return;}
+  if(!base){state.textContent=`MESH_PANEL_NO_ENTRY: ${part} has no meshes entry in the handoff config`;state.classList.add('error');return;}
+  const m=meshMode(base,part);
+  if('error' in m){state.textContent=m.error;state.classList.add('error');return;}
+  const why=modeNotEditable(m.mode);
+  if(why){state.textContent=why;state.classList.add('error');return;}
+  state.textContent=`${part}: ${m.mode} entry from the handoff config. Apply sends the whole entry to remesh --mesh (one op at /meshes/${part}).`;
+ }
+ function render(){renderState();renderParams();renderRegions();renderSegments();renderDiff();}
+
+ function pick(next:string|null){
+  if(next===part&&meshes)return;
+  part=next;placing=null;activeRegion=null;
+  const entry=part&&meshes&&isObject(meshes[part])?structuredClone(meshes[part]) as MeshEntry:null;
+  base=entry;pending=entry?structuredClone(entry):null;
+  const kept=parseMeshDraft(draft.value);if(kept&&kept.part===part&&pending)pending=kept.entry;
+  render();host.changed();
+ }
+ addCircle.onclick=()=>{
+  if(!pending)return;const regions=entryRegions(pending),mapping=host.mapping();
+  // A new circle starts on the part: the first segment's bone start when it is a point segment, else the stage centre.
+  const seg=entrySegments(pending).find(s=>Array.isArray(s)) as [string,Point,Point]|undefined;
+  const centre:Point=seg?snapPoint((seg[1][0]+seg[2][0])/2,(seg[1][1]+seg[2][1])/2):mapping.available?snapPoint(mapping.crop.w/2,mapping.crop.h/2):[0,0];
+  const bone=entryValue(pending,['contour','regions'])?regions[0]?.bone??host.bones()[0]??'':host.bones()[0]??'';
+  change(withRegions(pending,[...regions,{name:freeRegionName(regions,'circle'),shape:'circle',cx:centre[0],cy:centre[1],r:24,bone,spacing:14,band:16}]));
+  activeRegion=regions.length;status('Added a circle region; drag its centre on the stage (Drag on stage), set its bone, spacing and band here.',false);
+ };
+ drawPolygon.onclick=()=>{
+  if(placing){finishPolygon();return;}
+  placing=[];dragging=false;status('Click the stage to place polygon points; press Draw polygon again (or Enter) to close it (3 or more points), Escape to drop it.',false);render();host.changed();
+ };
+ dragToggle.onclick=()=>{dragging=!dragging;placing=null;status(dragging?'Drag a polygon vertex or a circle centre on the stage.':'',false);render();host.changed();};
+ segmentAdd.onclick=()=>{if(pending&&segmentBone.value)change(addSegment(pending,segmentBone.value));};
+ applyButton.onclick=()=>{if(pending&&part&&!busy)void host.apply(part,structuredClone(pending));};
+ resetButton.onclick=()=>{if(busy)return;if(base)pending=structuredClone(base);placing=null;activeRegion=null;save();render();host.changed();void host.reset();};
+ foldsButton.onclick=()=>{if(!busy)void host.folds();};
+ function finishPolygon(){
+  const points=placing??[];placing=null;
+  if(points.length<3){status(`MESH_POLYGON_POINTS: ${points.length} point(s) placed; a polygon region needs 3 or more`,true);render();host.changed();return;}
+  const regions=entryRegions(pending!),bone=regions[0]?.bone??host.bones()[0]??'';
+  try{change(withRegions(pending!,[...regions,polygonRegion(freeRegionName(regions,'polygon'),points,bone,14,16)]));activeRegion=regions.length;status('Added a polygon region; drag its vertices on the stage (Drag on stage).',false);}
+  catch(error){status(error instanceof Error?error.message:String(error),true);}
+ }
+ const local=(event:PointerEvent)=>{const box=host.pane.getBoundingClientRect();return {x:event.clientX-box.left,y:event.clientY-box.top};};
+ const rigAt=(event:PointerEvent):Point|null=>{const project=host.project(),mapping=host.mapping();if(!project||!mapping.available)return null;return paneToRig(project,mapping,local(event));};
+ const projectRig=()=>{const project=host.project(),mapping=host.mapping();if(!project||!mapping.available)return null;return (x:number,y:number)=>{const w=mapping.toWorld(x,y);return project(w.x,w.y);};};
+ const down=(event:PointerEvent)=>{
+  if(!event.isPrimary||event.button!==0||!pending||(!placing&&!dragging))return;
+  const target=event.target;if(target instanceof Element&&target.closest('button,input,select,textarea,a'))return;
+  if(placing){const at=rigAt(event);if(!at)return;event.stopPropagation();event.preventDefault();placing.push(snapPoint(at[0],at[1]));host.changed();return;}
+  const project=projectRig();if(!project)return;
+  const hit=hitRegionPoint(entryRegions(pending),project,local(event));if(!hit)return;
+  // A vertex drag edits the region; it never reaches the viewport's pan.
+  event.stopPropagation();event.preventDefault();drag={...hit,pointer:event.pointerId};activeRegion=hit.region;host.pane.setPointerCapture(event.pointerId);render();host.changed();
+ };
+ const move=(event:PointerEvent)=>{
+  if(!drag||event.pointerId!==drag.pointer||!pending)return;event.stopPropagation();
+  const at=rigAt(event);if(!at)return;
+  pending=withRegions(pending,moveRegionPoint(entryRegions(pending),drag.region,drag.vertex,at));host.changed();
+ };
+ const end=(event:PointerEvent)=>{if(!drag||event.pointerId!==drag.pointer)return;drag=null;if(host.pane.hasPointerCapture(event.pointerId))host.pane.releasePointerCapture(event.pointerId);if(pending)change(pending);};
+ const keyDown=(event:KeyboardEvent)=>{if(!placing)return;if(event.key==='Enter'){event.preventDefault();finishPolygon();}else if(event.key==='Escape'){event.preventDefault();placing=null;status('Polygon dropped.',false);render();host.changed();}};
+ host.pane.addEventListener('pointerdown',down,true);host.pane.addEventListener('pointermove',move,true);
+ for(const type of ['pointerup','pointercancel'] as const)host.pane.addEventListener(type,end,true);
+ document.addEventListener('keydown',keyDown,true);
+
+ const colors=()=>({stroke:host.token('--rv-mesh-region'),fill:host.token('--rv-mesh-region-fill'),handle:host.token('--rv-mesh-handle'),ink:host.token('--rv-bust-ink'),labelBg:host.token('--rv-bust-label-bg')});
+ const toWorld=(p:Point)=>{const m=host.mapping();return m.available?m.toWorld(p[0],p[1]):null;};
+ const panel:MeshPanel={
+  load(value,reason){meshes=value;loadReason=reason;const keep=part;part=null;pick(keep);},
+  select:pick,
+  part:()=>part,entry:()=>pending?structuredClone(pending):null,configEntry:()=>base?structuredClone(base):null,
+  set(path,value){if(!pending)throw new Error('MESH_PANEL_NO_PART');change(setEntryValue(pending,path,value));},
+  setEntry(entry){change(structuredClone(entry));},
+  regions:{
+   list:()=>pending?entryRegions(pending):[],
+   add(region){if(!pending)throw new Error('MESH_PANEL_NO_PART');change(withRegions(pending,[...entryRegions(pending),region]));},
+   move(region,vertex,to){if(!pending)throw new Error('MESH_PANEL_NO_PART');activeRegion=region;change(withRegions(pending,moveRegionPoint(entryRegions(pending),region,vertex,to)));},
+   remove(index){if(!pending)return;change(withRegions(pending,entryRegions(pending).filter((_,i)=>i!==index)));},
+   draw(on){dragging=on;placing=null;render();host.changed();},
+   placing:()=>placing?placing.map(p=>[p[0],p[1]] as Point):null,
+  },
+  precheck:()=>pending&&part?precheckEntry(part,pending,host.bones()):[],
+  restore(){const kept=parseMeshDraft(draft.value);if(kept&&kept.part===part&&base){pending=kept.entry;render();host.changed();}},
+  status,
+  counts(lines){countsArea.replaceChildren(...lines.map(l=>make('div',{className:'physics-readout-line'},make('span',{className:'eyebrow',textContent:l.label}),make('code',{textContent:l.text,title:l.text,className:l.error?'error':''}))));},
+  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();},
+  overlayRegions(){
+   if(!pending||mode()!=='contour')return [];const c=colors();
+   const out:OverlayRegion[]=[];
+   entryRegions(pending).forEach((r,i)=>{if(r.shape!=='polygon')return;const points=r.points.map(toWorld);if(points.some(p=>!p))return;out.push({name:r.name,points:points as {x:number;y:number}[],stroke:c.stroke,fill:c.fill,handles:dragging||activeRegion===i,active:activeRegion===i&&drag?drag.vertex:null,colors:{handle:c.handle,ink:c.ink,labelBg:c.labelBg}});});
+   if(placing&&placing.length){const points=placing.map(toWorld);if(points.every(Boolean))out.push({name:'new polygon',points:points as {x:number;y:number}[],stroke:c.stroke,fill:c.fill,handles:true,open:true,active:placing.length-1,colors:{handle:c.handle,ink:c.ink,labelBg:c.labelBg}});}
+   return out;
+  },
+  overlayCircles(){
+   if(!pending||mode()!=='contour')return [];const c=colors();
+   return entryRegions(pending).flatMap((r,i)=>{if(r.shape!=='circle')return [];const at=toWorld([r.cx,r.cy]);if(!at)return [];
+    // Crop px are world px under the crop mapping (a translation and a y flip), so r and band carry over as lengths.
+    return [{center:at,r:r.r,band:r.band,label:`${r.name} → ${r.bone}`,labelRow:i,handles:dragging||activeRegion===i,colors:{stroke:c.stroke,fill:c.fill,handle:c.handle,ink:c.ink,labelBg:c.labelBg,flash:c.handle}}];});
+  },
+  dispose(){host.pane.removeEventListener('pointerdown',down,true);host.pane.removeEventListener('pointermove',move,true);for(const type of ['pointerup','pointercancel'] as const)host.pane.removeEventListener(type,end,true);document.removeEventListener('keydown',keyDown,true);},
+ };
+ render();
+ return panel;
+}