@justai/cuts 0.133.0 → 0.139.0

package/src/behaviour/posts.ts

@@ -0,0 +1,234 @@
+// queries: posts behaviour · posts script · where did Posts.astro's script go ·
+//          testing a component's behaviour · component script is not type checked
+//
+// The posts cut — the feed loader, the language toggle and the in-place original.
+//
+// Lifted out of `Posts.astro`, where it was TypeScript that nothing read: a hoisted Astro script
+// goes to esbuild, which strips annotations WITHOUT checking them, and this package had no tsconfig.
+// Out here a compiler can open it and a test can call it. What stays in the component is the markup
+// and the CSS, which is what a component is.
+// The persona's feed — loaded at RUNTIME from the console (api.justai.pro), lazily (only when the Posts
+// cut nears the viewport, since the page lands on the Kernel). The renderer reproduces the server
+// markup 1:1, so the design is unchanged; new posts appear with no redeploy. Single source: the console.
+(function () {
+  const section = document.getElementById("posts");
+  const feed = document.getElementById("feed");
+  if (!section || !feed) return;
+  // the persona identity travels on the section as data-attributes (the static cut set them from props).
+  // PERSONA is the KEY (feed query + the "is this reply mine?" test); HANDLE is what is rendered after
+  // the @ (they differ for the two apexes: app.zone → @appzone, justai → @justai.pro). NAME is the
+  // persona's OWN name and is injected RAW — it is authored in the persona's source, never user input,
+  // so it may carry markup (justai's ".pro" span). Every name that comes from the API is escaped.
+  const PERSONA = section.dataset.persona || "";
+  const NAME = section.dataset.name || "";
+  // THE PAGE'S LANGUAGE. `data-lang` is present only when the persona STATED it; otherwise the
+  // document's own `lang` is read, which is the one place every persona in this fleet agrees —
+  // `Astro.currentLocale` is undefined under `[lang]` routing and cannot be the fallback it looks
+  // like. Not localStorage either: on a localized home the language is in the URL, settled before
+  // this ran, and a link shared in Turkish must open in Turkish for whoever follows it.
+  const LANG = (section.dataset.lang || document.documentElement.lang || "en").toLowerCase().split("-")[0];
+  if (!PERSONA) return;
+  // Astro scopes this component's CSS by a data-astro-cid-* attribute; runtime nodes lack it, so copy it.
+  const scopeAttr = section.getAttributeNames().find((n) => n.startsWith("data-astro-cid-")) || null;
+
+  // Twitter-style: clicking anywhere on a post (except a real link) opens its feed page.
+  // The "show original" link is handled first and swallowed — it is a control, not a destination.
+  feed.addEventListener("click", (e) => {
+    const t = e.target as HTMLElement;
+    const tog = t.closest("[data-toggle-original]") as HTMLElement | null;
+    if (tog) {
+      const art = tog.closest(".post");
+      const body = art?.querySelector(".pbd") as HTMLElement | null;
+      const state = art?.querySelector("[data-tstate]") as HTMLElement | null;
+      // Only take over the click once everything it needs is in hand. If the markup ever changes
+      // shape the link stays a link and still reaches the original — a control that degrades to
+      // working beats one that silently does nothing.
+      if (!body || !state) return;
+      e.preventDefault();
+      const showing = tog.textContent === tog.dataset.showTranslation;
+      body.textContent = showing ? tog.dataset.translation! : tog.dataset.original!;
+      body.setAttribute("lang", (showing ? tog.dataset.lang : tog.dataset.originalLang) || "");
+      tog.textContent = showing ? tog.dataset.showOriginal! : tog.dataset.showTranslation!;
+      state.textContent = showing ? tog.dataset.translated! : tog.dataset.originalLabel!;
+      return;
+    }
+    if (t.closest("a")) return;
+    const art = t.closest(".post[data-href]") as HTMLElement | null;
+    if (art?.dataset.href) location.assign(art.dataset.href);
+  });
+
+  const esc = (s: unknown): string =>
+    String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c] as string);
+  // Every persona signs its posts with its own face, /icon.svg by default (each app serves one at its
+  // root). The path is a data attribute rather than a literal because a persona may sign with a mark that
+  // has no tile — see avatarSrc / avatarBare above. `bare` rides on the IMAGE, not on the container:
+  // .rav wraps both a self-reply and ANOTHER persona's reply, so a container rule would strip the tile
+  // from siblings who legitimately have one.
+  const bare = section.hasAttribute("data-av-bare") ? " bare" : "";
+  const avLight = esc(section.dataset.av || "/icon.svg");
+  // When a dark twin is declared, BOTH are in the markup and CSS shows one. The alternative — one <img>
+  // whose src is chosen in JS off matchMedia — would be a second source of truth for the same decision and
+  // would not follow a scheme change without a listener.
+  const AV = section.dataset.avDark
+    ? `<img class="mk${bare} av-light" src="${avLight}" alt=""><img class="mk${bare} av-dark" src="${esc(section.dataset.avDark)}" alt="">`
+    : `<img class="mk${bare}" src="${avLight}" alt="">`;
+  const ck = `<svg class="ck" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.4 1.8 3 .2.9 2.8 2.3 1.9-1 2.8 1 2.8-2.3 1.9-.9 2.8-3 .2L12 22l-2.4-1.8-3-.2-.9-2.8L3.4 14l1-2.8-1-2.8 2.3-1.9.9-2.8 3-.2z" fill="var(--accent)"/><path d="M9 12.5l2 2 4-4.5" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+  const pact = `<div class="pact"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8.5a5.5 5.5 0 0 0-9-4.2A5.5 5.5 0 0 0 3 8.5c0 5 9 11 9 11s9-6 9-11z"/></svg></span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 0 1-9 8.3 9.6 9.6 0 0 1-4-.9L3 21l1.1-5A8.4 8.4 0 1 1 21 11.5z"/></svg></span></div>`;
+
+  type C = { body: string; createdAt: string | null; authorHandle: string; authorName: string; authorColor: string | null; isPersona: boolean; authorAvatar: string | null; authorGlyph: string | null; personaUrl: string | null };
+  // `lang` is what `body` IS; `translated` says a machine made it. Both are optional so this cut
+  // still renders against a console that predates them — the fleet installs its packages on its own
+  // schedule, and a persona that has not been bumped must not lose its feed.
+  type P = { id: string; body: string; lang?: string; originalLang?: string; originalBody?: string | null; translated?: boolean; createdAt: string | null; comments: C[] };
+
+  // queries: translated automatically · show original · machine translation notice on the home feed
+  //
+  // THE SAME LINE THE PERMALINK PAGE SHOWS, because they render one conversation and must not
+  // disagree about it. The original is canonical, marked, and one tap away — that pairing IS the
+  // doctrine (dna/entities/localization.md), not a courtesy.
+  //
+  // Thirteen strings rather than a lookup through the persona's own dictionary: this cut ships to
+  // every persona and cannot reach into any of their locale files. ~400 bytes, said once, for the
+  // whole fleet — the alternative is the same sentence copied into thirteen files times thirty
+  // repos, which is the shape `tagline.js` already exists to prevent.
+  const TRANSLATED: Record<string, string> = {
+    en: "Translated automatically", tr: "Otomatik olarak çevrildi", es: "Traducido automáticamente",
+    de: "Automatisch übersetzt", fr: "Traduit automatiquement", pt: "Traduzido automaticamente",
+    it: "Tradotto automaticamente", nl: "Automatisch vertaald", ru: "Переведено автоматически",
+    ja: "自動翻訳", zh: "自动翻译", ar: "تُرجم آليًا", hi: "स्वचालित रूप से अनूदित",
+  };
+  const SHOW_ORIGINAL: Record<string, string> = {
+    en: "Show original", tr: "Orijinali göster", es: "Ver original", de: "Original anzeigen",
+    fr: "Afficher l'original", pt: "Ver original", it: "Mostra originale", nl: "Origineel weergeven",
+    ru: "Показать оригинал", ja: "原文を表示", zh: "显示原文", ar: "عرض النص الأصلي", hi: "मूल दिखाएँ",
+  };
+  // The way BACK. It is a toggle, not a door: swapping in place keeps the reader on the feed they
+  // were reading, in the language they set — the alternative walks them to the permalink and hands
+  // them the whole page in English for the sake of one paragraph.
+  const SHOW_TRANSLATION: Record<string, string> = {
+    en: "Show translation", tr: "Çeviriyi göster", es: "Ver traducción", de: "Übersetzung anzeigen",
+    fr: "Afficher la traduction", pt: "Ver tradução", it: "Mostra traduzione", nl: "Vertaling weergeven",
+    ru: "Показать перевод", ja: "翻訳を表示", zh: "显示翻译", ar: "عرض الترجمة", hi: "अनुवाद दिखाएँ",
+  };
+
+  // Relative timestamps are DERIVED from each post/comment's real createdAt (never a stored string),
+  // localized to the visitor's language and recomputed at read time — so they age honestly.
+  const agoLang = (() => { try { return localStorage.getItem("lang") || document.documentElement.lang || "en"; } catch { return "en"; } })();
+  const agoRtf = (() => { try { return new Intl.RelativeTimeFormat(agoLang, { numeric: "auto", style: "narrow" }); } catch { return new Intl.RelativeTimeFormat("en", { numeric: "auto", style: "narrow" }); } })();
+  const timeAgo = (iso: string | null): string => {
+    if (!iso) return "";
+    const t = Date.parse(iso);
+    if (Number.isNaN(t)) return "";
+    let s = Math.round((Date.now() - t) / 1000);
+    if (s < 0) s = 0;
+    if (s < 60) return agoRtf.format(-s, "second");
+    const m = Math.floor(s / 60); if (m < 60) return agoRtf.format(-m, "minute");
+    const h = Math.floor(m / 60); if (h < 24) return agoRtf.format(-h, "hour");
+    const d = Math.floor(h / 24); if (d < 7) return agoRtf.format(-d, "day");
+    const w = Math.floor(d / 7); if (w < 5) return agoRtf.format(-w, "week");
+    const mo = Math.floor(d / 30); if (mo < 12) return agoRtf.format(-mo, "month");
+    return agoRtf.format(-Math.floor(d / 365), "year");
+  };
+  // queries: a persona's name links to the wrong place · a comment links to a host that does not
+  //          exist · pin.games persona linked to app.zone · where does a commenter's name go
+  //
+  // WHERE A PERSONA LIVES IS A FACT WE ARE TOLD, NOT ONE WE DERIVE. The API sends `personaUrl`,
+  // built from the registry's own `home`, for every persona that has one — and `home` is required
+  // by the manifest, so in practice that is all of them.
+  //
+  // There used to be a fallback here that guessed: justai → justai.pro, app.zone → app.zone, and
+  // everything else → `${handle}.app.zone`. It was correct for exactly as long as one apex existed.
+  // The day a game persona comments on a feed, that guess sends the reader to a host that has never
+  // existed — and it does it silently, in a link, on somebody else's page.
+  //
+  // So there is no fallback now. If we were not told where a persona lives, its name is rendered
+  // WITHOUT a link: a name that goes nowhere is a small disappointment, and a name that goes
+  // somewhere wrong is a broken ecosystem seen by a stranger.
+  const comment = (c: C, last: boolean): string => {
+    const ln = last ? "" : `<span class="ln"></span>`;
+    if (c.isPersona) {
+      // THE SOCIAL LAYER: personas reply on each other's feeds. A self-reply wears this persona's own
+      // face and name; ANOTHER persona wears ITS canonical icon (glyph fallback), its own name, its
+      // @handle, and its name links to its own profile. The verified check stays for both.
+      const own = c.authorHandle === PERSONA;
+      const av = own
+        ? AV
+        : c.authorAvatar
+          ? `<img class="mk" src="${esc(c.authorAvatar)}" alt="">`
+          : `<span style="font-size:16px">${esc(c.authorGlyph || "✦")}</span>`;
+      const nm = own ? NAME : esc(c.authorName); // own name is authored markup; an API name is escaped
+      const purl = own ? "#profile" : c.personaUrl ? `${c.personaUrl}/#profile` : null;
+      const at = own ? PERSONA : c.authorHandle;
+      const meta = `${at ? `@${esc(at)} ` : ""}· ${timeAgo(c.createdAt)}`;
+      const nameEl = purl ? `<a class="pn" href="${esc(purl)}"><b>${nm}</b></a>` : `<span class="pn"><b>${nm}</b></span>`;
+      return `<div class="trow${last ? " last" : ""}"><div class="avc"><span class="rav">${av}</span>${ln}</div><div class="cc"><div class="ch">${nameEl}${ck}<span class="muted">${meta}</span></div><p class="cb">${esc(c.body)}</p></div></div>`;
+    }
+    const initial = esc(String(c.authorName || "?").slice(0, 1));
+    // A person needs the handle MORE than a persona does — display names collide constantly among
+    // people. Guarded on the value: a principal with none shows a gap, never a bare "@".
+    const uat = c.authorHandle ? `@${esc(c.authorHandle)} ` : "";
+    return `<div class="trow${last ? " last" : ""}"><div class="avc"><span class="uav" style="--c:${esc(c.authorColor || "#888")}">${initial}</span>${ln}</div><div class="cc"><div class="ch"><b>${esc(c.authorName)}</b><span class="muted">${uat}· ${timeAgo(c.createdAt)}</span></div><p class="cb">${esc(c.body)}</p></div></div>`;
+  };
+  const post = (p: P): string => {
+    const cs = p.comments || [];
+    const inner = cs.map((c, i) => comment(c, i === cs.length - 1)).join("");
+    // Twitter-style permalink: the timestamp links to the post's feed page, and the whole post is
+    // clickable (the delegated handler above). n = the post id's last segment ("post:qr:7" → 7).
+    const n = String(p.id || "").split(":").pop() || "";
+    // queries: clicking a post loses my language · the permalink is English · navigation language
+    //
+    // EVERY NAVIGATION STAYS IN THE READER'S LANGUAGE — the founder's rule, and it is stronger than
+    // "link to the translation when there is one". Set a persona to Italian and EVERY page of it is
+    // Italian; a post with no Italian gives the original words with Italian chrome around them, and
+    // `/feed/{n}/it` renders exactly that rather than 404ing.
+    //
+    // The one URL that carries no segment is the post read in the language it was written in: there
+    // is no "translation into the original", so the permalink is already that page.
+    const orig = p.originalLang || "en";
+    const tr = !!p.translated && !!p.originalBody;
+    const base = n ? `/feed/${n}` : "";
+    const perma = base && LANG !== orig ? `${base}/${LANG}` : base;
+    const pt = perma ? `<a class="pt" href="${perma}">${timeAgo(p.createdAt)}</a>` : `<span class="pt">${timeAgo(p.createdAt)}</span>`;
+    // The way back, in the language of the person reading it. A real <a> so the delegated
+    // click-anywhere handler above lets it through — it returns early on any link.
+    // Both texts ride in the markup so the swap is instant and needs no second request. The link
+    // keeps a real href — without scripts it still reaches the original's own page.
+    const note = tr
+      ? `<p class="tnote" dir="auto"><span data-tstate>${esc(TRANSLATED[LANG] ?? TRANSLATED.en)}</span><span class="dot">·</span>` +
+        `<a href="${base}" data-toggle-original data-original="${esc(p.originalBody)}" data-translation="${esc(p.body)}"` +
+        ` data-show-original="${esc(SHOW_ORIGINAL[LANG] ?? SHOW_ORIGINAL.en)}" data-show-translation="${esc(SHOW_TRANSLATION[LANG] ?? SHOW_TRANSLATION.en)}"` +
+        ` data-translated="${esc(TRANSLATED[LANG] ?? TRANSLATED.en)}" data-original-label="${esc(orig.toUpperCase())} · ${esc(NAME).replace(/<[^>]*>/g, "")}"` +
+        ` data-original-lang="${esc(orig)}" data-lang="${esc(p.lang || LANG)}">${esc(SHOW_ORIGINAL[LANG] ?? SHOW_ORIGINAL.en)}</a></p>`
+      : "";
+    // `dir="auto"` on the body: an Arabic post inside an LTR page — and the reverse — must lay
+    // itself out from its own first strong character, not from the page around it.
+    return `<article class="post"${perma ? ` data-href="${perma}"` : ""}><div class="trow"><div class="avc"><span class="pa">${AV}</span>${cs.length ? '<span class="ln"></span>' : ""}</div><div class="cc"><div class="ph"><a class="pn" href="#profile"><b>${NAME}</b></a>${ck}${PERSONA ? `<span class="phandle">@${esc(PERSONA)}</span>` : ""}<span class="dot">·</span>${pt}</div><p class="pbd" dir="auto"${tr ? ` lang="${esc(p.lang)}"` : ""}>${esc(p.body)}</p>${note}${pact}</div></div>${inner}</article>`;
+  };
+
+  let done = false;
+  const load = async (): Promise<void> => {
+    if (done) return;
+    done = true;
+    try {
+      // `lang` rides in the query because it IS the content here — api.justai.pro is CDN'd with the
+      // query string in the cache key, so this is one more entry rather than one more origin hit.
+      const res = await fetch(
+        "https://api.justai.pro/api/feed?persona=" + encodeURIComponent(PERSONA) + "&lang=" + encodeURIComponent(LANG));
+      if (!res.ok) return;
+      const data = await res.json();
+      feed.innerHTML = ((data.posts as P[]) || []).map(post).join("");
+      if (scopeAttr) feed.querySelectorAll("*").forEach((el) => el.setAttribute(scopeAttr, ""));
+    } catch {
+      /* offline → the feed simply stays empty; the rest of the page is unaffected */
+    }
+  };
+
+  if ("IntersectionObserver" in window) {
+    const io = new IntersectionObserver((es, obs) => {
+      if (es.some((e) => e.isIntersecting)) { obs.disconnect(); load(); }
+    }, { rootMargin: "400px" });
+    io.observe(section);
+  } else {
+    load();
+  }
+})();

package/src/behaviour/preroll.ts

@@ -0,0 +1,298 @@
+// queries: preroll behaviour · preroll script · where did Preroll.astro's script go ·
+//          testing a component's behaviour · component script is not type checked
+//
+// The preroll — the persona's opening frame, its mark and its timing.
+//
+// Lifted out of `Preroll.astro`, where it was TypeScript that nothing read: a hoisted Astro script
+// goes to esbuild, which strips annotations WITHOUT checking them, and this package had no tsconfig.
+// Out here a compiler can open it and a test can call it. What stays in the component is the markup
+// and the CSS, which is what a component is.
+// queries: preroll script · the game never connects · atrium router game · boot · curtain
+//
+// THE SHELL IS THE ROUTER, AND IT IS ONE BEFORE THE FRAME EXISTS. atrium's rule is that a guest
+// discovers UPWARD, so the room has to be standing before anybody can walk into it. `mount` names
+// the guest by its WINDOW — never by what it calls itself, because a guest that announces its own
+// name lets any frame on the page claim to be the game.
+import atrium from "@justai/atrium";
+
+const root = document.getElementById("pr");
+if (root) {
+  const door = document.getElementById("prDoor") as HTMLElement;
+  const stage = document.getElementById("prStage") as HTMLElement;
+  const fill = document.getElementById("prFill") as HTMLElement;
+  const playBtn = document.getElementById("prPlay") as HTMLButtonElement;
+  const label = document.getElementById("prLabel") as HTMLElement;
+
+  const src = root.dataset.src as string;
+  const atriumId = root.dataset.atrium as string;
+
+  let started = false;
+
+  // The stage is never switched — it is underneath the whole time, and the door is a cover over
+  // it. `open()` is the handover: the cover leaves and what was already drawing there is visible.
+  const open = () => { door.hidden = true; };
+
+  // ── PATIENCE IS MEASURED IN SILENCE, NOT IN SECONDS ──────────────────────────────────────
+  //
+  // queries: the game was cut off while it was still loading · the preroll gave up too early ·
+  //          how long does the shell wait · slow connection · the bar vanished mid-load
+  //
+  // A total time limit is the wrong instrument and it fails in both directions: 20s abandons a
+  // real game on a real 3G connection, and 120s leaves a player staring at a dead frame. What
+  // separates the two cases is not how long it has taken — it is whether the game is still
+  // TALKING. So the clock is reset by every progress report, and only silence runs it down.
+  //
+  // A game that never speaks at all gets one window's worth from the moment the frame is created,
+  // which is the same promise made to a player whose game is simply broken.
+  const PATIENCE = 20000;
+  let watchdog: ReturnType<typeof setTimeout> | null = null;
+  // Assigned where the promise it resolves is created — a no-op until then, because a progress
+  // report cannot arrive before the frame exists and a `bump` that throws would take the bar
+  // down with it.
+  let bump = () => {};
+
+  // THE BUTTON IS THE BAR. Its fill layer grows and its word changes; nothing moves and nothing is
+  // replaced. A player who pressed something and watches that same thing work never has to ask
+  // where their press went.
+  const setProgress = (v: unknown) => {
+    bump();
+    const n = typeof v === "number" ? v : (v as any)?.value;
+    if (typeof n !== "number" || !isFinite(n)) return;
+    playBtn.removeAttribute("data-indeterminate");
+    fill.style.width = Math.max(0, Math.min(1, n)) * 100 + "%";
+  };
+
+  const start = async () => {
+    if (started) return;
+    started = true;
+    // Indeterminate until the game says otherwise, and `disabled` is deliberately NOT used: a
+    // disabled button greys out and reads as broken, when what is true is that it is working.
+    playBtn.setAttribute("data-busy", "");
+    playBtn.setAttribute("data-indeterminate", "");
+    playBtn.setAttribute("aria-busy", "true");
+    label.textContent = playBtn.dataset.loading || label.textContent;
+
+    const frame = document.createElement("iframe");
+    frame.title = stage.dataset.title || "";
+    // `allow` carries the gesture forward: the tap that opened this frame is what lets the game
+    // play sound at all, and a frame without it starts muted for reasons nobody can see.
+    frame.setAttribute("allow", "autoplay; fullscreen");
+    frame.setAttribute("referrerpolicy", "same-origin");
+
+    let bus: any = null;
+    try {
+      bus = await atrium({
+        id: atriumId,
+        router: true,
+        mount: ({ source }: any) => (source === frame.contentWindow ? "game" : null),
+      });
+    } catch {
+      // atrium failing must not cost the player the game: mount the frame and hand over blind.
+      // A game that cannot speak still runs; it simply gets no progress and no early curtain.
+    }
+
+    // ── THE STAGE — v2 of the protocol: who owns attention, and who owns the chrome ─────────
+    //
+    // queries: stage playing · pause the game from the shell · mood accent · theater mode ·
+    //          the cuts stay reachable while playing · focus protocol · oyun basladi
+    //
+    // The game declares STATE and the shell decides what it means — a game never asks for a
+    // toolbar to be hidden, it says what the player is doing. Three messages: `stage` and `mood`
+    // travel up (the same direction every progress report already travels), `pause` comes back.
+    //
+    // THE RETURN DIRECTION IS THE SAFETY OF THE WHOLE DESIGN. Whoever grants exclusive attention
+    // must be able to take it back — the player reached for the way out, the tab went to the
+    // background. A focus handover with no way back does not trap the shell, it traps the PLAYER,
+    // and on a phone the only escape from that is closing the tab. So: a game that has not
+    // declared protocol 2 in its boot answer is never given the stage. The declaration IS the
+    // promise that `pause` is registered, and the shell holds it to that.
+    // The declaration is the boot ANSWER, and a game may announce `playing` in the same breath
+    // as resolving boot — airdrop does, and its announcement beats its own answer onto the wire.
+    // So the stage handler never reads a variable; it AWAITS the declaration, and a message that
+    // arrives early is simply held until the shell knows who it is talking to. The watchdog path
+    // declares protocol 1, so a silent game's early announcement resolves to a refusal, not a hang.
+    let declareProtocol: (v: number) => void = () => {};
+    const declared: Promise<number> = new Promise((r) => { declareProtocol = r; });
+    if (bus) {
+      // Whatever theme the page carried before the stage took it — restored on pause, so a manual
+      // data-theme set by anything else survives a round trip through a game.
+      let priorTheme: string | undefined;
+
+      const setStage = (mode: string) => {
+        const playing = mode === "playing";
+        if (playing) {
+          document.documentElement.dataset.stage = "playing";
+          // The theater: the persona's own dark theme, switched on. See the style block above.
+          if (document.documentElement.dataset.theme !== "dark") {
+            priorTheme = document.documentElement.dataset.theme;
+            document.documentElement.dataset.theme = "dark";
+          }
+        } else {
+          delete document.documentElement.dataset.stage;
+          if (priorTheme === undefined) delete document.documentElement.dataset.theme;
+          else document.documentElement.dataset.theme = priorTheme;
+          priorTheme = undefined;
+        }
+        // The other cuts go INERT rather than display:none — the page must not reflow, and the
+        // player's scroll position has to survive a pause. inert takes them out of tab order and
+        // the accessibility tree both; a screen reader must not keep walking a page the player
+        // has left.
+        for (const id of ["profile", "posts"]) {
+          const el = document.getElementById(id);
+          if (el) el.toggleAttribute("inert", playing);
+        }
+        // The page is locked, so make sure what it is locked ON is the stage.
+        if (playing) stage.scrollIntoView({ block: "nearest" });
+        // queries: space does nothing · keyboard not reaching the game · input bind · focus
+        //
+        // AND THE KEYBOARD GOES WITH THE STAGE. The play press happened in THIS document, so this
+        // document holds the focus — and every key the player presses lands in the shell while
+        // the game hears nothing. The founder, on the space bar: *"bu haldeyken klavyeden space
+        // tusunu bile almiyor. tum input game frame'e bind olmali."* Granting the stage IS the
+        // input handover, so the frame is focused with it — and again on pause's reversal, so a
+        // resumed game does not come back deaf.
+        if (playing) frame.focus();
+        // The toolbar swaps its icons for the handle on this event — it owns its own row.
+        document.dispatchEvent(new CustomEvent("justai:stage", { detail: { mode } }));
+      };
+
+      // ── the mood: meaning, not pixels ─────────────────────────────────────────────────────
+      // A few calls a second at most, eased here over ~600ms — never sampled from a framebuffer.
+      // It leans on the ONE variable the whole ground is already built from, so the persona's
+      // page re-tints without anything being painted: the door's washes, the buttons, the links
+      // all read --accent already.
+      const moodHost = (document.getElementById("infinite") ?? document.documentElement) as HTMLElement;
+      const hex = (c: string) => {
+        const m = /^#([0-9a-f]{6})$/i.exec(c.trim());
+        return m ? [parseInt(m[1].slice(0, 2), 16), parseInt(m[1].slice(2, 4), 16), parseInt(m[1].slice(4, 6), 16)] : null;
+      };
+      let moodRaf = 0;
+      const moodTo = (args: any) => {
+        if (typeof args?.energy === "number")
+          moodHost.style.setProperty("--stage-energy", String(Math.max(0, Math.min(1, args.energy))));
+        const to = typeof args?.accent === "string" ? hex(args.accent) : null;
+        if (!to) return;
+        const from = hex(getComputedStyle(moodHost).getPropertyValue("--accent")) ?? to;
+        cancelAnimationFrame(moodRaf);
+        const t0 = performance.now();
+        const step = (now: number) => {
+          const k = Math.min(1, (now - t0) / 600);
+          const e = k * k * (3 - 2 * k);
+          const c = from.map((f, i) => Math.round(f + (to[i] - f) * e));
+          moodHost.style.setProperty("--accent", `rgb(${c[0]}, ${c[1]}, ${c[2]})`);
+          if (k < 1) moodRaf = requestAnimationFrame(step);
+        };
+        moodRaf = requestAnimationFrame(step);
+      };
+
+      bus.register({
+        method: "stage",
+        handler: async (a: any) => {
+          // No protocol 2, no stage — the rule, not a courtesy. Awaited, not read: see above.
+          if ((await declared) < 2) return { granted: false };
+          setStage(a?.mode === "playing" ? "playing" : "paused");
+          return { granted: true };
+        },
+      });
+      bus.register({ method: "mood", handler: (a: any) => { moodTo(a); return {}; } });
+
+      // The shell's asks, all funnelled through one line so every reason travels the same path.
+      const askPause = (reason: string) =>
+        bus.proxy({ method: "pause", service: "game", args: { reason }, options: { timeout: 3000 } })
+          .catch(() => {});
+      // The pause handle and the fullscreen control live in the toolbar's own row; it dispatches,
+      // this listens. The shell restores its chrome only when the GAME announces `paused` — one
+      // source of truth for state, which is the game, always.
+      document.addEventListener("justai:pause-request", () => askPause("chrome"));
+      document.addEventListener("justai:fullscreen-request", () =>
+        (stage as any).requestFullscreen?.().catch(() => {}));
+      document.addEventListener("visibilitychange", () => {
+        if (document.hidden && document.documentElement.dataset.stage === "playing") askPause("hidden");
+      });
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && document.documentElement.dataset.stage === "playing") askPause("chrome");
+      });
+    }
+
+    const arrived = bus
+      ? new Promise<void>((resolve) => bus.on("connected", (e: any) => { if (e?.name === "game") resolve(); }))
+      : Promise.resolve();
+
+    stage.appendChild(frame);
+    // ── WHAT CROSSES INTO THE FRAME: AN ALLOWLIST, AND A SHORT ONE ──────────────────────────
+    //
+    // Forwarding the persona's whole query string would be the obvious convenience and it is a
+    // privacy hole: a `?data=` envelope, a campaign's utm tags and anything else a person arrived
+    // carrying would be handed to a frame that will one day be a third party's deployment. So the
+    // shell passes exactly two flags, both of them DEBUG instruments that belong to whoever is
+    // looking at the page rather than to whoever built the game: `xray`, the framework's design
+    // grid, and `slow`, which asks a game to spread its own loading out far enough to watch.
+    // A game that does not understand either simply ignores them.
+    const here = new URLSearchParams(location.search);
+    const url = new URL(src, location.href);
+    for (const flag of ["xray", "slow"]) if (here.has(flag)) url.searchParams.set(flag, here.get(flag) ?? "");
+    frame.src = url.pathname + url.search;
+
+    // ── THE HANDOVER ─────────────────────────────────────────────────────────────────────────
+    //
+    // ONE CALL CARRIES BOTH. atrium's `proxy` takes a progress callback and resolves when the
+    // method returns, so `boot` is the whole protocol: the game reports as it loads and answers
+    // when it can draw. No second channel, no polling, and nothing to keep in sync.
+    //
+    // ** THE EXPLICIT `timeout` IS LOAD-BEARING. ** atrium's default transaction timeout is ONE
+    // SECOND — right for a `pick` or an `echo`, and catastrophic here: every game on earth takes
+    // longer than a second to load, so `boot` rejected at 1.000s, the catch below swallowed it,
+    // and the shell handed over an empty frame while the game was still fetching. It failed the
+    // same way every time and said nothing, which is the whole silent-failure genre in one line.
+    // Caught by the spec in harness/tests/behavior.spec.mjs, which asked the bar what it read.
+    //
+    // The number is deliberately far beyond any real load: the POLICY is the watchdog above, and
+    // two clocks racing to enforce one promise means the promise is whichever one you forgot.
+    const boot = (async () => {
+      if (!bus) return {};
+      await arrived;
+      return await bus.proxy({
+        method: "boot",
+        service: "game",
+        options: { timeout: 600000, callback: (e: any) => setProgress(e?.progress ?? e?.value ?? e) },
+      });
+    })();
+
+    // The watchdog is the other half of the promise made to the player: whatever is wrong in
+    // there, they are better off seeing it than seeing us wait for it.
+    const giveUp = new Promise<any>((resolve) => {
+      bump = () => {
+        if (watchdog) clearTimeout(watchdog);
+        watchdog = setTimeout(() => resolve({ lateBy: "silence" }), PATIENCE);
+      };
+      bump();
+    });
+
+    // A SWALLOWED REASON IS THE FAILURE ITSELF. The frame is handed over either way — a player must
+    // not lose the game to a broken handshake — but the catch SAYS what went wrong, because the
+    // symptom on the other side of it is "the wait ended early" and nothing else. This cut's own
+    // one-second bug lived inside an empty catch and was invisible until a spec read the bar.
+    const answer: any = await Promise.race([
+      boot.catch((e: any) => {
+        console.warn("[preroll] the game's boot did not complete:", e?.message || e);
+        return {};
+      }),
+      giveUp,
+    ]);
+    if (watchdog) clearTimeout(watchdog);
+
+    // The boot answer carries the game's protocol version, and version 2 is the declaration
+    // that `pause` is registered and will be honoured. Resolved before open(), so a game
+    // announcing `playing` in its very first frame — or a breath before its own answer — is
+    // already trusted by the time the door goes up.
+    declareProtocol(typeof answer?.protocol === "number" ? answer.protocol : 1);
+
+    open();
+    // `curtain: true` is the game saying "hand over early, I will cover the rest myself" — which
+    // is what a console does, where the logo animation IS the loading screen. Nothing else here
+    // changes; the difference is only how long this cut keeps the door shut.
+    if (answer?.curtain) root.dataset.curtain = "";
+  };
+
+  playBtn.addEventListener("click", start, { once: true });
+}

package/src/behaviour/segmented.ts

@@ -0,0 +1,64 @@
+// queries: segmented behaviour · segmented script · where did Segmented.astro's script go ·
+//          testing a component's behaviour · component script is not type checked
+//
+// The segmented control — one choice out of a few, iOS-grammar.
+//
+// Lifted out of `Segmented.astro`, where it was TypeScript that nothing read: a hoisted Astro script
+// goes to esbuild, which strips annotations WITHOUT checking them, and this package had no tsconfig.
+// Out here a compiler can open it and a test can call it. What stays in the component is the markup
+// and the CSS, which is what a component is.
+// queries: segmented control keyboard · arrow keys · roving tabindex · aria-checked · change event
+//
+// ROVING TABINDEX IS THE WHOLE OF THE KEYBOARD. A radiogroup is ONE tab stop: Tab reaches the
+// chosen option and the arrows move within the group. Leaving every option at `tabIndex 0` is the
+// common mistake and it is invisible to anyone using a mouse — a person on a keyboard suddenly has
+// to press Tab three times to get past a control they were not using.
+//
+// Lifted from qr, which had it right and had it alone.
+const wire = (root: HTMLElement) => {
+  const items = () => Array.from(root.querySelectorAll<HTMLElement>('[role="radio"]'));
+
+  const set = (el: HTMLElement, focus?: boolean, quiet?: boolean) => {
+    if (el.getAttribute("aria-disabled") === "true") return;
+    const next = el.dataset.value!;
+    if (root.dataset.value === next) { if (focus) el.focus(); return; }
+    for (const r of items()) {
+      const chosen = r === el;
+      r.setAttribute("aria-checked", String(chosen));
+      r.tabIndex = chosen ? 0 : -1;
+    }
+    root.dataset.value = next;
+    if (focus) el.focus();
+    // Setting `.value` from code does NOT re-announce — a caller that just said what it wants does
+    // not need to be told, and a listener that reacts by setting the value would loop.
+    if (!quiet) root.dispatchEvent(new CustomEvent("change", { detail: { value: next }, bubbles: true }));
+  };
+
+  for (const el of items()) el.addEventListener("click", () => set(el, true));
+
+  root.addEventListener("keydown", (e) => {
+    const key = (e as KeyboardEvent).key;
+    const all = items().filter((r) => r.getAttribute("aria-disabled") !== "true");
+    const at = all.findIndex((r) => r.getAttribute("aria-checked") === "true");
+    let to = -1;
+    if (key === "ArrowRight" || key === "ArrowDown") to = (at + 1) % all.length;
+    else if (key === "ArrowLeft" || key === "ArrowUp") to = (at - 1 + all.length) % all.length;
+    else if (key === "Home") to = 0;
+    else if (key === "End") to = all.length - 1;
+    if (to < 0 || !all[to]) return;
+    e.preventDefault();
+    set(all[to], true);
+  });
+
+  // The one thing a caller needs beyond listening: saying what it wants.
+  Object.defineProperty(root, "value", {
+    get: () => root.dataset.value,
+    set: (v: string) => {
+      const el = items().find((r) => r.dataset.value === v);
+      if (el) set(el, false, true);
+    },
+    configurable: true,
+  });
+};
+
+for (const root of document.querySelectorAll<HTMLElement>(".jseg")) wire(root);