Hero Studio

@@ -177,9 +177,13 @@ label.chk input { accent-color:var(--accent); width:14px; height:14px; cursor:po   position:absolute; left:5.75cqw; top:8.5cqw; width:33cqw; z-index:3; } .hero[data-layout=mirror] .textzone { left:auto; right:5.75cqw; }-.wordmark { display:flex; align-items:center; gap:.7cqw; margin-bottom:2.2cqw; }-.wordmark svg { width:1.15cqw; height:1.15cqw; stroke:#e6edf3; stroke-width:2; fill:none; }-.wordmark span { font-family:'Familjen Grotesk'; font-weight:700; font-size:1.05cqw; letter-spacing:.34em; color:#e6edf3; }+.wordmark { display:flex; align-items:center; margin-bottom:2.2cqw; }+/* the official Adom wordmark (adom-logo.svg), recolored white for dark heroes via mask */+.wordmark .wmark {+  display:block; width:7.8cqw; height:1.72cqw; background:#e6edf3;+  -webkit-mask:url('adom-logo.svg') no-repeat left center / contain;+          mask:url('adom-logo.svg') no-repeat left center / contain;+} .h-title {   font-family:'Familjen Grotesk'; font-weight:700; font-size:4.1cqw; line-height:1.02;   letter-spacing:-.09cqw; color:#e6edf3; margin-bottom:1.4cqw;@@ -368,6 +372,25 @@ body[data-mode=component] .mode-app { display:none; } .deskmock { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:10px; } .deskhead { font-family:'Familjen Grotesk'; font-weight:500; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-2); } +/* render mode: ?render=1 strips all chrome for the server-side PNG shot */+body[data-render] header, body[data-render] #panel, body[data-render] #contexts,+body[data-render] #toasts, body[data-render] .guide { display:none !important; }+body[data-render] main, body[data-render] #stage { display:block; padding:0; overflow:hidden; }+body[data-render] #hero { width:1600px; max-width:none; aspect-ratio:auto; height:1000px; border-radius:0; border:none; box-shadow:none; }++/* generated-hero preview modal */+#genmodal { position:fixed; inset:0; z-index:99997; background:rgba(5,9,14,.8); display:none; align-items:center; justify-content:center; padding:32px; }+#genmodal.show { display:flex; }+.genbox { max-width:min(1000px, 92vw); background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; box-shadow:0 24px 80px rgba(0,0,0,.6); }+.genbox img { display:block; width:100%; border-radius:8px; border:1px solid var(--border); }+.genrow { display:flex; align-items:center; gap:10px; margin-top:10px; }+.genrow .hint { margin:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }+.genrow a { color:var(--accent); font-size:13px; text-decoration:none; }+.genrow a:hover { color:var(--accent-bright); }+.btn-primary { border-color:var(--accent); background:rgba(0,184,176,.12); font-weight:500; }+.btn-primary:hover { background:rgba(0,184,176,.2); }+.btn-primary:disabled { opacity:.55; cursor:wait; }+ /* tooltip + toast */ #tip {   position:fixed; z-index:99999; background:var(--overlay); border:1px solid var(--border);@@ -494,6 +517,7 @@ body[data-mode=component] .mode-app { display:none; }     <label class="chk"><input type="checkbox" id="chk-scores"> Trending + stars (dynamic)</label>     <label class="chk"><input type="checkbox" id="chk-author"> Author</label>     <label class="chk"><input type="checkbox" id="chk-slug"> Wiki slug, lower right</label>+    <button class="btn btn-primary" id="btn-generate" data-tip="Render the current hero to a 2000x1250 PNG on the server, with provenance metadata">Generate hero PNG</button>     <button class="btn" id="btn-reset">Reset to proposed default</button>   </div> @@ -503,7 +527,7 @@ body[data-mode=component] .mode-app { display:none; }        <div class="textzone">         <div class="wordmark" id="el-logo">-          <svg viewBox="0 0 24 24"><path d="M12 3 3 21h18z"/></svg><span>ADOM</span>+          <span class="wmark"></span>         </div>         <div class="h-title" id="el-title"></div>         <div class="h-sub" id="el-sub"></div>@@ -512,7 +536,7 @@ body[data-mode=component] .mode-app { display:none; }        <div class="comp-side"><div class="comp-img"></div></div>       <div class="ctextzone">-        <div class="wordmark"><svg viewBox="0 0 24 24"><path d="M12 3 3 21h18z"/></svg><span>ADOM</span></div>+        <div class="wordmark"><span class="wmark"></span></div>         <div class="c-chips">           <span class="c-family" id="c-family"></span>           <span class="c-family c-mpnchip" id="c-mpn-chip"></span>@@ -606,8 +630,20 @@ body[data-mode=component] .mode-app { display:none; }  <div id="tip"></div> <div id="toasts"></div>+<div id="genmodal">+  <div class="genbox">+    <img id="gen-img" alt="Generated hero">+    <div class="genrow">+      <div class="hint" id="gen-path"></div>+      <a id="gen-open" target="_blank" href="#">Open full size</a>+      <a href="#" id="gen-close">Close</a>+    </div>+  </div>+</div>  <script>+if (new URLSearchParams(location.search).has('render')) document.body.dataset.render = '1';+ /* console relay: the AI reads GET /console instead of DevTools */ (function () {   const post = (level, args) => fetch('console', { method:'POST', headers:{'Content-Type':'application/json'},@@ -866,6 +902,30 @@ $('btn-rand').addEventListener('click', () => {     toast('Randomized: ' + p.title, 'info');   } });+let seenGenSeq = 0;+function showGenerated(g) {+  $('gen-img').src = g.url + '?t=' + g.ts;+  $('gen-path').textContent = g.file;+  $('gen-open').href = g.url;+  $('genmodal').classList.add('show');+}+/* fires for local clicks AND for API-triggered generates (SSE or poll), deduped by seq */+function handleGen(g) {+  if (g && g.ok && g.seq > seenGenSeq) { seenGenSeq = g.seq; showGenerated(g); }+}+$('gen-close').addEventListener('click', e => { e.preventDefault(); $('genmodal').classList.remove('show'); });+$('genmodal').addEventListener('click', e => { if (e.target === $('genmodal')) $('genmodal').classList.remove('show'); });+$('btn-generate').addEventListener('click', () => {+  const b = $('btn-generate');+  b.disabled = true; b.textContent = 'Generating...';+  toast('Rendering the hero on the server', 'info');+  fetch('generate', { method: 'POST' }).then(r => r.json()).then(g => {+    b.disabled = false; b.textContent = 'Generate hero PNG';+    if (g.ok) handleGen(g); // success toast arrives via the live channel+    else toast('Generate failed: ' + (g.error || 'unknown') + (g.hint ? '. ' + g.hint : ''), 'error');+  }).catch(() => { b.disabled = false; b.textContent = 'Generate hero PNG'; toast('Generate failed: network error', 'error'); });+});+ $('btn-reset').addEventListener('click', () => {   send({ mode:'app', layout:'bleed-bottom', theme:'midnight', titleMode:'overlay-only', gradAngle:155,     comp:{ id:'sm02b-srss-tb', imgSrc:'photo', layout:'photo-right', mpn:'under-title' },@@ -909,6 +969,7 @@ Promise.all([   comps = cp;   state = st;   seenToastSeq = (st._toast && st._toast.seq) || 0; // don't replay a stale toast on load+  seenGenSeq = (st._gen && st._gen.seq) || 0;       // nor a stale generated modal   const sel = $('sel-page');   sel.innerHTML = pages.map(p =>     '<option value="' + p.owner + '/' + p.slug + '">' + p.title + ' (' + p.type + ')</option>').join('');@@ -923,10 +984,12 @@ Promise.all([   const es = new EventSource('events');   es.addEventListener('state', e => { state = JSON.parse(e.data); render(); });   es.addEventListener('toast', e => { handleToast(JSON.parse(e.data)); });+  es.addEventListener('generated', e => { handleGen(JSON.parse(e.data)); });   // poll fallback in case the proxy buffers the event stream   setInterval(() => {     fetch('state').then(r => r.json()).then(st => {       handleToast(st._toast);+      handleGen(st._gen);       if (JSON.stringify(st) !== JSON.stringify(state)) { state = st; render(); }     }).catch(()=>{});   }, 1000);

@@ -1,7 +1,8 @@-// Hero Studio server: state, SSE live channel, console relay, toast hook, static UI.+// Hero Studio server: state, SSE live channel, console relay, toast hook, generate API, static UI. const http = require('http'); const fs = require('fs'); const path = require('path');+const { spawn, execFile } = require('child_process');  const PORT = 8846; const ROOT = path.join(__dirname, 'public');@@ -23,8 +24,12 @@ let state = {  const consoleBuf = []; const clients = new Set();-let toastSeq = 0;+// seq counters seed from the clock so a server restart never replays or masks events+let toastSeq = Date.now(); let lastToast = null;+let genSeq = Date.now();+let lastGen = null;+let generating = false;  function broadcast(event, data) {   const msg = 'event: ' + event + '\ndata: ' + JSON.stringify(data) + '\n\n';@@ -66,7 +71,7 @@ const server = http.createServer((req, res) => {    if (p === '/state' && req.method === 'GET') {     res.writeHead(200, { 'Content-Type': 'application/json' });-    return res.end(JSON.stringify(Object.assign({}, state, { _toast: lastToast })));+    return res.end(JSON.stringify(Object.assign({}, state, { _toast: lastToast, _gen: lastGen })));   }   if (p === '/state' && req.method === 'POST') {     return readBody(req, (err, body) => {@@ -121,6 +126,80 @@ const server = http.createServer((req, res) => {     return res.end(JSON.stringify(COMPONENTS));   } +  if (p === '/generate' && req.method === 'POST') {+    if (generating) {+      res.writeHead(200, { 'Content-Type': 'application/json' });+      return res.end(JSON.stringify({ ok: false, error: 'a generate is already running', hint: 'wait for it to finish, then retry' }));+    }+    generating = true;+    const slug = state.mode === 'component'+      ? ((COMPONENTS.find(c => c.id === state.comp.id) || COMPONENTS[0]).slug)+      : (state.page.split('/')[1] || 'hero');+    const ts = Date.now();+    const file = 'hero-' + slug + '-' + ts + '.png';+    const outDir = path.join(__dirname, 'generated');+    fs.mkdirSync(outDir, { recursive: true });+    const outFile = path.join(outDir, file);+    logLine('info', 'generate -> ' + file);+    const child = spawn(process.execPath, [path.join(__dirname, 'render-hero.mjs'), 'http://localhost:' + PORT + '/?render=1', outFile], {+      env: process.env, stdio: ['ignore', 'pipe', 'pipe'],+    });+    let errBuf = '';+    child.stderr.on('data', (c) => { errBuf += c; });+    const finish = (payload) => {+      generating = false;+      res.writeHead(200, { 'Content-Type': 'application/json' });+      res.end(JSON.stringify(payload));+    };+    const timer = setTimeout(() => { child.kill(); }, 60000);+    child.on('close', (code) => {+      clearTimeout(timer);+      if (code !== 0 || !fs.existsSync(outFile)) {+        logLine('error', 'generate failed: ' + errBuf.slice(-400));+        return finish({ ok: false, error: errBuf.trim().split('\n').pop() || 'render exited ' + code, hint: 'set CHROME and PUPPETEER_CORE env vars for the server process' });+      }+      // downscale to the hero standard 2000x1250 and stamp provenance metadata+      const meta = JSON.stringify({ generator: 'hero-studio', version: '0.3.0', ts, state: { mode: state.mode, page: state.page, comp: state.comp, theme: state.theme, layout: state.layout, gradAngle: state.gradAngle } });+      const py = 'import sys\n' ++        'from PIL import Image\n' ++        'from PIL.PngImagePlugin import PngInfo\n' ++        'f, meta = sys.argv[1], sys.argv[2]\n' ++        'im = Image.open(f)\n' ++        'im = im.resize((2000, round(2000 * im.size[1] / im.size[0])), Image.LANCZOS)\n' ++        'info = PngInfo(); info.add_text("comment", meta)\n' ++        'im.save(f, pnginfo=info)\n';+      execFile('python3', ['-c', py, outFile, meta], (err) => {+        if (err) return execFile('convert', [outFile, '-resize', '2000x', '-set', 'comment', meta, outFile], (err2) => {+          if (err2) logLine('warn', 'no python3/PIL or convert; keeping full-size PNG without metadata');+          afterFinalize();+        });+        afterFinalize();+      });+      function afterFinalize() {+        try { fs.copyFileSync(outFile, path.join(outDir, 'latest.png')); } catch {}+        genSeq += 1;+        lastGen = { seq: genSeq, ok: true, file, url: 'generated/' + file, latest: 'generated/latest.png', ts, slug };+        logLine('info', 'generated ' + file);+        broadcast('generated', lastGen);+        broadcast('toast', { text: 'Hero generated: ' + file, kind: 'success', seq: ++toastSeq });+        lastToast = { text: 'Hero generated: ' + file, kind: 'success', seq: toastSeq };+        finish(lastGen);+      }+    });+    return;+  }++  if (p.startsWith('/generated/')) {+    const gfile = path.normalize(p.slice('/generated/'.length)).replace(/^(\.\.[/\\])+/, '');+    const gfull = path.join(__dirname, 'generated', gfile);+    if (!gfull.startsWith(path.join(__dirname, 'generated'))) { res.writeHead(404); return res.end('not found'); }+    return fs.readFile(gfull, (err, buf) => {+      if (err) { res.writeHead(404); return res.end('not found'); }+      res.writeHead(200, { 'Content-Type': 'image/png', 'Cache-Control': 'no-cache' });+      res.end(buf);+    });+  }+   // static   let file = p === '/' ? '/index.html' : p;   file = path.normalize(file).replace(/^(\.\.[/\\])+/, '');