@justai/cuts 0.133.0 → 0.138.0

package/src/Catalogue.astro

@@ -383,326 +383,102 @@ 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
-     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);
+  /* Scoped by Astro's hash AND placed in the cascade: a persona overriding this never has to
+     out-specify it. See @justai/ui/tokens.css for the order, and for what deliberately stays out. */
+  @layer justai.components {
+    /* 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; }
   }
-  .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

@@ -46,75 +46,79 @@ const icon = `${app.url}/icon.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); }
+  /* Scoped by Astro's hash AND placed in the cascade: a persona overriding this never has to
+     out-specify it. See @justai/ui/tokens.css for the order, and for what deliberately stays out. */
+  @layer justai.components {
+    .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);
-  }
+    /* 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); }
+    .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); }
+    .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>