Hero Studio

@@ -295,8 +295,18 @@ label.chk input { accent-color:var(--accent); width:14px; height:14px; cursor:po /* dynamic-vs-baked (#16): the overlay breathes, tags itself, and hold-hides */ .hero.show-mq #mqoverlay { animation:mqbreathe 3.4s ease-in-out infinite; cursor:pointer; } @keyframes mqbreathe { 0%,100% { opacity:1; } 50% { opacity:.5; } }-#mqoverlay::after { content:'DYNAMIC \00b7 homepage adds this, NOT in your PNG \00b7 hold to hide'; position:absolute; right:1.2cqw; top:.6cqw; font-family:'JetBrains Mono',monospace; font-size:.85cqw; letter-spacing:.06em; color:#e8a13c; } .hero.mq-hold #mqoverlay { display:none !important; }+#mqoverlay .mqo-prompt { display:flex; gap:.8cqw; align-items:center; margin-top:.6cqw; font-family:'JetBrains Mono',monospace; font-size:1.05cqw; color:#c9d1d9; }+#mqoverlay .mqo-prompt button { font-size:.95cqw; padding:.2cqw .8cqw; border-radius:.5cqw; border:1px solid rgba(232,161,60,.6); background:rgba(232,161,60,.12); color:#e8a13c; cursor:pointer; }+.hero.show-mq #mqoverlay { outline:2px dashed rgba(232,161,60,.85); outline-offset:-2px; background:rgba(232,161,60,.045); }+/* the stagebar (#21/#23): stage chrome lives ABOVE the stage, never on it */+#stagebar { display:none; align-items:center; gap:10px; margin:10px 0 8px; }+#stagebar.on { display:flex; }+#stagebar .seg { display:flex; border:1px solid #30363d; border-radius:8px; overflow:hidden; }+#stagebar .seg button { background:#0d1117; color:var(--text); border:0; padding:6px 12px; font-size:12.5px; cursor:pointer; }+#stagebar .seg button.on { background:rgba(0,184,176,.18); color:var(--accent-bright); }+#stagebar .legend { font-size:12px; color:#8b949e; line-height:1.35; }+#stagebar .legend b { color:#e8a13c; font-weight:600; } .obadge {   display:flex; align-items:center; gap:.42cqw; font-family:'JetBrains Mono',monospace;   font-size:.95cqw; color:#aeb8c4;@@ -728,6 +738,13 @@ body[data-render] #hero { width:1600px; max-width:none; aspect-ratio:auto; heigh       <div id="lintbox"></div>       <button class="btn btn-primary" id="v-generate" disabled>Generate hero PNG</button>     </div>+    <div id="stagebar">+      <div class="seg">+        <button id="sb-png">Exactly my PNG</button>+        <button id="sb-mq">With homepage overlay</button>+      </div>+      <div class="legend"><b>amber-outlined = dynamic</b>: the homepage adds it, it is NOT in your PNG. Press D (or hold the band) to flip. The lower band stays calm in the image because the marquee overlays its own info there.</div>+    </div>     <div id="hero" class="hero" data-theme="midnight" data-layout="bleed-bottom">       <div class="bg"></div> @@ -791,6 +808,7 @@ body[data-render] #hero { width:1600px; max-width:none; aspect-ratio:auto; heigh         <h3 class="mqo-title" id="mqo-title"></h3>         <p class="mqo-brief" id="mqo-brief"></p>         <span class="mqo-owner" id="mqo-owner"></span>+        <div class="mqo-prompt" id="mqo-prompt" style="display:none"><span id="mqo-prompt-text"></span><button id="mqo-prompt-copy">copy</button></div>       </div>       <div class="pill-tr" id="pill-tr" data-tip="Type pill: bakes into the PNG top right (app / skill / component). Toggle under Image badges"><span class="pill app" id="l-pill">APP</span></div>       <div class="slug-br" id="slug-br" data-tip="Wiki slug: bakes into the PNG bottom right. Toggle under Image badges"><a class="l-slug" id="l-slug" target="_blank" href="#"></a></div>@@ -822,7 +840,7 @@ body[data-render] #hero { width:1600px; max-width:none; aspect-ratio:auto; heigh         </div>       </div> -      <div class="guide"><span>marquee overlays its info over this lower band; keep it calm</span></div>+      <div class="guide"></div>     </div>      <div id="contexts">@@ -996,6 +1014,11 @@ function render() {   }   $('verifybar').style.display = state.verify && !approvedHere ? 'block' : 'none'; +  // stagebar (#21/#23): stage chrome above the stage, never on it+  $('stagebar').classList.toggle('on', !!state.verify || !!state.marqueePreview);+  $('sb-png').classList.toggle('on', !state.marqueePreview);+  $('sb-mq').classList.toggle('on', !!state.marqueePreview);+   // walkthrough + procedural background + measured layout lint + page fields   showTourStep();   scheduleLint();@@ -1015,7 +1038,12 @@ function render() {     // planned fix so nobody thinks it is an accident.     $('mqo-title').textContent = d.title;     $('mqo-brief').textContent = firstSentence(d.brief || p.brief || '', 120);-    $('mqo-owner').textContent = 'wiki.adom.inc/' + d.owner + '/' + d.slug + '   (overlay as the homepage renders TODAY; adom/wiki#80 will drop this duplicated title)';+    $('mqo-owner').textContent = 'wiki.adom.inc/' + d.owner + '/' + d.slug;+    // sample prompt: DYNAMIC by design (#22): metadata the page renders with a+    // copy button; if it were pixels nobody could copy it+    const sp = (Array.isArray(d.sample_prompts) && d.sample_prompts[0] && d.sample_prompts[0].prompt) || state.samplePrompt || '';+    $('mqo-prompt').style.display = sp ? 'flex' : 'none';+    $('mqo-prompt-text').textContent = sp ? '"' + sp + '"' : '';   }   $('chk-mqpreview').checked = !!state.marqueePreview; @@ -1522,6 +1550,26 @@ function runLint() {     }   } +  // 4b. full-hero imports (#22): the composed checks cannot see imported+  // pixels; say so instead of reporting all clear, and run the band scan.+  const vit2 = state.vitrine || {};+  if (vit2.full && vit2.src) {+    scanImportBand(vit2.src);+    items.push({ id: 'import-unlinted', level: 'warn', el: 'fullimport-img', msg: 'full-hero import: composed-layout checks cannot inspect imported pixels; verify the lower band and margins by eye before ratifying' });+    if (bandScan.status === 'done' && bandScan.texty) {+      items.push({ id: 'import-band-text', level: 'warn', el: 'fullimport-img', msg: 'the imported image appears to carry text or graphics in the lower dynamic band (heuristic edge scan): the homepage overlays its own info there, keep the band calm' });+    }+  }++  // 4c. prompt-looking text baked into pixels (#22): sample prompts belong in+  // page metadata (sample_prompts), rendered dynamically with a copy button.+  for (const t of texts) {+    const txt = ($(t.id).textContent || '');+    if (/["\u201c\u201d'][^"\u201c\u201d']{12,}["\u201c\u201d']/.test(txt)) {+      items.push({ id: 'prompt-' + t.id, level: 'warn', el: t.id, msg: t.name + ' contains quoted prompt-looking text; a baked prompt cannot be copied. Put it in sample_prompts (page metadata) and the page renders it dynamically with a copy button' });+    }+  }+   // 4. title wrap count: a 4-line title is almost never intended.   const tEl = $('el-title');   if (vis(tEl)) {@@ -1592,6 +1640,60 @@ $('tp-flag').addEventListener('click', () => { }); $('tp-skip').addEventListener('click', () => { clearTourGlow(); $('tourpop').style.display = 'none'; send({ tour: false }); }); +$('mqo-prompt-copy').addEventListener('click', async (e) => {+  e.stopPropagation();+  const txt = $('mqo-prompt-text').textContent.replace(/^"|"$/g, '');+  try { await navigator.clipboard.writeText(txt); } catch {}+  handleToast({ text: 'sample prompt copied', kind: 'success', seq: Date.now() });+});++/* full-hero import band scan (#22.1): composed-layout lint cannot see imported+   pixels, so the class of hero most likely to violate the band skipped every+   check. A cheap edge-density scan of the bottom 24% flags text-like structure+   in the band; it is a heuristic and says so. */+let bandScan = { key: '', status: 'idle', texty: false };+function scanImportBand(src) {+  const key = src.length + ':' + src.slice(40, 72);+  if (bandScan.key === key) return;+  bandScan = { key, status: 'pending', texty: false };+  const img = new Image();+  img.onload = () => {+    try {+      const w = Math.min(800, img.width);+      const bandH = Math.max(10, Math.round(img.height * 0.24 * (w / img.width)));+      const c = document.createElement('canvas');+      c.width = w; c.height = bandH;+      const g = c.getContext('2d');+      g.drawImage(img, 0, img.height * 0.76, img.width, img.height * 0.24, 0, 0, w, bandH);+      const d = g.getImageData(0, 0, w, bandH).data;+      let edges = 0, n = 0;+      for (let y = 0; y < bandH; y++) {+        for (let x = 1; x < w; x++) {+          const i = (y * w + x) * 4, j = i - 4;+          const a = d[i] * .3 + d[i + 1] * .59 + d[i + 2] * .11;+          const b = d[j] * .3 + d[j + 1] * .59 + d[j + 2] * .11;+          if (Math.abs(a - b) > 60) edges++;+          n++;+        }+      }+      bandScan.texty = n > 0 && (edges / n) > 0.0015;+      bandScan.status = 'done';+    } catch { bandScan.status = 'failed'; }+    scheduleLint();+  };+  img.onerror = () => { bandScan.status = 'failed'; scheduleLint(); };+  img.src = src;+}++/* the stagebar (#21/#23): explicit dynamic on/off, keyboard D, legend off-stage */+$('sb-png').addEventListener('click', () => send({ marqueePreview: false }));+$('sb-mq').addEventListener('click', () => send({ marqueePreview: true }));+document.addEventListener('keydown', (e) => {+  if (e.key.toLowerCase() === 'd' && !e.target.closest('input,textarea')) {+    send({ marqueePreview: !state.marqueePreview });+  }+});+ /* hold-to-hide the dynamic overlay (#16): press the band to see the pure    export, release to bring the overlay back */ (() => {