@justai/cuts 0.100.0 → 0.103.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justai/cuts",
-  "version": "0.100.0",
-  "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
+  "version": "0.103.0",
+  "description": "A persona's named parts \u2014 the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",

package/src/BackToZone.astro

@@ -1,5 +1,21 @@
 ---
-// Home affordance → app.zone (the platform / App Store home). Standard on every app:
+// queries: back to the zone · the home icon goes to the wrong apex · a game persona links to
+//          app.zone · toolbar home icon · pin.games home affordance · BackToZone apex prop
+//
+// THE HOME AFFORDANCE NAMES A DESTINATION, so the destination cannot be assumed. This component was
+// written when there was one storefront and it hardcoded three things about it: the href, the label,
+// and the geometry of the mark. On pin.games all three were wrong at once — a game persona's toolbar
+// offering to take a visitor to the app store — and nothing could see it but a screenshot.
+//
+// `apex` defaults to app.zone, so every existing caller is unchanged and no persona has to be bumped
+// to keep the behaviour it already has. A pin.games citizen passes apex="pin.games".
+//
+// THE TWO MARKS ARE SIBLINGS, DRAWN THE SAME WAY. app.zone is four separated corner brackets around a
+// centre — a zone is the space the corners enclose. pin.games is three separated strokes making a
+// play triangle. The zone has four corners; the play has three edges. Same radii, same palette, same
+// idea of a figure assembled from pieces, which is what keeps them reading as one family at 20px.
+//
+// Home affordance → the apex (the platform / App Store home). Standard on every app:
 // always visible at the top-left of the toolbar. Also tidies the ?ref / ?lang hints
 // from the URL so shared links stay clean.
 //
@@ -26,9 +42,22 @@
 // lighting was never visible at this size, and in one flat ink there is nothing to shade. The
 // geometry here is a second copy of the one in that file, which is authored by hand and generated by
 // nothing — a redraw has to be carried across to this component as well.
+interface Props {
+  /** Which storefront "home" means here. Defaults to app.zone — the fleet as it stood. */
+  apex?: "app.zone" | "pin.games";
+}
+const { apex = "app.zone" } = Astro.props;
+const href = `https://${apex}`;
 ---
 
-<a class="home" href="https://app.zone" data-home aria-label="app.zone" title="app.zone">
+<a class="home" href={href} data-home aria-label={apex} title={apex}>
+  {apex === "pin.games" ? (
+  <svg class="pgmark" viewBox="128 128 768 768" aria-hidden="true" stroke-width="86" stroke-linecap="round">
+    <path class="arm a1" d="M330 355 L330 669"/>
+    <path class="arm a2" d="M379.3 324.3 L710.7 487.7"/>
+    <path class="arm a3" d="M379.3 699.7 L710.7 536.3"/>
+  </svg>
+  ) : (
   <svg class="azmark" viewBox="-8.5 0 928 928" aria-hidden="true">
     <path class="arm a1" d="M360.365 0C372.599 0 382.517 9.91778 382.517 22.152V97.7555C382.517 109.99 372.599 119.907 360.365 119.907H203.398C157.082 119.907 119.537 157.453 119.537 203.769V353.64C119.537 370.244 106.077 383.704 89.4732 383.704H22.152C9.91778 383.704 0 373.786 0 361.552V175.633C0 78.6337 78.6338 0 175.634 0H360.365Z"/>
     <path class="arm a2" d="M550.635 2.37305C538.401 2.37305 528.483 12.2908 528.483 24.525V100.129C528.483 112.363 538.401 122.28 550.635 122.28H707.602C753.918 122.28 791.463 159.826 791.463 206.142V356.013C791.463 372.617 804.923 386.077 821.527 386.077H888.848C901.082 386.077 911 376.159 911 363.925V178.006C911 81.0068 832.366 2.37305 735.366 2.37305H550.635Z"/>
@@ -42,6 +71,7 @@
       <linearGradient id="azHome4" x1="450.555" y1="993.674" x2="6.32921" y2="550.635" gradientUnits="userSpaceOnUse"><stop stop-color="#5285DC"/><stop offset="1" stop-color="#2E62C6"/></linearGradient>
     </defs>
   </svg>
+  )}
 </a>
 
 <style>
@@ -62,6 +92,14 @@
   .azmark .arm,
   .azmark .ctr { fill: currentColor; }
 
+  /* The play mark is STROKED where the zone mark is filled, so `currentColor` has to be told twice —
+     a stroke that inherits `fill` is an invisible mark, and an invisible mark in a toolbar reads as a
+     missing icon rather than a broken rule. */
+  .pgmark .arm { fill: none; stroke: currentColor; }
+  .home:hover .pgmark .a1, .home:focus-visible .pgmark .a1 { stroke: #3D6FD9; }
+  .home:hover .pgmark .a2, .home:focus-visible .pgmark .a2 { stroke: #E8503A; }
+  .home:hover .pgmark .a3, .home:focus-visible .pgmark .a3 { stroke: #F5A623; }
+
   .home:hover .azmark .a1, .home:focus-visible .azmark .a1 { fill: url(#azHome1); }
   .home:hover .azmark .a2, .home:focus-visible .azmark .a2 { fill: url(#azHome2); }
   .home:hover .azmark .a3, .home:focus-visible .azmark .a3 { fill: url(#azHome3); }

package/src/Catalogue.astro

@@ -64,6 +64,15 @@ interface Props {
     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;
   };
 }
@@ -193,7 +202,11 @@ const isNew = (added: string): boolean => { const t0 = Date.parse(added || "");
       <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>
-      <p class="empty" id="empty" hidden>{strings.empty}</p>
+      {/* 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
@@ -335,6 +348,11 @@ const isNew = (added: string): boolean => { const t0 = Date.parse(added || "");
       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;
   }
 

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/Toolbar.astro

@@ -61,6 +61,8 @@ interface Props {
   // destination, and justai.pro is above it (sending the parent "home" to a child platform is
   // the wrong direction). Every other persona keeps it.
   home?: boolean;
+  /** Which storefront the home affordance points at. Defaults to app.zone — see BackToZone. */
+  apex?: "app.zone" | "pin.games";
 
   // Posts is required only where there IS a stream (doctrine 02 — an empty cut shipped to look
   // complete is the buffet). A child persona has none, so `parent` turns this off by default.
@@ -157,7 +159,7 @@ const {
 } = Astro.props;
 // A child's row answers UP to its parent, not out to the zone, and has no stream of its own — so
 // both default off the moment `parent` is given, rather than each consumer remembering to say so.
-const { home = !parent, posts = !parent } = Astro.props;
+const { home = !parent, posts = !parent, apex = "app.zone" } = Astro.props;
 import AuthMount from "./AuthMount.astro";
 ---
 
@@ -167,7 +169,7 @@ import AuthMount from "./AuthMount.astro";
 <header class="toolbar" data-kernel-title={kernelTitle} data-posts-title={postsTitle}>
   <div class="tb-row">
     <div class="tb-left">
-      {home && <BackToZone />}
+      {home && <BackToZone apex={apex} />}
       <nav class="tb-nav-group" aria-label={sectionsLabel}>
         {/* POSITION ONE OF A CHILD'S ROW: the persona this one is mounted inside. `/icon.svg` is the
             parent's face here, because a child runs in the parent's origin — the same path, read from