@rig-c/review 0.6.0 → 0.7.1

package/src/server.ts

@@ -6,19 +6,38 @@ import { exportReviewStrip, stripJson } from './strip-export.ts';
 import {assertReviewUnchanged,referenceBinding,selectedReference,safeSelectedReference,serveReference} from './reference.ts';
 import {openGate,staleOpenStatus,accessGate,openNonceGate,stampOpen,type OpenIdentity} from './open-protocol.ts';
 import { readSession, saveSession } from './session.ts';
+import { createRebuilds, RebuildError } from './rebuild.ts';
+import { createReadings } from './readings-run.ts';
+import { ReadingsError } from './readings.ts';
+import { BONES_CHECK_LIMIT, createBonesCheck } from './bones-check.ts';
+import { createRequirementsCheck } from './requirements-run.ts';
+import { REQUIREMENTS_LIMIT, RequirementsError } from './requirements.ts';
+import { homedir } from 'node:os';
+import { join } from 'node:path';
 const headers={ 'X-Content-Type-Options':'nosniff','Cache-Control':'no-store','Content-Security-Policy':"default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' blob: data:; media-src 'self'; connect-src 'self'; font-src 'self'; base-uri 'none'; frame-ancestors 'none'; form-action 'none'",'Referrer-Policy':'no-referrer'};
+/** Request shapes the page or an edit card got wrong: 400. Everything else a refusal names is an outcome (200). */
+const MALFORMED=new Set(['REBUILD_REQUEST_INVALID','EDIT_PATCH_INVALID','EDIT_PATCH_OP_UNKNOWN','EDIT_PATCH_POINTER_INVALID','EDIT_PATCH_CMD_UNKNOWN','EDIT_PATCH_ARG_UNKNOWN','BONES_OP_OUT_OF_SCOPE','RETARGET_REQUEST_INVALID']);
 function json(data:unknown,status=200){return Response.json(data,{status,headers});}
-async function bodyJson(req:Request):Promise<unknown>{
+async function bodyJson(req:Request,limit=1024*1024,what='Session payload exceeds 1 MiB'):Promise<unknown>{
   if(!/^application\/json(?:\s*;|$)/i.test(req.headers.get('content-type')??''))throw new Error('Expected application/json');
-  if(Number(req.headers.get('content-length')??0)>1024*1024)throw new Error('Session payload exceeds 1 MiB');
+  if(Number(req.headers.get('content-length')??0)>limit)throw new Error(what);
   if(!req.body)throw new Error('JSON body required');const reader=req.body.getReader();const chunks:Uint8Array[]=[];let bytes=0;
-  while(true){const {value,done}=await reader.read();if(done)break;bytes+=value.length;if(bytes>1024*1024){await reader.cancel();throw new Error('Session payload exceeds 1 MiB');}chunks.push(value);}
+  while(true){const {value,done}=await reader.read();if(done)break;bytes+=value.length;if(bytes>limit){await reader.cancel();throw new Error(what);}chunks.push(value);}
   const full=new Uint8Array(bytes);let offset=0;for(const chunk of chunks){full.set(chunk,offset);offset+=chunk.length;}return JSON.parse(new TextDecoder().decode(full));
 }
-/** `capability` (open workers and foreground CLI serving) gates every non-GET request; tests may omit it. */
-export async function startServer(p:ReviewPackage,options:{port?:number;stateDir?:string;open?:OpenIdentity;initialAnimation?:string;activity?:()=>void;control?:ControlIdentity;capability?:string}={}){
+/** `capability` (open workers and foreground CLI serving) gates every non-GET request; tests may omit it.
+ * `cwd` is where the producer is looked for after the package's own directories (review's working directory by default). */
+export async function startServer(p:ReviewPackage,options:{port?:number;stateDir?:string;open?:OpenIdentity;initialAnimation?:string;activity?:()=>void;control?:ControlIdentity;capability?:string;cwd?:string}={}){
   const bundle=await buildWeb();
   const unchanged=()=>assertReviewUnchanged(p);
+  const stateDir=options.stateDir??process.env.RIG_REVIEW_STATE_DIR??join(homedir(),'.local','state','rig-c-review'),starts=[p.root,options.cwd??process.cwd()];
+  const rebuilds=createRebuilds(p,{stateDir,starts,unchanged,bones:p.feedbackCatalog.bones});
+  // Readings (#108): rigc render's readings on the inspected build and on the latest scratch build, into scratch.
+  const readings=createReadings(p,{stateDir,starts,unchanged,latest:rebuilds.latest});
+  // Bones check (#109): propose --from-config and compare on a scratch copy of the patched handoff config.
+  const bonesCheck=createBonesCheck(p,{stateDir,starts,unchanged});
+  // Declared requirements (#113): review writes the file into scratch; the installed producer's check measures it.
+  const requirements=createRequirementsCheck(p,{stateDir,starts,unchanged,latest:rebuilds.latest});
   const control=options.control?createControlServer({identity:options.control,sourceHash:p.sourceHash,mode:'single',unchanged,activity:options.activity}):null;
   const handle=async(req:Request,port:number|undefined):Promise<Response>=>{try {
       const url=new URL(req.url);const origin=`http://127.0.0.1:${port}`;
@@ -30,6 +49,28 @@ export async function startServer(p:ReviewPackage,options:{port?:number;stateDir
         if(req.headers.get('origin')!==origin)return json({error:'Same-origin Origin required'},403);
         const input=await bodyJson(req);await unchanged();return json(await saveSession(p,input,options.stateDir));
       }
+    // Apply · Rebuild (#99 regions, #102 {patch}): typed data, never a path; the server runs the installed producer into scratch.
+    if(req.method==='POST'&&url.pathname==='/api/rebuild'){
+      if(req.headers.get('origin')!==origin)return json({error:'Same-origin Origin required'},403);
+      try{const result=await rebuilds.start(await bodyJson(req,64*1024,'REBUILD_BODY_LIMIT: maximum 64 KiB'));return json(result.body,result.status);}
+      // A refusal is an outcome the page shows verbatim (200), so the managed front passes its text through; only a malformed request is a 400.
+      catch(e){if(e instanceof RebuildError)return json({status:'refused',error:e.message,producerLine:null},MALFORMED.has(e.code)?400:200);throw e;}
+    }
+    if(req.method==='POST'&&url.pathname==='/api/bones-check'){
+      if(req.headers.get('origin')!==origin)return json({error:'Same-origin Origin required'},403);
+      try{return json(await bonesCheck.run(await bodyJson(req,BONES_CHECK_LIMIT,'BONES_CHECK_BODY_LIMIT: maximum 64 KiB')));}
+      catch(e){if(e instanceof RebuildError)return json({status:'refused',error:e.message},MALFORMED.has(e.code)?400:200);throw e;}
+    }
+    if(req.method==='POST'&&url.pathname==='/api/requirements'){
+      if(req.headers.get('origin')!==origin)return json({error:'Same-origin Origin required'},403);
+      try{const result=await requirements.start(await bodyJson(req,REQUIREMENTS_LIMIT,'REQUIREMENTS_BODY_LIMIT: maximum 64 KiB'));return json(result.body,result.status);}
+      catch(e){if(e instanceof RequirementsError)return json({status:'refused',error:e.message},e.code==='REQUIREMENTS_REQUEST_INVALID'?400:200);throw e;}
+    }
+    if(req.method==='POST'&&url.pathname==='/api/readings'){
+      if(req.headers.get('origin')!==origin)return json({error:'Same-origin Origin required'},403);
+      try{const result=await readings.start(await bodyJson(req,16*1024,'READINGS_BODY_LIMIT: maximum 16 KiB'));return json(result.body,result.status);}
+      catch(e){if(e instanceof ReadingsError)return json({status:'refused',error:e.message},e.code==='READINGS_REQUEST_INVALID'?400:200);throw e;}
+    }
     if(req.method==='POST'&&url.pathname==='/api/strip'){
       if(req.headers.get('origin')!==origin)return json({error:'Same-origin Origin required'},403);
       const result=await exportReviewStrip(p,await bodyJson(req));
@@ -38,6 +79,19 @@ export async function startServer(p:ReviewPackage,options:{port?:number;stateDir
       if(req.method!=='GET'&&req.method!=='HEAD')return json({error:'Method not allowed'},405);
       if(url.pathname==='/api/review'){await unchanged();return json({manifest:p.manifest,initialAnimation:options.initialAnimation??null,sourceHash:p.sourceHash,reviewedSource:p.reviewedSource,...(referenceBinding(p)?{referenceBinding:referenceBinding(p),explicitReference:{...referenceBinding(p)!.reference,url:'/review-reference'}}:{}),report:p.report,feedbackCatalog:p.feedbackCatalog,assetsBase:'/assets/',capabilities:{playback:!!p.manifest.model,modeling:false,motion:false,feedback:true,audio:true}});}
       if(url.pathname==='/api/session'){await unchanged();return json(await readSession(p,options.stateDir));}
+      if(url.pathname==='/api/rebuild')return json(await rebuilds.describe());
+      const rebuildStatus=/^\/api\/rebuild\/([a-f0-9]{64})$/.exec(url.pathname);
+      if(rebuildStatus){try{return json(rebuilds.read(rebuildStatus[1]!));}catch(e){if(e instanceof RebuildError)return json({error:e.message},404);throw e;}}
+      if(url.pathname==='/api/requirements')return json(await requirements.describe());
+      const requirementsStatus=/^\/api\/requirements\/([a-f0-9]{64})$/.exec(url.pathname);
+      if(requirementsStatus){try{return json(requirements.read(requirementsStatus[1]!));}catch(e){if(e instanceof RequirementsError)return json({error:e.message},404);throw e;}}
+      const readingsStatus=/^\/api\/readings\/([a-f0-9]{64})$/.exec(url.pathname);
+      if(readingsStatus){try{return json(readings.read(readingsStatus[1]!));}catch(e){if(e instanceof ReadingsError)return json({error:e.message},404);throw e;}}
+      const rebuildFile=/^\/rebuild\/([a-f0-9]{64})\/(.+)$/.exec(url.pathname);
+      if(rebuildFile){
+        let full:string;try{full=await rebuilds.file(rebuildFile[1]!,decodeURIComponent(rebuildFile[2]!));}catch(e){return json({error:e instanceof Error?e.message:'Not found'},404);}
+        const file=Bun.file(full);return new Response(req.method==='HEAD'?null:file,{headers:{...headers,'Content-Security-Policy':"default-src 'none'; script-src 'none'; sandbox",'Content-Type':file.type||'application/octet-stream','Content-Length':String(file.size)}});
+      }
       if(url.pathname==='/review-reference')return await serveReference(req,await safeSelectedReference(p),referenceBinding(p)!.reference.sha256,headers);
       if(url.pathname.startsWith('/assets/')){
         const path=packagePath(decodeURIComponent(url.pathname.slice('/assets/'.length)));if(!p.files.has(path))return json({error:'Asset not declared by package'},404);

package/src/session.ts

@@ -6,6 +6,9 @@ import { homedir } from 'node:os';
 import {referenceBinding,type ReferenceBinding} from './reference.ts';
 import { validateFeedbackSelection } from './feedback-validation.ts';
 import { parseEnvironmentContext } from './environment.ts';
+import { appliedCheckRefusal, parseAppliedContext } from './applied-context.ts';
+import { parseReadingsContext } from './readings.ts';
+import { parseRequirementsContext } from './requirements.ts';
 import { choice, object, string, type Json, type ReviewPackage, type ReviewedSource } from './manifest.ts';
 export interface Feedback {id:string;frameStart:number;frameEnd:number;target:{kind:'bone'|'slot'|'rig';name:string};category:'defect'|'quality';summary:string;context?:Json}
 export function parseFeedback(item:unknown,strict=true):Feedback {
@@ -28,6 +31,12 @@ export function validatePackageFeedback(feedback:Feedback,p:ReviewPackage,animat
   if(animation!==undefined&&context.animation!==undefined&&context.animation!==null&&context.animation!==animation)throw new Error('feedback.context.animation: does not match selected comparison animation');
   // Older records without an environment stay valid; a present one must have the recorded shape.
   if(context.environment!==undefined)parseEnvironmentContext(context.environment);
+  // Likewise the applied state (#99 regions, #102 patch): absent or null stays valid; a present record has its exact shape.
+  if(context.applied!==undefined){parseAppliedContext(context.applied);const unchecked=appliedCheckRefusal(context.applied);if(unchecked)throw new Error(unchecked);}
+  // The readings chosen (#108): absent or null stays valid; a present record names its pairs and the builds they ran on.
+  if(context.readings!==undefined)parseReadingsContext(context.readings);
+  // The declared requirements (#113): absent or null stays valid; a present record carries the file's text and its sha256, recomputed here.
+  if(context.requirements!==undefined)parseRequirementsContext(context.requirements,text=>createHash('sha256').update(text).digest('hex'));
   const selected=animation??(typeof context.animation==='string'?context.animation:null);
   validateFeedbackSelection(p.feedbackCatalog,{frameStart:feedback.frameStart,frameEnd:feedback.frameEnd,target:feedback.target,animation:selected});
   return {...feedback,context:{...context,...(animation===undefined?{}:{animation}),interval} as Json};

package/src/setup-mesh.ts

@@ -0,0 +1,144 @@
+/**
+ * The setup-space mesh reader shared by Setup · Weights (#107) and Edit Mesh (#100): one slot's mesh attachment read
+ * from the compiled model document as stored, plus the published player's skinning formula that places it. Pure — no
+ * DOM, no I/O; nothing here edits, normalises or infers a vertex or a weight.
+ *
+ * `rigc-compiled/3` stores a mesh attachment's setup-pose vertices at `skins[].attachments.<slot>.<name>.vertices`:
+ * `{weighted: false, xy}` — x, y pairs local to the slot's bone, so every vertex is the slot's bone at 1.0 — or
+ * `{weighted: true, bindings}` — one list per vertex of `{bone, x, y, weight}` (the bone by name). A `linkedmesh`
+ * carries no vertices of its own; it draws its source mesh's (`{skin, slot, source}`), read here the same way.
+ *
+ * Each caller names its refusals (`SetupMeshCodes`), so a missing document is `WEIGHTS_MODEL_UNAVAILABLE` in the
+ * weights block and `MESH_EDIT_MODEL_UNAVAILABLE` in Edit Mesh, from the same check.
+ */
+export interface SetupMeshCodes {
+ /** No model document, or not `rigc-compiled/3`. */
+ unavailable:string;
+ /** No slot selected (whole rig). */
+ select:string;
+ /** The slot has no mesh attachment there. */
+ noMesh:string;
+ /** The stored entry does not read. */
+ invalid:string;
+ /** What the caller reads from the document, for the refusal text ("weights are", "the mesh is"). */
+ subject:string;
+ /** The select refusal's own text after the code. */
+ selectText:string;
+}
+
+/** One stored influence of one vertex: the bone, the vertex in that bone's space and the weight, as stored. */
+export interface WeightInfluence {bone:string;x:number;y:number;weight:number}
+export interface SetupMeshRead {
+ slot:string;skin:string;attachment:string;
+ /** Where the vertices were read: the attachment itself, or a linked mesh's source. */
+ source:{skin:string;slot:string;attachment:string};
+ /** The attachment is a `linkedmesh` (its vertices are its source's). */
+ linked:boolean;
+ weighted:boolean;
+ /** Per vertex, the influences in stored order. */
+ vertices:WeightInfluence[][];
+ /** Every bone that influences a vertex, in first-stored order. */
+ bones:string[];
+ /** The read entry's triangle indices, as stored. */
+ triangles:number[];
+ /** The read entry's `hull` (the first `hull` vertices, in order, are the outline), or null when it stores none. */
+ hull:number|null;
+ /** The attachment's own entry as stored (the linked mesh itself when linked) — what a source hash is taken over. */
+ entry:Record<string,unknown>;
+}
+export type SetupMeshReadResult={ok:true;mesh:SetupMeshRead}|{ok:false;code:string};
+
+type Obj=Record<string,unknown>;
+const isObject=(v:unknown):v is Obj=>!!v&&typeof v==='object'&&!Array.isArray(v);
+const finite=(v:unknown):v is number=>typeof v==='number'&&Number.isFinite(v);
+
+/** The compiled model document, or the refusal that names why there is none (a package without one). */
+export function setupModel(model:unknown,codes:Pick<SetupMeshCodes,'unavailable'|'subject'>):{ok:true;model:Obj}|{ok:false;code:string} {
+ if(model===null||model===undefined)return {ok:false,code:`${codes.unavailable}: the package supplies no compiled model document (skeleton.model.json); ${codes.subject} read from it`};
+ if(!isObject(model)||model.spec!=='rigc-compiled/3')return {ok:false,code:`${codes.unavailable}: the model document is not rigc-compiled/3`};
+ return {ok:true,model};
+}
+
+function attachmentOf(model:Obj,skin:string,slot:string,name:string):Obj|undefined {
+ const skins=Array.isArray(model.skins)?model.skins:[];
+ const found=skins.find(s=>isObject(s)&&s.name===skin) as Obj|undefined;
+ const slots=found&&isObject(found.attachments)?found.attachments[slot]:undefined;
+ const entry=isObject(slots)?slots[name]:undefined;
+ return isObject(entry)?entry:undefined;
+}
+/** Without an identity: the slot's mesh attachment named like the slot, else its only mesh (first skin that has it). */
+function guessFree(model:Obj,slot:string):{skin:string;attachment:string}|null {
+ const found:{skin:string;attachment:string}[]=[];
+ for(const s of Array.isArray(model.skins)?model.skins:[]){
+  if(!isObject(s)||typeof s.name!=='string'||!isObject(s.attachments)||!isObject(s.attachments[slot]))continue;
+  for(const [name,a]of Object.entries(s.attachments[slot] as Obj))if(isObject(a)&&(a.kind==='mesh'||a.kind==='linkedmesh'))found.push({skin:s.name,attachment:name});
+ }
+ return found.find(f=>f.attachment===slot)??(found.length===1?found[0]!:null);
+}
+
+/**
+ * The setup-pose mesh of `slot`'s attachment `active` (the identity the setup pose resolved; null takes the slot's mesh
+ * named like the slot, else its only one), exactly as stored.
+ */
+export function readSetupMesh(model:unknown,slot:string|null,active:{skin:string;attachment:string}|null,codes:SetupMeshCodes):SetupMeshReadResult {
+ const doc=setupModel(model,codes);if(!doc.ok)return doc;
+ if(!slot)return {ok:false,code:`${codes.select}: ${codes.selectText}`};
+ const slots=Array.isArray(doc.model.slots)?doc.model.slots:[];
+ const slotEntry=slots.find(s=>isObject(s)&&s.name===slot) as Obj|undefined;
+ if(!slotEntry||typeof slotEntry.bone!=='string')return {ok:false,code:`${codes.noMesh} ${slot}: the model has no such slot`};
+ const key=active??guessFree(doc.model,slot);
+ if(!key)return {ok:false,code:`${codes.noMesh} ${slot}: no mesh attachment`};
+ const own=attachmentOf(doc.model,key.skin,slot,key.attachment);let entry=own,source={skin:key.skin,slot,attachment:key.attachment};
+ if(entry?.kind==='linkedmesh'){
+  if(typeof entry.skin!=='string'||typeof entry.slot!=='string'||typeof entry.source!=='string')return {ok:false,code:`${codes.invalid}: ${slot} / ${key.attachment} is a linked mesh without skin, slot and source`};
+  source={skin:entry.skin,slot:entry.slot,attachment:entry.source};entry=attachmentOf(doc.model,source.skin,source.slot,source.attachment);
+ }
+ if(!own||!entry||entry.kind!=='mesh')return {ok:false,code:`${codes.noMesh} ${slot}: ${key.skin} / ${key.attachment} is not a mesh attachment`};
+ const bones=new Set((Array.isArray(doc.model.bones)?doc.model.bones:[]).map(b=>isObject(b)&&typeof b.name==='string'?b.name:'').filter(Boolean));
+ const v=entry.vertices,invalid=(why:string)=>({ok:false as const,code:`${codes.invalid}: ${source.slot} / ${source.attachment} ${why}`});
+ if(!isObject(v)||typeof v.weighted!=='boolean')return invalid('vertices are not { weighted, xy | bindings }');
+ const vertices:WeightInfluence[][]=[];
+ if(!v.weighted){
+  if(!Array.isArray(v.xy)||v.xy.length%2||!v.xy.every(finite))return invalid('xy is not an even list of finite numbers');
+  const bone=slotEntry.bone as string;
+  for(let i=0;i<v.xy.length;i+=2)vertices.push([{bone,x:v.xy[i] as number,y:v.xy[i+1] as number,weight:1}]);
+ }else{
+  if(!Array.isArray(v.bindings))return invalid('bindings is not a list');
+  for(const [i,influences]of v.bindings.entries()){
+   if(!Array.isArray(influences)||!influences.length)return invalid(`bindings[${i}] is not a non-empty list`);
+   const row:WeightInfluence[]=[];
+   for(const b of influences){
+    if(!isObject(b)||typeof b.bone!=='string'||!bones.has(b.bone)||!finite(b.x)||!finite(b.y)||!finite(b.weight))return invalid(`bindings[${i}] names an unknown bone or a non-finite x, y or weight`);
+    row.push({bone:b.bone,x:b.x,y:b.y,weight:b.weight});
+   }
+   vertices.push(row);
+  }
+ }
+ const triangles=entry.triangles;
+ if(!Array.isArray(triangles)||triangles.length%3||!triangles.every(t=>Number.isSafeInteger(t)&&(t as number)>=0&&(t as number)<vertices.length))return invalid('triangles are not whole indices into its vertices');
+ const hull=Number.isSafeInteger(entry.hull)&&(entry.hull as number)>=0&&(entry.hull as number)<=vertices.length?entry.hull as number:null;
+ const order:string[]=[];for(const row of vertices)for(const i of row)if(!order.includes(i.bone))order.push(i.bone);
+ return {ok:true,mesh:{slot,skin:key.skin,attachment:key.attachment,source,linked:own.kind==='linkedmesh',weighted:v.weighted,vertices,bones:order,triangles:[...triangles] as number[],hull,entry:own}};
+}
+
+/** A bone's world transform as the published player reports it (`BoneWorld`'s x, y, a, b, c, d). */
+export interface WorldTransform {x:number;y:number;a:number;b:number;c:number;d:number}
+/**
+ * One vertex's world position from its stored influences and the bones' world transforms: the published player's own
+ * skinning formula (`worldVertices` in `@rig-c/play`: coordinates and weights through `Math.fround`, each influence
+ * `(x·a + y·b + worldX, x·c + y·d + worldY) · weight`, summed; an unweighted vertex is its slot bone's transform at 1).
+ */
+export function skinVertex(influences:readonly WeightInfluence[],world:(bone:string)=>WorldTransform,weighted:boolean):{x:number;y:number} {
+ let wx=0,wy=0;
+ for(const i of influences){
+  const t=world(i.bone),x=Math.fround(i.x),y=Math.fround(i.y),w=weighted?Math.fround(i.weight):1;
+  wx+=(x*t.a+y*t.b+t.x)*w;wy+=(x*t.c+y*t.d+t.y)*w;
+ }
+ return {x:wx,y:wy};
+}
+/** Every vertex of a read mesh placed in world space through `world` (flat x, y pairs), or null when one is not finite. */
+export function placeSetupMesh(mesh:Pick<SetupMeshRead,'vertices'|'weighted'>,world:(bone:string)=>WorldTransform):number[]|null {
+ const out:number[]=[];
+ for(const influences of mesh.vertices){const p=skinVertex(influences,world,mesh.weighted);if(!Number.isFinite(p.x)||!Number.isFinite(p.y))return null;out.push(p.x,p.y);}
+ return out;
+}

package/src/weights.ts

@@ -0,0 +1,74 @@
+/**
+ * Setup-space mesh weights (#107), read from the compiled model document as stored. Watch-only: nothing here edits,
+ * normalises or infers a weight. The reader itself is shared with Edit Mesh (#100): `src/setup-mesh.ts`.
+ */
+import {readSetupMesh,setupModel,type SetupMeshCodes,type WeightInfluence} from './setup-mesh.ts';
+export const WEIGHTS_MODEL_UNAVAILABLE='WEIGHTS_MODEL_UNAVAILABLE';
+export const WEIGHTS_SELECT_SLOT='WEIGHTS_SELECT_SLOT';
+export const WEIGHTS_NO_MESH='WEIGHTS_NO_MESH';
+export const WEIGHTS_MODEL_INVALID='WEIGHTS_MODEL_INVALID';
+
+export type {WeightInfluence,WorldTransform} from './setup-mesh.ts';
+export {skinVertex} from './setup-mesh.ts';
+export interface MeshWeights {
+ slot:string;skin:string;attachment:string;
+ /** Where the vertices were read: the attachment itself, or a linked mesh's source. */
+ source:{skin:string;slot:string;attachment:string};
+ weighted:boolean;
+ /** Per vertex, the influences in stored order. */
+ vertices:WeightInfluence[][];
+ /** Every bone that influences a vertex, in first-stored order. */
+ bones:string[];
+ /** The attachment's triangle indices, as stored. */
+ triangles:number[];
+}
+export type WeightsResult={ok:true;weights:MeshWeights}|{ok:false;code:string};
+
+/** The weights block's refusals over the shared setup-space reader (`src/setup-mesh.ts`). */
+export const WEIGHTS_CODES:SetupMeshCodes=Object.freeze({unavailable:WEIGHTS_MODEL_UNAVAILABLE,select:WEIGHTS_SELECT_SLOT,noMesh:WEIGHTS_NO_MESH,invalid:WEIGHTS_MODEL_INVALID,subject:'weights are',selectText:'select one mesh slot in the parts list'});
+
+/** The compiled model document, or the refusal that names why there is none (bar 2: a package without one). */
+export const weightsModel=(model:unknown)=>setupModel(model,WEIGHTS_CODES);
+
+/**
+ * The setup-pose weights of `slot`'s mesh attachment `active` (the identity the held pose resolved; null takes the
+ * slot's mesh named like the slot, else its only one). Weights are returned exactly as stored.
+ */
+export function meshWeights(model:unknown,slot:string|null,active:{skin:string;attachment:string}|null):WeightsResult {
+ const read=readSetupMesh(model,slot,active,WEIGHTS_CODES);if(!read.ok)return read;
+ const {slot:s,skin,attachment,source,weighted,vertices,bones,triangles}=read.mesh;
+ return {ok:true,weights:{slot:s,skin,attachment,source,weighted,vertices,bones,triangles}};
+}
+
+/** `bone`'s stored weight on one vertex (0 when it does not influence it; a bone stored twice is summed). */
+export function weightOf(influences:readonly Pick<WeightInfluence,'bone'|'weight'>[],bone:string):number {
+ let found:number|null=null;for(const i of influences)if(i.bone===bone)found=found===null?i.weight:found+i.weight;return found??0;
+}
+/** The dominant influence of one vertex: the largest stored weight (the first stored on a tie). */
+export function dominantInfluence<T extends Pick<WeightInfluence,'bone'|'weight'>>(influences:readonly T[]):T|null {
+ let best:T|null=null;for(const i of influences)if(!best||i.weight>best.weight)best=i;return best;
+}
+
+/** `#rrggbb` (or `#rgb`) → [r, g, b]; null for anything else. */
+export function parseHex(value:string):[number,number,number]|null {
+ const m=/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(value.trim());if(!m)return null;
+ const h=m[1]!.length===3?[...m[1]!].map(c=>c+c).join(''):m[1]!;
+ return [0,2,4].map(i=>parseInt(h.slice(i,i+2),16)) as [number,number,number];
+}
+/**
+ * The ramp colour at `t` (clamped to 0..1) over evenly spaced stops (the theme's weight tokens, low → high), as
+ * `rgb(r, g, b)`. A stop that is not a hex colour makes the ramp unavailable (null) rather than guessing one.
+ */
+export function rampColor(stops:readonly string[],t:number):string|null {
+ const rgb=stops.map(parseHex);if(rgb.length<2||rgb.some(c=>!c)||!Number.isFinite(t))return null;
+ const x=Math.max(0,Math.min(1,t))*(rgb.length-1),i=Math.min(rgb.length-2,Math.floor(x)),f=x-i,a=rgb[i]!,b=rgb[i+1]!;
+ return `rgb(${[0,1,2].map(k=>Math.round(a[k]!+(b[k]!-a[k]!)*f)).join(', ')})`;
+}
+/** A stored weight as text: the number as stored, never rounded (an integer keeps one decimal). */
+export const weightText=(w:number)=>Number.isInteger(w)?w.toFixed(1):String(w);
+const rgbOf=(value:string):[number,number,number]|null=>{const hex=parseHex(value);if(hex)return hex;const m=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/.exec(value.trim());return m?[Number(m[1]),Number(m[2]),Number(m[3])]:null;};
+/** The mean of hex or `rgb()` colours as `rgb(r, g, b)`; null when one is neither. */
+export function meanColor(colors:readonly string[]):string|null {
+ const rgb=colors.map(rgbOf);if(!rgb.length||rgb.some(c=>!c))return null;
+ return `rgb(${[0,1,2].map(k=>Math.round(rgb.reduce((n,c)=>n+c![k]!,0)/rgb.length)).join(', ')})`;
+}

package/web/bones-panel.ts

@@ -0,0 +1,230 @@
+/**
+ * Setup · Bones (#109), page side: the producer config's bones drawn on the stage at their `at`, chain `points` and
+ * `tip` (rig px through the crop → world mapping the chest and weights views use), draggable in whole rig px; per-anchor
+ * x / y fields for the picked bone; the pending-ops list with per-op revert; Check (`POST /api/bones-check`:
+ * `propose --from-config` LINT and coverage lines, and `compare`'s origin distances against the handoff config); Apply
+ * (the generic patch runner's whole-rig `rig --config` → check, which needs the reproduced baseline) and Reset. The
+ * source draft keeps the pending ops (`#bones-pending`); the generated fields carry no ids.
+ */
+import {anchorAt,boneAnchors,boneOps,bonesApplyEnabled,configBones,dragAnchor,draftEdits,draftText,movedRows,setAnchor,type BoneAnchor,type BoneEdit,type ConfigBone,type RigPoint} from '../src/bone-anchors.ts';
+import type {PatchOp} from '../src/config-patch.ts';
+import type {CropWorldMapping} from '../src/chest-regions.ts';
+import type {BonesCheckResult} from '../src/bones-check.ts';
+import {canvasToCrop} from './chest-editor.ts';
+import type {OverlayAnchors,OverlayPoint,OverlayProject} from './rig-overlays.ts';
+import {textEntryFocused} from './view-controls.ts';
+
+export type BonesCheckView=BonesCheckResult|{status:'refused';error:string};
+export interface BonesPanelDeps {
+ /** Receives capture-phase pointer events before the viewport's pan. */
+ pane:HTMLElement;
+ /** The overlay canvas: pointer coordinates are local to it, as the projection's are. */
+ canvas:HTMLElement;
+ project:()=>OverlayProject|null;
+ mapping:()=>CropWorldMapping;
+ inspector:()=>string|undefined;
+ /** Playback stops while bones are edited on the stage. */
+ pause:()=>void;
+ /** Redraw the overlay. */
+ changed:()=>void;
+ /** The draft record changed (the panel already wrote `#bones-pending`). */
+ saved:()=>void;
+ check:(ops:PatchOp[])=>Promise<BonesCheckView>;
+ apply:(ops:PatchOp[])=>Promise<void>;
+ reset:()=>Promise<void>;
+ token:(name:string)=>string;
+}
+export interface BonesPanel {
+ load(list:unknown[]|null,reason:string|null):void;
+ anchors():BoneAnchor[];edits():BoneEdit[];
+ set(path:string,value:RigPoint):void;
+ select(name:string|null):void;
+ active():boolean;setActive(on:boolean):void;
+ /** Every drawn anchor's client (viewport) position, for automation that drags with a real pointer. */
+ handles():{path:string;label:string;x:number;y:number}[];
+ overlay():OverlayAnchors|null;
+ check():Promise<BonesCheckView|null>;
+ checked(view:BonesCheckView|null):void;
+ applied(ops:readonly PatchOp[]|null):void;
+ status(text:string,error:boolean):void;
+ busy(value:boolean):void;
+ restore():void;clear():void;sync():void;dispose():void;
+}
+/** Overlay colours: theme token names. */
+export const boneTokens={line:'--rv-bone-line',origin:'--rv-bone-origin',point:'--rv-bone-point',tip:'--rv-bone-tip',pending:'--rv-bone-pending',selected:'--rv-bone-selected',ink:'--rv-bone-ink',labelBg:'--rv-bone-label-bg'} as const;
+/** The anchor under the pointer (canvas px), within 9 px; the nearest wins. */
+export function hitAnchor(points:readonly {path:string;at:OverlayPoint}[],p:OverlayPoint):string|null {
+ let best:string|null=null,distance=9;
+ for(const a of points){const d=Math.hypot(a.at.x-p.x,a.at.y-p.y);if(d<=distance){best=a.path;distance=d;}}
+ return best;
+}
+/** The lines the overlay draws: each chain point to the next and to its tip; a single bone's origin to its tip. */
+export function anchorLines(bones:readonly ConfigBone[],at:(path:string)=>RigPoint|null):{from:RigPoint;to:RigPoint}[] {
+ const out:{from:RigPoint;to:RigPoint}[]=[];
+ for(const b of bones){
+  const base=`/bones/${b.index}`,chain=[...(b.at?[`${base}/at`]:[]),...b.points.map((_,k)=>`${base}/points/${k}`),...(b.tip?[`${base}/tip`]:[])].map(at).filter((p):p is RigPoint=>!!p);
+  for(let i=1;i<chain.length;i++)out.push({from:chain[i-1]!,to:chain[i]!});
+ }
+ return out;
+}
+const fmt=(p:RigPoint)=>`[${p[0]}, ${p[1]}]`;
+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;};
+
+export function bindBonesPanel(deps:BonesPanelDeps):BonesPanel {
+ const state=node('bones-panel-state'),toggle=node<HTMLButtonElement>('bones-edit'),picker=node<HTMLSelectElement>('bones-select'),editor=node('bones-anchor-editor'),pending=node('bones-pending-list');
+ const checkButton=node<HTMLButtonElement>('bones-check'),applyButton=node<HTMLButtonElement>('bones-apply'),resetButton=node<HTMLButtonElement>('bones-reset-build'),statusOut=node('bones-status'),lintArea=node('bones-lint'),compareArea=node('bones-compare'),draft=node<HTMLTextAreaElement>('bones-pending');
+ let bones:ConfigBone[]=[],anchors:BoneAnchor[]=[],edits=new Map<string,BoneEdit>(),selected:string|null=null,hover:string|null=null,appliedOps:string[]=[],lint:string[]=[],busy=false,active=false,space=false;
+ let drag:{path:string;pointer:number;start:RigPoint;from:RigPoint}|null=null;
+
+ function panelStatus(text:string,error:boolean){statusOut.textContent=text;statusOut.title=text;statusOut.classList.toggle('error',error);}
+ const save=()=>{draft.value=draftText(edits);draft.dispatchEvent(new Event('input',{bubbles:true}));deps.saved();};
+ /** Any change to the pending ops makes the last Check's lines stale, so they are cleared. */
+ const change=(next:Map<string,BoneEdit>,persist=true)=>{edits=next;showCheck(null);if(persist)save();render();deps.changed();};
+ const anchorOf=(path:string)=>anchors.find(a=>a.path===path);
+ /** Each anchor in canvas px, from its current value through the crop → world mapping and the camera projection. */
+ const projected=():{path:string;at:OverlayPoint}[]=>{
+  const project=deps.project(),mapping=deps.mapping();if(!project||!mapping.available)return [];
+  return anchors.map(a=>{const [x,y]=anchorAt(a,edits),w=mapping.toWorld(x,y);return {path:a.path,at:project(w.x,w.y)};});
+ };
+ const local=(event:PointerEvent):OverlayPoint=>{const rect=deps.canvas.getBoundingClientRect();return {x:event.clientX-rect.left,y:event.clientY-rect.top};};
+ const cropAt=(p:OverlayPoint):RigPoint|null=>{const project=deps.project(),mapping=deps.mapping();return project&&mapping.available?canvasToCrop(project,mapping.toWorld,p):null;};
+
+ function renderPicker(){
+  const keep=picker.value;
+  picker.replaceChildren(make('option',{value:'',textContent:bones.length?'Pick a bone (or click a handle)':'No bones in the config'}),...bones.map(b=>make('option',{value:b.name,textContent:`${b.name}${b.chain?` (chain, ${b.points.length} link${b.points.length===1?'':'s'})`:''} · bones[${b.index}]`})));
+  picker.value=selected&&bones.some(b=>b.name===selected)?selected:bones.some(b=>b.name===keep)?keep:'';
+  picker.disabled=busy||!bones.length;
+ }
+ function renderEditor(){
+  const bone=bones.find(b=>b.name===selected);
+  if(!bone){editor.replaceChildren(make('p',{className:'hint',textContent:'Pick a bone to edit its anchors by number, or drag a handle on the stage.'}));return;}
+  const rows=anchors.filter(a=>a.index===bone.index).map(a=>{
+   const now=anchorAt(a,edits),field=(axis:0|1)=>{const input=make('input',{type:'number',step:'1',value:String(now[axis]),disabled:busy,inputMode:'numeric'});input.setAttribute('aria-label',`${a.label} ${axis?'y':'x'}`);
+    input.onchange=()=>{const value=Number(input.value);if(!input.value.trim()||!Number.isFinite(value)){panelStatus(`BONES_VALUE_INVALID: ${a.label} ${axis?'y':'x'} must be a number`,true);return;}const next:RigPoint=[...anchorAt(a,edits)];next[axis]=value;change(setAnchor(edits,a,next));};return input;};
+   return make('div',{className:edits.has(a.path)?'bones-anchor pending':'bones-anchor'},make('code',{textContent:a.path}),make('span',{textContent:a.label}),field(0),field(1),make('output',{textContent:edits.has(a.path)?`was ${fmt(a.value)}`:''}));
+  });
+  editor.replaceChildren(make('p',{className:'physics-editor-title'},make('strong',{textContent:bone.name}),` · ${bone.chain?'chain':'bone'} · parent ${bone.parent??'—'} · bones[${bone.index}]`),...rows);
+ }
+ function renderPending(){
+  const items=[...edits.values()];
+  pending.replaceChildren(...items.map(e=>{
+   const revert=make('button',{type:'button',textContent:'Revert',disabled:busy});revert.setAttribute('aria-label',`Revert ${e.path}`);
+   revert.onclick=()=>{const next=new Map(edits);next.delete(e.path);change(next);};
+   const applied=appliedOps.includes(JSON.stringify({path:e.path,value:e.value}));
+   const delta=`Δ (${e.value[0]-e.from[0]>=0?'+':''}${Number((e.value[0]-e.from[0]).toFixed(6))}, ${e.value[1]-e.from[1]>=0?'+':''}${Number((e.value[1]-e.from[1]).toFixed(6))})`;
+   return make('li',{className:applied?'applied':''},make('code',{textContent:`replace ${e.path}`}),` ${fmt(e.from)} → ${fmt(e.value)} ${delta} · ${e.name}${applied?' · applied':''}`,revert);
+  }));
+  if(!items.length)pending.append(make('li',{className:'hint',textContent:'No pending ops.'}));
+  applyButton.disabled=!bonesApplyEnabled({busy,pending:items.length,lint});checkButton.disabled=busy||!items.length;resetButton.disabled=busy;
+  toggle.disabled=!anchors.length;toggle.setAttribute('aria-pressed',String(active));
+ }
+ function render(){renderPicker();renderEditor();renderPending();}
+ let skipped:string[]=[],loaded=false;
+ /** The block's state line: the config's bones and anchors, what was not read, and whether handles can be drawn. */
+ function renderState(){
+  if(!loaded)return;const mapping=deps.mapping();
+  state.classList.toggle('error',!mapping.available||!!skipped.length);
+  state.textContent=`${bones.length} config bones · ${anchors.length} anchors (origins, chain points, tips) in rig px${skipped.length?` · not drawn: ${skipped.join('; ')}`:''}${mapping.available?'':` · ${mapping.reason}: no handles are drawn`}`;
+ }
+
+ function showCheck(view:BonesCheckView|null){
+  lint=[];
+  if(!view){lintArea.replaceChildren();compareArea.replaceChildren();return;}
+  if(view.status==='refused'){lintArea.replaceChildren(make('code',{className:'error',textContent:view.error,title:view.error}));compareArea.replaceChildren();return;}
+  const p=view.propose;lint=[...p.lint];
+  const head=make('p',{className:'eyebrow',textContent:`PROPOSE --FROM-CONFIG${p.exitCode===null?'':` · EXIT ${p.exitCode}`} · LINT BLOCKS NOTHING`});
+  const lines=[...p.lint.map(text=>make('code',{className:'lint',textContent:text,title:text})),make('code',{className:p.status==='ran'&&p.line===p.summary?'':'error',textContent:p.line,title:p.line})];
+  const coverage=p.coverage.length?[make('details',{className:'bones-coverage'},make('summary',{textContent:p.coverage.at(-1)!}),...p.coverage.slice(0,-1).map(text=>make('code',{textContent:text,title:text})))]:[];
+  lintArea.replaceChildren(head,...lines,...coverage);
+  const c=view.compare,moved=movedRows(c.origins);
+  compareArea.replaceChildren(make('p',{className:'eyebrow',textContent:'COMPARE --LEFT <HANDOFF CONFIG> --RIGHT <PATCHED>'}),
+   ...(c.exitCode===0?[...moved.map(r=>make('code',{textContent:r.text,title:r.text})),...(moved.length?[]:[make('code',{textContent:'no bone moved'})]),...c.summary.filter(l=>/^(origin|tip):/.test(l)).map(text=>make('code',{textContent:text,title:text}))]:[make('code',{className:'error',textContent:c.line,title:c.line})]));
+  renderPending();
+ }
+
+ const setActive=(on:boolean)=>{
+  active=on&&anchors.length>0;if(active)deps.pause();
+  if(!active){drag=null;hover=null;delete deps.pane.dataset.bonesHover;}
+  render();deps.changed();
+ };
+ toggle.onclick=()=>setActive(!active);
+ picker.onchange=()=>{selected=picker.value||null;render();deps.changed();};
+ checkButton.onclick=()=>{void panel.check();};
+ applyButton.onclick=()=>{if(!edits.size||busy)return;void deps.apply(boneOps(edits));};
+ resetButton.onclick=()=>{if(busy)return;void deps.reset();};
+ const keyDown=(event:KeyboardEvent)=>{if(event.code==='Space'&&!textEntryFocused(event.target))space=true;};
+ const keyUp=(event:KeyboardEvent)=>{if(event.code==='Space')space=false;};
+ const blur=()=>{space=false;};
+ const down=(event:PointerEvent)=>{
+  if(!active||busy||space||!event.isPrimary||event.button!==0)return;
+  const target=event.target;if(target instanceof Element&&target.closest('button,input,select,textarea,a'))return;
+  const p=local(event),path=hitAnchor(projected(),p),anchor=path?anchorOf(path):undefined,start=cropAt(p);if(!anchor||!start)return;
+  // A handle drag edits values; it never reaches the viewport's pan.
+  event.stopPropagation();event.preventDefault();
+  drag={path:anchor.path,pointer:event.pointerId,start,from:anchorAt(anchor,edits)};selected=anchor.name;
+  deps.pane.setPointerCapture(event.pointerId);deps.pane.dataset.bonesHover='move';render();deps.changed();
+ };
+ const move=(event:PointerEvent)=>{
+  if(drag&&event.pointerId===drag.pointer){
+   event.stopPropagation();const now=cropAt(local(event)),anchor=anchorOf(drag.path);if(!now||!anchor)return;
+   const next=dragAnchor(drag.from,drag.start,now),current=anchorAt(anchor,edits);
+   if(next[0]!==current[0]||next[1]!==current[1])change(setAnchor(edits,anchor,next),false);
+   return;
+  }
+  if(!active||space)return;
+  const path=hitAnchor(projected(),local(event));if(path!==hover){hover=path;if(path)deps.pane.dataset.bonesHover='move';else delete deps.pane.dataset.bonesHover;deps.changed();}
+ };
+ const end=(event:PointerEvent)=>{
+  if(!drag||event.pointerId!==drag.pointer)return;
+  drag=null;delete deps.pane.dataset.bonesHover;if(deps.pane.hasPointerCapture(event.pointerId))deps.pane.releasePointerCapture(event.pointerId);
+  save();render();deps.changed();
+ };
+ deps.pane.addEventListener('pointerdown',down,true);deps.pane.addEventListener('pointermove',move,true);
+ for(const type of ['pointerup','pointercancel','lostpointercapture'] as const)deps.pane.addEventListener(type,end,true);
+ document.addEventListener('keydown',keyDown,true);window.addEventListener('keyup',keyUp,true);window.addEventListener('blur',blur);
+ // Leaving Setup ends the stage mode: follow the header switch's pressed state, as the chest editor does.
+ const observer=new MutationObserver(()=>panel.sync());
+ for(const selector of document.querySelectorAll('[data-inspector]'))observer.observe(selector,{attributes:true,attributeFilter:['aria-pressed','aria-selected']});
+
+ const panel:BonesPanel={
+  load(list,reason){
+   if(list===null){bones=[];anchors=[];skipped=[];loaded=false;state.textContent=reason??'BONES_UNAVAILABLE: no producer handoff';state.classList.add('error');setActive(false);render();return;}
+   const read=configBones(list);bones=read.bones;anchors=boneAnchors(bones);skipped=read.skipped;loaded=true;
+   edits=draftEdits(draft.value,anchors);renderState();render();deps.changed();
+  },
+  anchors:()=>anchors.map(a=>({...a,value:[...a.value] as RigPoint})),
+  edits:()=>[...edits.values()].map(e=>({...e,from:[...e.from] as RigPoint,value:[...e.value] as RigPoint})),
+  set(path,value){const anchor=anchorOf(path);if(!anchor)throw new Error(`BONES_ANCHOR_UNKNOWN: ${path}`);change(setAnchor(edits,anchor,value));},
+  select(name){selected=name;render();deps.changed();},
+  active:()=>active,setActive,
+  handles(){const rect=deps.canvas.getBoundingClientRect();return projected().map(h=>({path:h.path,label:anchorOf(h.path)!.label,x:h.at.x+rect.left,y:h.at.y+rect.top}));},
+  overlay(){
+   if(!active||!anchors.length)return null;const mapping=deps.mapping();if(!mapping.available)return null;
+   const world=([x,y]:RigPoint)=>mapping.toWorld(x,y),current=new Map(anchors.map(a=>[a.path,anchorAt(a,edits)]));
+   const colors=Object.fromEntries(Object.entries(boneTokens).map(([k,t])=>[k,deps.token(t)])) as OverlayAnchors['colors'];
+   const focus=selected?bones.find(b=>b.name===selected)?.index:undefined;
+   return {lines:anchorLines(bones,path=>current.get(path)??null).map(l=>({from:world(l.from),to:world(l.to)})),
+    anchors:anchors.map(a=>({at:world(current.get(a.path)!),from:edits.has(a.path)?world(a.value):null,kind:a.kind,label:`${a.label} ${fmt(current.get(a.path)!)}`,selected:drag?.path===a.path||(focus===a.index&&a.kind==='at'),hover:hover===a.path})),colors};
+  },
+  async check(){
+   if(!edits.size||busy){panelStatus('BONES_NOTHING_PENDING: no pending ops',true);return null;}
+   busy=true;render();panelStatus(`Checking ${edits.size} op(s): propose --from-config and compare on a scratch copy of the patched config…`,false);
+   try{const view=await deps.check(boneOps(edits));showCheck(view);
+    if(view.status==='refused')panelStatus(view.error,true);
+    else{const p=view.propose,o=view.compare;panelStatus(`Checked · ${p.status==='ran'?`${p.lint.length} LINT line(s) (blocks nothing)`:'LINT not run'} · compare ${o.line} · ${(((p.wallMs??0)+o.wallMs)/1000).toFixed(1)} s`,p.status!=='ran');}
+    return view;}
+   finally{busy=false;render();}
+  },
+  checked:showCheck,
+  applied(ops){appliedOps=(ops??[]).map(o=>JSON.stringify({path:o.path,value:o.value}));renderPending();},
+  status:panelStatus,
+  busy(value){busy=value;render();},
+  restore(){edits=draftEdits(draft.value,anchors);render();deps.changed();},
+  clear(){change(new Map());showCheck(null);},
+  sync(){renderState();if(active&&deps.inspector()!=='rig')setActive(false);},
+  dispose(){observer.disconnect();deps.pane.removeEventListener('pointerdown',down,true);deps.pane.removeEventListener('pointermove',move,true);for(const type of ['pointerup','pointercancel','lostpointercapture'] as const)deps.pane.removeEventListener(type,end,true);document.removeEventListener('keydown',keyDown,true);window.removeEventListener('keyup',keyUp,true);window.removeEventListener('blur',blur);},
+ };
+ render();
+ return panel;
+}