@rig-c/review 0.5.0 → 0.7.0

package/web/rig-overlays.ts

@@ -9,20 +9,78 @@ export interface RigOverlaySettings {images:boolean;mesh:boolean;bones:boolean;m
 export interface OverlayPlayer extends Pick<RigPlayer,'posedFrame'|'bone'> {}
 export interface OverlayLine {from:OverlayPoint;to:OverlayPoint;slot?:string}
 export interface OverlayBone {name:string;point:OverlayPoint;xAxis:OverlayPoint;yAxis:OverlayPoint}
-export interface RigOverlayGeometry {selection:OverlayLine[];mesh:OverlayLine[];bones:OverlayLine[];joints:OverlayBone[];warnings:string[];captured:{mesh:boolean;bones:boolean}}
+/** `meshTriangles`: per slot, the triangles the mesh layer draws from the captured pose (#106 bar 1 reads it). */
+export interface RigOverlayGeometry {selection:OverlayLine[];mesh:OverlayLine[];meshTriangles:Record<string,number>;bones:OverlayLine[];joints:OverlayBone[];warnings:string[];captured:{mesh:boolean;bones:boolean}}
 export interface OverlaySnapshot {
- available:boolean;needsCapture:boolean;meshEdges:number;boneCount:number;
+ available:boolean;needsCapture:boolean;meshEdges:number;meshTriangles:Record<string,number>;boneCount:number;
  capabilities:{images:boolean;mesh:boolean;bones:boolean};warnings:string[];
 }
 /** Designation polygons in rig world coordinates (Setup's Chest regions tool); colours are theme token values. */
-export interface OverlayRegion {name:string;points:OverlayPoint[];stroke:string;fill:string}
-export interface OverlayView {project:OverlayProject;settings:RigOverlaySettings;dpr?:number;regions?:readonly OverlayRegion[]}
+/**
+ * `handles` (#106, the Mesh panel's polygon regions): a square on every vertex, the `active` one filled with `handle`,
+ * and the name as a label; `open` draws the outline unclosed (a polygon still being placed).
+ */
+export interface OverlayRegion {name:string;points:OverlayPoint[];stroke:string;fill:string;handles?:boolean;active?:number|null;open?:boolean;colors?:{handle:string;ink:string;labelBg:string}}
+/**
+ * A circle designation in rig world units (crop px = world px under the crop mapping): core r at full weight, dashed
+ * outer circle at r + band. With handles it is the chest editor's drawing (centre, core edge on the right, band on
+ * top, a label under the outer circle). Colours are theme token values.
+ */
+export interface OverlayCircle {center:OverlayPoint;r:number;band:number;label?:string;/** Label rows below the outer circle, so two labels never overlap. */labelRow?:number;handles:boolean;flash?:boolean;colors:{stroke:string;fill:string;handle:string;ink:string;labelBg:string;flash:string}}
+/**
+ * Mesh edit preview in rig world coordinates: the selected slot's original triangles (cut out of the veil that dims the
+ * rest of the rig), the edges after the delta by kind, moved-vertex ghosts and the vertices as handles. A box is in
+ * canvas px. It is drawn over the original triangulation; nothing here retriangulates. Colours are theme token values.
+ */
+export interface OverlayMeshEdit {
+ triangles:readonly OverlayPoint[][];
+ edges:readonly {from:OverlayPoint;to:OverlayPoint;kind:'hull'|'interior'|'constraint'|'removed';hover?:boolean}[];
+ ghosts:readonly {from:OverlayPoint;to:OverlayPoint}[];
+ vertices:readonly {at:OverlayPoint;state:'source'|'moved'|'added'|'removed';selected:boolean;hover:boolean;pending:boolean}[];
+ box?:{from:OverlayPoint;to:OverlayPoint};
+ colors:{veil:string;edge:string;hull:string;constraint:string;removed:string;vertex:string;ink:string;selected:string;added:string;hover:string;box:string;boxFill:string};
+}
+/**
+ * A chest landmark (#105) in rig world units: a diamond with its tag, and a guide from the cleavage to each apex (the
+ * distance the producer derives a radius from). Colours are theme token values.
+ */
+export interface OverlayMarker {at:OverlayPoint;tag:string;active:boolean;colors:{stroke:string;fill:string;ink:string;labelBg:string};guideTo?:OverlayPoint[]}
+/**
+ * Setup weights (#107) in rig world coordinates: the selected slot's setup-pose mesh, each triangle filled with the mean
+ * of its vertices' ramp colours and each vertex a dot in its own colour, over a veil that dims the rest of the rig.
+ * `value` is the weight the colour was taken from (stored, never normalised); `hover` indexes `vertices` and draws its
+ * label. Colours are theme token values.
+ */
+export interface OverlayWeights {
+ triangles:readonly {points:readonly [number,number,number];color:string}[];
+ vertices:readonly {at:OverlayPoint;index:number;value:number;color:string;label:string}[];
+ hover:number|null;
+ colors:{veil:string;edge:string;ink:string;labelBg:string;hover:string};
+}
+/**
+ * Setup bones (#109) in rig world coordinates: every config anchor as a handle — an origin a square, a chain point a
+ * circle, a tip a diamond — joined by its chain or bone-to-tip line; a pending anchor draws a dashed ghost from the
+ * config's value; the hovered or selected anchor is ringed and labelled. Colours are theme token values.
+ */
+export interface OverlayAnchors {
+ lines:readonly {from:OverlayPoint;to:OverlayPoint}[];
+ anchors:readonly {at:OverlayPoint;from:OverlayPoint|null;kind:'at'|'point'|'tip';label:string;selected:boolean;hover:boolean}[];
+ colors:{line:string;origin:string;point:string;tip:string;pending:string;selected:string;ink:string;labelBg:string};
+}
+export interface OverlayView {project:OverlayProject;settings:RigOverlaySettings;dpr?:number;regions?:readonly OverlayRegion[];circles?:readonly OverlayCircle[];markers?:readonly OverlayMarker[];meshEdit?:OverlayMeshEdit|null;weights?:OverlayWeights|null;anchors?:OverlayAnchors|null}
+/** Canvas-pixel geometry of a circle designation, the same numbers the editor hit-tests against. */
+export function projectCircle(project:OverlayProject,circle:Pick<OverlayCircle,'center'|'r'|'band'>):{center:OverlayPoint;pxR:number;pxBand:number}|null {
+ const {x,y}=circle.center,center=project(x,y),edge=project(x+circle.r,y),top=project(x,y+circle.r+circle.band);
+ if(![center,edge,top].every(finite))return null;
+ const pxR=Math.max(2,Math.hypot(edge.x-center.x,edge.y-center.y));
+ return {center,pxR,pxBand:Math.max(pxR+2,Math.hypot(top.x-center.x,top.y-center.y))};
+}
 export interface OverlayRefresh extends OverlayView {player:OverlayPlayer|null;bones:readonly BoneOverlaySpec[];frame?:PosedFrame;selectedSlot?:string|null}
 const point=(x:number,y:number):OverlayPoint=>({x,y});
 const finite=(p:OverlayPoint)=>Number.isFinite(p.x)&&Number.isFinite(p.y);
 const message=(error:unknown)=>error instanceof Error?error.message:String(error);
 
-function meshLines(frame:PosedFrame,warnings:string[]):OverlayLine[]{
+function meshLines(frame:PosedFrame,warnings:string[],triangles:Record<string,number>={}):OverlayLine[]{
  const lines:OverlayLine[]=[];
  for(const slot of frame.order){
   if(slot.kind!=='mesh')continue;
@@ -33,6 +91,7 @@ function meshLines(frame:PosedFrame,warnings:string[]):OverlayLine[]{
    if(ids.some(index=>!Number.isSafeInteger(index)||index<0||index*2+1>=slot.vertices.length)){warnings.push(`Mesh overlay ${slot.slot}: triangle index outside posed vertices`);continue;}
    const points=ids.map(index=>point(slot.vertices[index*2]!,slot.vertices[index*2+1]!));
    if(points.some(p=>!finite(p))){warnings.push(`Mesh overlay ${slot.slot}: nonfinite posed vertex`);continue;}
+   triangles[slot.slot]=(triangles[slot.slot]??0)+1;
    for(let edge=0;edge<3;edge++){
     const a=ids[edge]!,b=ids[(edge+1)%3]!,key=a<b?`${a}:${b}`:`${b}:${a}`;
     if(edges.has(key))continue;edges.add(key);
@@ -45,10 +104,10 @@ function meshLines(frame:PosedFrame,warnings:string[]):OverlayLine[]{
 
 /** Takes copies; later seeks cannot turn an old overlay into a prepared pose. */
 export function captureRigGeometry(player:OverlayPlayer,specs:readonly BoneOverlaySpec[],layers:Pick<RigOverlaySettings,'mesh'|'bones'>,frame?:PosedFrame,selectedSlot?:string|null):RigOverlayGeometry{
- const geometry:RigOverlayGeometry={selection:[],mesh:[],bones:[],joints:[],warnings:[],captured:{mesh:false,bones:false}};
+ const geometry:RigOverlayGeometry={selection:[],mesh:[],meshTriangles:{},bones:[],joints:[],warnings:[],captured:{mesh:false,bones:false}};
  if(selectedSlot){try{const bounds=partBounds(frame??player.posedFrame(null),selectedSlot);if(bounds){const {x,y,width,height}=bounds,points=[point(x,y),point(x+width,y),point(x+width,y+height),point(x,y+height)];geometry.selection=points.map((from,i)=>({from,to:points[(i+1)%4]!,slot:selectedSlot}));}}catch(error){geometry.warnings.push(`Selection bounds unavailable: ${message(error)}`);}}
  if(layers.mesh){
-  try{geometry.mesh=meshLines(frame??player.posedFrame(),geometry.warnings);geometry.captured.mesh=true;}
+  try{geometry.mesh=meshLines(frame??player.posedFrame(),geometry.warnings,geometry.meshTriangles);geometry.captured.mesh=true;}
   catch(error){geometry.warnings.push(`Mesh overlay unavailable: ${message(error)}`);}
  }
  if(layers.bones){
@@ -93,7 +152,7 @@ export class RigOverlays {
   this.geometry=input.player?captureRigGeometry(input.player,input.bones,input.settings,input.frame,input.selectedSlot):null;
   return this.redraw(input);
  }
- redraw({project,settings,dpr=globalThis.devicePixelRatio??1,regions=[]}:OverlayView):OverlaySnapshot{
+ redraw({project,settings,dpr=globalThis.devicePixelRatio??1,regions=[],circles=[],markers=[],meshEdit=null,weights=null,anchors=null}:OverlayView):OverlaySnapshot{
   if(this.disposed)return this.unavailable('Overlay has been disposed');
   this.host.rigRoot.style.visibility=settings.images?this.visibility:'hidden';
   const warnings=[...(this.geometry?.warnings??[])],ctx=this.host.canvas.getContext('2d');
@@ -136,14 +195,112 @@ export class RigOverlays {
   }
   // Designations are drawn over the drawn rig only; they are values the reviewer typed, not rig geometry.
   if(this.playerAvailable)for(const region of regions){
-   const points=region.points.map(projected);if(points.length<3||points.some(p=>!p))continue;
-   ctx.globalAlpha=1;ctx.setLineDash([]);ctx.beginPath();ctx.moveTo(points[0]!.x,points[0]!.y);for(const p of points.slice(1))ctx.lineTo(p!.x,p!.y);ctx.closePath();
-   ctx.fillStyle=region.fill;ctx.fill();ctx.strokeStyle=region.stroke;ctx.lineWidth=1.6;ctx.stroke();
+   const points=region.points.map(projected);if(points.length<(region.open?1:3)||points.some(p=>!p))continue;
+   ctx.globalAlpha=1;ctx.setLineDash([]);ctx.beginPath();ctx.moveTo(points[0]!.x,points[0]!.y);for(const p of points.slice(1))ctx.lineTo(p!.x,p!.y);
+   if(!region.open){ctx.closePath();ctx.fillStyle=region.fill;ctx.fill();}
+   ctx.strokeStyle=region.stroke;ctx.lineWidth=1.6;ctx.stroke();
+   if(region.handles&&region.colors){
+    const c=region.colors;
+    points.forEach((p,i)=>{const size=region.active===i?5:3.5;ctx.fillStyle=region.active===i?c.handle:c.ink;ctx.strokeStyle=region.stroke;ctx.lineWidth=1.5;ctx.fillRect(p!.x-size,p!.y-size,size*2,size*2);ctx.strokeRect(p!.x-size,p!.y-size,size*2,size*2);});
+    const top=points.reduce((a,p)=>p!.y<a!.y?p:a,points[0]);
+    ctx.font='600 11px ui-monospace, monospace';const width=ctx.measureText(region.name).width+8;ctx.fillStyle=c.labelBg;ctx.fillRect(top!.x-width/2,top!.y-24,width,15);ctx.fillStyle=region.stroke;ctx.fillText(region.name,top!.x-width/2+4,top!.y-13);
+   }
+  }
+  if(this.playerAvailable)for(const circle of circles){
+   const at=projectCircle(project,circle);if(!at)continue;const {center,pxR,pxBand}=at,c=circle.colors;
+   ctx.globalAlpha=.95;
+   ctx.beginPath();ctx.setLineDash([5,4]);ctx.strokeStyle=c.stroke;ctx.lineWidth=1.6;ctx.arc(center.x,center.y,pxBand,0,Math.PI*2);ctx.stroke();
+   ctx.beginPath();ctx.setLineDash([]);ctx.fillStyle=c.fill;ctx.lineWidth=2.2;ctx.arc(center.x,center.y,pxR,0,Math.PI*2);ctx.fill();ctx.stroke();
+   if(!circle.handles)continue;
+   ctx.globalAlpha=1;
+   ctx.beginPath();ctx.moveTo(center.x-7,center.y);ctx.lineTo(center.x+7,center.y);ctx.moveTo(center.x,center.y-7);ctx.lineTo(center.x,center.y+7);ctx.stroke();
+   for(const [x,y,fill,stroke] of [[center.x,center.y,c.handle,c.stroke],[center.x+pxR,center.y,c.stroke,c.ink],[center.x,center.y-pxBand,c.ink,c.stroke]] as const){ctx.beginPath();ctx.fillStyle=fill;ctx.strokeStyle=stroke;ctx.lineWidth=2;ctx.arc(x,y,4.5,0,Math.PI*2);ctx.fill();ctx.stroke();}
+   if(circle.label){
+    ctx.font='600 11px ui-monospace, monospace';const width=ctx.measureText(circle.label).width+8,lx=center.x-width/2,ly=center.y+pxBand+14+(circle.labelRow??0)*17;
+    ctx.fillStyle=circle.flash?c.flash:c.labelBg;ctx.fillRect(lx,ly-11,width,15);ctx.fillStyle=circle.flash?c.ink:c.stroke;ctx.fillText(circle.label,lx+4,ly);
+   }
   }
-  if(this.geometry?.selection.length){ctx.globalAlpha=1;ctx.strokeStyle='#ffbb47';ctx.lineWidth=2;ctx.setLineDash([5,3]);ctx.beginPath();for(const edge of this.geometry.selection)line(edge);ctx.stroke();ctx.setLineDash([]);}
+  if(this.playerAvailable)for(const marker of markers){
+   const at=projected(marker.at);if(!at)continue;const c=marker.colors;
+   ctx.globalAlpha=.9;ctx.setLineDash([3,3]);ctx.strokeStyle=c.stroke;ctx.lineWidth=1.2;
+   for(const to of marker.guideTo??[]){const end=projected(to);if(!end)continue;ctx.beginPath();ctx.moveTo(at.x,at.y);ctx.lineTo(end.x,end.y);ctx.stroke();}
+   ctx.setLineDash([]);ctx.globalAlpha=1;const size=marker.active?7:5.5;
+   ctx.beginPath();ctx.moveTo(at.x,at.y-size);ctx.lineTo(at.x+size,at.y);ctx.lineTo(at.x,at.y+size);ctx.lineTo(at.x-size,at.y);ctx.closePath();
+   ctx.fillStyle=c.fill;ctx.fill();ctx.strokeStyle=c.ink;ctx.lineWidth=marker.active?2.4:1.6;ctx.stroke();
+   ctx.font='600 11px ui-monospace, monospace';const width=ctx.measureText(marker.tag).width+8,lx=at.x+size+4,ly=at.y-size-2;
+   ctx.fillStyle=c.labelBg;ctx.fillRect(lx,ly-11,width,15);ctx.fillStyle=c.stroke;ctx.fillText(marker.tag,lx+4,ly);
+  }
+  ctx.globalAlpha=1;
+  if(this.playerAvailable&&meshEdit)this.drawMeshEdit(ctx,meshEdit,projected,width,height);
+  else if(this.playerAvailable&&weights)this.drawWeights(ctx,weights,projected,width,height);
+  if(this.playerAvailable&&anchors)this.drawAnchors(ctx,anchors,projected);
+  if(this.geometry?.selection.length&&!meshEdit&&!weights&&!anchors){ctx.globalAlpha=1;ctx.strokeStyle='#ffbb47';ctx.lineWidth=2;ctx.setLineDash([5,3]);ctx.beginPath();for(const edge of this.geometry.selection)line(edge);ctx.stroke();ctx.setLineDash([]);}
   ctx.restore();
   return this.snapshot(true,needsCapture,warnings);
  }
+ private drawMeshEdit(ctx:CanvasRenderingContext2D,edit:OverlayMeshEdit,projected:(p:OverlayPoint)=>OverlayPoint|null,width:number,height:number):void{
+  const c=edit.colors;ctx.save();ctx.globalAlpha=1;ctx.setLineDash([]);
+  // The rest of the rig dims; the edited slot's own triangles are cut out of the veil so its art stays at full opacity.
+  ctx.fillStyle=c.veil;ctx.fillRect(0,0,width,height);
+  ctx.globalCompositeOperation='destination-out';ctx.fillStyle=c.ink;ctx.beginPath();
+  for(const triangle of edit.triangles){const points=triangle.map(projected);if(points.length<3||points.some(p=>!p))continue;ctx.moveTo(points[0]!.x,points[0]!.y);for(const p of points.slice(1))ctx.lineTo(p!.x,p!.y);ctx.closePath();}
+  ctx.fill();ctx.globalCompositeOperation='source-over';
+  const segment=(from:OverlayPoint,to:OverlayPoint)=>{const a=projected(from),b=projected(to);if(a&&b){ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);}};
+  const stroke=(kind:OverlayMeshEdit['edges'][number]['kind'],color:string,width:number,dash:number[]=[])=>{ctx.beginPath();ctx.setLineDash(dash);ctx.strokeStyle=color;ctx.lineWidth=width;for(const e of edit.edges)if(e.kind===kind)segment(e.from,e.to);ctx.stroke();};
+  stroke('removed',c.removed,1.4,[4,3]);stroke('interior',c.edge,1);stroke('constraint',c.constraint,2.4);stroke('hull',c.hull,2.2);
+  ctx.beginPath();ctx.setLineDash([2,3]);ctx.strokeStyle=c.ink;ctx.lineWidth=1;for(const g of edit.ghosts)segment(g.from,g.to);ctx.stroke();
+  ctx.beginPath();ctx.setLineDash([]);ctx.strokeStyle=c.hover;ctx.lineWidth=3.2;for(const e of edit.edges)if(e.hover)segment(e.from,e.to);ctx.stroke();
+  for(const v of edit.vertices){
+   const p=projected(v.at);if(!p)continue;
+   if(v.state==='removed'){ctx.beginPath();ctx.strokeStyle=c.removed;ctx.lineWidth=1.6;ctx.moveTo(p.x-4,p.y-4);ctx.lineTo(p.x+4,p.y+4);ctx.moveTo(p.x+4,p.y-4);ctx.lineTo(p.x-4,p.y+4);ctx.stroke();continue;}
+   const r=v.selected?4.6:3.4;ctx.beginPath();ctx.fillStyle=v.selected?c.selected:v.state==='added'?c.added:c.vertex;ctx.strokeStyle=v.state==='moved'?c.selected:c.ink;ctx.lineWidth=v.state==='moved'?2:1.2;ctx.arc(p.x,p.y,r,0,Math.PI*2);ctx.fill();ctx.stroke();
+   if(v.hover||v.pending){ctx.beginPath();ctx.strokeStyle=v.pending?c.constraint:c.hover;ctx.lineWidth=2;ctx.arc(p.x,p.y,7.5,0,Math.PI*2);ctx.stroke();}
+  }
+  if(edit.box){const {from,to}=edit.box,x=Math.min(from.x,to.x),y=Math.min(from.y,to.y),w=Math.abs(to.x-from.x),h=Math.abs(to.y-from.y);ctx.fillStyle=c.boxFill;ctx.fillRect(x,y,w,h);ctx.setLineDash([4,3]);ctx.strokeStyle=c.box;ctx.lineWidth=1;ctx.strokeRect(x+.5,y+.5,w,h);}
+  ctx.restore();
+ }
+ private drawWeights(ctx:CanvasRenderingContext2D,w:OverlayWeights,projected:(p:OverlayPoint)=>OverlayPoint|null,width:number,height:number):void{
+  const c=w.colors,points=w.vertices.map(v=>projected(v.at));ctx.save();ctx.globalAlpha=1;ctx.setLineDash([]);
+  ctx.fillStyle=c.veil;ctx.fillRect(0,0,width,height);
+  for(const t of w.triangles){
+   const [a,b,d]=t.points.map(i=>points[i]);if(!a||!b||!d)continue;
+   ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.lineTo(d.x,d.y);ctx.closePath();ctx.globalAlpha=.72;ctx.fillStyle=t.color;ctx.fill();ctx.globalAlpha=.5;ctx.strokeStyle=c.edge;ctx.lineWidth=.8;ctx.stroke();
+  }
+  ctx.globalAlpha=1;
+  w.vertices.forEach((v,i)=>{const p=points[i];if(!p)return;ctx.beginPath();ctx.fillStyle=v.color;ctx.strokeStyle=c.ink;ctx.lineWidth=1.1;ctx.arc(p.x,p.y,3.4,0,Math.PI*2);ctx.fill();ctx.stroke();});
+  const h=w.hover===null?null:w.vertices[w.hover],hp=w.hover===null?null:points[w.hover];
+  if(h&&hp){
+   ctx.beginPath();ctx.strokeStyle=c.hover;ctx.lineWidth=2;ctx.arc(hp.x,hp.y,7.5,0,Math.PI*2);ctx.stroke();
+   ctx.font='600 11px ui-monospace, monospace';const tw=ctx.measureText(h.label).width+10,lx=Math.min(Math.max(2,hp.x+11),width-tw-2),ly=Math.max(14,hp.y-11);
+   ctx.fillStyle=c.labelBg;ctx.fillRect(lx,ly-12,tw,17);ctx.fillStyle=c.hover;ctx.fillText(h.label,lx+5,ly);
+  }
+  ctx.restore();
+ }
+ private drawAnchors(ctx:CanvasRenderingContext2D,b:OverlayAnchors,projected:(p:OverlayPoint)=>OverlayPoint|null):void{
+  const c=b.colors;ctx.save();ctx.globalAlpha=1;
+  ctx.setLineDash([]);ctx.lineWidth=1.6;ctx.strokeStyle=c.line;ctx.beginPath();
+  for(const l of b.lines){const from=projected(l.from),to=projected(l.to);if(from&&to){ctx.moveTo(from.x,from.y);ctx.lineTo(to.x,to.y);}}
+  ctx.stroke();
+  ctx.setLineDash([3,3]);ctx.strokeStyle=c.pending;ctx.lineWidth=1.2;ctx.beginPath();
+  for(const a of b.anchors){if(!a.from)continue;const from=projected(a.from),to=projected(a.at);if(from&&to){ctx.moveTo(from.x,from.y);ctx.lineTo(to.x,to.y);}}
+  ctx.stroke();ctx.setLineDash([]);
+  const labels:{at:OverlayPoint;text:string;color:string}[]=[];
+  for(const a of b.anchors){
+   const p=projected(a.at);if(!p)continue;
+   if(a.from){const g=projected(a.from);if(g){ctx.beginPath();ctx.strokeStyle=c.pending;ctx.lineWidth=1;ctx.arc(g.x,g.y,2.5,0,Math.PI*2);ctx.stroke();}}
+   const fill=a.from?c.pending:a.kind==='at'?c.origin:a.kind==='point'?c.point:c.tip,size=a.selected||a.hover?6:4.5;
+   ctx.beginPath();
+   if(a.kind==='at')ctx.rect(p.x-size,p.y-size,size*2,size*2);
+   else if(a.kind==='point')ctx.arc(p.x,p.y,size,0,Math.PI*2);
+   else{ctx.moveTo(p.x,p.y-size-1);ctx.lineTo(p.x+size+1,p.y);ctx.lineTo(p.x,p.y+size+1);ctx.lineTo(p.x-size-1,p.y);ctx.closePath();}
+   ctx.fillStyle=fill;ctx.fill();ctx.strokeStyle=c.ink;ctx.lineWidth=1.3;ctx.stroke();
+   if(a.selected||a.hover){ctx.beginPath();ctx.strokeStyle=c.selected;ctx.lineWidth=2;ctx.arc(p.x,p.y,size+4,0,Math.PI*2);ctx.stroke();}
+   if(a.selected||a.hover||a.from)labels.push({at:p,text:a.label,color:a.selected||a.hover?c.selected:c.pending});
+  }
+  ctx.font='600 11px ui-monospace, monospace';
+  for(const l of labels){const w=ctx.measureText(l.text).width+8,lx=l.at.x+10,ly=l.at.y-9;ctx.fillStyle=c.labelBg;ctx.fillRect(lx,ly-11,w,15);ctx.fillStyle=l.color;ctx.fillText(l.text,lx+4,ly);}
+  ctx.restore();
+ }
  clear():void{
   this.geometry=null;this.playerAvailable=false;
   const ctx=this.host.canvas.getContext('2d');if(ctx){ctx.save();ctx.setTransform(1,0,0,1,0,0);ctx.clearRect(0,0,this.host.canvas.width,this.host.canvas.height);ctx.restore();}
@@ -152,7 +309,7 @@ export class RigOverlays {
   if(this.disposed)return;this.clear();this.host.rigRoot.style.visibility=this.visibility;this.host.canvas.style.pointerEvents=this.pointerEvents;this.disposed=true;
  }
  private snapshot(canvasAvailable:boolean,needsCapture:boolean,warnings:string[]):OverlaySnapshot{
-  return {available:this.playerAvailable&&canvasAvailable,needsCapture,meshEdges:this.geometry?.mesh.length??0,boneCount:this.geometry?.joints.length??0,capabilities:{images:this.playerAvailable,mesh:this.playerAvailable&&canvasAvailable,bones:this.playerAvailable&&canvasAvailable},warnings};
+  return {available:this.playerAvailable&&canvasAvailable,needsCapture,meshEdges:this.geometry?.mesh.length??0,meshTriangles:{...(this.geometry?.meshTriangles??{})},boneCount:this.geometry?.joints.length??0,capabilities:{images:this.playerAvailable,mesh:this.playerAvailable&&canvasAvailable,bones:this.playerAvailable&&canvasAvailable},warnings};
  }
- private unavailable(warning:string):OverlaySnapshot{return {available:false,needsCapture:false,meshEdges:0,boneCount:0,capabilities:{images:false,mesh:false,bones:false},warnings:[warning]};}
+ private unavailable(warning:string):OverlaySnapshot{return {available:false,needsCapture:false,meshEdges:0,meshTriangles:{},boneCount:0,capabilities:{images:false,mesh:false,bones:false},warnings:[warning]};}
 }

package/web/setup-pose.ts

@@ -0,0 +1,30 @@
+/**
+ * The setup pose, read from the published player: a throwaway `RigPlayer` over the loaded assets that never plays, so
+ * its `bone()` and `slotIdentity()` answer the setup pose (the published `posedFrame()` is empty before `play`). Shared
+ * by Setup · Weights (#107) and Edit Mesh (#100). The stage player is never touched; the throwaway one is disposed
+ * before this returns, so every bone the caller may ask for is read here.
+ */
+import {RigPlayer,type ModelAssets,type RenderMode} from '@rig-c/play';
+import type {WorldTransform} from '../src/setup-mesh.ts';
+
+export interface SetupPose {
+ /** The slot's attachment at the setup pose, or null when it shows none there. */
+ identity:{skin:string;attachment:string}|null;
+ /** A named bone's setup-pose world transform; throws for a bone that was not read. */
+ world:(bone:string)=>WorldTransform;
+}
+/** Reads `slot`'s setup-pose identity and every bone in `bones` (unknown names are skipped). Throws what the player throws. */
+export function readSetupPose(assets:ModelAssets,slot:string,bones:readonly string[],root:HTMLElement,mode:RenderMode='dom'):SetupPose {
+ const player=new RigPlayer(root,assets,{mode,slots:[slot]});
+ try{
+  const row=player.slotIdentity().slots.find(r=>r.slot===slot),identity=row&&row.attachment&&row.skin?{skin:row.skin,attachment:row.attachment}:null;
+  const map=new Map<string,WorldTransform>();
+  for(const name of bones){try{const b=player.bone(name);map.set(name,{x:b.x,y:b.y,a:b.a,b:b.b,c:b.c,d:b.d});}catch{/* not a bone of this rig */}}
+  return {identity,world:name=>{const t=map.get(name);if(!t)throw new Error(`no setup-pose transform for bone ${name}`);return t;}};
+ }finally{player.dispose();}
+}
+/** The bone names a compiled model document declares, in stored order. */
+export function modelBoneNames(model:unknown):string[] {
+ const list=(model as {bones?:unknown}|null)?.bones;
+ return Array.isArray(list)?list.map(b=>b&&typeof (b as {name?:unknown}).name==='string'?(b as {name:string}).name:'').filter(Boolean):[];
+}

package/web/styles.css

@@ -1,6 +1,6 @@
 /* Theme tokens: site values copied from rig-c.org styles.css (dark); light and --rv-* are review-local derivations. No literal colour outside these blocks. */
-:root{--rv-region-a:#ff9f43;--rv-region-a-fill:rgba(255,159,67,.18);--rv-region-b:#4dd6ff;--rv-region-b-fill:rgba(77,214,255,.18);--font-sans:Inter,system-ui,sans-serif;--font-display:Inter,system-ui,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;--radius:10px;--bg:#070b18;--fg:#c9d4e8;--fg-strong:#f3f6fc;--fg-soft:#aebbd4;--fg-muted:#7f8ba6;--border:#18213a;--border-strong:#2a3657;--hover-bg:#0f1730;--active-bg:#142042;--link:#7cc8ff;--link-hover:#b3e0ff;--btn-fg:#08101f;--code-bg:#050814;--code-fg:#d6e2f5;--code-border:#18213a;--code-inline-bg:#121a30;--footer-bg:#050813;--pass:#30d158;--warn:#ffcc00;--fail:#ff453a;--rv-bar:#0b1124;--rv-panel:#0d152b;--rv-raised:var(--code-inline-bg);--rv-control:var(--code-inline-bg);--rv-control-hover:var(--active-bg);--rv-field:var(--code-bg);--rv-segmented:var(--code-bg);--rv-pressed-bg:#133733;--rv-pressed-border:#207c44;--rv-pressed-fg:var(--fg-strong);--rv-focus:var(--link-hover);--rv-backdrop:rgba(7,11,24,.82);--rv-pane-hi:#142042;--rv-pane-lo:#070b18;--rv-pane-label-bg:rgba(7,11,24,.85);--rv-stage-fg:#aebbd4;--rv-grid-dot:rgba(127,139,166,.2);--rv-media-bg:#0b1020;--rv-scrollbar-thumb:#2a3657;--rv-scrollbar-thumb-hover:#3d4c74;--rv-scrollbar-track:transparent;--rv-separator:#1a2747;--rv-separator-hover:#3f7fb8}
-:root[data-theme=light]{--rv-region-a:#ff9f43;--rv-region-a-fill:rgba(255,159,67,.18);--rv-region-b:#4dd6ff;--rv-region-b-fill:rgba(77,214,255,.18);--bg:#f5f7fb;--fg:#26324a;--fg-strong:#0c1324;--fg-soft:#3b4864;--fg-muted:#5d6982;--border:#d5dcea;--border-strong:#b3bed3;--hover-bg:#e8edf6;--active-bg:#dbe3f3;--link:#1a6fc0;--link-hover:#0f528f;--btn-fg:#ffffff;--code-bg:#eef1f7;--code-fg:#1d2940;--code-border:#d5dcea;--code-inline-bg:#e3e8f2;--footer-bg:#eceff6;--pass:#1e8a3c;--warn:#8a6400;--fail:#b3261e;--rv-bar:#edf1f7;--rv-panel:#e9eef6;--rv-raised:var(--code-inline-bg);--rv-control:var(--code-inline-bg);--rv-control-hover:#d5ddec;--rv-field:#ffffff;--rv-segmented:var(--code-inline-bg);--rv-pressed-bg:#c9ded8;--rv-pressed-border:#6fb286;--rv-pressed-fg:var(--fg-strong);--rv-focus:var(--link);--rv-backdrop:rgba(12,19,36,.45);--rv-pane-hi:#142042;--rv-pane-lo:#070b18;--rv-pane-label-bg:rgba(7,11,24,.85);--rv-stage-fg:#aebbd4;--rv-grid-dot:rgba(127,139,166,.2);--rv-media-bg:#0b1020;--rv-scrollbar-thumb:#b3bed3;--rv-scrollbar-thumb-hover:#8e9bb5;--rv-scrollbar-track:transparent;--rv-separator:#c9d6ec;--rv-separator-hover:#5b93cf}
+:root{--rv-region-a:#ff9f43;--rv-region-a-fill:rgba(255,159,67,.18);--rv-region-b:#4dd6ff;--rv-region-b-fill:rgba(77,214,255,.18);--font-sans:Inter,system-ui,sans-serif;--font-display:Inter,system-ui,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;--radius:10px;--bg:#070b18;--fg:#c9d4e8;--fg-strong:#f3f6fc;--fg-soft:#aebbd4;--fg-muted:#7f8ba6;--border:#18213a;--border-strong:#2a3657;--hover-bg:#0f1730;--active-bg:#142042;--link:#7cc8ff;--link-hover:#b3e0ff;--btn-fg:#08101f;--code-bg:#050814;--code-fg:#d6e2f5;--code-border:#18213a;--code-inline-bg:#121a30;--footer-bg:#050813;--pass:#30d158;--warn:#ffcc00;--fail:#ff453a;--rv-bar:#0b1124;--rv-panel:#0d152b;--rv-raised:var(--code-inline-bg);--rv-control:var(--code-inline-bg);--rv-control-hover:var(--active-bg);--rv-field:var(--code-bg);--rv-segmented:var(--code-bg);--rv-pressed-bg:#133733;--rv-pressed-border:#207c44;--rv-pressed-fg:var(--fg-strong);--rv-focus:var(--link-hover);--rv-backdrop:rgba(7,11,24,.82);--rv-pane-hi:#142042;--rv-pane-lo:#070b18;--rv-pane-label-bg:rgba(7,11,24,.85);--rv-stage-fg:#aebbd4;--rv-grid-dot:rgba(127,139,166,.2);--rv-media-bg:#0b1020;--rv-scrollbar-thumb:#2a3657;--rv-scrollbar-thumb-hover:#3d4c74;--rv-scrollbar-track:transparent;--rv-separator:#1a2747;--rv-separator-hover:#3f7fb8;--rv-tick-inspected:#7cc8ff;--rv-tick-scratch:#ff9f43}
+:root[data-theme=light]{--rv-region-a:#ff9f43;--rv-region-a-fill:rgba(255,159,67,.18);--rv-region-b:#4dd6ff;--rv-region-b-fill:rgba(77,214,255,.18);--bg:#f5f7fb;--fg:#26324a;--fg-strong:#0c1324;--fg-soft:#3b4864;--fg-muted:#5d6982;--border:#d5dcea;--border-strong:#b3bed3;--hover-bg:#e8edf6;--active-bg:#dbe3f3;--link:#1a6fc0;--link-hover:#0f528f;--btn-fg:#ffffff;--code-bg:#eef1f7;--code-fg:#1d2940;--code-border:#d5dcea;--code-inline-bg:#e3e8f2;--footer-bg:#eceff6;--pass:#1e8a3c;--warn:#8a6400;--fail:#b3261e;--rv-bar:#edf1f7;--rv-panel:#e9eef6;--rv-raised:var(--code-inline-bg);--rv-control:var(--code-inline-bg);--rv-control-hover:#d5ddec;--rv-field:#ffffff;--rv-segmented:var(--code-inline-bg);--rv-pressed-bg:#c9ded8;--rv-pressed-border:#6fb286;--rv-pressed-fg:var(--fg-strong);--rv-focus:var(--link);--rv-backdrop:rgba(12,19,36,.45);--rv-pane-hi:#142042;--rv-pane-lo:#070b18;--rv-pane-label-bg:rgba(7,11,24,.85);--rv-stage-fg:#aebbd4;--rv-grid-dot:rgba(127,139,166,.2);--rv-media-bg:#0b1020;--rv-scrollbar-thumb:#b3bed3;--rv-scrollbar-thumb-hover:#8e9bb5;--rv-scrollbar-track:transparent;--rv-separator:#c9d6ec;--rv-separator-hover:#5b93cf;--rv-tick-inspected:#1a6fc0;--rv-tick-scratch:#c25e00}
 :root{font-family:var(--font-sans);color:var(--fg);background:var(--bg);font-size:13px;color-scheme:dark;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{color:inherit;background:var(--rv-control);border:1px solid var(--border-strong);border-radius:6px;padding:7px 10px;cursor:pointer}button:hover{background:var(--rv-control-hover)}button:disabled{opacity:.45;cursor:default}button[aria-pressed=true]{background:var(--rv-pressed-bg);border-color:var(--rv-pressed-border);color:var(--rv-pressed-fg)}button.primary{background:var(--link);border-color:var(--link);color:var(--btn-fg);font-weight:600}button.outline{background:transparent}button.block{width:100%;margin-top:10px}a{color:var(--link)}input,select,textarea{color:var(--fg);background:var(--rv-field);border:1px solid var(--border-strong);border-radius:6px;padding:8px;max-width:100%}select,input[type=text],textarea{width:100%}textarea{resize:vertical;line-height:1.6}input[type=range]{accent-color:var(--link);padding:0;min-width:0}input[type=checkbox],input[type=radio]{accent-color:var(--link)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--rv-focus);outline-offset:3px}[hidden]{display:none!important}.topbar{min-height:72px;padding:15px 22px;display:flex;align-items:center;gap:25px;border-bottom:1px solid var(--border);flex-wrap:wrap;background:var(--rv-bar)}.brand{font-size:19px;letter-spacing:-.6px;white-space:nowrap}.brand-mark{display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid var(--link);color:var(--link);border-radius:50%;margin-right:9px;font-size:14px}.topbar strong{font-weight:500;font-size:13px}.topbar #revision{margin-left:9px}.top-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}.subtle,.hint{color:var(--fg-muted);font-size:11px}.hint{line-height:1.6}.workspaces{display:flex;gap:10px;padding:0 18px;border-bottom:1px solid var(--border);background:var(--rv-bar)}.workspaces button{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;padding:15px 13px;font-size:12px;letter-spacing:.06em;color:var(--fg-soft)}.workspaces button[aria-pressed=true]{border-bottom-color:var(--link);color:var(--fg-strong);background:transparent}.workspaces button span{font-size:11px;margin-left:8px;letter-spacing:0;color:var(--fg-muted)}.layout{display:grid;grid-template-columns:190px minmax(250px,1fr) 286px;min-height:calc(100vh - 160px)}aside{background:var(--rv-panel);padding:20px 15px}.left-panel{border-right:1px solid var(--border)}.right-panel{border-left:1px solid var(--border)}.eyebrow{font-size:11px;letter-spacing:.08em;color:var(--fg-muted);margin:0 0 11px}.label{display:block;color:var(--fg-muted);font-size:11px;margin:0 0 7px}.space-top{margin-top:15px}.left-panel section{margin-top:26px}.tool{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;gap:5px;border-color:transparent;background:transparent;padding:9px 6px;margin:3px 0}.tool small{font-size:11px;color:var(--fg-muted)}.checkpoint{display:block;width:100%;background:transparent;border:1px solid transparent;text-align:left;margin:4px 0;padding:10px 9px;white-space:normal;line-height:1.5}.checkpoint[aria-current=true]{background:var(--rv-pressed-bg);border-color:var(--rv-pressed-border)}.checkpoint small{display:block;font-size:11px;color:var(--fg-muted);margin-top:3px}.source-link{display:block;font-size:11px;overflow-wrap:anywhere;margin:8px 0}main{min-width:0;display:flex;flex-direction:column;background:var(--bg)}.viewbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px;border-bottom:1px solid var(--border)}.zoom-controls{display:flex;gap:4px;align-items:center}.zoom-controls button{padding:4px 8px;font-size:12px}.zoom-controls output{font:11px var(--font-mono);min-width:39px;text-align:center;color:var(--fg-muted)}.stages{display:flex;gap:10px;padding:12px 12px 0;flex:1;min-height:460px}.stage-pane{position:relative;min-width:0;flex:1;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,var(--rv-pane-hi),var(--rv-pane-lo) 74%)}.pane-label{position:absolute;left:10px;top:10px;z-index:2;background:var(--rv-pane-label-bg);border-radius:4px;padding:4px 7px;color:var(--rv-stage-fg);font-size:11px;pointer-events:none}.viewport{position:relative;overflow:hidden;width:100%;height:100%;min-height:450px;touch-action:none;background-image:radial-gradient(var(--rv-grid-dot) .7px,transparent .7px);background-size:22px 22px}.empty{position:absolute;inset:65px 22px 30px;display:grid;place-items:center;text-align:center;color:var(--rv-stage-fg);font-size:12px;line-height:1.8}.reference-content,#rig-root{position:absolute;transform-origin:0 0}.reference-content img,.reference-content video{display:block;max-width:none}.reference-content svg{display:block;max-width:none}.reference-content video{object-fit:contain}.stage-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:11px 16px;color:var(--fg-muted);font-size:11px}.transport{display:flex;align-items:center;gap:11px;padding:13px;border-top:1px solid var(--border);background:var(--rv-panel)}.transport select{width:auto;max-width:150px;font-size:11px}.transport input{flex:1}.transport output{font:11px var(--font-mono);white-space:nowrap;color:var(--fg-muted)}.sound-panel,.angle-panel{padding:15px;border-top:1px solid var(--border);background:var(--rv-panel)}.row{display:flex;align-items:center;gap:11px;flex-wrap:wrap}.row .eyebrow{margin:0}.sound-panel .row{font-size:11px;margin-bottom:9px}.sound-panel input[type=range]{flex:1;max-width:160px}.cue{display:flex;gap:9px;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding:9px 0;font-size:11px;flex-wrap:wrap}.cue button{padding:4px 7px;font-size:11px}.angle-panel{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:11px}.angle-panel select{width:auto;max-width:150px}.angle-panel .hint{width:100%;margin:0}.angle-panel input{flex:1}.divider{height:1px;background:var(--border-strong);margin:22px 0}h1{font-size:15px;font-weight:500;line-height:1.6;margin:0 0 7px}.outcome{border:0;padding:0;margin:18px 0 0;display:flex;gap:11px;flex-wrap:wrap}.outcome legend{font-size:11px;color:var(--fg-muted);margin-bottom:8px;padding:0}.outcome label{display:flex;align-items:center;gap:3px;font-size:11px}.proposal-item{border-top:1px solid var(--border);padding:11px 0;margin-top:12px;font-size:11px;overflow-wrap:anywhere}.proposal-item strong{display:block;font-weight:500;margin-bottom:5px}.proposal-item button{font-size:11px;padding:3px 6px;margin-top:7px}footer{display:flex;justify-content:space-between;align-items:center;gap:6px 15px;flex-wrap:nowrap;height:40px;box-sizing:border-box;overflow:hidden;padding:0 18px;border-top:1px solid var(--border);background:var(--footer-bg);font-size:11px;color:var(--fg-soft)}.error{color:var(--fail)!important}.dirty{color:var(--warn)!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 @media(min-width:1500px){.layout{grid-template-columns:218px minmax(250px,1fr) 310px}.stages{min-height:600px}}
 @media(max-width:1000px){.layout{grid-template-columns:158px minmax(250px,1fr) 250px}aside{padding:17px 12px}.topbar{gap:14px}.topbar #revision{display:block;margin-left:0}.stages{min-height:400px}.viewport{min-height:400px}.workspaces span{display:none}}
@@ -80,7 +80,12 @@ main{min-height:0;overflow:hidden;display:flex;flex-direction:column}
 #stage-layout:has(>.stage-pane[hidden]){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 
 /* Slot explorer shares the stage row; bottom Inspector remains in the main column. */
-.layout{grid-template-columns:260px minmax(0,1fr)!important}.parts-explorer{display:block;grid-template-columns:none;gap:normal;min-width:0;min-height:0;overflow:auto;border-left:1px solid var(--border);background:var(--rv-panel);padding:12px;overscroll-behavior:contain}.parts-explorer h2{font-size:12px;margin:0 0 10px}.parts-explorer>label{display:block;font-size:11px;margin-top:12px}.parts-explorer input[type=search]{width:100%;min-width:0}.parts-explorer .part-solo{display:flex;gap:6px;align-items:center}.parts-explorer ul{list-style:none;margin:8px 0;padding:0;display:grid;gap:4px}.parts-explorer li{min-width:0}.parts-explorer li button{display:block;width:100%;text-align:left;overflow-wrap:anywhere;font-size:11px}.parts-explorer button[aria-pressed=true]{background:var(--rv-pressed-bg);border-color:var(--rv-pressed-border)}.parts-explorer h2,#selected-part h3{font-weight:600}#selected-part{margin-bottom:12px}#selected-part h3{margin:0 0 8px;overflow-wrap:anywhere}#selected-part p{overflow-wrap:anywhere}
+.layout{grid-template-columns:260px minmax(0,1fr)!important}.parts-explorer{display:block;grid-template-columns:none;gap:normal;min-width:0;min-height:0;overflow:auto;border-left:1px solid var(--border);background:var(--rv-panel);padding:12px;overscroll-behavior:contain}.parts-explorer h2{font-size:12px;margin:0 0 10px}.parts-explorer>label{display:block;font-size:11px;margin-top:12px}.parts-explorer input[type=search]{width:100%;min-width:0}.parts-explorer .part-solo{display:flex;gap:6px;align-items:center}.parts-explorer ul{list-style:none;margin:8px 0;padding:0;display:grid;gap:4px}.parts-explorer li{min-width:0}.parts-explorer li button{display:flex;align-items:center;gap:6px;width:100%;text-align:left;overflow-wrap:anywhere;font-size:11px}
+/* A slot's thumbnail: its declared page region in a 24px box, or the type icon when it has none. */
+.part-thumb{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;overflow:hidden;border-radius:3px}
+.part-thumb canvas{display:block;width:24px;height:24px}
+.part-thumb[data-thumbnail=image]{background:var(--rv-field)}
+.part-label{min-width:0;flex:1 1 auto}.parts-explorer button[aria-pressed=true]{background:var(--rv-pressed-bg);border-color:var(--rv-pressed-border)}.parts-explorer h2,#selected-part h3{font-weight:600}#selected-part{margin-bottom:12px}#selected-part h3{margin:0 0 8px;overflow-wrap:anywhere}#selected-part p{overflow-wrap:anywhere}
 @media(max-width:1050px){.layout{grid-template-columns:200px minmax(0,1fr)!important}.parts-explorer{padding:8px}}
 @media(max-width:700px){.layout{grid-template-columns:minmax(0,1fr)!important}.left-panel{display:none!important}}
 @media(max-width:460px){.layout{grid-template-columns:minmax(0,1fr)!important}.parts-explorer{padding:6px}.parts-explorer li button{padding:6px}.parts-explorer>.hint{font-size:10px}}
@@ -165,7 +170,9 @@ footer.status-bar{flex-wrap:nowrap}
 .status-source{display:flex;align-items:center;gap:12px;margin-left:auto;flex:none;white-space:nowrap}
 .view-region{position:relative}
 .view-region>summary{cursor:pointer}
-.view-region-body{position:absolute;right:0;bottom:calc(100% + 10px);width:min(520px,90vw);max-height:60dvh;overflow:auto;padding:10px;z-index:10;background:var(--rv-panel);border:1px solid var(--border);border-radius:7px}
+/* A popover above the 40px footer, clamped to the viewport: fixed so the footer's overflow never clips it
+   and opening it never scrolls the page; its own body scrolls. */
+.view-region-body{position:fixed;right:8px;bottom:calc(40px + 6px);width:min(520px,calc(100vw - 16px));max-width:calc(100vw - 16px);max-height:calc(100dvh - 40px - 16px);box-sizing:border-box;overflow:auto;overscroll-behavior:contain;padding:10px;z-index:10;background:var(--rv-panel);border:1px solid var(--border);border-radius:7px}
 .view-region-body .numeric-view{margin:8px 0}
 
 
@@ -179,11 +186,18 @@ footer.status-bar{flex-wrap:nowrap}
 /* The left column's fixed header row: title and search never scroll and nothing sits above them. */
 .left-header{flex:none;padding:8px 10px;border-bottom:1px solid var(--border);background:var(--rv-panel)}
 .left-header h2{font-size:12px;font-weight:600;margin:0 0 6px}
-.left-header label{display:block;font-size:11px;margin:0 0 4px}
 .left-header input[type=search]{width:100%;min-width:0}
+/* Parts header is one row: the title left, the search filling the rest. */
+.parts-header{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px}
+.parts-header h2{flex:none;margin:0}
+.parts-header input[type=search]{flex:1 1 auto;width:auto;min-width:0}
 .workspace-sources{padding-top:0}
 .workspace-sources>.package-context{padding-top:10px}
 .workspace-settings>.sticky-header{margin:-10px -10px 8px;padding:10px 10px 6px}
+.workspace-settings[data-collapsed=true]>.sticky-header{margin-bottom:-10px}
+.settings-toggle{display:flex;align-items:center;gap:6px;width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
+.settings-toggle::before{content:'▸';flex:none;color:var(--fg-muted)}
+.settings-toggle[aria-expanded=true]::before{content:'▾'}
 .workspace-drawer-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;font-size:12px;font-weight:600}
 
 /* One thin scrollbar for every scrolling region, from the theme tokens: the standard properties for
@@ -213,3 +227,36 @@ footer.status-bar{flex-wrap:nowrap}
 .review-dialog .review-summary>label{display:block;font-size:11px;margin:10px 0 5px}
 .review-dialog .report-panel{padding:10px 0}
 @media(max-width:540px){.review-dialog-header .hint{display:none}}
+:root{--rv-mesh-region:#ff7ae0;--rv-mesh-region-fill:rgba(255,122,224,.12);--rv-mesh-handle:#ffffff;--rv-bust-r:#00e5ff;--rv-bust-r-fill:rgba(0,229,255,.13);--rv-bust-l:#52ff88;--rv-bust-l-fill:rgba(82,255,136,.13);--rv-bust-overlap:#ff5252;--rv-bust-overlap-fill:rgba(255,82,82,.13);--rv-bust-handle:#ffffff;--rv-bust-ink:#111318;--rv-bust-label-bg:rgba(12,14,18,.82);--rv-bust-flash:#ffcc00;--rv-landmark:#ffd34d;--rv-landmark-fill:#ffd34d;--rv-landmark-ink:#111318}
+:root[data-theme=light]{--rv-mesh-region:#c2189b;--rv-mesh-region-fill:rgba(194,24,155,.12);--rv-mesh-handle:#ffffff;--rv-bust-r:#00e5ff;--rv-bust-r-fill:rgba(0,229,255,.13);--rv-bust-l:#52ff88;--rv-bust-l-fill:rgba(82,255,136,.13);--rv-bust-overlap:#ff5252;--rv-bust-overlap-fill:rgba(255,82,82,.13);--rv-bust-handle:#ffffff;--rv-bust-ink:#111318;--rv-bust-label-bg:rgba(12,14,18,.82);--rv-bust-flash:#ffcc00;--rv-landmark:#ffd34d;--rv-landmark-fill:#ffd34d;--rv-landmark-ink:#111318}
+.view-tools{display:flex;gap:4px;flex:none}.view-tool{padding:5px 9px;font-size:11px;white-space:nowrap}
+.chest-editor-bar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:6px 10px;border-bottom:1px solid var(--border);background:var(--rv-bar);font-size:11px}.chest-editor-bar[hidden]{display:none}.chest-editor-bar input[type=range]{width:84px}.chest-editor-bar input[type=text]{width:104px;padding:3px 5px;font-size:11px}.chest-editor-bar output{min-width:2.6em;font:10px/1 var(--font-mono);color:var(--fg)}.chest-editor-bar [data-landmark][aria-pressed=true]{outline:2px solid var(--rv-landmark);outline-offset:1px}#lm-derived{flex:1 1 100%;order:9;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:10px/1.4 var(--font-mono)}#lm-derived.error{color:var(--fail)}.chest-editor-bar .bust-group{display:flex;align-items:center;gap:6px;padding-left:10px;border-left:1px solid var(--border)}.chest-editor-bar .bust-group:first-child{padding-left:0;border-left:0}.chest-editor-bar label{display:flex;align-items:center;gap:4px;color:var(--fg-muted)}.chest-editor-bar input[type=number]{width:58px;padding:3px 5px;font-size:11px}.chest-editor-bar button{padding:4px 8px;font-size:11px}.chest-editor-bar button[aria-disabled=true]{opacity:.6}.bust-tag{font-weight:700}.bust-tag-r{color:var(--rv-bust-r)}.bust-tag-l{color:var(--rv-bust-l)}#handoff-line{flex:1 1 100%;order:10;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:10px/1.4 var(--font-mono)}#chest-editor-status{flex:1 1 220px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chest-editor-bar{position:relative}.rebuild-log{position:absolute;top:100%;left:10px;right:10px;z-index:6;margin:4px 0 0;max-height:7.5em;overflow:auto;padding:5px 8px;font:10px/1.5 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere;background:var(--code-bg);color:var(--code-fg);border:1px solid var(--border);border-radius:5px}
+:root{--rv-mesh-veil:rgba(8,10,14,.55);--rv-mesh-edge:#69f1ff;--rv-mesh-hull:#ffb020;--rv-mesh-constraint:#ff4fd8;--rv-mesh-removed:#ff5252;--rv-mesh-vertex:#ffffff;--rv-mesh-ink:#111318;--rv-mesh-selected:#ffe14d;--rv-mesh-added:#52ff88;--rv-mesh-hover:#ffffff;--rv-mesh-box:#ffe14d;--rv-mesh-box-fill:rgba(255,225,77,.12)}
+:root[data-theme=light]{--rv-mesh-veil:rgba(245,247,251,.6);--rv-mesh-edge:#69f1ff;--rv-mesh-hull:#ffb020;--rv-mesh-constraint:#ff4fd8;--rv-mesh-removed:#ff5252;--rv-mesh-vertex:#ffffff;--rv-mesh-ink:#111318;--rv-mesh-selected:#ffe14d;--rv-mesh-added:#52ff88;--rv-mesh-hover:#ffffff;--rv-mesh-box:#ffe14d;--rv-mesh-box-fill:rgba(255,225,77,.12)}
+.mesh-editor-bar kbd{margin-left:5px;font-size:10px;opacity:.75}#mesh-editor-status{flex:1 1 260px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+#rig-pane[data-mesh-mode] .viewport{cursor:crosshair}#rig-pane[data-mesh-mode=modify][data-mesh-hover] .viewport{cursor:move}#rig-pane[data-mesh-mode=create] .viewport{cursor:copy}#rig-pane[data-mesh-mode=delete][data-mesh-hover] .viewport{cursor:not-allowed}#rig-pane[data-mesh-mode=edges][data-mesh-hover=vertex] .viewport{cursor:cell}
+#rig-pane[data-chest-hover=move] .viewport{cursor:move}#rig-pane[data-chest-hover=r] .viewport,#rig-pane[data-chest-hover=band] .viewport{cursor:ew-resize}#rig-pane[data-chest-hover=band] .viewport{cursor:ns-resize}
+.environment-panel{padding:15px;border-top:1px solid var(--border);background:var(--rv-panel);font-size:11px}.environment-panel .row{margin-bottom:9px}.environment-panel .row label{display:flex;align-items:center;gap:4px;color:var(--fg-muted)}.environment-panel input[type=range]{flex:1;max-width:180px}.environment-panel input[type=number]{width:72px;padding:4px 6px;font-variant-numeric:tabular-nums}.environment-panel button{padding:4px 9px;font-size:11px}.environment-panel output{font:11px var(--font-mono);color:var(--fg-muted)}.environment-panel .hint{margin:0 0 9px}.environment-readout{display:block;margin:0 0 9px;color:var(--fg-strong)!important;overflow-wrap:anywhere}.physics-constraints summary{cursor:pointer;color:var(--fg-soft)}.physics-table-wrap{overflow-x:auto;max-height:260px;overflow-y:auto}.physics-table{width:100%;border-collapse:collapse;font:11px var(--font-mono);font-variant-numeric:tabular-nums}.physics-table th,.physics-table td{padding:3px 6px;border-top:1px solid var(--border);text-align:right;white-space:nowrap}.physics-table th{color:var(--fg-muted);font-weight:500}.physics-table th:first-child,.physics-table td:first-child,.physics-table th:nth-child(2),.physics-table td:nth-child(2){text-align:left}.physics-table .absent{color:var(--fg-muted)}
+/* Animate · Physics tuning (#103): edits are config patch ops; tokens only. */
+.physics-panel{padding:15px;border-top:1px solid var(--border);background:var(--rv-panel);font-size:11px}.physics-panel .row{margin-bottom:9px}.physics-panel .row label{color:var(--fg-muted)}.physics-panel select{width:auto;max-width:100%;padding:4px 6px;font-size:11px}.physics-panel input[type=number]{width:72px;padding:4px 6px;font-variant-numeric:tabular-nums}.physics-panel button{padding:4px 9px;font-size:11px}.physics-panel .hint{margin:0 0 9px}.physics-panel code{font:11px var(--font-mono)}.physics-table .pending{color:var(--warn)}.physics-table tr.selected th,.physics-table tr.selected td{background:var(--rv-pressed-bg)}.physics-row-pick{border:0;background:transparent;padding:0;font:inherit;color:var(--link);text-align:left}.physics-row-pick[aria-pressed=true]{background:transparent;color:var(--fg-strong);font-weight:600}.physics-row-editor{margin:10px 0;padding:9px 10px;border:1px solid var(--border);border-radius:6px}.physics-editor-title{margin:0 0 8px;overflow-wrap:anywhere}.physics-controls{display:flex;flex-direction:column;gap:6px}.physics-control{display:grid;grid-template-columns:58px minmax(0,1fr) 72px auto;align-items:center;gap:6px;color:var(--fg-muted)}.physics-control.pending span,.physics-toggle.pending{color:var(--warn)}.physics-control output{font:11px var(--font-mono);color:var(--fg-muted)}.physics-toggle{display:inline-flex;align-items:center;gap:4px;margin-right:10px;color:var(--fg-muted)}.physics-locked{margin-top:10px}.physics-locked .eyebrow{margin:0 0 6px}.physics-locked-table td.physics-reason,.physics-locked-table th{white-space:normal;text-align:left}.physics-reason{overflow-wrap:anywhere}.physics-pending-list{margin:0 0 9px;padding-left:18px}.physics-pending-list li{margin:3px 0;overflow-wrap:anywhere}.physics-pending-list li.applied{color:var(--fg-soft)}.physics-pending-list button{margin-left:6px;padding:1px 6px}.physics-readout{display:flex;flex-direction:column;gap:4px}.physics-readout-line{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px;align-items:baseline}.physics-readout-line .eyebrow{margin:0}.physics-readout-line code{overflow-wrap:anywhere;color:var(--fg-strong)}#rig-pane[data-physics-pick=true]{cursor:crosshair}.physics-work{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:12px;align-items:start}.physics-work .physics-row-editor{margin:0}@media (max-width:900px){.physics-work{grid-template-columns:minmax(0,1fr)}}
+
+/* Readings (#108): the block, its worst-frame lines and the two-colour ticks under the transport scrub. */
+.readings-panel{padding:15px;border-top:1px solid var(--border);background:var(--rv-panel);font-size:11px}.readings-panel .row{margin-bottom:9px}.readings-panel .row label{display:flex;align-items:center;gap:4px;color:var(--fg-muted)}.readings-panel .hint{margin:0 0 9px}.readings-panel code{font:11px var(--font-mono)}.readings-panel button{padding:4px 9px;font-size:11px}.readings-pair{flex-wrap:nowrap}.readings-pair label{flex:none;min-width:92px}.readings-pair input[type=text]{flex:1;min-width:0;width:auto;padding:4px 6px;font:11px var(--font-mono)}.readings-worst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.readings-line{display:grid;grid-template-columns:8px minmax(0,1fr);gap:6px;align-items:start}.readings-line .tick-swatch{margin-top:5px}.readings-line code,.readings-go{font:11px var(--font-mono);overflow-wrap:anywhere;text-align:left;color:var(--fg-strong)}.readings-go{border:0;background:transparent;padding:0;cursor:pointer}.readings-go:hover{background:transparent;color:var(--link-hover)}.readings-line.error code{color:var(--fail)}.readings-items{grid-column:2;color:var(--fg-muted)}.readings-items summary{cursor:pointer}.readings-items ul{margin:4px 0 0;padding-left:14px;display:flex;flex-direction:column;gap:3px}.tick-swatch{display:inline-block;width:8px;height:8px;border-radius:2px;vertical-align:baseline}.tick-swatch.inspected{background:var(--rv-tick-inspected)}.tick-swatch.scratch{background:var(--rv-tick-scratch)}
+.transport{position:relative}.transport.has-reading-ticks{padding-bottom:24px}.inspector .transport.has-reading-ticks{padding-bottom:22px}.reading-ticks{position:absolute;height:14px;margin-top:2px;pointer-events:none}.reading-tick{position:absolute;width:3px;height:6px;margin-left:-1px;padding:0;border:0;border-radius:1px;pointer-events:auto;cursor:pointer}.reading-tick.inspected{top:0;background:var(--rv-tick-inspected)}.reading-tick.scratch{top:8px;background:var(--rv-tick-scratch)}.reading-tick:hover{background:var(--fg-strong)}.reading-tick:focus-visible{outline-offset:1px}
+.idle-panel .idle-add-row input[type=text]{flex:1;min-width:90px;width:auto;padding:4px 6px;font:11px var(--font-mono)}.idle-preview-label{margin-left:auto;padding:2px 7px;border:1px solid var(--warn);border-radius:4px;color:var(--warn);font-size:11px;overflow-wrap:anywhere}.idle-preview-label.refused{border-style:dashed}.idle-preview-toggle{display:inline-flex;align-items:center;gap:4px;color:var(--fg-muted)}.idle-table tr.pending td,.idle-panel p.pending{color:var(--warn)}.idle-blink{margin:10px 0}.idle-blink .eyebrow{margin:0 0 6px}.idle-period select{width:100%;min-width:0}.idle-precheck{display:flex;flex-direction:column;gap:4px;margin-bottom:9px}.idle-precheck code{font:11px var(--font-mono);overflow-wrap:anywhere}.idle-precheck .idle-note{color:var(--fg-muted)}.transport.has-idle-blink{padding-top:22px}.idle-blink-strip{position:absolute;height:12px;pointer-events:none}.idle-blink-marker{position:absolute;top:0;width:14px;height:12px;margin-left:-7px;padding:0;border:0;background:transparent;color:var(--link);font-size:10px;line-height:12px;pointer-events:auto;cursor:ew-resize;touch-action:none}.idle-blink-marker.pending{color:var(--warn)}.idle-handles{position:absolute;inset:0;pointer-events:none;z-index:3}.idle-handle{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;padding:0;border:2px solid var(--rv-tick-scratch);border-radius:50%;background:var(--rv-pane-label-bg);pointer-events:auto;cursor:ns-resize;touch-action:none}.idle-handle span{position:absolute;left:16px;top:-3px;white-space:nowrap;padding:1px 4px;border-radius:3px;background:var(--rv-pane-label-bg);color:var(--rv-stage-fg);font:10px var(--font-mono);pointer-events:none}
+.mesh-params{margin:0 0 10px}.mesh-param{grid-template-columns:78px minmax(0,1fr) 72px 18px auto}.mesh-param select{max-width:140px}.mesh-param-toggle{margin-top:2px}.mesh-tools{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.mesh-tools .eyebrow{margin:0 6px 0 0}.mesh-tools button[aria-pressed=true]{background:var(--rv-pressed-bg);border-color:var(--rv-pressed-border);color:var(--rv-pressed-fg)}.mesh-regions{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}.mesh-region{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;padding:6px 8px;border:1px solid var(--border);border-radius:6px}.mesh-region.selected{border-color:var(--rv-mesh-region)}.mesh-region legend{padding:0 4px;font:600 11px var(--font-mono);color:var(--rv-mesh-region)}.mesh-region label{display:flex;align-items:center;gap:4px;color:var(--fg-muted)}.mesh-region input[type=number]{width:62px}.mesh-region input[type=text]{width:96px;padding:3px 5px;font-size:11px}.mesh-segments li{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.mesh-ribs{display:inline-flex;align-items:center;gap:4px;color:var(--fg-muted)}.mesh-ribs input{width:64px}.mesh-precheck{margin:0 0 9px;padding-left:18px}.mesh-precheck li{color:var(--fail);overflow-wrap:anywhere}#mesh-counts code.error,#mesh-status.error{color:var(--fail)}
+/* Inspector block row (#124): sticky at the top of each section's scroll (the section pads 12px 15px), one line that scrolls sideways when narrow. */
+.block-row{position:sticky;top:-12px;z-index:3;display:flex;flex-wrap:nowrap;gap:4px;margin:-12px -15px 10px;padding:6px 15px;overflow-x:auto;overscroll-behavior-x:contain;background:var(--rv-panel);border-bottom:1px solid var(--border)}.block-row button{flex:none;padding:3px 9px;font-size:11px;white-space:nowrap;color:var(--fg-muted);background:transparent;border-color:transparent}.block-row button:hover{color:var(--fg-strong);background:var(--rv-control-hover)}.block-row button[aria-current=true]{color:var(--rv-pressed-fg);background:var(--rv-pressed-bg);border-color:var(--rv-pressed-border)}.block-row button:focus-visible{outline:2px solid var(--rv-focus);outline-offset:-2px}
+/* Setup · Weights (#107): the weight ramp (low → half → high) and max influence's bone colours. Drawn on the stage, which stays dark, so both schemes carry the same values. */
+:root{--rv-weight-0:#3d1a78;--rv-weight-half:#e0573a;--rv-weight-1:#fcef6c;--rv-weight-bone-1:#00e5ff;--rv-weight-bone-2:#ff7ae0;--rv-weight-bone-3:#52ff88;--rv-weight-bone-4:#ffb020;--rv-weight-bone-5:#a98bff;--rv-weight-bone-6:#ff5252}
+:root[data-theme=light]{--rv-weight-0:#3d1a78;--rv-weight-half:#e0573a;--rv-weight-1:#fcef6c;--rv-weight-bone-1:#00e5ff;--rv-weight-bone-2:#ff7ae0;--rv-weight-bone-3:#52ff88;--rv-weight-bone-4:#ffb020;--rv-weight-bone-5:#a98bff;--rv-weight-bone-6:#ff5252}
+.weights-controls{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}.weights-controls label{display:inline-flex;align-items:center;gap:5px}.weights-controls select{width:auto;max-width:220px}#weights-state.error{color:var(--fail)}.weights-legend{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 8px;font:11px var(--font-mono);color:var(--fg-muted)}.weights-ramp{display:inline-block;width:140px;height:10px;border-radius:3px;background:linear-gradient(90deg,var(--rv-weight-0),var(--rv-weight-half),var(--rv-weight-1))}.weights-swatch{display:inline-flex;align-items:center;gap:5px}.weights-swatch i{display:inline-block;width:10px;height:10px;border-radius:50%}
+:root{--rv-bone-line:#ffe26b;--rv-field-still:#69f1ff;--rv-field-inward:rgba(255,122,224,.28);--rv-field-inward-line:#ff7ae0;--rv-field-outward:rgba(105,241,255,.24);--rv-field-outward-line:#69f1ff;--rv-field-rest:#ffe26b;--rv-field-handle-bg:rgba(12,14,18,.82);--rv-field-ink:#f4f6fa;--rv-bone-origin:#ffe26b;--rv-bone-point:#69f1ff;--rv-bone-tip:#ff7ae0;--rv-bone-pending:#ffb020;--rv-bone-selected:#ffffff;--rv-bone-ink:#111318;--rv-bone-label-bg:rgba(12,14,18,.82)}
+:root[data-theme=light]{--rv-bone-line:#ffe26b;--rv-field-still:#69f1ff;--rv-field-inward:rgba(255,122,224,.28);--rv-field-inward-line:#ff7ae0;--rv-field-outward:rgba(105,241,255,.24);--rv-field-outward-line:#69f1ff;--rv-field-rest:#ffe26b;--rv-field-handle-bg:rgba(12,14,18,.82);--rv-field-ink:#f4f6fa;--rv-bone-origin:#ffe26b;--rv-bone-point:#69f1ff;--rv-bone-tip:#ff7ae0;--rv-bone-pending:#ffb020;--rv-bone-selected:#ffffff;--rv-bone-ink:#111318;--rv-bone-label-bg:rgba(12,14,18,.82)}
+.bones-controls{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}.bones-controls button[aria-pressed=true]{background:var(--rv-pressed-bg);border-color:var(--rv-pressed-border);color:var(--rv-pressed-fg)}.bones-controls select{max-width:260px}#bones-panel-state.error{color:var(--fail)}#bones-status.error{color:var(--fail)!important}.bones-anchor-editor{margin:0 0 10px;padding:9px 10px;border:1px solid var(--border);border-radius:6px}.bones-anchor{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 64px 64px auto;align-items:center;gap:6px;margin:3px 0;color:var(--fg-muted)}.bones-anchor code{overflow-wrap:anywhere}.bones-anchor.pending span,.bones-anchor.pending output{color:var(--warn)}.bones-anchor output{font:11px var(--font-mono)}.bones-lines{display:flex;flex-direction:column;gap:3px;margin-top:8px}.bones-lines .eyebrow{margin:0 0 2px}.bones-lines code{overflow-wrap:anywhere;color:var(--fg-strong)}.bones-lines code.lint{color:var(--warn)}.bones-lines code.error{color:var(--fail)}.bones-coverage summary{cursor:pointer;font:11px var(--font-mono);color:var(--fg-muted)}.bones-coverage code{display:block;margin:2px 0 2px 12px;color:var(--fg-muted)}#rig-pane[data-bones-hover=move]{cursor:move}
+
+.rig-fields-group{margin:8px 0 10px}.rig-fields-group .eyebrow{margin:0 0 5px}.rig-fields-group .row{flex-wrap:wrap;gap:6px;align-items:center}.rig-fields-group select{min-width:0;max-width:100%}.rig-fields-group input[type=number]{width:76px}.rig-fields-group .physics-control{display:grid;grid-template-columns:minmax(64px,auto) minmax(0,1fr) 76px auto;gap:6px;align-items:center}
+.rig-fields-stage{position:absolute;inset:0;pointer-events:none;z-index:3}.rig-fields-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.rig-fields-still-line{stroke:var(--rv-field-still);stroke-width:2;stroke-dasharray:6 3}.rig-fields-arc{stroke-width:1.5}.rig-fields-arc.inward{fill:var(--rv-field-inward);stroke:var(--rv-field-inward-line)}.rig-fields-arc.outward{fill:var(--rv-field-outward);stroke:var(--rv-field-outward-line)}.rig-fields-rest{stroke:var(--rv-field-rest);stroke-width:1.5;stroke-dasharray:3 3}
+.rig-fields-handle{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;padding:0;border:2px solid var(--rv-field-still);border-radius:50%;background:var(--rv-field-handle-bg);pointer-events:auto;cursor:grab;touch-action:none}.rig-fields-handle.still{cursor:ns-resize}.rig-fields-handle.inward{border-color:var(--rv-field-inward-line)}.rig-fields-handle.outward{border-color:var(--rv-field-outward-line)}.rig-fields-handle span{position:absolute;left:16px;top:-3px;white-space:nowrap;padding:1px 4px;border-radius:3px;background:var(--rv-field-handle-bg);color:var(--rv-field-ink);font:10px var(--font-mono);pointer-events:none}
+.requirements-fields .row{margin-bottom:6px}.requirements-panel select{width:auto;max-width:170px;padding:4px 6px;font-size:11px}.requirements-panel input[type=text]{flex:1;min-width:0;width:auto;padding:4px 6px;font:11px var(--font-mono)}.requirements-panel input[type=number]{width:70px;padding:4px 6px;font-size:11px}.requirements-list{list-style:none;margin:0 0 9px;padding:0;display:flex;flex-direction:column;gap:8px}.requirements-item{border-left:2px solid var(--border-strong);padding-left:8px;display:flex;flex-direction:column;gap:4px}.requirements-item.pass{border-left-color:var(--pass,var(--link))}.requirements-item.fail{border-left-color:var(--fail)}.requirements-item code{font:11px var(--font-mono);overflow-wrap:anywhere}.requirements-bar input[type=range]{flex:1;min-width:90px}.requirements-bar output{font:11px var(--font-mono);color:var(--fg-strong)}.requirements-refusals{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:3px}.requirements-refusals code{font:11px var(--font-mono);color:var(--fail);overflow-wrap:anywhere}
+.retarget-chains{display:flex;flex-direction:column;gap:5px;margin-bottom:9px}.retarget-chain{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.retarget-chain.off{opacity:.55}.retarget-chain label{min-width:70px}.retarget-chain code,.retarget-translate span{font:11px var(--font-mono);color:var(--fg-muted)}.retarget-translate{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.retarget-json textarea{width:100%;font:11px var(--font-mono)}.retarget-panel .row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.retarget-log{max-height:160px;overflow:auto;font:10px var(--font-mono);white-space:pre-wrap;color:var(--fg-muted)}

package/web/weights-view.ts

@@ -0,0 +1,159 @@
+/**
+ * Setup · Weights (#107): a watch layer over the selected slot's setup-pose mesh. Pick a bone and every vertex is
+ * coloured by that bone's stored weight on the theme's ramp (0 → 1), or switch to max influence and every vertex takes
+ * its dominant bone's colour; hovering a vertex reads its stored value. Weights come from the compiled model document
+ * (`src/weights.ts` over the shared reader `src/setup-mesh.ts`); vertex positions come from the published player's
+ * setup pose (`web/setup-pose.ts`, a second `RigPlayer` over the same assets that never plays — the same placement
+ * Edit Mesh uses). Nothing is edited, applied, recorded or sent.
+ */
+import type {ModelAssets,RenderMode} from '@rig-c/play';
+import {placeSetupMesh} from '../src/setup-mesh.ts';
+import {WEIGHTS_SELECT_SLOT,dominantInfluence,meanColor,meshWeights,rampColor,weightOf,weightText,weightsModel,type MeshWeights} from '../src/weights.ts';
+import {modelBoneNames,readSetupPose} from './setup-pose.ts';
+import type {OverlayPoint,OverlayProject,OverlayWeights} from './rig-overlays.ts';
+
+export type WeightsMode='bone'|'max';
+/** Ramp stops, low → high, and the categorical bone colours of max influence: theme token names. */
+export const weightRampTokens=['--rv-weight-0','--rv-weight-half','--rv-weight-1'] as const;
+export const weightBoneTokens=['--rv-weight-bone-1','--rv-weight-bone-2','--rv-weight-bone-3','--rv-weight-bone-4','--rv-weight-bone-5','--rv-weight-bone-6'] as const;
+export const WEIGHTS_SOURCE_MISMATCH='WEIGHTS_SOURCE_MISMATCH';
+export const WEIGHTS_RIG_UNAVAILABLE='WEIGHTS_RIG_UNAVAILABLE';
+
+/** The selected slot's mesh at the setup pose: world vertices (one per stored vertex), triangles and identity. */
+export interface SetupMesh {slot:string;vertices:number[];triangles:number[];identity:{skin:string;attachment:string}|null}
+export type SetupMeshResult={ok:true;mesh:SetupMesh;weights:MeshWeights}|{ok:false;code:string};
+/**
+ * The slot's attachment is the one the setup pose resolves (`readSetupPose`); its stored vertices are placed through
+ * the setup-pose bones (`placeSetupMesh`). The stage player is not touched.
+ */
+export function setupPoseMesh(assets:ModelAssets,model:unknown,slot:string,root:HTMLElement,mode:RenderMode='dom'):SetupMeshResult {
+ const available=weightsModel(model);if(!available.ok)return available;
+ try{
+  const pose=readSetupPose(assets,slot,modelBoneNames(model),root,mode);
+  const result=meshWeights(model,slot,pose.identity);if(!result.ok)return result;
+  const vertices=placeSetupMesh(result.weights,pose.world);if(!vertices)return {ok:false,code:`${WEIGHTS_SOURCE_MISMATCH}: ${slot} has a non-finite setup-pose vertex`};
+  return {ok:true,weights:result.weights,mesh:{slot,vertices,triangles:result.weights.triangles,identity:pose.identity}};
+ }catch(error){return {ok:false,code:`${WEIGHTS_RIG_UNAVAILABLE}: ${error instanceof Error?error.message:String(error)}`};}
+}
+
+export interface WeightsOverlayInput {
+ weights:MeshWeights;mesh:SetupMesh;mode:WeightsMode;bone:string|null;hover:number|null;
+ /** Token values: the ramp stops low → high, the bone colours, and the overlay's own colours. */
+ ramp:readonly string[];boneColors:readonly string[];colors:OverlayWeights['colors'];
+}
+/** The overlay drawing: one entry per setup-pose vertex, its value and colour read from the stored weights. */
+export function weightsOverlay(input:WeightsOverlayInput):{ok:true;overlay:OverlayWeights}|{ok:false;code:string} {
+ const {weights,mesh,mode,bone}=input,count=weights.vertices.length;
+ if(mesh.vertices.length!==count*2||mesh.triangles.length%3||mesh.triangles.some(i=>!Number.isSafeInteger(i)||i<0||i>=count))return {ok:false,code:`${WEIGHTS_SOURCE_MISMATCH}: ${mesh.slot} setup pose draws ${mesh.vertices.length/2} vertices; the model attachment stores ${count}`};
+ if(mode==='bone'&&!bone)return {ok:false,code:'WEIGHTS_SELECT_BONE: pick a bone'};
+ const vertices:OverlayWeights['vertices'][number][]=[];
+ for(let i=0;i<count;i++){
+  const influences=weights.vertices[i]!,at:OverlayPoint={x:mesh.vertices[i*2]!,y:mesh.vertices[i*2+1]!};
+  if(mode==='bone'){
+   const value=weightOf(influences,bone!),color=rampColor(input.ramp,value);if(!color)return {ok:false,code:'WEIGHTS_RAMP_UNAVAILABLE: the weight ramp tokens are not hex colours'};
+   vertices.push({at,index:i,value,color,label:`#${i} ${bone} ${weightText(value)}`});
+  }else{
+   const top=dominantInfluence(influences)!,color=input.boneColors[weights.bones.indexOf(top.bone)%input.boneColors.length];
+   if(!color)return {ok:false,code:'WEIGHTS_RAMP_UNAVAILABLE: no bone colour tokens'};
+   vertices.push({at,index:i,value:top.weight,color,label:`#${i} max ${top.bone} ${weightText(top.weight)}`});
+  }
+ }
+ const triangles:OverlayWeights['triangles'][number][]=[];
+ for(let t=0;t<mesh.triangles.length;t+=3){const points=[mesh.triangles[t]!,mesh.triangles[t+1]!,mesh.triangles[t+2]!] as const;triangles.push({points,color:meanColor(points.map(i=>vertices[i]!.color))??vertices[points[0]]!.color});}
+ const hover=input.hover!==null&&input.hover>=0&&input.hover<count?input.hover:null;
+ return {ok:true,overlay:{triangles,vertices,hover,colors:input.colors}};
+}
+/** Nearest projected vertex within `radius` canvas px, or null. */
+export function hitVertex(overlay:OverlayWeights,project:OverlayProject,at:OverlayPoint,radius=10):number|null {
+ let best:number|null=null,distance=radius;
+ overlay.vertices.forEach((v,i)=>{const p=project(v.at.x,v.at.y),d=Math.hypot(p.x-at.x,p.y-at.y);if(Number.isFinite(d)&&d<=distance){distance=d;best=i;}});
+ return best;
+}
+
+export interface WeightsViewHost {
+ pane:HTMLElement;canvas:HTMLElement;
+ project:()=>OverlayProject|null;
+ inspector:()=>string|undefined;
+ slot:()=>string|null;
+ /** The hash-verified compiled model document the stage draws (null: the package has none; undefined: still loading). */
+ model:()=>unknown;
+ /** The selected slot's weights and setup-pose mesh (null: no rig loaded). */
+ setup:(slot:string)=>SetupMeshResult|null;
+ changed:()=>void;
+ token:(name:string)=>string;
+}
+export interface WeightsView {overlay:()=>OverlayWeights|null;refresh:()=>void;sync:()=>void;dispose:()=>void;state:()=>{show:boolean;mode:WeightsMode;bone:string|null;code:string|null;hover:number|null}}
+
+export function bindWeightsView(host:WeightsViewHost):WeightsView {
+ const node=<T extends HTMLElement>(id:string)=>document.getElementById(id) as T;
+ const show=node<HTMLButtonElement>('weights-show'),modeSelect=node<HTMLSelectElement>('weights-mode'),boneSelect=node<HTMLSelectElement>('weights-bone');
+ const stateText=node<HTMLElement>('weights-state'),legend=node<HTMLElement>('weights-legend'),readout=node<HTMLElement>('weights-hover');
+ let on=false,hover:number|null=null,weights:MeshWeights|null=null,mesh:SetupMesh|null=null,loadCode:string|null=null,code:string|null=null,current:OverlayWeights|null=null,loaded:{slot:string|null;model:unknown}|null=null;
+ const mode=():WeightsMode=>modeSelect.value==='max'?'max':'bone';
+ const option=(value:string,label=value)=>{const o=document.createElement('option');o.value=value;o.textContent=label;return o;};
+ const allBones=():string[]=>modelBoneNames(host.model());
+ /** Re-read the slot's weights and setup mesh when the slot or the model changed. */
+ function load():void {
+  const slot=host.slot(),model=host.model();
+  if(loaded&&loaded.slot===slot&&loaded.model===model)return;loaded={slot,model};weights=null;mesh=null;hover=null;let code:string|null=null;
+  const done=()=>{loadCode=code;fillBones();};
+  if(model===undefined){code=`${WEIGHTS_RIG_UNAVAILABLE}: the compiled model document is still loading`;loaded=null;done();return;}
+  if(model===null){const result=meshWeights(model,slot,null);code=result.ok?null:result.code;done();return;}
+  if(!slot){code=`${WEIGHTS_SELECT_SLOT}: select one mesh slot in the parts list`;done();return;}
+  const setup=host.setup(slot);
+  if(!setup){code=`${WEIGHTS_RIG_UNAVAILABLE}: no rig loaded`;loaded=null;done();return;}
+  if(!setup.ok){code=setup.code;done();return;}
+  weights=setup.weights;mesh=setup.mesh;done();
+ }
+ function fillBones():void {
+  const before=boneSelect.value,influencing=weights?.bones??[],rest=allBones().filter(b=>!influencing.includes(b));
+  boneSelect.replaceChildren();
+  if(influencing.length){const g=document.createElement('optgroup');g.label=`Influencing ${weights!.slot}`;for(const b of influencing)g.append(option(b));boneSelect.append(g);}
+  if(rest.length){const g=document.createElement('optgroup');g.label='Other bones';for(const b of rest)g.append(option(b));boneSelect.append(g);}
+  const names=[...influencing,...rest];boneSelect.value=names.includes(before)?before:(influencing[0]??names[0]??'');
+  boneSelect.disabled=!names.length;
+ }
+ function build():void {
+  current=null;code=loadCode;
+  if(!on||!weights||!mesh){render();return;}
+  const token=host.token,result=weightsOverlay({weights,mesh,mode:mode(),bone:boneSelect.value||null,hover,ramp:weightRampTokens.map(token),boneColors:weightBoneTokens.map(token),
+   colors:{veil:token('--rv-mesh-veil'),edge:token('--rv-mesh-ink'),ink:token('--rv-mesh-ink'),labelBg:token('--rv-bust-label-bg'),hover:token('--rv-mesh-hover')}});
+  if(result.ok)current=result.overlay;else code=result.code;
+  render();
+ }
+ function render():void {
+  show.setAttribute('aria-pressed',String(on));show.textContent=on?'Hide weights':'Show weights';
+  show.disabled=!weights&&!on;boneSelect.disabled=!boneSelect.options.length||mode()==='max';
+  stateText.classList.toggle('error',!!code);
+  if(code)stateText.textContent=code;
+  else if(weights)stateText.textContent=`${weights.slot} / ${weights.skin} / ${weights.attachment}${weights.source.attachment!==weights.attachment||weights.source.slot!==weights.slot?` (linked to ${weights.source.slot} / ${weights.source.attachment})`:''} · ${weights.vertices.length} vertices · ${weights.weighted?`weighted over ${weights.bones.length} bone(s)`:`unweighted: every vertex is ${weights.bones[0]} at 1.0`} · setup pose${on?'':' · Show weights to draw them'}`;
+  else stateText.textContent='';
+  legend.replaceChildren();
+  if(weights&&mode()==='bone'){
+   const bar=document.createElement('span');bar.className='weights-ramp';bar.setAttribute('aria-hidden','true');
+   const low=document.createElement('span'),high=document.createElement('span');low.textContent='0.0';high.textContent=`1.0 · ${boneSelect.value||'no bone'}`;legend.append(low,bar,high);
+  }else if(weights){
+   weights.bones.forEach((b,i)=>{const item=document.createElement('span'),dot=document.createElement('i');item.className='weights-swatch';dot.style.background=`var(${weightBoneTokens[i%weightBoneTokens.length]})`;item.append(dot,b);legend.append(item);});
+  }
+  const h=current&&current.hover!==null?current.vertices[current.hover]:null;
+  readout.textContent=h&&weights?`#${h.index}: ${weights.vertices[h.index]!.map(i=>`${i.bone} ${weightText(i.weight)}`).join(' · ')}`:on&&weights?'Hover a vertex to read its stored weights':'';
+ }
+ const local=(event:PointerEvent)=>{const rect=host.canvas.getBoundingClientRect();return {x:event.clientX-rect.left,y:event.clientY-rect.top};};
+ const move=(event:PointerEvent)=>{
+  if(!on||!current)return;const project=host.project();if(!project)return;
+  const hit=hitVertex(current,project,local(event));if(hit===hover)return;hover=hit;build();host.changed();
+ };
+ const leave=()=>{if(hover===null)return;hover=null;build();host.changed();};
+ host.pane.addEventListener('pointermove',move);host.pane.addEventListener('pointerleave',leave);
+ const toggle=()=>{on=!on;hover=null;load();build();host.changed();};
+ const pick=()=>{hover=null;build();host.changed();};
+ show.addEventListener('click',toggle);modeSelect.addEventListener('change',pick);boneSelect.addEventListener('change',pick);
+ const visible=()=>host.inspector()==='rig';
+ return {
+  overlay:()=>on&&visible()?current:null,
+  refresh(){load();build();if(on)host.changed();},
+  sync(){if(!visible()&&hover!==null){hover=null;build();}},
+  state:()=>({show:on,mode:mode(),bone:boneSelect.value||null,code,hover}),
+  dispose(){host.pane.removeEventListener('pointermove',move);host.pane.removeEventListener('pointerleave',leave);show.removeEventListener('click',toggle);modeSelect.removeEventListener('change',pick);boneSelect.removeEventListener('change',pick);},
+ };
+}