@justai/cuts 0.133.0 → 0.139.0

package/src/Posts.astro

@@ -345,230 +345,7 @@ const vars = [
   .z-foot a { color: var(--confirm-accent, var(--accent)); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
 </style>
 
-<script>
-  // 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();
-    }
-  })();
-</script>
+  <script>
+    // The behaviour lives in ./behaviour/posts.ts — see that file for why it is not in here.
+    import "./behaviour/posts";
+  </script>

package/src/Preroll.astro

@@ -382,294 +382,7 @@ const safeId = "game-" + (id.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/
    * back the moment they pause. */
 </style>
 
-<script>
-  // 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 });
-  }
-</script>
+  <script>
+    // The behaviour lives in ./behaviour/preroll.ts — see that file for why it is not in here.
+    import "./behaviour/preroll";
+  </script>

package/src/Segmented.astro

@@ -165,60 +165,7 @@ const on = value && options.some((o) => o.value === value) ? value : options[0]?
   }
 </style>
 
-<script>
-  // 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);
-</script>
+  <script>
+    // The behaviour lives in ./behaviour/segmented.ts — see that file for why it is not in here.
+    import "./behaviour/segmented";
+  </script>