@justai/cuts 0.102.0 → 0.103.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.102.0",
+  "version": "0.103.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,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/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