@homie-rocks/studio 0.13.0 → 0.14.0

package/mcp/ui/card.css

@@ -0,0 +1,73 @@
+:root{color-scheme:light dark;
+--c-bg:var(--color-background-primary,light-dark(#ffffff,#1c1c1e));--c-bg2:var(--color-background-secondary,light-dark(#f6f5f2,#242427));--c-bg3:var(--color-background-tertiary,light-dark(#eeece6,#2d2d31));
+--c-fg:var(--color-text-primary,light-dark(#1d1c1a,#f3f1ec));--c-fg2:var(--color-text-secondary,light-dark(#5e5b54,#b8b4ab));--c-fg3:var(--color-text-tertiary,light-dark(#8b877e,#8a867e));
+--c-line:var(--color-border-tertiary,light-dark(rgba(20,18,12,.10),rgba(255,255,255,.10)));--c-line2:var(--color-border-secondary,light-dark(rgba(20,18,12,.18),rgba(255,255,255,.18)));
+--c-ok:var(--color-text-success,light-dark(#17753b,#5fd08a));--c-okbg:var(--color-background-success,light-dark(#e5f4ea,rgba(95,208,138,.14)));
+--c-bad:var(--color-text-danger,light-dark(#b42318,#ff8a80));--c-badbg:var(--color-background-danger,light-dark(#fdecea,rgba(255,138,128,.14)));
+--c-warn:var(--color-text-warning,light-dark(#8a5a00,#f2c94c));--c-warnbg:var(--color-background-warning,light-dark(#fff4d6,rgba(242,201,76,.14)));
+--accent:#ffcf5a;--accent-ink:#1a1405;
+--r-sm:var(--border-radius-sm,8px);--r-md:var(--border-radius-md,12px);--r-lg:var(--border-radius-lg,16px);--r-full:var(--border-radius-full,999px);
+--f-sans:var(--font-sans,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);--f-mono:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace)}
+[data-theme=light]{color-scheme:light}[data-theme=dark]{color-scheme:dark}
+*{box-sizing:border-box}html,body{margin:0;background:transparent}
+body{font:14px/1.45 var(--f-sans);color:var(--c-fg);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
+.card{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:16px 16px 14px;overflow:hidden}
+.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
+.eyebrow{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--f-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--c-fg3)}
+.mark{width:14px;height:14px;border-radius:4px;background:var(--accent);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
+h1{margin:0 0 2px;font:650 20px/1.2 var(--f-sans);letter-spacing:-.01em;overflow-wrap:anywhere}
+h2{margin:16px 0 8px;font:600 13px/1.2 var(--f-sans);color:var(--c-fg2);text-transform:uppercase;letter-spacing:.04em}
+.sub{margin:0 0 12px;color:var(--c-fg2);overflow-wrap:anywhere}
+.note{margin:10px 0 0;padding:10px 12px;border-radius:var(--r-md);background:var(--c-bg2);color:var(--c-fg2)}
+.note.bad{background:var(--c-badbg);color:var(--c-bad)}.note.ok{background:var(--c-okbg);color:var(--c-ok);font-weight:600}
+.fine{margin:10px 0 0;font-size:12px;color:var(--c-fg3)}
+.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-full);font:600 12px/1.2 var(--f-sans);background:var(--c-bg2);color:var(--c-fg2);white-space:nowrap}
+.pill.ok{background:var(--c-okbg);color:var(--c-ok)}.pill.bad{background:var(--c-badbg);color:var(--c-bad)}.pill.warn{background:var(--c-warnbg);color:var(--c-warn)}
+.pill.live{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--c-fg)}
+.dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.4s ease-in-out infinite}
+@keyframes pulse{50%{opacity:.25}}
+@media (prefers-reduced-motion:reduce){.dot{animation:none}}
+button{font:600 13px/1 var(--f-sans);border:0;border-radius:var(--r-full);padding:9px 14px;cursor:pointer;background:var(--accent);color:var(--accent-ink);min-height:34px}
+button.ghost{background:var(--c-bg2);color:var(--c-fg);box-shadow:inset 0 0 0 1px var(--c-line2)}
+button.small{padding:7px 12px;min-height:30px;font-size:12px}
+button.danger{background:var(--c-badbg);color:var(--c-bad)}
+button:disabled{opacity:.55;cursor:default}
+button:focus-visible{outline:2px solid var(--c-fg);outline-offset:2px}
+.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
+.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--c-line)}
+.when{color:var(--c-fg3);font-size:12px}
+.skel{height:14px;margin:10px 0;border-radius:6px;background:linear-gradient(90deg,var(--c-bg2),var(--c-bg3),var(--c-bg2));background-size:200% 100%;animation:sk 1.2s linear infinite}
+@keyframes sk{to{background-position:-200% 0}}
+ol.list,ul.list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
+.list li{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:var(--r-md);background:var(--c-bg2)}
+.list li.now{box-shadow:inset 0 0 0 1.5px var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--c-bg2))}
+.list li.done .cn{background:var(--c-okbg);color:var(--c-ok)}
+.list li.todo{opacity:.72}
+.cn{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c-bg3);color:var(--c-fg2);font:700 12px/1 var(--f-sans)}
+.cb{flex:1;min-width:0;display:grid;gap:2px}.cb b{font-weight:600}.cb span{color:var(--c-fg2);font-size:13px;overflow-wrap:anywhere}
+.cb .fix{color:var(--c-fg);font-size:12.5px}
+.state-ok .cn{background:var(--c-okbg);color:var(--c-ok)}.state-act .cn,.state-missing .cn{background:var(--c-warnbg);color:var(--c-warn)}
+.stages{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:12px 0}
+.stage{display:grid;gap:6px}.stage .bar{height:6px;border-radius:3px;background:var(--c-bg3)}
+.stage.done .bar{background:var(--c-ok)}.stage.running .bar{background:var(--accent);animation:pulse 1.4s ease-in-out infinite}.stage.failed .bar{background:var(--c-bad)}.stage.skipped .bar{background:var(--c-bg3);opacity:.5}
+.stage span{font-size:12px;color:var(--c-fg2)}
+.check{display:flex;gap:8px;align-items:baseline;padding:4px 0;font-size:13px}.check .i{flex:none;width:18px;text-align:center}
+.check.pass .i{color:var(--c-ok)}.check.fail .i{color:var(--c-bad)}.check.running .i{color:var(--c-warn)}
+.check .n{color:var(--c-fg3);font-size:12px;margin-left:auto;white-space:nowrap}
+.preview{margin-top:12px;display:grid;gap:8px}
+.preview img{width:100%;max-height:260px;object-fit:cover;border-radius:var(--r-md);background:var(--c-bg2)}
+.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-top:8px}
+.game{display:grid;gap:6px;padding:8px;border-radius:var(--r-md);background:var(--c-bg2)}
+.game .art{aspect-ratio:16/9;border-radius:var(--r-sm);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 50%,var(--c-bg3)),var(--c-bg3));display:grid;place-items:center;font:800 26px/1 var(--f-sans);color:var(--c-fg2);overflow:hidden}
+.game .art img{width:100%;height:100%;object-fit:cover}
+.game b{font-size:14px}.game span{font-size:12.5px;color:var(--c-fg2)}
+.soon{padding:14px;border-radius:var(--r-md);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--c-bg2)),var(--c-bg2));display:grid;gap:6px}
+.soon b{font-size:16px}
+.stats{display:flex;flex-wrap:wrap;gap:6px 16px;margin:4px 0 6px;color:var(--c-fg2);font-size:13px}.stats b{color:var(--c-fg)}
+.log{margin:10px 0 0;padding:8px 10px;border-radius:var(--r-md);background:var(--c-bg2);font:12px/1.5 var(--f-mono);color:var(--c-fg2);white-space:pre-wrap;overflow-wrap:anywhere}
+.frame{width:100%;height:620px;border:0;border-radius:var(--r-md);background:var(--c-bg2);display:block}
+.full .frame{height:calc(100vh - 120px)}
+.ready{margin:0 0 8px;font-size:13px;color:var(--c-fg2)}.ready .ok{color:var(--c-ok);font-weight:600}
+.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
+.tabs span{padding:4px 9px;border-radius:var(--r-full);background:var(--c-bg2);font-size:12px;color:var(--c-fg2)}
+@media (max-width:420px){.card{padding:14px 12px 12px;border-radius:var(--r-md)}h1{font-size:18px}.stages{grid-auto-flow:row;grid-auto-columns:auto}.frame{height:520px}}

package/mcp/ui/codex.js

@@ -0,0 +1,23 @@
+/* The Game Codex card: the codex page itself (drawn by @homie-rocks/studio lib/codex.mjs in the game's own look:
+ * a tab per section, cards, controls, milestones, decisions, open questions, the build's status), in a frame. */
+(function () {
+  var C = Card;
+  function render(sc) {
+    var card = C.el('main', 'card');
+    var todo = (sc.missing || []).length;
+    C.add(card, C.top('Game Codex', C.add(C.el('div', 'actions'), C.pill(todo ? todo + ' to decide' : 'Every section filled', todo ? 'warn' : 'ok'), C.fullscreenButton())), C.el('h1', '', sc.title));
+    // The page has its own tabs; the card says only what is still open.
+    if (sc.openQuestions) card.appendChild(C.el('p', 'sub', sc.openQuestions + ' open question' + (sc.openQuestions === 1 ? '' : 's') + ' · ' + (sc.sections || []).length + ' sections'));
+    if (sc.html) {
+      var frame = C.el('iframe', 'frame');
+      frame.title = 'The Game Codex for ' + sc.title;
+      frame.setAttribute('sandbox', 'allow-scripts');
+      frame.setAttribute('referrerpolicy', 'no-referrer');
+      frame.srcdoc = sc.html;
+      card.appendChild(frame);
+    } else card.appendChild(C.el('p', 'note', 'The page is too big to show here.'));
+    if (todo) card.appendChild(C.el('p', 'fine', 'Not decided yet: ' + sc.missing.join(', ') + '.'));
+    return card;
+  }
+  C.start({ kind: 'codex', label: 'Game Codex', fullscreen: true, render: render, poll: null });
+})();

package/mcp/ui/setup.js

@@ -0,0 +1,72 @@
+/* The setup card: the new-studio checklist, this computer's setup status (what each row unlocks and its fix), the
+ * studio in use, and its toolkit install as it runs. */
+(function () {
+  var C = Card;
+  var MARK = { ok: '✓', act: '→', missing: '!', optional: '○', later: '…', unknown: '?' };
+  function step(s) {
+    var li = C.el('li', s.state);
+    C.add(li, C.el('span', 'cn', s.state === 'done' ? '✓' : String(s.n)), C.add(C.el('div', 'cb'), C.el('b', '', s.label), s.state === 'now' ? C.el('span', '', 'Now') : null));
+    return li;
+  }
+  function row(r) {
+    var li = C.el('li', 'state-' + r.state);
+    var body = C.add(C.el('div', 'cb'), C.el('b', '', r.label + (r.need === 'optional' ? ' (optional)' : '')), C.el('span', '', r.detail), C.el('span', '', 'Unlocks ' + r.unlocks));
+    if (r.fix && r.state !== 'ok') body.appendChild(C.el('span', 'fix', r.fix.say));
+    C.add(li, C.el('span', 'cn', MARK[r.state] || '?'), body, r.fix && r.fix.open && r.state !== 'ok' ? C.btn('Open', 'ghost small', function () { C.open(r.fix.open); }) : null);
+    return li;
+  }
+  function render(sc) {
+    var card = C.el('main', 'card');
+    var cur = sc.current;
+    var install = sc.install;
+    var head = install && install.state === 'running' ? C.pill('Installing · ' + install.seconds + ' s', 'live', true)
+      : cur ? C.pill(cur.games.length ? cur.games.length + (cur.games.length === 1 ? ' game' : ' games') : 'No game yet', cur.games.length ? 'ok' : '') : C.pill('New studio', '');
+    C.add(card, C.top('Studio setup', head), C.el('h1', '', cur ? cur.name : 'Set up a studio'),
+      C.el('p', 'sub', cur ? (cur.games.length ? 'On this computer, in ' + cur.folder : 'On this computer, in ' + cur.folder + '. Its home page says "First game coming soon".') : 'Studios live in ' + (sc.studiosDir || 'the folder set in the Homie extension') + '.'));
+    var ol = C.el('ol', 'list');
+    (sc.checklist || []).forEach(function (s) { ol.appendChild(step(s)); });
+    card.appendChild(ol);
+    if (install) {
+      var msg = install.state === 'running' ? 'Installing the studio\'s toolkit and Wrangler (' + install.seconds + ' s)…' : install.state === 'done' ? 'The studio\'s toolkit is installed.' : 'The install failed: ' + (install.tail || []).slice(-2).join(' ');
+      card.appendChild(C.el('p', 'note' + (install.state === 'failed' ? ' bad' : ''), msg));
+    }
+    var rows = (sc.status && sc.status.rows) || [];
+    if (rows.length) {
+      // What needs the person comes in full; what is ready is one line.
+      var todo = rows.filter(function (r) { return r.state !== 'ok'; });
+      var ready = rows.filter(function (r) { return r.state === 'ok'; });
+      card.appendChild(C.el('h2', '', 'This computer and your accounts'));
+      if (ready.length) card.appendChild(C.add(C.el('p', 'ready'), C.el('span', 'ok', '✓ Ready: '), C.el('span', '', ready.map(function (r) { return r.label; }).join(' · '))));
+      if (todo.length) {
+        var ul = C.el('ul', 'list');
+        todo.forEach(function (r) { ul.appendChild(row(r)); });
+        card.appendChild(ul);
+      }
+    }
+    if ((sc.studios || []).length > 1) card.appendChild(C.el('p', 'fine', 'Studios here: ' + sc.studios.map(function (s) { return s.name; }).join(', ')));
+    var foot = C.el('div', 'foot');
+    foot.appendChild(C.el('span', 'when', 'Optional rows never block anything.'));
+    var acts = C.el('div', 'actions');
+    if (cur && !cur.games.length) {
+      acts.appendChild(C.btn(C.state.demoing ? 'Opening…' : 'Play a live game', '', function () {
+        if (C.state.demoing) return; C.state.demoing = true; C.render();
+        C.call('game_demo', {}).then(function (r) {
+          C.state.demoing = false; C.render();
+          var d = r && r.structuredContent; var p = d && d.pick;
+          if (p && p.play) { C.open(p.play); C.tell('demo', 'The person opened the live demo game ' + p.name + ' (' + p.play + ') from the setup card: step 2, see a working game. Nothing was copied into the studio.'); }
+        }).catch(function () { C.state.demoing = false; C.render(); });
+      }));
+    }
+    acts.appendChild(C.btn('Check again', 'ghost small', function () {
+      C.call('setup_status', { fresh: true }).then(function (r) { C.take(r); }).catch(function () {});
+    }));
+    foot.appendChild(acts);
+    card.appendChild(foot);
+    if (install && install.state === 'done') C.tell('install-' + install.job, (cur ? cur.name : 'The studio') + '\'s toolkit finished installing; the studio is ready to build.');
+    return card;
+  }
+  C.start({
+    kind: 'setup', label: 'Studio setup', render: render,
+    poll: function (sc) { return sc.install && sc.install.state === 'running' ? { tool: 'setup_status', args: {}, every: 3000 } : null; },
+  });
+})();

package/mcp/ui/studio.js

@@ -0,0 +1,41 @@
+/* The studio card: its games with Play (on this computer and live), songs, videos and posts, where it runs, its
+ * live rooms, and a live game to try while it has none. */
+(function () {
+  var C = Card;
+  function initials(name) { return String(name || '?').split(/\s+/).filter(Boolean).slice(0, 2).map(function (w) { return w[0]; }).join('').toUpperCase(); }
+  function render(sc) {
+    var card = C.el('main', 'card');
+    C.add(card, C.top('Studio', C.pill(sc.site ? 'Online' : sc.dev ? 'Running here' : 'On this computer', sc.site ? 'ok' : '')), C.el('h1', '', sc.name), C.el('p', 'sub', sc.tagline || sc.folder));
+    var stats = C.el('div', 'stats');
+    [[sc.games.length, sc.games.length === 1 ? 'game' : 'games'], [sc.songs.length, sc.songs.length === 1 ? 'song' : 'songs'], [sc.videos.length, sc.videos.length === 1 ? 'video' : 'videos'], [sc.posts, sc.posts === 1 ? 'post' : 'posts'], [(sc.rooms || []).length, 'live rooms']].forEach(function (x) {
+      stats.appendChild(C.add(C.el('span'), C.el('b', '', String(x[0])), C.el('span', '', ' ' + x[1])));
+    });
+    card.appendChild(stats);
+    if (sc.games.length) {
+      var grid = C.el('div', 'games');
+      sc.games.forEach(function (g) {
+        var art = C.el('div', 'art'); var pic = C.img(g.cover, g.name);
+        if (pic) art.appendChild(pic); else art.textContent = initials(g.name);
+        var acts = C.el('div', 'actions');
+        if (g.play.dev) acts.appendChild(C.btn('Play here', 'small', function () { C.open(g.play.dev); }));
+        if (g.play.live) acts.appendChild(C.btn('Play live', g.play.dev ? 'ghost small' : 'small', function () { C.open(g.play.live); }));
+        grid.appendChild(C.add(C.el('div', 'game'), art, C.el('b', '', g.name), g.blurb ? C.el('span', '', g.blurb) : null, sc.site && !g.live ? C.el('span', 'fine', 'Not online yet: deploy puts it there') : null, acts.childNodes.length ? acts : null));
+      });
+      card.appendChild(grid);
+    } else {
+      var soon = C.add(C.el('div', 'soon'), C.el('b', '', 'First game coming soon'), C.el('span', '', 'That is what the studio\'s home page says until its first game is made. Plan it first: it is made the way you decide.'));
+      if (sc.demo) soon.appendChild(C.add(C.el('div', 'actions'), C.btn('Play ' + sc.demo.name, 'small', function () { C.open(sc.demo.play); C.tell('demo', 'The person opened the live demo ' + sc.demo.name + ' from the studio card.'); }), C.el('span', 'fine', 'A live game on ' + sc.demo.studio + ', made with Homie')));
+      card.appendChild(soon);
+    }
+    if ((sc.rooms || []).length) card.appendChild(C.el('p', 'fine', 'Playing now: ' + sc.rooms.map(function (r) { return r.game + ' (' + r.players + ')'; }).join(', ')));
+    var foot = C.el('div', 'foot');
+    foot.appendChild(C.el('span', 'when', sc.site ? sc.site.replace(/^https?:\/\//, '') : sc.dev ? sc.dev.url.replace(/^https?:\/\//, '') : 'Not online yet'));
+    var acts = C.el('div', 'actions');
+    if (sc.dev) acts.appendChild(C.btn('Open here', 'ghost small', function () { C.open(sc.dev.url + '/'); }));
+    if (sc.site) acts.appendChild(C.btn('Open site', 'small', function () { C.open(sc.site + '/'); }));
+    foot.appendChild(acts);
+    card.appendChild(foot);
+    return card;
+  }
+  C.start({ kind: 'studio', label: 'Studio', render: render, poll: null });
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homie-rocks/studio",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "A studio for games, music and video on its own Cloudflare: scaffold, multiplayer starters on the netplay contract, a port toolkit that makes existing single-player web games multiplayer, the site Worker with public rooms (Table/Lobby Durable Objects and D1, all on the free Workers plan, no payment method), a site with the hub's sections (Home, Games, Music, Videos, Rooms, Posts with feeds) in the studio's own look, an epic landing page for every game, optional R2 storage for large media, deploy, and the homie.rocks directory.",
   "type": "module",
   "license": "Apache-2.0",
@@ -39,6 +39,7 @@
     "netplay/",
     "port/",
     "worker/",
+    "mcp/",
     "saves/",
     "starters/",
     "media/",

package/worker/site.mjs

@@ -692,6 +692,7 @@ export function homePage(cat, { origin = '', rooms = [], live = {} } = {}) {
   const f = featuredOf(cat);
   const tagline = cat.studio?.tagline ?? '';
   let hero;
+  let soon = '';
   if (f) {
     const playing = live[f.id] ?? 0;
     hero = `<section class="hero home" aria-labelledby="hero-title">
@@ -704,6 +705,27 @@ export function homePage(cat, { origin = '', rooms = [], live = {} } = {}) {
     <a class="also" href="/${esc(f.id)}/">${icon('arrow')}<span>About ${esc(f.name)}</span></a>${games.length > 1 ? `<a class="also" href="/games/">${icon('games')}<span>All ${games.length} games</span></a>` : ''}
   </div>
 </section>`;
+  } else if (!videos.length && !songs.length) {
+    // A new studio with nothing published yet: its own Home, its name, "First game coming soon", and what is on the
+    // way (a studio is never given a starter game it did not ask for). Its posts show below as soon as it has any.
+    hero = `<section class="hero home soon" aria-labelledby="hero-title">
+  ${heroMedia({}, { word: name })}
+  <div class="hero-copy">
+    <p class="kicker">${esc(tagline || 'A Homie studio')}</p>
+    <h1 class="title ${titleClass(name)}" id="hero-title">${esc(name)}</h1>
+    <p class="line">First game coming soon.</p>
+    <p class="live"><span class="live-dot" aria-hidden="true"></span><span>${posts.length ? 'In the making · the latest news is below' : 'In the making'}</span></p>
+  </div>
+</section>`;
+    const next = [
+      ['Games', 'The first game', 'It opens here with a Play button: a live public room on a phone, a computer or a TV, with bots in the empty seats.'],
+      ['Posts', 'News and drops', 'The studio\'s posts land on this page, with feeds to follow.'],
+      ['Music and videos', 'Songs and trailers', 'Scores, songs and trailers get pages of their own.'],
+    ];
+    soon = `<section class="band glowband" aria-labelledby="soon-title"><div class="band-in">
+  <div class="head-row reveal"><div><p class="kicker">On the way</p><h2 class="small-h" id="soon-title">${esc(`Coming to ${name}`)}</h2></div></div>
+  <div class="cards">${next.map(([k, t, d]) => `<div class="pcard reveal" data-soon><p class="post-meta">${esc(k)}</p><h3>${esc(t)}</h3><p>${esc(d)}</p></div>`).join('')}</div>
+</div></section>`;
   } else {
     const lead = videos[0] ?? songs[0] ?? null;
     const art = lead ? mediaArt(lead, videos[0] ? 'videos' : 'music', cat) : null;
@@ -736,10 +758,10 @@ export function homePage(cat, { origin = '', rooms = [], live = {} } = {}) {
   const extra = partial(cat, 'home');
   return layout(cat, {
     title: tagline ? `${name} — ${tagline}` : name,
-    description: tagline || (f ? `${name}: ${games.map((g) => g.name).join(', ')}. Free in your browser, on a phone, a computer or a TV.` : name),
+    description: tagline || (f ? `${name}: ${games.map((g) => g.name).join(', ')}. Free in your browser, on a phone, a computer or a TV.` : soon ? `${name}: first game coming soon.` : name),
     origin, path: '/', image: f ? (f.landing?.hero?.wideImage ?? coverOf(f)) : null, page: 'home', hero: true,
     head: f?.landing?.hero?.wideImage ? `<link rel="preload" as="image" href="${esc(f.landing.hero.tallImage ?? f.landing.hero.wideImage)}">` : '',
-    main: `${hero}${extra ? `<section class="band">${extra}</section>` : ''}${roomsBand}${gamesBand}${postsBand}${mediaBand(videos, 'videos', 'Trailers and clips')}${mediaBand(songs, 'music', 'Songs and scores')}`,
+    main: `${hero}${extra ? `<section class="band">${extra}</section>` : ''}${roomsBand}${gamesBand}${postsBand}${soon}${mediaBand(videos, 'videos', 'Trailers and clips')}${mediaBand(songs, 'music', 'Songs and scores')}`,
   });
 }
 

package/worker/version.mjs

@@ -1,2 +1,2 @@
 /** The @homie-rocks/studio version this Worker code is (package.json's; a test keeps them equal). Cache-busts /_homie/site.js. */
-export const STUDIO_VERSION_TAG = '0.13.0';
+export const STUDIO_VERSION_TAG = '0.14.0';