on esc(s){ return String(s).replace(/[&<>"]/g, function(c){ return {'&':'&','<':'<','>':'>','"':'"'}[c]; }); }
function refresh(){
var o = selected;
if(o && blocks.indexOf(o) < 0){ selected = o = null; }
selBox.visible = !!o && o.visible; if(o) selBox.setFromObject(o);
/* tool + toggle states */
document.querySelectorAll('[data-act="tool"]').forEach(function(b){ b.classList.toggle('on', b.getAttribute('data-arg') === tool); });
document.querySelectorAll('[data-act="grid"]').forEach(function(b){ b.classList.toggle('on', parseInt(b.getAttribute('data-arg'),10) === gridDiv); });
document.querySelectorAll('[data-act="isolate"]').forEach(function(b){ b.classList.toggle('on', !!isolated); });
document.querySelectorAll('[data-act="shadows"]').forEach(function(b){ b.classList.toggle('on', sun.castShadow); });
document.querySelectorAll('[data-act="fog"]').forEach(function(b){ b.classList.toggle('on', scene.fog.far < 1000); });
document.querySelectorAll('[data-act="spawn"]').forEach(function(b){ b.classList.toggle('on', b.getAttribute('data-arg') === selectedShape); });
var flags = o ? {section: o.userData.section, hollow: meshesOf(o)[0].material.wireframe, sharpen: meshesOf(o)[0].material.flatShading, spin: !!o.userData.spin, bob: !!o.userData.bob} : {};
['section','hollow','sharpen','spin','bob'].forEach(function(k){ document.querySelectorAll('[data-act="' + k + '"]').forEach(function(b){ b.classList.toggle('on', !!flags[k]); }); });
document.querySelectorAll('[data-act="res"]').forEach(function(b){ b.classList.toggle('on', !!o && parseInt(b.getAttribute('data-arg'),10) === o.userData.res); });
/* metadata */
var size = o ? new THREE.Vector3() : null; if(o) boxOf(o).getSize(size);
var m0 = o ? meshesOf(o)[0].material : null;
document.getElementById('meta').innerHTML = o ?
'Type' + esc(label(o)) + 'Material#' + m0.color.getHexString().toUpperCase() + ' · rough ' + m0.roughness.toFixed(2) + ' · metal ' + m0.metalness.toFixed(2) + '' +
'Size' + size.x.toFixed(2) + ' × ' + size.y.toFixed(2) + ' × ' + size.z.toFixed(2) + '' +
'Mesh' + polyCount(o) + ' triangles · ' + vertCount(o) + ' verts · res ' + o.userData.res + '×' +
'Blocks' + blocks.length + ' in scene'
: 'Typenothing selected — tap a blockBlocks' + blocks.length + ' in scene';
document.querySelectorAll('[data-xf]').forEach(function(inp){
if(document.activeElement === inp) return;
inp.disabled = !o;
if(!o){ inp.value = ''; return; }
var k = inp.getAttribute('data-xf').split('.');
var v = k[0] === 'p' ? o.position[k[1]] : k[0] === 'r' ? o.rotation[k[1]] * 180 / Math.PI : o.scale[k[1]];
inp.value = Math.round(v * 100) / 100;
});
document.querySelectorAll('[data-slider]').forEach(function(inp){
if(!m0) return; var k = inp.getAttribute('data-slider');
inp.value = k === 'roughness' ? m0.roughness : k === 'metalness' ? m0.metalness : k === 'opacity' ? m0.opacity : m0.emissiveIntensity;
});
/* phone metadata card */
document.getElementById('card').innerHTML = 'ARTIST WORKFLOW & METADATA ›' +
(o ? 'Type: ' + esc(label(o)) + 'Pos: ' + fmtPos(o) + 'Mesh: ' + polyCount(o) + ' tris · Size ' + size.y.toFixed(1) + ' tall'
: 'No block selectedTap a block, or Mesh Primitives to add one') +
'History: ' + undoStack.length + ' step(s)' + (redoStack.length ? ' · ' + redoStack.length + ' redo' : '') + '';
/* history timeline */
var h = '';
for(var i=redoStack.length-1;i>=0;i--) h += '↷ ' + esc(redoStack[i].label) + '';
for(var j=undoStack.length-1;j>=Math.max(0, undoStack.length-25);j--) h += '' + esc(undoStack[j].label) + '';
document.getElementById('hist').innerHTML = h || 'No steps yet.';
/* layers */
document.getElementById('layerlist').innerHTML = blocks.length ? blocks.map(function(b){
return '' +
'' +
'
';
}).join('') : 'No blocks yet.
';
}
function renderLib(){
var lib = readLib();
document.getElementById('liblist').innerHTML = lib.length ? lib.map(function(r, i){
return '' +
'