@justai/cuts 0.130.0 → 0.131.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justai/cuts",
-  "version": "0.130.0",
-  "description": "A persona's named parts \u2014 the page shell that holds them, and the cuts themselves.",
+  "version": "0.131.0",
+  "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@justai/core": "^0.34.0",
-    "@justai/ui": "^0.21.1",
+    "@justai/ui": "^0.22.0",
     "@justai/atrium": "^0.1.9"
   }
-}
+}

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/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

@@ -79,12 +79,41 @@
      second storefront is the first one. */
   --card-bg: rgba(28, 28, 34, 0.55);
   --card-blur: blur(30px) saturate(1.6);
-  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
   --card-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 28px -14px rgba(0, 0, 0, 0.55);
+
+  /* ── ELEVATION — mirrors @justai/ui tokens.css, and the tokens spec holds the two identical ──
+   *
+   * queries: box shadow token · which shadow · the panel looks detached · drop shadow standard ·
+   *          golge standardi · card shadow vs sheet shadow
+   *
+   * THE VALUES WERE ALREADY HERE, under one name and one meaning: `--card-shadow`, described as
+   * "a storefront tile's own surface". Measured across the live fleet on 2026-08-20 they turned out
+   * to be the shadow of EVERY resting surface — app.zone's catalogue cards, qr's type buttons,
+   * calculator's panel, all byte-identical — so the name was narrower than the fact, and a persona
+   * building its own kernel panel had nothing to reach for and invented one. The one that produced
+   * the ruling had invented a MODAL's: twice the opacity, 3.7× the blur, and in dark deeper than
+   * the fleet's actual modal.
+   *
+   * So the scale is named by ELEVATION — how far off the page a thing is — and the catalogue's own
+   * token now reads from it rather than restating it. `--card-shadow` stays because live personas
+   * consume it; it is an alias now, not a second definition.
+   *
+   * The law: **nothing that is not a sheet may exceed `--shadow-card`, and no shadow is coloured.**
+   * A tinted shadow is a glow, a glow is a light source, and this ground has one sun and no lamps. */
+  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.32);
+  --shadow-bar: 0 2px 12px -2px rgba(0, 0, 0, 0.55);
+  --shadow-sheet: 0 18px 40px -20px rgba(0, 0, 0, 0.45);
+  --card-shadow: var(--shadow-card);
 }
 
+/* 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;
@@ -97,8 +126,14 @@
        panel over a pale page reads as a smudge, so app.zone drops it and pays the shadow instead. */
     --card-bg: #fff;
     --card-blur: none;
-    --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px -4px rgba(16, 24, 40, 0.1);
     --card-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.06), 0 12px 26px -8px rgba(16, 24, 40, 0.15);
+
+    /* Light needs TWO layers where dark needs one: on a near-white ground a single ambient blur
+       reads as dirt, so the pair is a 1px contact line that seats the object plus a wide, faint
+       ambient. `--card-shadow` inherits its alias from the block above and needs no line here. */
+    --shadow-card: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 4px 12px -4px rgba(16, 24, 40, 0.1);
+    --shadow-bar: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 20px -8px rgba(16, 24, 40, 0.16);
+    --shadow-sheet: 0 18px 40px -20px rgba(0, 0, 0, 0.45);
   }
 }