@justai/cuts 0.96.0 → 0.97.0

package/package.json

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

package/src/ChildPersona.astro

@@ -223,7 +223,7 @@ const chrome = face === "page";
    * child's own `.pp .x` rule ties with this one and wins on order, so a child that needs to differ
    * still can, without !important and without knowing anything about this file. */
 
-  .pp { min-height: 100dvh; }
+  .pp { min-height: 100vh; min-height: 100dvh; }   /* the old spelling first — see @justai/ui */
   .pp a { color: inherit; text-decoration: none; }
 
   /* the column — the fleet's one presentation at every width */
@@ -236,10 +236,18 @@ const chrome = face === "page";
     display: flex; flex-direction: column;
     padding-inline: max(var(--gutter, 16px), env(safe-area-inset-left)) max(var(--gutter, 16px), env(safe-area-inset-right));
   }
-  @media (min-width: 768px) {
+  /* 640 is the fleet's one threshold and the fleet's one column width — @justai/ui declares
+     `--column`, and a media query cannot read a custom property, so the NUMBER has to be written
+     again here. Written again is not decided again: if this ever disagrees with base.css, this is
+     the copy that is wrong. */
+  @media (min-width: 640px) {
     .pp .app {
       --gutter: 28px;
-      max-width: 480px; margin-inline: auto; padding-inline: var(--gutter, 28px);
+      max-width: 640px;
+      max-width: var(--column, 640px);
+      margin-left: auto; margin-right: auto; margin-inline: auto;
+      padding-left: 28px; padding-right: 28px; padding-inline: var(--gutter, 28px);
+      border-left: 1px solid var(--border); border-right: 1px solid var(--border);
       border-inline: 1px solid var(--border); background: var(--surface);
       backdrop-filter: blur(40px) saturate(1.4); -webkit-backdrop-filter: blur(40px) saturate(1.4);
     }

package/src/Profile.astro

@@ -108,7 +108,7 @@ const vars = [
     background: var(--cover, linear-gradient(135deg, var(--accent), transparent));
     position: relative;
   }
-  @media (min-width: 768px) { .cover { margin-inline: -28px; } }
+  @media (min-width: 640px) { .cover { margin-inline: -28px; } }
   .avatar {
     width: 76px; height: 76px; border-radius: var(--radius-lg); margin-block-start: -40px;
     display: grid; place-items: center; padding: var(--avatar-pad, 0);

package/src/Sheet.astro

@@ -323,7 +323,12 @@ const doneIsOurs = doneDefault || done === true;
        @justai/ui and the page is sized from the same token. On a phone this is the whole screen; on a
        desk it is the persona's own width, centred. It said 480 until 2026-08-04, in its own copy of
        the number — so when the page became 768 the sheet stayed a phone's width on a tablet. */
-    width: min(100%, var(--sheet-width, var(--column, 768px)));
+    /* THE FALLBACK IS NOT DECORATION. `--column` arrives with @justai/ui, and a page that uses this
+       cut without it — the harness's own sheet fixture is one — never sees the token at all. So the
+       literal here is the fleet's real width, not a historical one: it was 768 for an afternoon and
+       the sheet quietly rendered at 768 on a 640 fleet, which is how that was found. */
+    width: min(100%, var(--sheet-width, var(--column, 640px)));
+    max-height: min(92vh, 100vh - 24px);     /* dvh is Chromium 108+; dropped whole without this */
     max-height: min(92dvh, 100dvh - 24px);
     /* The material the fleet already agreed reads as legible glass (ConfirmSheet, 93%). */
     background: color-mix(in srgb, var(--bg) 93%, transparent);

package/src/Toolbar.astro

@@ -323,7 +323,7 @@ import AuthMount from "./AuthMount.astro";
   /* `.stuck` is still set by the script below and still means "content is under the bar" — it simply
      has nothing to paint now that the shelf is opaque and always shadowed. Kept because the class is
      part of this cut's contract and a consumer may hang its own behaviour on it. */
-  @media (min-width: 768px) { .toolbar { margin-inline: -28px; padding-inline: 28px; } }
+  @media (min-width: 640px) { .toolbar { margin-inline: -28px; padding-inline: 28px; } }
   /* icons row + the scroll-reactive title strip below it */
   .tb-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
   .tb-title { display: flex; align-items: center; height: 0; overflow: hidden; opacity: 0; transition: height 0.35s var(--ease-out), opacity 0.25s var(--ease-out); }