SOLID header + tools */
osEl.appendChild(makeHeader('SOLID'));
SOLID_TOOLS.forEach(function(b){
osEl.appendChild(makeButton(b[0], b[1], b[2]));
allFns.push({label:b[1], fn:b[2]});
});
/* Collapse button โ gold, inside panel */
var x = document.createElement('button');
x.innerHTML = '
';
x.title = 'Collapse';
x.style.cssText = 'position:absolute;top:60px;right:16px;width:44px;height:44px;'
+ 'border-radius:50%;padding:0;border:2px solid #d8a920;background:#141006;'
+ 'cursor:pointer;z-index:1001;overflow:hidden;touch-action:manipulation;';
x.onclick = function(){ pulleyUp(); };
x.addEventListener('touchend', function(e){ e.preventDefault(); pulleyUp(); }, {passive:false});
osEl.appendChild(x);
buildPulley();
buildHeart();
hideOldButtons();
startWatchers();
wireOSToggle();
}
/* --------------------------------------------------------------------------
Pulley โ the table's home
-------------------------------------------------------------------------- */
function buildPulley(){
pulleyBtn = document.createElement('button');
pulleyBtn.id = 'ruby-pulley';
pulleyBtn.innerHTML = '
';
pulleyBtn.title = 'OS';
pulleyBtn.style.cssText = 'position:fixed;bottom:20px;right:20px;width:60px;height:60px;'
+ 'border-radius:50%;padding:0;border:2px solid #d8a920;background:#141006;'
+ 'cursor:pointer;z-index:1001;display:none;overflow:hidden;'
+ 'box-shadow:0 0 12px rgba(255,215,0,0.5);touch-action:manipulation;';
document.body.appendChild(pulleyBtn);
rope = document.createElement('div');
rope.id = 'ruby-rope';
rope.style.cssText = 'position:fixed;bottom:80px;right:48px;width:3px;height:0;'
+ 'background:linear-gradient(to top,#d8a920,#ffd700);z-index:1000;display:none;'
+ 'transition:height 0.6s cubic-bezier(0.4,0,0.2,1);';
document.body.appendChild(rope);
/* Tap: cycle. Long-press: reset. Triple-tap: heart. */
var lpT = null, taps = 0, tapT = null;
pulleyBtn.addEventListener('touchstart', function(){
lpT = setTimeout(function(){ cycleIdx = -1; status('cycle reset'); }, 800);
}, {passive:true});
pulleyBtn.addEventListener('touchend', function(e){
if(lpT) clearTimeout(lpT);
e.preventDefault();
taps++;
if(tapT) clearTimeout(tapT);
tapT = setTimeout(function(){
if(taps >= 3){ window.openHeart(); }
else { cycleOS(); }
taps = 0;
}, 350);
}, {passive:false});
pulleyBtn.onclick = function(){ cycleOS(); };
}
function setFloaters(visible){
var ids = ['creatorcompass','streetmap','os-toggle','ruby-pulley'];
ids.forEach(function(id){
var el = document.getElementById(id);
if(el) el.style.display = visible ? '' : 'none';
});
/* Kill dead pencil/triangle permanently */
document.querySelectorAll('button').forEach(function(b){
var t = (b.textContent||'').trim();
if(t==String.fromCharCode(9999)||t=='\u270f'||t==String.fromCharCode(9650)){
if(!b.closest('#ruby-os')){ b.style.display='none'; b.remove(); }
}
});
}
window.pulleyUp = function(){
setFloaters(true);
rope.style.display = 'block';
rope.style.height = '50vh';
pulleyBtn.style.display = 'block';
setTimeout(function(){
osEl.style.transform = 'translate(-50%,-170%) scale(0.8)';
osEl.style.opacity = '0';
}, 100);
setTimeout(function(){
osEl.style.display = 'none';
rope.style.height = '0';
setTimeout(function(){ rope.style.display = 'none'; }, 600);
}, 700);
};
window.pulleyDown = function(){
setFloaters(false);
osEl.style.display = 'flex';
rope.style.display = 'block';
setTimeout(function(){
rope.style.height = '50vh';
osEl.style.transform = 'translate(-50%,-50%) scale(1)';
osEl.style.opacity = '1';
}, 50);
setTimeout(function(){
pulleyBtn.style.display = 'none';
rope.style.height = '0';
setTimeout(function(){ rope.style.display = 'none'; }, 600);
}, 700);
};
window.cycleOS = function(){
if(osEl.style.display === 'none'){ window.pulleyDown(); cycleIdx = -1; return; }
cycleIdx = (cycleIdx + 1) % allFns.length;
var it = allFns[cycleIdx];
try{ it.fn(); status(it.label+' ('+(cycleIdx+1)+'/'+allFns.length+')'); }catch(e){}
};
/* Collapse handles โ ONLY at top corners, never on the buttons */
function startWatchers(){
var hl = document.createElement('button');
hl.innerHTML = '\u25c0';
hl.title = 'Collapse';
hl.style.cssText = 'position:absolute;top:28px;left:8px;width:44px;height:44px;'