@justai/cuts 0.129.7 → 0.130.1

package/package.json

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

package/src/BackToZone.astro

@@ -129,7 +129,7 @@ const href = `https://${apex}`;
      Dark is the un-queried default because the fleet's tokens are dark-first. */
   .home:hover .azmark .ctr, .home:focus-visible .azmark .ctr { fill: #F5F1E8; }
   @media (prefers-color-scheme: light) {
-    .home:hover .azmark .ctr, .home:focus-visible .azmark .ctr { fill: #2B2724; }
+    :global(html:not([data-theme="dark"])) .home:hover .azmark .ctr, :global(html:not([data-theme="dark"])) .home:focus-visible .azmark .ctr { fill: #2B2724; }
   }
 </style>
 

package/src/Base.astro

@@ -54,8 +54,21 @@ interface Props {
    * rather than narrowed to a shape only this package would recognise.
    */
   t: Record<string, unknown>;
-  /** The persona's own origin, e.g. https://tabata.app.zone — canonical, hreflang and OG all read it. */
-  site: string;
+  /**
+   * DEPRECATED — declare the origin in astro.config.mjs (`site:`) and stop passing this.
+   *
+   * The origin now comes from `Astro.site`, which every persona already has to declare for the
+   * build. Passing it here as well is the second declaration site this docstring warns about
+   * twenty lines above, and it went wrong exactly the way the locale list did: compress-image was
+   * copied from cleanmylink and shipped with cleanmylink's origin in this prop while its
+   * astro.config was correct. For a day, canonical, og:site_name and all fourteen hreflang hrefs
+   * named another product — while og:url and og:image, three lines apart in the same head, read
+   * `Astro.site` and were right. One head, two truths, and nothing said so.
+   *
+   * Still accepted so no persona has to change on the same day this ships; it is now checked
+   * rather than trusted, and a build where the two disagree fails.
+   */
+  site?: string;
   /** From the consuming repo's src/i18n — never from this package. */
   locales: readonly string[];
   defaultLocale: string;
@@ -87,13 +100,37 @@ interface Props {
 }
 
 const {
-  lang, t, site, locales, defaultLocale, favicon,
+  lang, t, site: siteProp, locales, defaultLocale, favicon,
   themeDark,
   themeLight,
   gaId = "G-13L3BP6XCW",
   kind = "app",
 } = Astro.props;
 
+// ── ONE HOME FOR THE ORIGIN ───────────────────────────────────────────────────────────────────
+// queries: canonical yanlış · başka personanın alan adı · site prop · hreflang yanlış domain
+//
+// A wrong origin renders perfectly. That is the whole difficulty: nothing is red, the page is
+// valid, and the only symptom is search engines being told this page belongs to someone else.
+// The failure has to be moved to a place where it CANNOT be quiet, and a static build is the one
+// place available — so a disagreement is an error, not a warning. A warning in a build log is the
+// same silence with more steps.
+const site = Astro.site?.origin ?? siteProp;
+if (!site) {
+  throw new Error(
+    "[@justai/cuts] No origin. Declare it once, in astro.config.mjs:\n" +
+    '  export default personaConfig({ site: "https://<persona>.app.zone", ... })',
+  );
+}
+if (siteProp && Astro.site && new URL(siteProp).origin !== Astro.site.origin) {
+  throw new Error(
+    "[@justai/cuts] Two origins, and they disagree:\n" +
+    `  astro.config.mjs  ${Astro.site.origin}\n` +
+    `  <Base site=…>     ${new URL(siteProp).origin}\n` +
+    "astro.config wins — it is what the sitemap, the build and og:url already use. Drop the prop.",
+  );
+}
+
 // 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
 //

package/src/Posts.astro

@@ -172,7 +172,7 @@ const vars = [
   /* The light default is white because that is what --card-bg is there; the dark default is a faint white
      overlay because on dark --card-bg equals --surface, which is the column, so copying it would vanish. */
   @media (prefers-color-scheme: light) {
-    .post:hover { background: color-mix(in srgb, var(--card-bg, #fff) 55%, transparent); }
+    :global(html:not([data-theme="dark"])) .post:hover { background: color-mix(in srgb, var(--card-bg, #fff) 55%, transparent); }
   }
   .post + .post { border-block-start: 1px solid var(--border); }
 
@@ -225,7 +225,7 @@ const vars = [
   .pa .mk, .rav .mk { width: 100%; height: 100%; object-fit: cover; display: block; }
   /* a dark tile must invert in light mode, not stay dark — personas whose avatar ground is a gradient
      pass avatarBgLight; the rest fall back to their single background. */
-  @media (prefers-color-scheme: light) { .pa, .rav { background: var(--feed-av-bg-light, var(--feed-av-bg, #fff)); } }
+  @media (prefers-color-scheme: light) { :global(html:not([data-theme="dark"])) .pa, :global(html:not([data-theme="dark"])) .rav { background: var(--feed-av-bg-light, var(--feed-av-bg, #fff)); } }
 
   /* A bare mark stands on the feed's own ground, so the tile and its hairline have to go — and they have to
      go from the CONTAINER, which is why this reads upward from the image with :has(). Scoping it to the image
@@ -256,6 +256,9 @@ const vars = [
     .pa .mk.av-light, .rav .mk.av-light { display: none; }
     .pa .mk.av-dark, .rav .mk.av-dark { display: block; }
   }
+  /* The dark fork's data-theme twin: a light-system page forced dark must swap the marks too. */
+  :global(html[data-theme="dark"]) .pa .mk.av-light, :global(html[data-theme="dark"]) .rav .mk.av-light { display: none; }
+  :global(html[data-theme="dark"]) .pa .mk.av-dark, :global(html[data-theme="dark"]) .rav .mk.av-dark { display: block; }
 
   .ph { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); flex-wrap: wrap; }
   .ph b { font-weight: 600; }

package/src/Preroll.astro

@@ -364,34 +364,22 @@ const safeId = "game-" + (id.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/
    * container, and layout containment makes it the containing block for FIXED descendants too — a
    * fixed overlay written inside it would be clipped to the frame it is meant to surround. */
   html[data-stage="playing"] { overflow: hidden; }
-  /* The kernel that holds a preroll rides above the room PERMANENTLY, not only while playing: the
-   * raise used to follow data-stage, so pausing dropped the kernel in one frame while the dim took
-   * half a second to fade - and every pause put a brief wave of darkness across the game itself.
-   * Static costs nothing (the room is transparent outside playing) and cannot mistime. */
-  .cut.kernel:has(#pr) { position: relative; z-index: 35; }
-  /* ── THE ROOM IS DARK DOT PAPER, NOT A BLACK FILM ───────────────────────────────────────────
-   * queries: theater dim flat colour · the dots disappear in the dark · blender dark theme ·
-   *          dot paper grid in theater mode
+  /* queries: theater mode · where did the dim layer go · dark theme while playing
    *
-   * The founder, looking at the first dim: *"dot paper grid'de dot kendini belli etmeyince bu
-   * sefer duz bir renk gibi algilaniyor"* — and pointing at the fix: 3dviewer's player, whose
-   * stage is Blender's own Theme Space grey, read out of a running Blender. A flat translucent
-   * black erased the ground's identity; a dark room should still be THE SAME PAPER with the
-   * lights down, the way Blender's viewport keeps its grid in the dark.
+   * ── THE THEATER IS THE PERSONA'S OWN DARK THEME, NOT A LAYER ────────────────────────────────
    *
-   * So the layer carries its own lattice — the door's 24px dot grid, light-on-dark — over a
-   * neutral Blender-family dark. The opacity is high on purpose: the dots belong to THIS layer,
-   * and a translucent lattice over a busy page is noise, while a nearly-opaque one is a surface.
-   * The chrome beneath (the toolbar steps under at z 20) stays legible as shapes in a dark room. */
-  .pr-room {
-    position: fixed; inset: 0; z-index: 30;
-    background:
-      radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
-      #262626;
-    opacity: 0; pointer-events: none;
-    transition: opacity 0.5s var(--ease-out, ease-out);
-  }
-  html[data-stage="playing"] .pr-room { opacity: 0.86; }
+   * Three custom dims were built and struck here in one day — a black film, a z-order dance, dark
+   * dot paper — before the founder pointed at what was already true: *"justai ecosisteminde zaten
+   * tum personalarin light/dark temalari vardi ve kusursuz calisiyorlardi. senin yapman gereken tek
+   * sey vardi: theme switch, simple."* Every persona already ships a complete dark theme - the
+   * ground, the dots, the toolbar, the cards, all of it designed and measured - and a second
+   * darkness laid over the first is two systems doing one job.
+   *
+   * So the stage sets data-theme="dark" on <html> while playing and removes it on pause, and the
+   * guard the fleet's light forks now carry (time's wall wrote the idiom first: data-theme wins
+   * over the media query) does everything the dim layer ever tried to. A dark-system visitor sees
+   * no change at all; a light-system visitor gets the persona's own night, and their auto theme
+   * back the moment they pause. */
 </style>
 
 <script>
@@ -502,16 +490,25 @@ const safeId = "game-" + (id.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/
       let declareProtocol: (v: number) => void = () => {};
       const declared: Promise<number> = new Promise((r) => { declareProtocol = r; });
       if (bus) {
-        // The room's lights, hung on <body> — see the global style block for why not in here.
-        const room = document.createElement("div");
-        room.className = "pr-room";
-        room.setAttribute("aria-hidden", "true");
-        document.body.appendChild(room);
+        // Whatever theme the page carried before the stage took it — restored on pause, so a manual
+        // data-theme set by anything else survives a round trip through a game.
+        let priorTheme: string | undefined;
 
         const setStage = (mode: string) => {
           const playing = mode === "playing";
-          if (playing) document.documentElement.dataset.stage = "playing";
-          else delete document.documentElement.dataset.stage;
+          if (playing) {
+            document.documentElement.dataset.stage = "playing";
+            // The theater: the persona's own dark theme, switched on. See the style block above.
+            if (document.documentElement.dataset.theme !== "dark") {
+              priorTheme = document.documentElement.dataset.theme;
+              document.documentElement.dataset.theme = "dark";
+            }
+          } else {
+            delete document.documentElement.dataset.stage;
+            if (priorTheme === undefined) delete document.documentElement.dataset.theme;
+            else document.documentElement.dataset.theme = priorTheme;
+            priorTheme = undefined;
+          }
           // The other cuts go INERT rather than display:none — the page must not reflow, and the
           // player's scroll position has to survive a pause. inert takes them out of tab order and
           // the accessibility tree both; a screen reader must not keep walking a page the player

package/src/Profile.astro

@@ -129,7 +129,7 @@ const vars = [
   .avatar :global(svg) { width: 100%; height: 100%; display: block; }
   .avatar :global(img) { width: 100%; height: 100%; display: block; object-fit: cover; }
   @media (prefers-color-scheme: light) {
-    .avatar { border-color: #fff; background: var(--avatar-bg-light, var(--avatar-bg, #fff)); }
+    :global(html:not([data-theme="dark"])) .avatar { border-color: #fff; background: var(--avatar-bg-light, var(--avatar-bg, #fff)); }
   }
   .pname { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; margin-block-start: 12px; }
   .handle { color: var(--text-dim); font-size: var(--fs-xs); margin-block-start: 2px; }

package/src/Toolbar.astro

@@ -344,7 +344,8 @@ import AuthMount from "./AuthMount.astro";
      FALLBACK differs by scheme, and a band carrying only the dark default is a black strip on a light
      page — which is exactly what the founder photographed a minute after the first attempt. */
   @media (prefers-color-scheme: light) {
-    .tb-slot::before { background: var(--toolbar-bg, #fbfcfe); }
+    /* Guarded like every light fork in the fleet: data-theme="dark" wins over the media query. */
+    :global(html:not([data-theme="dark"])) .tb-slot::before { background: var(--toolbar-bg, #fbfcfe); }
   }
   .toolbar {
     /* position, top and z-index live on .tb-slot above — this element is static inside it now. */
@@ -389,7 +390,7 @@ import AuthMount from "./AuthMount.astro";
     border-block-end: none;
   }
   @media (prefers-color-scheme: light) {
-    .toolbar {
+    :global(html:not([data-theme="dark"])) .toolbar {
       background: var(--toolbar-bg, #fbfcfe);
       box-shadow: var(--toolbar-shadow, 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 20px -8px rgba(16, 24, 40, 0.16));
     }
@@ -457,21 +458,15 @@ import AuthMount from "./AuthMount.astro";
    * Opacity and pointer-events here; the INERT that takes them out of the tab order is set in the
    * script, because CSS cannot. The transition matters more than it looks: chrome that snaps away
    * reads as breaking, chrome that withdraws reads as dimming the house lights. */
-  /* ── IN THE DARK, NOT DISABLED — how this row goes quiet while a game plays ─────────────────
-   * queries: toolbar looks disabled · faded but clickable · toolbar during a game · theater
+  /* ── HOW THIS ROW GOES QUIET WHILE A GAME PLAYS: IT DOES NOT ─────────────────────────────────
+   * queries: toolbar during a game · theater · toolbar looks disabled
    *
-   * Three versions of quieting, each struck by the founder. Fading the elements was the last one:
-   * *"neden disable mis gibi gozukuyor ama tiklanabiliyor? tiklanabiliyorsa disable gibi
-   * gozukmemeli."* Right - reduced opacity IS the visual language of disabled, and nothing
-   * clickable may speak it.
-   *
-   * The answer was in the theater metaphor the whole time: in a dark cinema the seats are not
-   * disabled, they are in the dark. So the elements keep their full strength and the ROW STEPS
-   * UNDER THE ROOM'S DIM - below the .pr-room layer the stage protocol hangs over the page - and
-   * darkens with everything else in one coherent light change. The dim takes no pointer events,
-   * so every control underneath works exactly as it looks like it should: like chrome in a dark
-   * room, waiting. */
-  :global(html[data-stage="playing"]) .tb-slot { z-index: 20; }
+   * Four versions in one day, each struck by the founder, and the last one is no CSS at all. A
+   * pause handle in the row; then inert; then faded ("disable gibi gozukmemeli - tiklanabiliyorsa");
+   * then stepped under a custom dim layer. The standing answer: the stage switches the page to the
+   * persona's own DARK THEME (data-theme on html, see Preroll), and this row simply wears it - the
+   * same bar every dark-system visitor already sees, fully alive, auto-pausing the game when
+   * touched. Nothing here needs to know a game exists. */
   /* icon-only section nav — current cut highlighted */
   .tb-nav {
     display: grid; place-items: center; width: 38px; height: 36px;

package/src/ground.css

@@ -83,8 +83,14 @@
   --card-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 28px -14px rgba(0, 0, 0, 0.55);
 }
 
+/* queries: force dark while playing · theme switch · data-theme dark · stage theme
+ * THE GUARD IS THE FLEET'S OWN IDIOM — time's wall wrote it first: *"data-theme wins over the media
+ * query in both directions."* A light-system visitor whose page carries data-theme="dark" gets the
+ * dark theme this file already ships; removing the attribute returns them to auto. The stage
+ * protocol is the first caster (a game playing = dark), and any future manual theme switch gets
+ * this seam for free. */
 @media (prefers-color-scheme: light) {
-  :where(:root) {
+  :where(:root:not([data-theme="dark"])) {
     --bg: #f6f7f9;
     --text: #0a0c10;
     --text-dim: #5b6472;