@justai/cuts 0.102.0 → 0.104.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.102.0",
+  "version": "0.104.0",
   "description": "A persona's named parts \u2014 the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {

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,13 +42,23 @@
 // 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="287 266 482 491" aria-hidden="true">
+    <rect class="arm a1" x="130" y="469" width="400" height="86" rx="43" transform="rotate(90 330 512)"/>
+    <rect class="arm a2" x="317.3" y="363" width="455.5" height="86" rx="43" transform="rotate(26.25 545 406)"/>
+    <rect class="arm a3" x="317.3" y="575" width="455.5" height="86" rx="43" transform="rotate(-26.25 545 618)"/>
+  </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"/>
-    <path class="arm a3" d="M550.635 928.009C538.401 928.009 528.483 918.092 528.483 905.857V830.254C528.483 818.02 538.401 808.102 550.635 808.102H707.602C753.918 808.102 791.463 770.556 791.463 724.241V574.369C791.463 557.765 804.923 544.305 821.527 544.305H888.848C901.082 544.305 911 554.223 911 566.457V752.376C911 849.376 832.366 928.009 735.366 928.009H550.635Z"/>
     <path class="arm a4" d="M360.365 928.009C372.599 928.009 382.517 918.092 382.517 905.857V830.254C382.517 818.02 372.599 808.102 360.365 808.102L203.398 808.102C157.082 808.102 119.537 770.556 119.537 724.241L119.537 574.369C119.537 557.765 106.077 544.305 89.4732 544.305H22.152C9.91778 544.305 0 554.223 0 566.457L0 752.376C0 849.376 78.6338 928.009 175.634 928.009L360.365 928.009Z"/>
     <rect class="ctr" x="348.103" y="367.09" width="203.323" height="203.323" rx="16.614"/>
     <defs>
@@ -42,6 +68,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 +89,17 @@
   .azmark .arm,
   .azmark .ctr { fill: currentColor; }
 
+  /* queries: the home icon is smaller than the other glyphs · 20px of ink · pgmark size
+     FILLED, AND THE viewBox IS THE INK'S OWN BOUNDS. This mark was three round-capped strokes, which
+     is the same shape — but getBBox reports a stroke's centreline only, and the fleet's "every icon
+     paints 20px of ink" spec measured it at 9.9px beside 20px glyphs. The spec was right: at that
+     size it really was half its neighbours. Rotated rounded rects draw exactly what the strokes did
+     and measure what they look like. */
+  .pgmark .arm { fill: currentColor; }
+  .home:hover .pgmark .a1, .home:focus-visible .pgmark .a1 { fill: #3D6FD9; }
+  .home:hover .pgmark .a2, .home:focus-visible .pgmark .a2 { fill: #E8503A; }
+  .home:hover .pgmark .a3, .home:focus-visible .pgmark .a3 { fill: #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/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