@justai/cuts 0.133.0 → 0.139.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.133.0",
+  "version": "0.139.0",
   "description": "A persona's named parts \u2014 the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
@@ -41,8 +41,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@justai/core": "^0.35.0",
-    "@justai/ui": "^0.22.0",
+    "@justai/core": "^0.36.0",
+    "@justai/ui": "^0.26.0",
     "@justai/atrium": "^0.1.9"
+  },
+  "scripts": {
+    "check": "bunx tsc -p tsconfig.json"
   }
 }

package/src/Base.astro

@@ -33,7 +33,7 @@ import { dir as dirOf } from "@justai/ui/locale";
 import "./ground.css";
 // The load-bearing behaviour is framework-free and lives in @justai/core, so `feed` (Next) injects the
 // SAME strings instead of hand-copying them. This binding just decides where they go in an Astro head.
-import { AUTH_CAPTURE_JS, CONSENT_JS, JS_CLASS_JS, REVEAL_CSS, XRAY_JS, analyticsJs, consentCopy } from "@justai/core";
+import { AUTH_CAPTURE_JS, CONSENT_JS, JS_CLASS_JS, REVEAL_CSS, analyticsJs, consentCopy } from "@justai/core";
 // The consent ask IS a confirmation — a moment of trust — so it rides the fleet's ONE dialog
 // rather than keeping a private dialect. One anatomy for "are you sure?" and "may I count you?".
 import ConfirmSheet from "./ConfirmSheet.astro";
@@ -180,8 +180,26 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
         repo is one nobody has when they need it.
         It is glasses, not a renovation: nothing is added to the page's own elements, the overlay is
         fixed and reads `#kernel`'s rect, and `pointer-events` is none throughout. And it costs
-        nothing when off — the script returns on its second line unless the flag is there. */}
-    <script is:inline set:html={XRAY_JS} />
+        nothing when off — MEASURED, and it did not. */}
+    {/* queries: xray page weight · why is the x-ray a dynamic import · debug tool on every page ·
+                 5381 bytes of xray · lazy load a debug overlay
+
+        IT COST 5,381 BYTES ON EVERY PAGE OF EVERY PERSONA, TO EVERY VISITOR — 10 to 16% of the
+        document, measured on four live hosts. "It costs nothing when off" was true of the RUNTIME
+        (one `if` and a return) and false of the TRANSFER, and only one of those is what a visitor
+        pays. The whole overlay was inlined into the head so that a branch could decline to run it.
+
+        So the flag check stays inline and the instrument is fetched only by whoever asked for it.
+        The person debugging pays one request; everybody else pays the bytes below. Astro splits the
+        dynamic import into its own chunk, so nothing about it reaches a page that does not ask.
+
+        It is a real module now, not a string — see @justai/core/xray. */}
+    <script>
+      if (new URLSearchParams(location.search).has("xray")) {
+        const { xray } = await import("@justai/core/xray");
+        xray();
+      }
+    </script>
     {/* Reveal only after a page marks itself ready — gated behind .js so the page is always visible
          if JS is off, and no scroll flash before we position at the Kernel. This style is a TRAP as
          much as a feature, and the warning must stay beside it: ANY page using this layout without a

package/src/Catalogue.astro

@@ -383,238 +383,10 @@ const isNew = (added: string): boolean => { const t0 = Date.parse(added || "");
   apply();
 </script>
 
-<script>
-  // queries: how does a new app appear on app.zone · my app is not on app.zone · new app missing
-  //          from app.zone · runtime append registry · app.zone card unstyled · data-astro-cid
-  //          insertAdjacentHTML · app.zone grid not sorted · where does a runtime card's category
-  //          come from · why is an app's icon fetched from its own host
-  //
-  // app.zone's catalog: SSR renders the curated apps (for SEO + design); at RUNTIME we fetch the live
-  // registry (api.justai.pro/api/catalog) and APPEND any persona registered since the build — a
-  // *.app.zone citizen not already on the page — so a new app appears with NO app.zone redeploy.
-  //
-  // Two traps live in here. (1) Nodes built with insertAdjacentHTML sit OUTSIDE Astro's scoped CSS,
-  // so the scope attribute has to be copied off a real card onto every injected node — forget it and
-  // nothing errors, the card just renders completely unstyled. (2) The whole grid is re-sorted after
-  // the append, seeds and newcomers together, so ordering is a property of the merged list, not of
-  // either source. Then a `zone:cards` event lets the URL filter re-run over the newcomers.
-  (function () {
-    const grid = document.getElementById("grid");
-    if (!grid) return;
-    const locale = document.documentElement.lang || "en";
-    const NEW_MS = 7 * 864e5; // a persona wears NEW only for its first week (honest — from its createdAt)
-    const newLabel = grid.dataset.newLabel || "New";
-    // queries: which personas appear on this apex · runtime append kind · why is my game not listed
-    //
-    // WHICH CITIZENS THIS APEX LISTS — where the hostname test used to be. A bundled script cannot
-    // reach this component's props, so the two facts it needs ride the same data-attribute channel as
-    // newLabel and catMap. And `kind` is asked of the registry rather than inferred from a suffix: a
-    // persona's apex is a property of the persona, not a shape of its address.
-    const apexKind = grid.dataset.kind || "app";
-    const apexHost = grid.dataset.apex || "app.zone";
-    // The category label must be localized like the SSR path (catLabel), but the API returns the
-    // category in English regardless of ?locale=. So carry this page's cat dictionary through a data
-    // attribute (same channel as newLabel) and map through it — the English key stays the stable
-    // filter value in data-category, only the visible label is translated.
-    let catMap: Record<string, string> = {};
-    try { catMap = JSON.parse(grid.dataset.catMap || "{}"); } catch (e) {}
-    const catLabel = (c: string): string => catMap[c] ?? c;
-    // The card's line, in the storefront's voice rather than the persona's — same map the SSR path
-    // reads, arriving through the same channel as the two above. Keyed by host, which the API calls
-    // `home`. Missing entry falls through to the bio, so a locale with no taglines yet, or a persona
-    // that registered after they were written, simply keeps what it had.
-    let tagMap: Record<string, string> = {};
-    try { tagMap = JSON.parse(grid.dataset.taglines || "{}"); } catch (e) {}
-
-    // hosts already on the page (don't duplicate the SSR cards)
-    const have = new Set(
-      Array.from(grid.querySelectorAll<HTMLAnchorElement>("a.card")).map((a) => {
-        try { return new URL(a.href).host; } catch { return ""; }
-      }),
-    );
-    // The appended cards must inherit CatalogueCard's scoped styles → copy the cid off a real card, and
-    // fall back to the inert one in #cardscope when this apex ships no seed. Without that fallback an
-    // empty-seed storefront renders every runtime card as unstyled markup — measured on pin.games' first
-    // night, where the shelf's only game arrived as blue underlined links.
-    const scopeTpl = document.getElementById("cardscope") as HTMLTemplateElement | null;
-    const sample = grid.querySelector<HTMLElement>("a.card")
-      ?? scopeTpl?.content.querySelector<HTMLElement>("a.card")
-      ?? null;
-    const scopeAttr = sample ? sample.getAttributeNames().find((n) => n.startsWith("data-astro-cid-")) || null : null;
-
-    const esc = (s: unknown): string =>
-      String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c] as string);
-
-    type Entry = { handle: string; home: string; bio: string | null; name: string | null; avatar: string | null; glyph: string | null; category: string | null; accent: string | null; qrIcon: boolean; badge: string | null; createdAt: string | null };
-    const cardHTML = (a: Entry): string => {
-      const url = `https://${a.home}`;
-      // the persona's canonical icon, served on its own host — one face everywhere (avatar wins; glyph is gone).
-      // NO inline style. It used to carry the whole .icon rule inline, on the grounds that a node inserted with
-      // insertAdjacentHTML sits outside Astro's scoped CSS — but the append copies the cid onto every injected
-      // node, including this img, so the class does apply. What the inline copy actually did was OVERRIDE it:
-      // when the icon grew from 60px to 72px in AppCard.astro, this stayed at 60 and won on specificity, so the
-      // three seeded cards rendered a fifth larger than the seven that arrive from the registry. Nobody saw it
-      // until a reorder put them next to each other. (72 did not last — the size is back to 60, see
-      // AppCard.astro — but the trap is the same at any value: these attributes and that rule move together.)
-      // It protected nothing either: if the cid copy ever failed, the whole card would be unstyled, not just
-      // this image. One rule, in AppCard.astro.
-      const icon = `<img class="icon" src="${esc(a.avatar || `${url}/icon.svg`)}" alt="" width="60" height="60" loading="lazy" decoding="async">`;
-      // NEW only for the first week from the persona's own createdAt — never the hardcoded a.badge / a.status.
-      const created = a.createdAt ? Date.parse(a.createdAt) : NaN;
-      const isNew = Number.isFinite(created) && created <= Date.now() && Date.now() - created < NEW_MS;
-      const badge = isNew ? `<span class="badge new">${esc(newLabel)}</span>` : "";
-      const name = a.name || a.handle;
-      const cat = a.category || "";
-      // Must stay in step with AppCard.astro — this is the same card, built twice. The category span is
-      // gone from both: it lives in the filter row above the grid now.
-      return `<a class="card" href="${esc(url)}" data-name="${esc(name.toLowerCase())}" data-category="${esc(cat)}" data-id="${esc((a.handle || "").toLowerCase())}" data-added="${esc(a.createdAt || "")}">${icon}<div class="meta"><div class="top"><h2>${esc(name)}</h2>${badge}</div><p>${esc(tagMap[a.home] ?? a.bio ?? "")}</p></div><svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg></a>`;
-    };
-
-    fetch(`https://api.justai.pro/api/catalog?locale=${encodeURIComponent(locale)}&kind=${encodeURIComponent(apexKind)}`)
-      .then((r) => (r.ok ? r.json() : null))
-      .then((data) => {
-        if (!data || !data.personas) return;
-        const newcomers = (data.personas as Entry[]).filter(
-          // The registry already returned only this apex's kind, so all that is left to exclude is the
-            // apex itself — a household head does not stand on its own shelf.
-            //
-            // queries: auth appeared on app.zone · a persona from another apex is listed · why both
-            //          kind and home · residency
-            //
-            // TWO QUESTIONS, AND THE OLD LINE ANSWERED BOTH AT ONCE. `home.endsWith(".app.zone")` read
-            // as "is it an app" and was also, silently, "does it live here" — so replacing it with
-            // `kind` alone put `auth.justai.pro` and `justai.pro` on app.zone's shelf, both being kind
-            // `app`. Caught by comparing against the live page before deploying: fifteen cards where
-            // there had been thirteen, and a category nobody had ever seen.
-            //
-            // Both are asked now. KIND is what a persona IS — the registry's own property, and the
-            // reason a second apex can exist. RESIDENCY is where it LIVES, which is still its address.
-            (p) => p.home
-              && p.home.endsWith("." + apexHost)
-              && p.home !== apexHost && p.handle !== apexHost
-              && !have.has(p.home),
-        );
-        for (const a of newcomers) {
-          grid.insertAdjacentHTML("beforeend", cardHTML(a));
-          const el = grid.lastElementChild as HTMLAnchorElement | null;
-          if (!el) continue;
-          if (scopeAttr) {
-            el.setAttribute(scopeAttr, "");
-            el.querySelectorAll("*").forEach((n) => n.setAttribute(scopeAttr, ""));
-          }
-          try { const u = new URL(el.href); u.searchParams.set("ref", apexHost); u.searchParams.set("lang", locale); el.href = u.toString(); } catch {}
-        }
-
-        // The filter panel is rendered from the build-time seed, so a persona that registered afterwards
-        // can arrive carrying a category no row exists for — and it would then be unreachable by filter
-        // and invisible in the counts. Reconcile the panel against what is actually in the grid: every
-        // category present gets a row, and every count is recomputed rather than incremented, so this is
-        // correct however many times it runs.
-        const fpanel = document.getElementById("fpanel");
-        if (fpanel) {
-          // CLONE a row the server rendered instead of building HTML. Astro scopes per COMPONENT, so a
-          // hand-built node needs Zone.astro's own data-astro-cid-* copied onto it AND every child —
-          // forget it and nothing errors, the row just renders naked. A clone carries the cid, the tick
-          // and the inner spans with it, so that whole class of bug is gone rather than commented.
-          const proto = fpanel.querySelector<HTMLElement>('.opt[data-cat=""]');
-          const counts = new Map<string, number>();
-          for (const c of grid.querySelectorAll<HTMLAnchorElement>("a.card")) {
-            const k = c.dataset.category || "";
-            if (k) counts.set(k, (counts.get(k) || 0) + 1);
-          }
-          const allN = fpanel.querySelector<HTMLElement>('.opt[data-cat=""] .n');
-          if (allN) allN.textContent = String(grid.querySelectorAll("a.card").length);
-          for (const [cat, n] of counts) {
-            let opt = fpanel.querySelector<HTMLElement>(`.opt[data-cat="${CSS.escape(cat)}"]`);
-            if (!opt && proto) {
-              opt = proto.cloneNode(true) as HTMLElement;
-              // the prototype is the ticked "All" row — a clone must arrive unticked
-              opt.classList.remove("active");
-              opt.setAttribute("aria-pressed", "false");
-              opt.dataset.cat = cat;
-              const lb = opt.querySelector<HTMLElement>(".lb");
-              if (lb) lb.textContent = catLabel(cat);
-              fpanel.appendChild(opt);
-            }
-            if (!opt) continue;
-            const num = opt.querySelector<HTMLElement>(".n");
-            if (num) num.textContent = String(n);
-          }
-
-          // Re-sort now, because the SSR order was decided from a seed that holds a fraction of the
-          // catalog — most personas arrive here, at runtime. "All" is pinned first; the rest go
-          // biggest-first, then alphabetical, so the fullest shelf is the first one read.
-          const ordered = Array.from(fpanel.querySelectorAll<HTMLElement>(".opt")).sort((x, y) => {
-            const cx = x.dataset.cat || "", cy = y.dataset.cat || "";
-            if (!cx) return -1;
-            if (!cy) return 1;
-            const nx = counts.get(cx) || 0, ny = counts.get(cy) || 0;
-            return ny - nx || cx.localeCompare(cy);
-          });
-          for (const c of ordered) fpanel.appendChild(c);
-        }
-        // One order for the whole grid, and it is CURATED now rather than chronological: src/data/order.ts
-        // lists hosts top to bottom, and that list is the grid. Anything NOT on the list goes ABOVE it, so
-        // a persona that registers with the platform announces itself at the top with no change to this
-        // repo — the list curates what is known, it does not gate what arrives. Several unlisted arrivals
-        // sort newest-first among themselves, which is the old rule, still doing the one job it is good at.
-        //
-        // Keyed by host on purpose. The same app reaches this grid by two routes with two different
-        // identifiers — Password Generator is id "password" in the seed and handle "password-generator" in
-        // the registry — and an identifier that only matches one route fails silently on the other. A card
-        // that fails to match reads as unlisted and jumps to the top, which is the worst possible failure
-        // for an ordering bug: it looks deliberate. The host is what both routes agree on.
-        // Anything that is not a list means "no curated order" — never an exception. This parsed a
-        // `{}` once and `{}.map is not a function` killed everything after it, including the event
-        // that tells the filter new cards exist: the shelf showed a card AND "the first games are on
-        // their way" underneath it.
-        const orderList: string[] = (() => {
-          try {
-            const parsed = JSON.parse(grid.dataset.order || "[]");
-            return Array.isArray(parsed) ? parsed : [];
-          } catch { return []; }
-        })();
-        const rank = new Map(orderList.map((h, i) => [h, i]));
-        const UNLISTED = -1;
-        Array.from(grid.querySelectorAll<HTMLAnchorElement>("a.card"))
-          .map((el) => {
-            let host = "";
-            try { host = new URL(el.href).host; } catch {}
-            return { el, r: rank.has(host) ? (rank.get(host) as number) : UNLISTED, added: el.getAttribute("data-added") || "" };
-          })
-          .sort((x, y) => {
-            if (x.r !== y.r) return x.r - y.r;      // listed follow the list; unlisted (-1) sort above all
-            if (x.r !== UNLISTED) return 0;         // two listed cards cannot share a rank
-            if (x.added === y.added) return 0;      // both unlisted → newest first, undated last
-            if (!x.added) return 1;
-            if (!y.added) return -1;
-            return x.added < y.added ? 1 : -1;
-          })
-          .forEach(({ el }) => grid.appendChild(el));
-        // queries: the empty message shows under a card · zone:cards never fired · the filter did not
-        //          see the new cards · silent catch
-        //
-        // IN A `finally`, BECAUSE EVERYTHING ABOVE IT IS ORNAMENT AND THIS IS NOT. Once cards are in
-        // the DOM, the filter has to be told — it owns which of them are visible and whether the
-        // "nothing here" line is showing. Sorting them is a nicety; leaving the page claiming to be
-        // empty while a card sits above the claim is a defect a visitor sees.
-        //
-        // It sat at the end of a promise chain ending in `.catch(() => {})`, so one TypeError in the
-        // sort silenced it with nothing logged anywhere. That combination — a throw between the work
-        // and its announcement, and a catch that says nothing — is how a page ends up confidently
-        // wrong. The `finally` fixes the ordering; the catch below now says what it swallowed.
-      })
-      .catch((err) => {
-        // Never fatal — a storefront must render without the registry. But it must not be SILENT:
-        // the seed and the build-time layer are already on the page, and a swallowed error here is
-        // the difference between "no new personas today" and "the append is broken".
-        console.warn("[catalogue] runtime append failed", err);
-      })
-      .finally(() => {
-        document.dispatchEvent(new Event("zone:cards")); // cards are in — let the filter catch them
-      });
-  })();
-</script>
+  <script>
+    // The behaviour lives in ./behaviour/catalogue.ts — see that file for why it is not in here.
+    import "./behaviour/catalogue";
+  </script>
 
 <style>
   /* The three gaps down this column are one rhythm: 26 to the search, 18 from it to the grid, 14