@justai/cuts 0.108.0 → 0.110.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.108.0",
+  "version": "0.110.0",
   "description": "A persona's named parts \u2014 the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
@@ -40,7 +40,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@justai/core": "^0.20.0",
+    "@justai/core": "^0.21.0",
     "@justai/ui": "^0",
     "@justai/atrium": "^0.1.9"
   }

package/src/BackToZone.astro

@@ -49,29 +49,33 @@ interface Props {
 const { apex = "app.zone" } = Astro.props;
 const href = `https://${apex}`;
 
-// queries: the home mark is missing arms · three of four arms gone · a4 arm · azmark broken ·
-//          the toolbar mark measures 12px · BackToZone ternary
+// queries: the home mark is missing arms · the mark is the wrong size · 36px · scoped styles do
+//          not apply · set:html · data-astro-cid
 //
-// ── THE TWO MARKS ARE HTML, NOT JSX BRANCHES, AND THAT IS A SCAR ────────────────────────────
+// ── THE MARKS ARE ELEMENTS, NOT STRINGS, AND BOTH DETOURS ARE WORTH KEEPING ────────────────
 //
-// This was `{apex === "pin.games" ? (<svg…/>) : (<svg…/>)}` for four versions, and it silently
-// dropped THREE OF THE FOUR PATHS in app.zone's mark. The surviving one came out with its classes
-// reordered — `a4 arm` where the source says `arm a1` — which is the tell: the compiler was not
-// carrying the multi-child branch through intact.
+// For one version these were HTML strings handed over with `set:html`, to work around app.zone's
+// mark losing three of its four paths. That was the wrong fix for a defect with a different cause:
+// the paths had been deleted from the SOURCE by a careless regex during an unrelated edit, and no
+// amount of changing how they were rendered was ever going to bring them back.
 //
-// Nothing errored. The build was green, the mark still drew SOMETHING, and the only instrument that
-// caught it was the shell's "every icon puts 20px of ink on screen" spec, which measured 12.1px on
-// the canary. Every app.zone persona that upgraded past 0.103.0 was serving a quarter of its home
-// mark.
+// Worse, the workaround broke something real. `set:html` injects markup that Astro never sees, so it
+// carries no `data-astro-cid-*` — and every scoped rule in this file stopped matching it, including
+// the one that sizes the mark. The row's 20px mark rendered at its natural size: 36.6px beside four
+// 20px glyphs, caught by the shell's ink spec exactly as the missing arms had been.
 //
-// Strings and `set:html` are what the kernel already uses for `toolbarMark`, so this is the file
-// agreeing with the rest of the family rather than a workaround.
-const PG_MARK = `<svg class="pgmark" viewBox="287 266 482 491" aria-hidden="true">
+// Elements again. The ternary was never the problem.
+---
+
+<a class="home" href={href} data-home aria-label={apex} title={apex}>
+  {apex === "pin.games" ? (
+<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>`;
-const AZ_MARK = `<svg class="azmark" viewBox="-8.5 0 928 928" aria-hidden="true">
+  </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"/>
@@ -83,11 +87,8 @@ const AZ_MARK = `<svg class="azmark" viewBox="-8.5 0 928 928" aria-hidden="true"
       <linearGradient id="azHome3" x1="425.634" y1="1029.67" x2="904.671" y2="550.635" gradientUnits="userSpaceOnUse"><stop stop-color="#F8C24A"/><stop offset="1" stop-color="#EFA229"/></linearGradient>
       <linearGradient id="azHome4" x1="450.555" y1="993.674" x2="6.32921" y2="550.635" gradientUnits="userSpaceOnUse"><stop stop-color="#5285DC"/><stop offset="1" stop-color="#2E62C6"/></linearGradient>
     </defs>
-  </svg>`;
----
-
-<a class="home" href={href} data-home aria-label={apex} title={apex}>
-  <Fragment set:html={apex === "pin.games" ? PG_MARK : AZ_MARK} />
+  </svg>
+  )}
 </a>
 
 <style>

package/src/Base.astro

@@ -33,7 +33,7 @@ import { dir as dirOf } from "@justai/ui/locale";
 import "./ground.css";
 // The load-bearing behaviour is framework-free and lives in @justai/core, so `feed` (Next) injects the
 // SAME strings instead of hand-copying them. This binding just decides where they go in an Astro head.
-import { AUTH_CAPTURE_JS, CONSENT_JS, JS_CLASS_JS, REVEAL_CSS, analyticsJs, consentCopy } from "@justai/core";
+import { AUTH_CAPTURE_JS, CONSENT_JS, JS_CLASS_JS, REVEAL_CSS, XRAY_JS, analyticsJs, consentCopy } from "@justai/core";
 // The consent ask IS a confirmation — a moment of trust — so it rides the fleet's ONE dialog
 // rather than keeping a private dialect. One anatomy for "are you sure?" and "may I count you?".
 import ConfirmSheet from "./ConfirmSheet.astro";
@@ -98,6 +98,18 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
          silently — no error, the visitor simply lands back signed out. */}
     <script is:inline set:html={AUTH_CAPTURE_JS} />
     <script is:inline set:html={JS_CLASS_JS} />
+    {/* queries: design grid · x-ray · ?xray · safe area · debug overlay · see the layout ·
+        is my content inside the safe area · layout debugging
+        THE X-RAY, AVAILABLE ON EVERY PERSONA AND OFF ON ALL OF THEM. Open any page with `?xray` and
+        the shell's design grid appears over it: the kernel's frame, the two safe areas, the centre
+        crosshairs, and every number the layout depends on with a verdict on each.
+        Here rather than in each persona because it is the SHELL's geometry it measures — the column,
+        the gutter, the sticky bar's landing — and a debug instrument that has to be installed per
+        repo is one nobody has when they need it.
+        It is glasses, not a renovation: nothing is added to the page's own elements, the overlay is
+        fixed and reads `#kernel`'s rect, and `pointer-events` is none throughout. And it costs
+        nothing when off — the script returns on its second line unless the flag is there. */}
+    <script is:inline set:html={XRAY_JS} />
     {/* Reveal only after a page marks itself ready — gated behind .js so the page is always visible
          if JS is off, and no scroll flash before we position at the Kernel. This style is a TRAP as
          much as a feature, and the warning must stay beside it: ANY page using this layout without a

package/src/XRay.astro

@@ -0,0 +1,39 @@
+---
+// ── THE X-RAY — the shell's own design grid, on demand ─────────────────────────────────────────
+//
+// queries: design grid · safe area · title safe · action safe · edge of frame · debug overlay ·
+//          xray · ?xray · how do I see the grid · is my content inside the safe area · layout
+//          debugging · why is the column off centre · does the kernel overlap the toolbar ·
+//          horizontal bleed · developing a persona
+//
+// ── WHAT IT IS FOR ─────────────────────────────────────────────────────────────────────────────
+//
+// Open any persona with `?xray` and its skeleton appears: the kernel's own frame, the two safe
+// areas, the centre crosshairs, an 8px rhythm, and every number the layout depends on with a
+// verdict on each. It draws OVER the real page — you look through the persona's own controls and
+// see whether they sit inside the safe areas or cross them.
+//
+// It began as a canary-only feature, which was the smaller idea. The founder's: this is a debug
+// instrument, so it belongs to the framework and to every persona that mounts the shell. Whoever is
+// building a persona now has the same view the canaries have, on their own work, at any width, at
+// any moment — without adding a line to their repo.
+//
+// ── WHAT IT COSTS WHEN IT IS OFF: NOTHING ──────────────────────────────────────────────────────
+//
+// No markup, no stylesheet, no listeners. This component renders ONE small inline script that reads
+// the URL and returns immediately unless the flag is there. Everything else — the CSS, the DOM, the
+// resize listener — is built inside that branch. A debug feature that is only free when a
+// developer remembers to remove it is a debug feature that ships.
+//
+// ── WHY A URL PARAMETER ────────────────────────────────────────────────────────────────────────
+//
+// It survives a share, a bug report and a device that is not the one you are sitting at: a
+// screenshot of `?xray` IS the measurement, and the person who took it did not have to install
+// anything. A keyboard shortcut would be invisible to everybody who was not told about it.
+//
+// `xray` is spelled once, here, and read from `location.search` so `?xray`, `?xray=1` and
+// `&xray` all work — a flag somebody has to spell exactly right is one they will spell wrong.
+import { XRAY_JS } from "@justai/core";
+---
+
+<script is:inline set:html={XRAY_JS} />