init-rb-rebirth-00357

/* rb-rebirth-00357.js — Rebirth board, Day 00357. * * Clean restart. No rb2 lineage. The white one's dimensions: * a 360px-wide white pill, 44px tall, 22px corners. It holds an * input. At the bottom is a mylar handle — drag it down to pull * the (empty) mylar pane open wider. */ (function () { var swatch = window.swatch || function (n) { return getComputedStyle(document.documentElement).getPropertyValue('--swatch-' + n).trim(); }; 'use strict';

var WHITE = { width: 360, // the white one's width inputH: 44, // the white one's height (compressed) radius: 22, // the white one's corner bg: swatch('terminal-cursor'), mylarMin: 0, // mylar starts closed mylarMax: 520 // how far the handle pulls it open };

function injectCSS() { if (document.getElementById('rbr-styles')) return; var css = [ '#rb-rebirth {', ' position: fixed;', ' left: 50%;', ' bottom: 24px;', ' transform: translateX(-50%);', ' width: ' + WHITE.width + 'px;', ' background: ' + WHITE.bg + ';', ' border-radius: ' + WHITE.radius + 'px;', ' box-shadow: 0 8px 28px rgba(0,0,0,0.18);', ' font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;', ' display: flex;', ' flex-direction: column;', ' overflow: hidden;', ' z-index: 9000;', '}', // input — the surface, fills the pill at the white one's height '#rbr-input {', ' height: ' + WHITE.inputH + 'px;', ' padding: 0 18px;', ' display: flex;', ' align-items: center;', ' font-size: 15px;', ' color: #111;', ' outline: none;', '}', '#rbr-input:empty::before {', ' content: attr(data-placeholder);', ' color: var(--swatch-ui-b8b8b8);', '}', // mylar — empty content pane, opens downward via the handle '#rbr-mylar {', ' height: ' + WHITE.mylarMin + 'px;', ' overflow: auto;', ' background: var(--swatch-ui-f5f5f5);', ' border-top: 1px solid var(--swatch-ui-ececec);', '}', // handle — grab bar at the bottom, drag down to pull mylar open '#rbr-handle {', ' height: 16px;', ' flex: none;', ' display: flex;', ' align-items: center;', ' justify-content: center;', ' cursor: ns-resize;', ' touch-action: none;', '}', '#rbr-handle::before {', ' content: "";', ' width: 40px;', ' height: 4px;', ' border-radius: var(--radius-xs, 2px);', ' background: var(--swatch-ui-d0d0d0);', '}', '#rb-rebirth.dragging #rbr-handle::before { background: var(--swatch-ui-9aa39c); }' ].join('\n'); var s = document.createElement('style'); s.id = 'rbr-styles'; s.textContent = css; document.head.appendChild(s); }

// Drag the handle: pull down to grow the mylar, push up to close it. function attachHandle(handle, mylar) { var root = document.getElementById('rb-rebirth'); var startY = 0, startH = 0, active = false;

handle.addEventListener('pointerdown', function (e) { active = true; startY = e.clientY; startH = mylar.offsetHeight; root.classList.add('dragging'); handle.setPointerCapture(e.pointerId); e.preventDefault(); }); handle.addEventListener('pointermove', function (e) { if (!active) return; var h = startH + (e.clientY - startY); // down = taller if (h < WHITE.mylarMin) h = WHITE.mylarMin; if (h > WHITE.mylarMax) h = WHITE.mylarMax; mylar.style.height = h + 'px'; }); function end() { if (!active) return; active = false; root.classList.remove('dragging'); } handle.addEventListener('pointerup', end); handle.addEventListener('pointercancel', end); }

function mount() { if (document.getElementById('rb-rebirth')) return; injectCSS();

var root = document.createElement('div'); root.id = 'rb-rebirth'; root.innerHTML = '<div id="rbr-input" contenteditable="true" data-placeholder="input"></div>' + '<div id="rbr-mylar"></div>' + '<div id="rbr-handle" title="Pull down to open"></div>'; document.body.appendChild(root);

attachHandle( document.getElementById('rbr-handle'), document.getElementById('rbr-mylar') ); }

if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', mount); } else { mount(); }

console.log('[rb-rebirth] rb-rebirth-00357.js mounted'); })();