@justai/cuts 0.103.0 → 0.104.0

package/package.json

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

@@ -52,16 +52,13 @@ const href = `https://${apex}`;
 
 <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 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>
@@ -92,13 +89,16 @@ const href = `https://${apex}`;
   .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; }
+  /* 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); }