translation.js

'use strict';
(()=>{
const $=id=>document.getElementById(id),Q=Quinelings,D=QDL,section=$('translation');
let stage=0,timer=null,phase=0,activeNode=null,playing=false;
let visible=true;
if('IntersectionObserver' in window)new IntersectionObserver(e=>{visible=e[0].isIntersecting;},{rootMargin:'80px'}).observe(section);
const intents={lanternkeeper:'Check the fault and the evidence. Repair the lamp only when the repair is permitted.',wayfinder:'Find the shortest open route to the destination. Avoid blocked streets.',swarmwarden:'Share the available resources in request order, without giving away more than we have.',echoweaver:'Listen to independent sources. Admit a decision only when enough distinct sources agree.',raincatcher:'Combine the sensors. Work out the water needed, then stay within the reservoir budget.',tidemender:'Order the repair jobs by dependency. Find the earliest finish time.',memorybloom:'Keep track of support and contradiction. Count each source once for each claim.',pulsekeeper:'Retry transient failures within the attempt budget. Stop when the outcome becomes uncertain.',threadsorter:'Filter the queue, keep the first duplicate, and order the remaining work by priority.',seedbank:'Convert tray requests to six seeds per tray, add the demand, and withdraw only what the stock can cover.'};
const titles=['01 / A declared thought','02 / A task, written as a program','03 / Code determines the drawing','04 / The program has a moving body'];
const captions=['The sentence describes the selected task. We wrote its program explicitly; this walkthrough follows that program into its body.','Each line is one operation in the task. Values flow from its inputs to the operations that use its result. Expand the complete task graph to inspect every value and connection.','The operation type selects an organ’s color and wave frequency. Its connections and values affect its size. Dependencies become filaments that stay attached as the body moves.','This is the selected program’s body, drawn with the same design rules as the collection below. Select a line to follow its organ. Motion changes the view; Run executes the task.'];
function setStage(n){if(!Number.isInteger(n)||n<0||n>3)throw Error('Unknown translation stage');stage=n;section.dataset.stage=String(n);section.querySelectorAll('.translation-steps button').forEach(b=>b.setAttribute('aria-pressed',String(Number(b.dataset.stage)===n)));$('translation-stage-title').textContent=titles[n];$('translation-caption').textContent=captions[n];const item=window.quineling.current;$('thought-content').textContent=n===0?(intents[item?.id]||item?.description||'Loading a declared task…'):n===1?'intent → task graph':n===2?'graph → r(θ, φ)':'program → body';}
function stop(){if(timer)clearTimeout(timer);timer=null;playing=false;$('translate-play').textContent='Follow the thought ↗';}
function play(){stop();playing=true;setStage(0);$('translate-play').textContent='Pause walkthrough';const advance=()=>{if(stage<3){setStage(stage+1);timer=setTimeout(advance,2200);}else stop();};timer=setTimeout(advance,1700);}
function num(v){return Number(v.toFixed(4)).toString();}
function focus(id,propagate=true){const api=window.quineling,n=api.shape.nodes.find(n=>n.id===id);if(!n)return;activeNode=id;if(propagate)api.focusNode(id);for(const b of $('translation-program').children){const active=b.dataset.node===id;b.classList.toggle('active',active);b.setAttribute('aria-pressed',String(active));}$('translation-node-name').textContent=`${n.id} → ${n.op} organ`;
 const graphNode=api.shape.graph.nodes.find(x=>x.id===id),design=api.shape.design,value=n.params?.value,magnitude=typeof value==='number'?Math.min(6,Math.abs(value)):Array.isArray(value)?Math.min(6,value.length):1,R=Math.min(.16,design.organ.baseRadius+design.organ.degreeGain*(n.indegree+n.outdegree)+design.organ.literalGain*magnitude);
 $('translation-tags').replaceChildren();for(const label of [`frequency ${n.frequency}`,`${n.indegree} inputs / ${n.outdegree} links`,`depth ${n.level}`,Q.instructionColor(n.op)]){const span=document.createElement('span');span.className='mapping-tag';span.textContent=label;$('translation-tags').append(span);}
 $('translation-equation').textContent=`r(θ, φ) = ${num(R)} [1 + ${num(design.organ.amplitudes[0])} cos(${n.frequency}θ) + ${num(design.organ.amplitudes[1])} cos(${n.outdegree+1}θ + φ)]`;
 const edge=api.shape.links.find(e=>e.from===id)||api.shape.links.find(e=>e.to===id),f=edge?1+edge.port+api.shape.nodes.find(n=>n.id===edge.from).frequency:null;$('translation-edge').textContent=edge?`${edge.from} → ${edge.to} [input ${edge.port}] · f = ${f}\nC(u, φ) = (1−u)A + uB + N · ${num(design.filament.bend)}(1 + ${num(design.filament.frequencyGain)}f) sin(πu) [1 + ${num(design.filament.ripple)} sin(2πfu + φ)]`:'No dependency filament: this node supplies a source value.';
 $('translation-rule').textContent=`${graphNode.op} maps to a organ with a ${n.frequency}-cycle primary ripple in ${Q.instructionColor(n.op)}. R combines the ${num(design.organ.baseRadius)} base, ${n.indegree+n.outdegree} connections, and magnitude ${num(magnitude)}. Whole graph: depth ${api.shape.maxDepth}, fanout ${api.shape.branches} → ${api.shape.strandCount} body strands. The ${design.family} family supplies the envelope; ${api.shape.repeats} task cycle(s) supply ${api.shape.repeats-1} return ring(s).`;
 const row=[...$('translation-program').children].find(b=>b.dataset.node===id);if(row){const r=row.getBoundingClientRect(),c=$('translation-program').getBoundingClientRect();if(r.bottom>c.bottom)$('translation-program').scrollTop+=r.bottom-c.bottom;if(r.top<c.top)$('translation-program').scrollTop-=c.top-r.top;}
}
function refresh(){const api=window.quineling;if(!api?.shape)return;stop();const item=api.current,g=api.shape.graph;$('translation-family').textContent=`${item.name.toUpperCase()} / ${api.shape.design.family.toUpperCase()}`;$('translation-node-count').textContent=`${g.nodes.length} NODES`;$('translation-json').textContent=Q.canon(g);$('translation-program').replaceChildren();
 for(const n of g.nodes){const b=document.createElement('button');b.className='program-line';b.dataset.node=n.id;b.style.setProperty('--opcode-color',Q.instructionColor(n.op));const id=document.createElement('span');id.className='line-id';id.textContent=n.id+' = ';const op=document.createElement('span');op.className='line-op';op.textContent=n.op;const args=document.createElement('span');args.textContent='('+n.inputs.join(', ')+')';const params=document.createElement('span');params.className='line-params';const full=Q.canon(n.params);params.textContent=full.length>110?full.slice(0,107)+'…':full;params.title=full;b.append(id,op,args,params);b.onclick=()=>{stop();setStage(2);focus(n.id);};$('translation-program').append(b);}
 const preferred=g.nodes.find(n=>n.id===activeNode)||g.nodes.find(n=>n.op!=='literal')||g.nodes[0];focus(preferred.id,false);$('translation-cycles').value=api.shape.repeats;$('translation-cycles-value').textContent=api.shape.repeats;$('translation-receipt').textContent='Following the thought changes the view. Run this task computes the result and emits its source.';setStage(0);
}
section.querySelectorAll('.translation-steps button').forEach(b=>b.onclick=()=>{stop();setStage(Number(b.dataset.stage));});$('translate-play').onclick=()=>playing?stop():play();
$('translation-cycles').oninput=()=>{const v=$('translation-cycles').value;$('repeats').value=v;$('repeats').dispatchEvent(new Event('input'));setStage(3);};
$('translation-run').onclick=()=>{try{const api=window.quineling,r=api.run(),effects=r.tasks.flatMap(t=>t.effects).length;setStage(3);const selectedResult=r.tasks[0].trace.find(t=>t.edge===activeNode);$('translation-receipt').textContent=`${r.tasks.length} task cycle(s) · ${effects} simulated action(s) · exact source reproduced`+(selectedResult?` · ${activeNode}: ${JSON.stringify(selectedResult.value).slice(0,120)}`:'');}catch(e){$('translation-receipt').textContent=e.message;}};
function drawConnector(projection){$('translation-links').style.visibility=activeNode?'visible':'hidden';const row=[...$('translation-program').children].find(b=>b.dataset.node===activeNode),p=projection.positions.get(activeNode);if(!row||!p)return;const scene=section.querySelector('.translation-scene').getBoundingClientRect(),r=row.getBoundingClientRect(),container=$('translation-program').getBoundingClientRect(),c=$('translation-form').getBoundingClientRect(),canvas=$('translation-form'),scale=Math.min(c.width/canvas.width,c.height/canvas.height);const ax=r.right-scene.left,ay=Math.max(container.top,Math.min(container.bottom,(r.top+r.bottom)/2))-scene.top,bx=c.left-scene.left+(c.width-canvas.width*scale)/2+(projection.cx+p.x*projection.scale)*scale,by=c.top-scene.top+(c.height-canvas.height*scale)/2+(projection.cy+p.y*projection.scale)*scale;const svg=$('translation-links');svg.setAttribute('viewBox',`0 0 ${scene.width} ${scene.height}`);const color=Q.instructionColor(window.quineling.shape.nodes.find(n=>n.id===activeNode).op);$('translation-link-path').setAttribute('d',`M ${ax} ${ay} C ${ax+35} ${ay}, ${bx-45} ${by}, ${bx} ${by}`);$('translation-link-path').style.stroke=color;$('translation-link-dot').setAttribute('cx',bx);$('translation-link-dot').setAttribute('cy',by);$('translation-link-dot').style.stroke=color;$('translation-link-label').setAttribute('x',bx+9);$('translation-link-label').setAttribute('y',by-10);$('translation-link-label').textContent=activeNode;}
$('translation-pause').onclick=()=>window.quineling.toggleMotion();
function motionLabel(){$('translation-pause').textContent=window.quineling.moving?'Pause motion':'Resume motion';}
window.addEventListener('quineling:motion',motionLabel);motionLabel();
window.addEventListener('quineling:blur',()=>{activeNode=null;for(const b of $('translation-program').children){b.classList.remove('active');b.setAttribute('aria-pressed','false');}$('translation-node-name').textContent='Select a program line to inspect';for(const id of ['translation-tags','translation-equation','translation-edge','translation-rule'])$(id).textContent='';});
window.addEventListener('quineling:changed',refresh);window.addEventListener('quineling:focus',e=>focus(e.detail.id,false));refresh();let last=0,lastKey='';function draw(now){const api=window.quineling;
 if(api?.shape&&visible&&!document.hidden&&now-last>=1000/30){phase=stage===3?api.phase:0;const key=[api.viewRevision,stage,phase,innerWidth,innerHeight,scrollY,$('translation-program').scrollTop].join(':');if(key!==lastKey){const projection=api.renderOn($('translation-form'),phase);drawConnector(projection);lastKey=key;}last=now;}
 requestAnimationFrame(draw);
}requestAnimationFrame(draw);
window.translation={setStage,play,stop,focus,get stage(){return stage;},get activeNode(){return activeNode;}};
})();