@justai/cuts 0.116.0 → 0.118.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.116.0",
+  "version": "0.118.0",
   "description": "A persona's named parts \u2014 the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@justai/core": "^0.26.0",
-    "@justai/ui": "^0.15.0",
+    "@justai/ui": "^0.16.0",
     "@justai/atrium": "^0.1.9"
   }
 }

package/src/Preroll.astro

@@ -183,9 +183,28 @@ const safeId = "game-" + (id.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/
     position: absolute; inset: 0; z-index: 1;
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: 1fr auto auto auto;
+    /* ── THE ART TAKES THE TOP HALF; THE COPY BEGINS ON THE CENTRE LINE ────────────────────────
+     * queries: preroll composition · where does the copy start · the play button is too low ·
+     *          the button is under the browser bar · centre line · x-ray grid
+     *
+     * The founder, describing it through the x-ray's own grid — which is what that instrument was
+     * for: *"logo 1. satırın 2. cell'inde ortada olsa daha iyi olur… içerik de 2. satırın top'undan
+     * başlasa daha iyi olur."*
+     *
+     * `50%` on the first row is exact rather than approximate: the door's padding is equal top and
+     * bottom, so half of its content box IS the frame's centre — the same line the x-ray draws. The
+     * art centres in the half above it and the copy starts on it.
+     *
+     * AND IT IS WHY THE BUTTON IS SAFE ON A REAL PHONE. The last row takes the slack, so the button
+     * sits directly under the copy instead of at the bottom of the frame — which on a real device is
+     * where the browser puts its own bar. He sent a screenshot from one: the URL bar sitting over the
+     * play button, and a strip of the next section showing beneath it. A composition that ends at the
+     * frame's bottom edge is a composition whose call to action a phone can cover. */
+    grid-template-rows: 50% auto auto minmax(0, 1fr);
     grid-template-areas: "art" "copy" "play" "imprint";
     padding: clamp(18px, 7cqw, 64px);
+    /* And the strip the OS keeps for its home indicator, on top of the inset — never instead of it. */
+    padding-block-end: calc(clamp(18px, 7cqw, 64px) + env(safe-area-inset-bottom, 0px));
     background:
       radial-gradient(90cqw 52cqh at 8% -12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
       radial-gradient(76cqw 46cqh at 96% 4%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
@@ -198,9 +217,12 @@ const safeId = "game-" + (id.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/
   /* THE ART TAKES THE TOP AND SITS TO THE RIGHT, which is the card's own diagonal stood up: art one
      side, type the other. Everything centred is the safe composition and it is the one that reads as
      a placeholder — the card is left-aligned and that is this family's voice. */
+  /* CENTRED, not pushed to the edge. The first version put the mark hard right to echo the card's
+     diagonal — and the card is a landscape rectangle where that diagonal has room to be one. Stood up
+     in a tall frame it stops reading as a composition and starts reading as a thing that drifted. */
   .pr-art {
     grid-area: art; min-height: 0;
-    display: flex; align-items: center; justify-content: flex-end;
+    display: flex; align-items: center; justify-content: center;
   }
   .pr-art :global(svg), .pr-art :global(img) {
     display: block; width: auto; height: auto;