@justai/cuts 0.99.0 → 0.102.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justai/cuts",
-  "version": "0.99.0",
-  "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
+  "version": "0.102.0",
+  "description": "A persona's named parts \u2014 the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -29,7 +29,9 @@
     "./Files.astro": "./src/FilePicker.astro",
     "./AuthMount.astro": "./src/AuthMount.astro",
     "./ChildPersona.astro": "./src/ChildPersona.astro",
-    "./tagline.js": "./src/tagline.js"
+    "./tagline.js": "./src/tagline.js",
+    "./Catalogue.astro": "./src/Catalogue.astro",
+    "./CatalogueCard.astro": "./src/CatalogueCard.astro"
   },
   "peerDependencies": {
     "astro": ">=5"

package/src/Catalogue.astro

@@ -0,0 +1,657 @@
+---
+// THE CATALOGUE — an apex's storefront, and the last part of an apex that was not already shared.
+//
+// queries: app.zone grid · pin.games catalogue · the storefront · how does a new persona appear ·
+//          three-layer catalog · seed and runtime append · apex grid · Catalogue cut
+//
+// ── WHY THIS IS A CUT ────────────────────────────────────────────────────────────────────────────
+//
+// app.zone's own answer sheet called the grid "the one thing genuinely app.zone's own", and that was
+// true while there was one apex. There are two now, and the founder's description of the difference
+// is exact: the same experience, one listing app personas and the other game personas.
+//
+// Measured before moving it: 92% of app.zone's kernel is generic, and the difference between the two
+// storefronts is about forty lines. Copying to change forty would have forked 966 — including a
+// stylesheet, which would have become the largest single duplication in the fleet and the one most
+// certain to drift.
+//
+// ── THE SEAM IS MACHINERY VERSUS WORDS ──────────────────────────────────────────────────────────
+//
+// Not "app.zone versus pin.games". The three layers, the card, the filter panel, the search, the deep
+// links, the sort, the NEW badge are machinery and live here. The seed, the taglines, the curated
+// order, the category labels are content and stay with the apex that owns them, arriving as props.
+//
+// ── THE THREE LAYERS ────────────────────────────────────────────────────────────────────────────
+//
+// 1. A BUILD-TIME SEED — hardcoded, and emphatically not the roster of record. It exists so a crawler
+//    with no JavaScript sees a real grid and so the build works offline. A persona does NOT have to
+//    be in it to appear. An apex with nothing seeded yet passes an empty list and is correct.
+// 2. A BUILD-TIME DESCRIPTION OVERRIDE — each seeded line replaced by the persona's own bio in the
+//    reader's language, from the live registry, wrapped so failure is survivable: an outage at build
+//    costs freshness, not a deploy.
+// 3. A RUNTIME APPEND — everything the registry knows that the seed does not. This is how a persona
+//    that registered an hour ago reaches the storefront with nobody redeploying.
+//
+// ── AND THE ONE LINE THAT DECIDES WHAT THE SITE IS ──────────────────────────────────────────────
+//
+// `kind`. It used to be `home.endsWith(".app.zone")` in a template, and again in llms.txt — a
+// statement about what the ecosystem IS, living in one page's markup, twice. It is now a question
+// asked of the registry, which has carried `personaKind` since long before anything read it.
+import CatalogueCard, { type CatalogueEntry } from "./CatalogueCard.astro";
+
+interface Props {
+  /** BCP-47 code of the page — the language the registry is asked for. */
+  lang: string;
+  /** Which citizens this apex lists. The whole difference between two storefronts. */
+  kind: string;
+  /** The apex's own host, used for the referral parameter on every card. */
+  apexHost: string;
+  /** Layer one. Empty is valid and correct for an apex with nothing seeded yet. */
+  seed?: CatalogueEntry[];
+  /** The curated sequence, keyed by host — read by the runtime sort. */
+  order?: Record<string, number>;
+  /** A shelf label per host: a card has one line to earn a tap, and a bio clamps. Keyed by host. */
+  taglines?: Record<string, string>;
+  /** Localized category names. The English key stays the stable filter value. */
+  catLabels?: Record<string, string>;
+  /** Per-id name and description for the seed, in the reader's language. */
+  entries?: Record<string, { name: string; desc: string }>;
+  /** Every locale this apex serves — the deep-link script strips a language prefix with it. */
+  locales: readonly string[];
+  strings: {
+    search: string;
+    filter: string;
+    eyebrow: string;
+    all: string;
+    empty: string;
+    /** queries: empty catalogue · a new apex has no personas · first day · nothing matched vs nothing here
+     *
+     * WHAT AN APEX SAYS ON ITS FIRST DAY, and it is not what it says when a search misses. "No games
+     * match." is a true sentence about a filter and a wrong one about an empty shelf — it tells a
+     * visitor they typed something unlucky when in fact they arrived early. pin.games opened with a
+     * catalogue of zero on purpose, so this is the sentence that greeted the first person there.
+     *
+     * Optional: an apex with citizens can never reach this state, and falls back to `empty`. */
+    awaiting?: string;
+    new: string;
+  };
+}
+const {
+  lang, kind, apexHost,
+  seed = [], order = {}, taglines = {}, catLabels = {}, entries = {},
+  locales, strings,
+} = Astro.props;
+
+// localized category label; the category key (English) stays the stable filter value
+const catLabel = (c: string): string => catLabels[c] ?? c;
+
+// The filter panel's rows, rendered server-side so the shelves exist without JS and for SEO. Biggest
+// category first, then alphabetical — a stable order that puts the fullest shelf at the front.
+// Counts are category SIZES, not visible-result counts: they do not move when the search box narrows the
+// grid, so a row always answers "how many apps are there of this kind".
+// Derived from the build-time seed only. A persona that registers later can bring a category that is not
+// here, so the runtime append adds any missing row itself (see the catalog script).
+const catCounts: Record<string, number> = {};
+for (const a of seed) catCounts[a.category] = (catCounts[a.category] ?? 0) + 1;
+const catChips = Object.entries(catCounts).sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
+
+// localized app-card content, keyed by the app's stable id; English is the fallback
+type Loc = { name: string; desc: string };
+const appName = (a: App): string => entries[a.id]?.name ?? a.name;
+
+// queries: where do the app descriptions on app.zone come from · what happens to the build if
+//          api.justai.pro is down · which description wins, the API bio or the bundled copy ·
+//          how is the NEW badge decided · how long does an app show the NEW badge
+//
+// Build-time: single-source each app's description from its persona's bio, in the reader's language,
+// via api.justai.pro (the catalog service app.zone declares). The bundled i18n is the fallback if the
+// API is unreachable at build — the design never depends on the network.
+let catalogByHome: Record<string, string> = {};
+try {
+  const res = await fetch(`https://api.justai.pro/api/catalog?locale=${lang}&kind=${encodeURIComponent(kind)}`);
+  if (res.ok) {
+    const data = await res.json();
+    for (const p of data.personas ?? []) if (p.home && p.bio) catalogByHome[p.home] = p.bio;
+  }
+} catch {
+  /* offline build → fall back to the bundled i18n; the page never depends on the network */
+}
+const hostOf = (url: string): string => {
+  try {
+    return new URL(url).host;
+  } catch {
+    return "";
+  }
+};
+// queries: why is the card's line shorter than the persona's bio · where does the card copy come from ·
+//          can I change what a card says without touching the persona
+//
+// THE CARD AND THE PROFILE SPEAK IN DIFFERENT VOICES, and that is the whole point of this line.
+// A bio is the persona introducing itself, in the first person, at profile length: "önemsediğin her
+// saati tek bakışta tutarım". A card is a shelf label in a storefront, and it should ask for the tap:
+// "Dünyadaki saatleri tek bakışta takip et". Second person, imperative, one line.
+//
+// It is also what fixes the truncation. The card clamps at two lines and five of the nine visible
+// cards were ending in an ellipsis — because a sentence written for a profile was being shown in a
+// card. That is a wrong-field problem, not a long-copy problem.
+//
+// KEYED BY HOST, exactly as src/data/order.ts is keyed, and for exactly its reason: an app reaches
+// this grid by two routes with two different identifiers. `stt` and `tts` registered at runtime and
+// have no entry in the seed at all, so a seed-id key could never reach them.
+//
+// TEMPORARY HOME. These belong to the persona, not to app.zone — the three-layer catalogue promises
+// that a persona can register and appear here with no change to this repo, and a tagline held here
+// breaks that for every future arrival. They live here while the copy is still being written, because
+// iterating a sentence through twelve repos and a registry sync is the wrong loop for editing prose.
+// Once the wording settles they move into the persona contract beside bio and meta, and this map goes.
+const tagline = (a: App): string | undefined =>
+  taglines?.[hostOf(a.url)];
+const appDesc = (a: App): string =>
+  tagline(a) ?? catalogByHome[hostOf(a.url)] ?? entries[a.id]?.desc ?? a.description;
+// A persona wears the NEW badge only for its first week — computed from when it joined (honest, not a
+// hardcoded flag). The same rule runs at runtime for API-fetched cards (see the catalog script below).
+const NEW_DAYS = 7;
+const isNew = (added: string): boolean => { const t0 = Date.parse(added || ""); return Number.isFinite(t0) && Date.now() - t0 < NEW_DAYS * 864e5; };
+---
+
+    <div class="kbody">
+      <!-- The shelves used to be a chip row under the field. Six categories, and FOUR of them held a
+           single app — a filter whose options mostly resolve to one card is a shortcut wearing a
+           filter's clothes, and it cost a whole row of height to say so. Worse, the row overflowed
+           with `scrollbar-width: none`, so the shelves past the edge had no affordance at all: they
+           were there and nothing said so. Collapsed into the field's own end, the same options get a
+           vertical list where a long label ("Yardımcı Programlar") fits whole and the count sits
+           beside it, and the default view goes back to being the cards. -->
+      <div class="controls">
+        <div class="fwrap">
+          <div class="search">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="M21 21l-4.3-4.3" /></svg>
+            <input id="search" type="search" placeholder={strings.search} autocomplete="off" aria-label={strings.search} />
+            <!-- aria-expanded is the button's own state and aria-controls names what it opens, so the
+                 panel is reachable by a screen reader as this button's disclosure rather than as a
+                 loose group that happens to follow it. -->
+            <button class="fbtn" id="fbtn" type="button" aria-label={strings.filter} title={strings.filter} aria-expanded="false" aria-controls="fpanel">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M7 12h10M10 18h4" /></svg>
+            </button>
+          </div>
+
+          <!-- Toggle buttons, not links: the filter is client-side and instant. aria-pressed carries
+               which shelf is showing. `hidden` rather than display:none in CSS, so the closed panel is
+               out of the accessibility tree and out of the tab order without a second source of truth. -->
+          <div class="fpanel" id="fpanel" role="group" aria-label={strings.eyebrow} hidden>
+            <button class="opt active" type="button" data-cat="" aria-pressed="true">
+              <svg class="tick" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
+              <span class="lb">{strings.all}</span><span class="n">{seed.length}</span>
+            </button>
+            {catChips.map(([c, n]) => (
+              <button class="opt" type="button" data-cat={c} aria-pressed="false">
+                <svg class="tick" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
+                <span class="lb">{catLabel(c)}</span><span class="n">{n}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <!-- data-order carries the curated sequence to the runtime sort, the same channel newLabel and
+           catMap already use. Passed as data rather than imported into the client bundle so the order the
+           page is serving is readable in the served HTML. -->
+      {/* taglines ride the same channel as newLabel and catMap: a data attribute on the grid. The
+          runtime append builds its cards in plain strings and cannot reach this component's scope, so
+          anything it needs has to arrive this way. Keyed by host, which is what the API calls `home`. */}
+      <section class="grid" id="grid" data-kind={kind} data-apex={apexHost} data-new-label={strings.new} data-cat-map={JSON.stringify(catLabels)} data-order={JSON.stringify(order)} data-taglines={JSON.stringify(taglines)}>
+        {seed.map((app) => <CatalogueCard app={app} name={appName(app)} desc={appDesc(app)} isNew={isNew(app.added)} newLabel={strings.new} />)}
+      </section>
+      {/* Both sentences ride data-attributes because the loader below is a BUNDLED script and
+          cannot see props — the same seam Posts uses. */}
+      <p class="empty" id="empty" hidden
+         data-empty={strings.empty}
+         data-awaiting={strings.awaiting ?? strings.empty}>{strings.empty}</p>
+    </div>
+
+{/* `apexHost` rides define:vars for the same reason `supported` does: this block is emitted
+    VERBATIM and cannot see the component's props. It was the literal "app.zone" until the second apex
+    existed. */}
+<script is:inline define:vars={{ supported: locales, apexHost }}>
+  // PLAIN BROWSER JS ONLY — no TypeScript in this block. `define:vars` forces the script `is:inline`,
+  // and Astro emits an inline script VERBATIM: it neither bundles nor type-strips it, unlike the
+  // hoisted `<script>` below (esbuild transpiles that one, so TS is fine there). A single `as
+  // HTMLInputElement` here reaches the browser as source and dies at parse with "Unexpected
+  // identifier 'as'" — which kills the WHOLE block, so the live search and the ?category=/?apps=
+  // deep links all silently stop working. See the corpus: an inline script is not TypeScript.
+  //
+  // `supported` is injected from src/i18n via define:vars — the shell's own technique — so the
+  // locale list has ONE home and is never typed here. A literal array once lived on this line and
+  // drifted: it was edited by hand when Italian shipped, and any locale missing from it fell through
+  // to "en", which the receiving persona then WROTE as the visitor's saved language choice.
+  // Pass the visitor's language + a referral to each app link, so apps open in the same
+  // language and show their "home → app.zone" affordance.
+  (function () {
+    function detectLang() {
+      const saved = localStorage.getItem("lang");
+      if (saved && supported.includes(saved)) return saved;
+      const langs = navigator.languages || [navigator.language || "en"];
+      for (const l of langs) {
+        const c = (l || "").toLowerCase().split("-")[0];
+        if (supported.includes(c)) return c;
+      }
+      return "en";
+    }
+    const lang = detectLang();
+    for (const a of document.querySelectorAll(".card")) {
+      try {
+        const u = new URL(a.href);
+        u.searchParams.set("ref", apexHost);
+        u.searchParams.set("lang", lang);
+        a.href = u.toString();
+      } catch (e) {}
+    }
+  })();
+
+  // queries: can a campaign link to just one app or one category · what is the ?apps= URL parameter ·
+  //          ?category= ?apps= ?persona= deep link · land a campaign click on one slice of the catalog
+  //
+  // gallery search + category filter + URL-driven filter. The panel is the visible face of the
+  // ?category= slice the catalog always supported: choosing one is the same operation a campaign link
+  // performs, so a person can reach by hand exactly where an ad can land them, and the URL stays
+  // shareable either way. ?apps= stays URL-only — it is a campaign instrument, not a browse control.
+  const search = document.getElementById("search");
+  const empty = document.getElementById("empty");
+  const panel = document.getElementById("fpanel");
+  const fbtn = document.getElementById("fbtn");
+  const params = new URLSearchParams(location.search);
+  // MUTABLE: the panel writes to it. Everything downstream reads `activeCat`, never the URL again.
+  let activeCat = (params.get("category") || "").trim().toLowerCase();
+  const appsParam = (params.get("apps") || params.get("persona") || params.get("personas") || "").trim().toLowerCase();
+  const onlyApps = appsParam ? new Set(appsParam.split(",").map((s) => s.trim()).filter(Boolean)) : null;
+
+  // Paint the options to match `activeCat`. Comparison is lowercased because data-cat carries the
+  // canonical casing ("Fitness") while a hand-typed ?category=fitness will not.
+  function paintChips() {
+    if (!panel) return;
+    let matched = false;
+    for (const b of panel.querySelectorAll(".opt")) {
+      const on = (b.dataset.cat || "").toLowerCase() === activeCat;
+      if (on) matched = true;
+      b.classList.toggle("active", on);
+      b.setAttribute("aria-pressed", on ? "true" : "false");
+    }
+    // ?category=nosuchthing — nothing matched, so no row is ticked rather than the wrong one. The grid
+    // will be empty and say so, which is the honest reading of the URL.
+    if (!matched && activeCat === "") panel.querySelector('.opt[data-cat=""]')?.classList.add("active");
+    // With the row gone, this button is the only place a closed panel can say a filter is on.
+    if (fbtn) fbtn.classList.toggle("on", activeCat !== "");
+  }
+
+  // `hidden` is the single source of truth for open/closed — read it rather than tracking a second flag
+  // that can disagree with the DOM.
+  function setOpen(open) {
+    if (!panel || !fbtn) return;
+    panel.hidden = !open;
+    fbtn.setAttribute("aria-expanded", open ? "true" : "false");
+  }
+  const isOpen = () => !!panel && !panel.hidden;
+
+  // Keep the address bar honest without stacking history: a filter is a view of this page, not a
+  // destination, so replaceState — the same treatment the ?ref/?lang hints get.
+  function syncUrl() {
+    const u = new URL(location.href);
+    if (activeCat) u.searchParams.set("category", activeCat);
+    else u.searchParams.delete("category");
+    history.replaceState(null, "", u.pathname + (u.search || "") + u.hash);
+  }
+
+  if (panel && fbtn) {
+    fbtn.addEventListener("click", () => setOpen(!isOpen()));
+
+    panel.addEventListener("click", (e) => {
+      const b = e.target.closest(".opt");
+      if (!b) return;
+      const c = (b.dataset.cat || "").toLowerCase();
+      activeCat = c === activeCat ? "" : c;   // choosing the ticked row clears it
+      paintChips();
+      syncUrl();
+      apply();
+      setOpen(false); // the choice is made and the grid behind it just changed — get out of the way
+    });
+
+    // Outside click closes. Bound on the document, so it also catches a click on the search input; the
+    // guard keeps the button's own click from closing what it just opened.
+    document.addEventListener("click", (e) => {
+      if (!isOpen()) return;
+      if (panel.contains(e.target) || fbtn.contains(e.target)) return;
+      setOpen(false);
+    });
+
+    // Escape closes and hands focus back, because a keyboard user who opened this has nowhere to go
+    // otherwise — the panel's rows are the only thing between them and the grid.
+    document.addEventListener("keydown", (e) => {
+      if (e.key !== "Escape" || !isOpen()) return;
+      setOpen(false);
+      fbtn.focus();
+    });
+  }
+
+  function apply() {
+    if (!empty) return;
+    const q = (search?.value ?? "").trim().toLowerCase();
+    let shown = 0;
+    // re-query each time so runtime-appended cards (new personas) obey the filter too
+    for (const card of document.querySelectorAll(".card")) {
+      const name = card.dataset.name ?? "";
+      const c = (card.dataset.category ?? "").toLowerCase();
+      const id = (card.dataset.id ?? "").toLowerCase();
+      const ok =
+        (!activeCat || c === activeCat) &&
+        (!onlyApps || onlyApps.has(id)) &&
+        (q === "" || name.includes(q));
+      card.style.display = ok ? "" : "none";
+      if (ok) shown++;
+    }
+    // TWO DIFFERENT SILENCES. `shown === 0` with cards on the page means a filter excluded them all;
+    // `total === 0` means the shelf itself is bare, which is a first day rather than a bad search.
+    // Same element, two sentences, and the wrong one reads as a fault the visitor caused.
+    const total = document.querySelectorAll(".card").length;
+    empty.textContent = (total === 0 ? empty.dataset.awaiting : empty.dataset.empty) ?? "";
+    empty.hidden = shown !== 0;
+  }
+
+  if (search) search.addEventListener("input", apply);
+  // runtime catalog cards arrive after the build-time ones — re-apply, and repaint the panel because the
+  // append may have added one for a category the build-time seed never knew about
+  document.addEventListener("zone:cards", () => { paintChips(); apply(); });
+  paintChips();
+  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 AppCard's scoped styles → copy the cid attribute off a real card
+    const sample = grid.querySelector<HTMLElement>("a.card");
+    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.
+        const orderList: string[] = (() => {
+          try { return JSON.parse(grid.dataset.order || "[]"); } 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));
+        document.dispatchEvent(new Event("zone:cards")); // newcomers in — let the URL filter catch them
+      })
+      .catch(() => {});
+  })();
+</script>
+
+<style>
+  /* The three gaps down this column are one rhythm: 26 to the search, 18 from it to the grid, 14
+     between cards. Each step is about 1.4x the next, so they read as one thing narrowing — section,
+     then control-to-list, then item-to-item.
+     THE TOP ONE USED TO BE `clamp(20px, 5vh, 44px)`, which is not a chosen number: it is whatever the
+     viewport gives. Measured, the same page had 37px of it at 700px tall and 46px at 900px, against a
+     fixed 18px below — so the search sat 1.8x from the bar on a laptop and 2.2x on a desktop, and at
+     that distance it stops reading as the head of the grid and starts looking as though it drifted
+     down toward it. A gap that changes with the window is a rhythm nobody designed. */
+  .kbody { flex: 1 0 auto; display: flex; flex-direction: column; padding-block: 26px 16px; }
+
+  .controls { margin-block-end: 18px; }
+
+  /* The field carries the CARD's material, and the reason is a measurement rather than a preference.
+     On this page "raised" means whiter plus a shadow: the cards are `--card-bg` (#fff in light) on an
+     off-white ground. The field was `--surface-2` — 4% BLACK over that same ground — with no shadow, so
+     it was not lifting, it was recessed, and a recessed input in light reads as disabled. Giving it the
+     card recipe means the page has ONE raised surface instead of two treatments arguing.
+     Dark loses nothing: there `--card-bg` and `--surface` are the same value, so the fill stays the 6%
+     white overlay that was already lifting correctly, and only the shadow is added. That asymmetry is
+     why the complaint could only come from the light side. */
+  .search {
+    display: flex; align-items: center; gap: 10px;
+    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md);
+    box-shadow: var(--card-shadow);
+    /* the end padding is the button's, not the text's — 16px would park the icon away from the edge it
+       belongs to, and the button brings its own 30px of hit area */
+    padding: 12px 8px 12px 16px;
+    transition: border-color 0.2s var(--ease-out), box-shadow 0.25s var(--ease-out);
+  }
+  /* focus lives on the whole box as a soft OUTER breeze — not a thick inner ring. The card shadow is
+     re-stated after the ring rather than replaced by it: `box-shadow` is one property, so naming only
+     the ring here would drop the lift the moment somebody clicked into the field. */
+  .search:focus-within {
+    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), var(--card-shadow);
+  }
+  .search svg { width: 18px; height: 18px; color: var(--text-dim); flex: none; }
+  .search input { flex: 1; min-width: 0; border: none; background: none; color: var(--text); font: inherit; font-size: var(--fs-base); outline: none; }
+  .search input:focus-visible { box-shadow: none; } /* the box carries the breeze; the input has no ring of its own */
+
+  /* ---- the filter: a button at the field's own end, and the shelves in a sheet under it ---- */
+  .fwrap { position: relative; } /* the panel hangs off this, not off .search, so focus styles stay put */
+
+  /* A 30px hit area inside a box whose height is set by the input's line box: the negative block margin
+     pulls its outer height back under that line, so adding this button does NOT make the field taller.
+     Measured before and after — the field is the same height it was with the chip row. */
+  .fbtn {
+    flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-block: -6px;
+    border: none; background: none; padding: 0; border-radius: var(--radius-sm); cursor: pointer;
+    color: var(--text-dim);
+    transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out);
+  }
+  /* `.search svg` sets colour on the ELEMENT, and a direct declaration beats an inherited one — so
+     without this the button's own colour (and the accent below) would never reach its icon. Equal
+     specificity, later in the sheet, so this wins. */
+  .fbtn svg { width: 18px; height: 18px; color: inherit; }
+  .fbtn:hover, .fbtn:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
+  /* the row that used to announce the active shelf is gone, so the button carries it */
+  .fbtn.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
+  .fpanel {
+    position: absolute; inset-inline: 0; top: calc(100% + 8px); z-index: 5;
+    display: flex; flex-direction: column; gap: 2px; padding: 6px;
+    /* the column's own material — a translucent ground would let the cards read through the labels */
+    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
+    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.45);
+    backdrop-filter: blur(30px) saturate(1.4);
+    -webkit-backdrop-filter: blur(30px) saturate(1.4);
+  }
+  .opt {
+    display: flex; align-items: center; gap: 9px; padding: 9px 10px;
+    border: none; background: none; border-radius: var(--radius-sm); cursor: pointer;
+    color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: start;
+    transition: background 0.2s var(--ease-out);
+  }
+  .opt:hover, .opt:focus-visible { background: color-mix(in srgb, var(--text) 8%, transparent); }
+  .opt .lb { flex: 1; min-width: 0; }
+  /* the count is the shelf's size, so a person knows what is behind a word before spending a click */
+  .opt .n { flex: none; font-variant-numeric: tabular-nums; font-size: var(--fs-2xs); color: var(--text-dim); }
+  /* hidden, not absent: the tick keeps its column either way, so the labels do not jump sideways when
+     the selection moves from one row to another */
+  .opt .tick { flex: none; width: 15px; height: 15px; color: var(--accent); visibility: hidden; }
+  .opt.active .tick { visibility: visible; }
+  .opt.active .lb { font-weight: 600; }
+
+  .grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
+  /* no entrance animation — when you walk into the room, everyone is already in their place.
+     the cards are simply there on load; the only motion is a whisper on hover. */
+  .empty { text-align: center; color: var(--text-dim); padding: 40px 0; }
+</style>

package/src/CatalogueCard.astro

@@ -0,0 +1,120 @@
+---
+// queries: catalogue card · app.zone card · pin.games card · the storefront card
+//
+// One card, for any apex's storefront. It was `AppCard` in app.zone and moved here whole when
+// pin.games arrived: a card is machinery, and the words inside it are the apex's.
+export interface CatalogueEntry {
+  /** stable key — the apex's own i18n is keyed by it, and it is never localized */
+  id: string;
+  name: string;
+  description: string;
+  url: string;
+  category: string;
+  /** ISO date the persona joined. The NEW badge is computed from it, never stored. */
+  added: string;
+}
+// No category on the card any more: it moved to a filter row above the grid. It was the same handful of
+// words repeated down the page — "Fitness" four times — carrying almost no information per card, while
+// costing every card a block-level line. As a filter it earns its space instead, and it surfaces the
+// ?category= slice the catalog already supported but never showed. data-category stays: the filter reads it.
+const { app, name, desc, isNew, newLabel } = Astro.props as {
+  app: App; name: string; desc: string; isNew: boolean; newLabel: string;
+};
+// The persona's canonical icon — every persona serves /icon.svg on its own host. One face everywhere.
+const icon = `${app.url}/icon.svg`;
+---
+
+<a
+  class="card"
+  href={app.url}
+  data-name={`${name} ${app.name}`.toLowerCase()}
+  data-category={app.category}
+  data-id={app.id.toLowerCase()}
+  data-added={app.added}
+>
+  <img class="icon" src={icon} alt="" width="60" height="60" loading="lazy" decoding="async" />
+  <div class="meta">
+    <div class="top">
+      <h2>{name}</h2>
+      {isNew && <span class="badge new">{newLabel}</span>}
+    </div>
+    <p>{desc}</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>
+
+<style>
+  .card {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    /* 16, down from 18, to pay for the larger icon: the icon is now what sets the card's height, and the
+       two px back on each side keep the row pitch where the shorter card put it. */
+    padding: 16px;
+    /* The card's own material, not the page column's — see --card-* in tokens.css. In light mode this is
+       solid white with a real shadow; in dark it is the glass, which there actually refracts. */
+    background: var(--card-bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    backdrop-filter: var(--card-blur);
+    -webkit-backdrop-filter: var(--card-blur);
+    box-shadow: var(--card-shadow);
+    text-decoration: none;
+    color: var(--text);
+    transition: transform 0.3s var(--ease-spring), border-color 0.3s, background 0.3s,
+      box-shadow 0.3s var(--ease-out);
+    will-change: transform;
+  }
+  /* the lift and the shadow move together — a card that rises without its shadow growing reads as a
+     sticker sliding, not an object leaving the page */
+  .card:hover {
+    transform: translateY(-2px);
+    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
+    box-shadow: var(--card-shadow-hover);
+  }
+  .card:active { transform: translateY(-1px) scale(0.99); }
+
+  /* the persona's canonical icon — a self-contained squircle, one face everywhere */
+  .icon {
+    flex: none;
+    /* 60. It was 72 for a day, on the reasoning that the icons are the only colour on this page — everything
+       else is ink on paper — so more of them should read as livelier. It read as too big instead, and that
+       turns out to be measurable rather than a matter of taste: the text beside the icon is a fixed 66px (a
+       16px title on a 1.5 line box, 3px, then two clamped bio lines at 13.44/1.45), so at 72 the icon
+       overshot the text by six pixels and the icon, not the content, was setting the card's height.
+       64 is the first size that fits inside the text block. 60 gives the same card height as 64 — past the
+       crossover the text sets it either way — so the last four pixels cost no vertical space and buy a
+       quieter mark. */
+    width: 60px;
+    height: 60px;
+    border-radius: var(--radius-md);
+    object-fit: cover;
+    box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.35);
+  }
+
+  .meta { flex: 1; min-width: 0; }
+  .top { display: flex; align-items: center; gap: 8px; }
+  h2 { font-size: var(--fs-base); font-weight: 600; letter-spacing: -0.01em; }
+  /* Clamped to two lines. The bios run from one line to four, which made every card a different height
+     and the column read ragged; the full text is on the app's own page anyway. */
+  p {
+    color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.45; margin: 3px 0 0;
+    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
+  }
+  .badge {
+    font-size: 0.66rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    padding: 2px 7px;
+    border-radius: var(--radius-pill);
+  }
+  /* Only NEW is shown now (for a persona's first week). LIVE/beta/soon badges were dropped — every card
+     in the catalog is live by definition, so a "live" badge said nothing. */
+  .badge.new { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
+
+  .chev { flex: none; width: 20px; height: 20px; color: var(--text-dim); transition: transform 0.3s var(--ease-out); }
+  .card:hover .chev { transform: translateX(3px); color: var(--accent); }
+</style>

package/src/Posts.astro

@@ -260,7 +260,9 @@ const vars = [
   .phandle, .dot, .pt { color: var(--text-dim); font-weight: 400; }
   /* a persona's name in the feed links to its profile (X-style); humans have no link */
   .pn { color: inherit; text-decoration: none; }
-  .pn:hover b { color: var(--accent-text, var(--accent)); }
+  /* `a.pn`, not `.pn` — a persona whose home we were not told renders as a span, and a name that
+     lights up under the cursor while going nowhere is a promise the markup cannot keep. */
+  a.pn:hover b { color: var(--accent-text, var(--accent)); }
   a.pt { text-decoration: none; }
   a.pt:hover { text-decoration: underline; }
   .pbd { font-size: var(--fs-sm); line-height: 1.5; margin-block-start: 4px; }
@@ -352,11 +354,21 @@ const vars = [
       const mo = Math.floor(d / 30); if (mo < 12) return agoRtf.format(-mo, "month");
       return agoRtf.format(-Math.floor(d / 365), "year");
     };
-    // where a persona lives, so another persona's name in this feed can link to its profile. The two
-    // apexes are their own domains; every app persona is a subdomain of app.zone. The API may send the
-    // canonical personaUrl, in which case it wins.
-    const homeOf = (h: string): string =>
-      h === "justai" ? "https://justai.pro" : h === "app.zone" ? "https://app.zone" : `https://${h}.app.zone`;
+    // 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) {
@@ -370,10 +382,11 @@ const vars = [
             ? `<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 || homeOf(c.authorHandle)}/#profile`;
+        const purl = own ? "#profile" : c.personaUrl ? `${c.personaUrl}/#profile` : null;
         const at = own ? PERSONA : c.authorHandle;
         const meta = `${at ? `@${esc(at)} ` : ""}· ${timeAgo(c.createdAt)}`;
-        return `<div class="trow${last ? " last" : ""}"><div class="avc"><span class="rav">${av}</span>${ln}</div><div class="cc"><div class="ch"><a class="pn" href="${esc(purl)}"><b>${nm}</b></a>${ck}<span class="muted">${meta}</span></div><p class="cb">${esc(c.body)}</p></div></div>`;
+        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

package/src/ground.css

@@ -60,6 +60,18 @@
      scheme-aware: Apple lightens red on dark backgrounds (#FF453A) and deepens it on light
      (#FF3B30), and a single value would read wrong on one of them. */
   --danger: #ff453a;
+
+  /* THE CARD — a storefront tile's own surface, and the reason it is here rather than in the apex
+     that used to own it. The Catalogue moved into this package the day pin.games became real, and
+     it arrived consuming four tokens that had stayed behind in app.zone's stylesheet. Nothing broke
+     on app.zone, which still grounds them; the harness caught it anyway, and the founder put the
+     stake in the ground in one line: *why would pin.games have shadowless cards — whatever I see on
+     app.zone, that is it.* These are app.zone's own values, read rather than redesigned, so the
+     second storefront is the first one. */
+  --card-bg: rgba(28, 28, 34, 0.55);
+  --card-blur: blur(30px) saturate(1.6);
+  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
+  --card-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 28px -14px rgba(0, 0, 0, 0.55);
 }
 
 @media (prefers-color-scheme: light) {
@@ -71,6 +83,13 @@
     --surface: rgba(255, 255, 255, 0.7);
     --surface-2: rgba(0, 0, 0, 0.05);
     --danger: #ff3b30;
+
+    /* Light is not the dark card with a different fill: the blur goes away entirely. A frosted
+       panel over a pale page reads as a smudge, so app.zone drops it and pays the shadow instead. */
+    --card-bg: #fff;
+    --card-blur: none;
+    --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px -4px rgba(16, 24, 40, 0.1);
+    --card-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.06), 0 12px 26px -8px rgba(16, 24, 40, 0.15);
   }
 }