@justai/cuts 0.118.0 → 0.119.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.118.0",
+  "version": "0.119.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.16.0",
+    "@justai/ui": "^0.17.0",
     "@justai/atrium": "^0.1.9"
   }
 }

package/src/Base.astro

@@ -88,12 +88,31 @@ interface Props {
 
 const {
   lang, t, site, locales, defaultLocale, favicon,
-  themeDark = "#000000",
-  themeLight = "#f2f2f7",
+  themeDark,
+  themeLight,
   gaId = "G-13L3BP6XCW",
   kind = "app",
 } = Astro.props;
 
+// queries: theme-color · a grey band under the game on iPhone · Safari's bottom bar colour ·
+//          the browser chrome does not match the game · game persona theme colour
+//
+// ── THE BROWSER'S OWN BAR IS PAINTED BY THIS PAGE, AND A GAME PERSONA MUST SAY SO ─────────────
+//
+// iOS Safari colours its toolbars from `theme-color`. On a phone in light mode that default is
+// #f2f2f7 — so a game persona, whose kernel is a dark room filling the whole screen, ended in a pale
+// grey shelf where the browser's bar is. The founder photographed it four times and we spent an hour
+// on the layout, because it looks exactly like the page leaking: his own device eventually proved
+// the container was exact (toolbar 78 + kernel 632.3 = innerHeight 710) and the band was Safari,
+// wearing the colour we handed it.
+//
+// So a GAME persona's chrome is the game's ground, in both schemes: the room has no seam at the
+// bottom of the screen because there is nothing there that is not the room. A persona that wants
+// otherwise passes its own — this is a default, not a law.
+const GAME_GROUND = "#080b12";
+const dark = themeDark ?? (kind === "game" ? GAME_GROUND : "#000000");
+const light = themeLight ?? (kind === "game" ? GAME_GROUND : "#f2f2f7");
+
 const d = dirOf(lang);
 const consent = consentCopy(lang);
 const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
@@ -183,8 +202,8 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
     <meta property="og:site_name" content={new URL(site).host} />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:image" content={new URL("/og.jpg", Astro.site)} />
-    <meta name="theme-color" content={themeDark} media="(prefers-color-scheme: dark)" />
-    <meta name="theme-color" content={themeLight} media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content={dark} media="(prefers-color-scheme: dark)" />
+    <meta name="theme-color" content={light} media="(prefers-color-scheme: light)" />
     <link rel="canonical" href={`${site}${localePath(lang)}`} />
     {locales.map((l) => (
       <link rel="alternate" hreflang={l} href={`${site}${localePath(l)}`} />

package/src/Preroll.astro

@@ -209,7 +209,9 @@ const safeId = "game-" + (id.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/
       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%),
       radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 24px 24px,
-      #080b12;
+      /* The room's floor and its walls are one colour: @justai/ui declares --game-ground and paints
+         the seam below the kernel with it, and a literal here would be a second black. */
+      var(--game-ground, #080b12);
     color: #f5f7fa;
   }
   .pr-door[hidden] { display: none; }