Hero Studio

@@ -108,6 +108,9 @@ label.chk input { accent-color:var(--accent); width:14px; height:14px; cursor:po /* ---------- stage + hero canvas ---------- */ #stage { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:18px; padding:22px; min-width:0; overflow:auto; } .hero {+  /* equal safe-area margins on all four sides (John, hero-studio#1 ask 7);+     corner badges keep their own uniform tighter inset */+  --inset:4.5cqw; --badge-inset:2.6cqw;   aspect-ratio:16/10; position:relative; overflow:hidden;   border-radius:12px; border:1px solid var(--border); container-type:inline-size;   --ga:155deg;@@ -184,9 +187,9 @@ label.chk input { accent-color:var(--accent); width:14px; height:14px; cursor:po  /* ---------- image-zone text column ---------- */ .textzone {-  position:absolute; left:6cqw; top:3.75cqw; width:37cqw; z-index:3;+  position:absolute; left:var(--inset); top:var(--inset); width:37cqw; z-index:3; }-.hero[data-layout=mirror] .textzone { left:auto; right:6cqw; }+.hero[data-layout=mirror] .textzone { left:auto; right:var(--inset); } .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 {@@ -224,7 +227,12 @@ label.chk input { accent-color:var(--accent); width:14px; height:14px; cursor:po .titlebar .t { font-family:'Satoshi'; font-size:.82cqw; color:#8b949e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .winbtns { margin-left:auto; display:flex; gap:.9cqw; align-items:center; } .winbtns svg { width:.72cqw; height:.72cqw; stroke:#8b949e; stroke-width:2; fill:none; }-.appbody { flex:1; display:flex; min-height:0; }+.appbody { flex:1; display:flex; min-height:0; position:relative; }+.vitrine-img { display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }+.hero.has-vitrine .vitrine-img { display:block; }+.fullimport-img { display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }+.hero.fullimport .fullimport-img { display:block; }+.hero.fullimport .textzone, .hero.fullimport .window { display:none; } .sidebar { flex:0 0 11cqw; background:#131920; border-right:1px solid rgba(255,255,255,.05); padding:.8cqw .7cqw; } .srow { height:1.5cqw; border-radius:.35cqw; background:rgba(255,255,255,.05); margin-bottom:.55cqw; } .srow.on { background:rgba(0,184,176,.18); border:1px solid rgba(0,184,176,.35); }@@ -238,8 +246,8 @@ label.chk input { accent-color:var(--accent); width:14px; height:14px; cursor:po .tcell { height:1.05cqw; border-radius:.25cqw; background:rgba(255,255,255,.06); }  /* ---------- the lower-third textual overlay ---------- */-.pill-tr { position:absolute; top:2.4cqw; right:2.6cqw; z-index:6; }-.slug-br { position:absolute; right:2.6cqw; bottom:2.2cqw; z-index:6; }+.pill-tr { position:absolute; top:var(--badge-inset); right:var(--badge-inset); z-index:6; }+.slug-br { position:absolute; right:var(--badge-inset); bottom:var(--badge-inset); z-index:6; } .lower {   position:absolute; left:0; right:0; bottom:0; height:33.4%; z-index:4;   background:linear-gradient(180deg, rgba(10,14,20,0) 0%, rgba(10,14,20,.62) 22%, rgba(10,14,20,.94) 62%, rgba(10,14,20,.98) 100%);@@ -296,14 +304,14 @@ body[data-mode=component] .mode-app { display:none; }   -webkit-mask-image:linear-gradient(270deg, transparent 0, #000 26%);           mask-image:linear-gradient(270deg, transparent 0, #000 26%); }-.hero[data-clayout=photo-left] .ctextzone { left:auto; right:6cqw; }+.hero[data-clayout=photo-left] .ctextzone { left:auto; right:var(--inset); } .hero[data-clayout=photo-full] .comp-side { left:0; width:100%; } .hero[data-clayout=photo-full] .comp-img { -webkit-mask-image:none; mask-image:none; } .hero[data-clayout=photo-full] .comp-img::after {   content:''; position:absolute; inset:0;   background:linear-gradient(90deg, rgba(10,14,20,.88), rgba(10,14,20,.3) 55%, rgba(10,14,20,.12)); }-.ctextzone { position:absolute; left:6cqw; top:3.75cqw; width:37cqw; z-index:3; }+.ctextzone { position:absolute; left:var(--inset); top:var(--inset); width:37cqw; z-index:3; } .c-chips { display:flex; gap:.8cqw; margin-bottom:2cqw; flex-wrap:wrap; } .c-family {   display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.9cqw; letter-spacing:.12em;@@ -406,9 +414,15 @@ body[data-mode=component] .mode-app { display:none; } .brandrow label { font-size:12px; color:var(--text-2); width:84px; } .brandrow input[type=color] { width:44px; height:26px; border:1px solid var(--border); border-radius:6px; background:var(--surface); padding:1px; cursor:pointer; } +#verifybar { display:none; margin:0 0 14px; border:1px solid var(--accent); background:rgba(0,184,176,.07); border-radius:10px; padding:14px 16px; }+#verifybar .vhead { font-size:13px; color:var(--text); margin-bottom:10px; line-height:1.5; }+#verifybar .vchk { display:block; margin:6px 0; }+#verifybar .vchk .warn { color:#e8a13c; }+#v-generate { margin-top:10px; font-size:14px; padding:10px 18px; }+#v-generate:disabled { opacity:.45; cursor:not-allowed; } /* 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] #toasts, body[data-render] .guide, body[data-render] #verifybar { display:none !important; } /* Per Colby (2026-07-23): the image carries the title, the type pill (top    right), and the full slug (bottom right); the pill and slug BAKE into the    PNG. The page shows the image bare. Only the homepage marquee overlays@@ -512,7 +526,8 @@ body[data-render] #hero { width:1600px; max-width:none; aspect-ratio:auto; heigh     <h3>Package (live wiki data)</h3>     <select id="sel-page" data-tip="Real pages from adom-wiki page trending: title, type, score, stars, author"></select> -    <h3>Screenshot placement</h3>+    <h3>Vitrine placement</h3>+    <div class="hint">The vitrine is the floating app window in the hero (the glass display case). One word, everywhere, per hero-studio#1.</div>     <div class="optgrid" id="grp-layout">       <button class="opt" data-v="bleed-bottom">Bleed bottom</button>       <button class="opt" data-v="bleed-right">Bleed right</button>@@ -523,6 +538,12 @@ body[data-render] #hero { width:1600px; max-width:none; aspect-ratio:auto; heigh       <button class="opt" data-v="mirror">Mirror (text right)</button>     </div>     <div class="hint">The shot may run under the lower third; the overlay scrim covers it. That is the new rule.</div>++    <h3>Vitrine content</h3>+    <input type="file" id="vitrine-file" accept="image/*">+    <label class="chk"><input type="checkbox" id="vitrine-full"> Use the imported image as the FULL hero</label>+    <button class="btn" id="vitrine-clear">Clear import</button>+    <div class="hint">Import a real screenshot into the vitrine instead of the CSS mock (apps show their real UI). Full-hero mode is the re-stamp path: bring in an existing hero image, ratify it here as the human, and the export carries the studio provenance stamp. The type pill and slug still bake on top.</div>     </div>      <h3>Background theme</h3>@@ -574,6 +595,14 @@ body[data-render] #hero { width:1600px; max-width:none; aspect-ratio:auto; heigh   </div>    <div id="stage">+    <div id="verifybar">+      <div class="vhead"><b>Hero verification.</b> The registry requires a human to approve this hero; an AI cannot do it for you. Check each item below, adjust anything that reads wrong (left panel), then Generate. Only this studio's export carries the provenance stamp the gate accepts.</div>+      <label class="chk vchk"><input type="checkbox" id="v-title"> Title reads right</label>+      <label class="chk vchk"><input type="checkbox" id="v-sub"> Subtitle (value-prop) reads right</label>+      <label class="chk vchk"><input type="checkbox" id="v-vitrine"> Vitrine (the app window) shows the right content</label>+      <label class="chk vchk"><input type="checkbox" id="v-type"> <span id="v-type-label">Page type matches</span></label>+      <button class="btn btn-primary" id="v-generate" disabled>Generate hero PNG</button>+    </div>     <div id="hero" class="hero" data-theme="midnight" data-layout="bleed-bottom">       <div class="bg"></div> @@ -608,6 +637,7 @@ body[data-render] #hero { width:1600px; max-width:none; aspect-ratio:auto; heigh           </span>         </div>         <div class="appbody">+          <img class="vitrine-img" id="vitrine-img" alt="">           <div class="sidebar">             <div class="srow on"></div><div class="srow"></div><div class="srow"></div>             <div class="srow"></div><div class="srow"></div><div class="srow"></div><div class="srow"></div>@@ -629,6 +659,7 @@ body[data-render] #hero { width:1600px; max-width:none; aspect-ratio:auto; heigh         </div>       </div> +      <img class="fullimport-img" id="fullimport-img" alt="">       <div class="pill-tr" id="pill-tr"><span class="pill app" id="l-pill">APP</span></div>       <div class="slug-br" id="slug-br"><a class="l-slug" id="l-slug" target="_blank" href="#"></a></div>       <div class="lower">@@ -773,6 +804,26 @@ function render() {     : d.type + ' · score ' + d.score + ' · ' + d.stars + ' stars · ' + d.installs30d + ' installs/30d';   $('btn-guides').classList.toggle('on', !!state.guides); +  // verification chrome (the pose gate sets state.verify); per-item confirms+  const confirm = state.confirm || {};+  $('verifybar').style.display = state.verify ? '' : 'none';+  $('v-title').checked = !!confirm.title;+  $('v-sub').checked = !!confirm.subtitle;+  $('v-vitrine').checked = !!confirm.vitrine;+  $('v-type').checked = !!confirm.type;+  const modeMatchesType = (d.type === 'component') === (mode === 'component');+  $('v-type-label').textContent = 'Page type matches: page is "' + d.type + '", studio mode is "' + mode + '"' + (modeMatchesType ? '' : ' (MISMATCH: switch mode at the top of the panel)');+  $('v-type-label').classList.toggle('warn', !modeMatchesType);+  $('v-generate').disabled = !(confirm.title && confirm.subtitle && confirm.vitrine && confirm.type);++  // vitrine content: real screenshot in the window, or full-hero import+  const vit = state.vitrine || {};+  hero.classList.toggle('has-vitrine', !!vit.src && !vit.full);+  hero.classList.toggle('fullimport', !!vit.src && !!vit.full);+  $('vitrine-img').src = (!vit.full && vit.src) || '';+  $('fullimport-img').src = (vit.full && vit.src) || '';+  $('vitrine-full').checked = !!vit.full;+   // Adom branding only on adom-owned pages; everyone else: no mark, own palette.   // Every preview wordmark (hero AND the in-context mock cards) follows.   const foreign = d.owner !== 'adom';@@ -1051,6 +1102,21 @@ $('btn-reset').addEventListener('click', () => {   }); })(); +/* verification checklist + vitrine controls */+[['v-title','title'],['v-sub','subtitle'],['v-vitrine','vitrine'],['v-type','type']].forEach(([el, key]) => {+  $(el).addEventListener('change', e => send({ confirm: { [key]: e.target.checked } }));+});+$('v-generate').addEventListener('click', () => $('btn-generate').click());+$('vitrine-file').addEventListener('change', e => {+  const f = e.target.files && e.target.files[0];+  if (!f) return;+  const r = new FileReader();+  r.onload = () => send({ vitrine: { src: r.result } });+  r.readAsDataURL(f);+});+$('vitrine-full').addEventListener('change', e => send({ vitrine: { full: e.target.checked } }));+$('vitrine-clear').addEventListener('click', () => send({ vitrine: { src: '', full: false } }));+ /* owner brand controls */ $('brand-accent').addEventListener('input', e => send({ brand: { accent: e.target.value } })); $('brand-bg').addEventListener('input', e => send({ brand: { bg: e.target.value } }));