@justai/cuts 0.133.0 → 0.138.0

package/src/ChildPersona.astro

@@ -217,64 +217,68 @@ const chrome = face === "page";
 </div>
 
 <style>
-  /* THE SHELL, scoped under `.pp` — the 26 rules files, me and feed each carried verbatim.
-   *
-   * They are written here at the SAME depth the children wrote them, and that is deliberate: a
-   * 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. */
+  /* Scoped by Astro's hash AND placed in the cascade: a persona overriding this never has to
+     out-specify it. See @justai/ui/tokens.css for the order, and for what deliberately stays out. */
+  @layer justai.components {
+    /* THE SHELL, scoped under `.pp` — the 26 rules files, me and feed each carried verbatim.
+     *
+     * They are written here at the SAME depth the children wrote them, and that is deliberate: a
+     * 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: 100vh; min-height: 100dvh; }   /* the pair survives — see @justai/astro-config */
-  .pp a { color: inherit; text-decoration: none; }
+    .pp { min-height: 100vh; min-height: 100dvh; }   /* the pair survives — see @justai/astro-config */
+    .pp a { color: inherit; text-decoration: none; }
 
-  /* the column — the fleet's one presentation at every width */
-  .pp .app {
-    /* Set here AND read with a fallback, which is not belt-and-braces: a consumer that overrides
-       `.pp .app` — same selector, later stylesheet — drops the declaration and keeps the reads, and
-       an unresolved var() invalidates the whole `padding-inline`. The cut brings its own ground
-       (law 1) means the ground has to survive being partly overwritten. */
-    --gutter: 16px;
-    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));
-  }
-  /* 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) {
+    /* the column — the fleet's one presentation at every width */
     .pp .app {
-      --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);
+      /* Set here AND read with a fallback, which is not belt-and-braces: a consumer that overrides
+         `.pp .app` — same selector, later stylesheet — drops the declaration and keeps the reads, and
+         an unresolved var() invalidates the whole `padding-inline`. The cut brings its own ground
+         (law 1) means the ground has to survive being partly overwritten. */
+      --gutter: 16px;
+      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));
+    }
+    /* 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: 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);
+      }
     }
-  }
 
-  .pp .below { position: relative; }
-  /* the sticky row means a section reached by its id arrives UNDER it unless it says otherwise */
-  /* The landing offset is `--shell-top` and only that — measured by the shell, published on :root,
-     enforced by personaScroll. This line carried a literal 82px through THREE fleet-wide sweeps of
-     exactly that constant (base.css, Posts.astro, eight persona repos) and surfaced only when the
-     children's console started warning about it: a scoped rule inside a cut is where a stale number
-     hides longest, because nobody greps a component for a layout constant. */
-  .pp #profile, .pp #kernel { scroll-margin-top: var(--shell-top, 78px); }
+    .pp .below { position: relative; }
+    /* the sticky row means a section reached by its id arrives UNDER it unless it says otherwise */
+    /* The landing offset is `--shell-top` and only that — measured by the shell, published on :root,
+       enforced by personaScroll. This line carried a literal 82px through THREE fleet-wide sweeps of
+       exactly that constant (base.css, Posts.astro, eight persona repos) and surfaced only when the
+       children's console started warning about it: a scoped rule inside a cut is where a stale number
+       hides longest, because nobody greps a component for a layout constant. */
+    .pp #profile, .pp #kernel { scroll-margin-top: var(--shell-top, 78px); }
 
-  /* THE `sheet` FACE: no column, no ground, no chrome. The sheet around it IS the frame, and a
-     second frame inside one is a box in a box. Keyed on the face name rather than on a boolean, so a
-     third face styles itself by adding a selector instead of by renaming this one. */
-  .pp[data-face="sheet"] { min-height: 0; }
-  .pp[data-face="sheet"] .app { max-width: none; margin-inline: 0; border: 0; background: none;
-                                backdrop-filter: none; -webkit-backdrop-filter: none; }
+    /* THE `sheet` FACE: no column, no ground, no chrome. The sheet around it IS the frame, and a
+       second frame inside one is a box in a box. Keyed on the face name rather than on a boolean, so a
+       third face styles itself by adding a selector instead of by renaming this one. */
+    .pp[data-face="sheet"] { min-height: 0; }
+    .pp[data-face="sheet"] .app { max-width: none; margin-inline: 0; border: 0; background: none;
+                                  backdrop-filter: none; -webkit-backdrop-filter: none; }
 
-  /* a mark fills its box; the picture inside it covers */
-  .pp .mk { display: block; width: 100%; height: 100%; object-fit: cover; }
+    /* a mark fills its box; the picture inside it covers */
+    .pp .mk { display: block; width: 100%; height: 100%; object-fit: cover; }
 
-  /* Motion is never forced on somebody who asked it not to be — and the biggest effects, the ones a
-     surface is proudest of, are exactly what that setting exists to suppress. */
-  @media (prefers-reduced-motion: reduce) {
-    .pp *, .pp *::before, .pp *::after { animation: none !important; transition: none !important; }
+    /* Motion is never forced on somebody who asked it not to be — and the biggest effects, the ones a
+       surface is proudest of, are exactly what that setting exists to suppress. */
+    @media (prefers-reduced-motion: reduce) {
+      .pp *, .pp *::before, .pp *::after { animation: none !important; transition: none !important; }
+    }
   }
 </style>

package/src/ConfirmSheet.astro

@@ -87,72 +87,76 @@ const { id, title, body, actionLabel, cancelLabel, destructive = false, ask = fa
 </dialog>
 
 <style>
-  /* The dialog sits in the browser's top layer — above every z-index in every persona, by law. */
-  .confirm {
-    /* dock to the bottom like an iOS sheet (native <dialog> centers by default) */
-    margin: auto auto max(12px, env(safe-area-inset-bottom));
-    width: min(400px, calc(100vw - 24px));
-    padding: 0;
-    border: 0;
-    background: none;
-    overflow: visible;
-  }
-  .confirm::backdrop {
-    background: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
-  }
-  .confirm[open] .confirm-form { animation: confirm-up 0.4s var(--ease-spring) both; }
-  .confirm[open]::backdrop { animation: confirm-fade 0.2s var(--ease-out) both; }
+  /* Scoped by Astro's hash AND placed in the cascade: a persona overriding this never has to
+     out-specify it. See @justai/ui/tokens.css for the order, and for what deliberately stays out. */
+  @layer justai.components {
+    /* The dialog sits in the browser's top layer — above every z-index in every persona, by law. */
+    .confirm {
+      /* dock to the bottom like an iOS sheet (native <dialog> centers by default) */
+      margin: auto auto max(12px, env(safe-area-inset-bottom));
+      width: min(400px, calc(100vw - 24px));
+      padding: 0;
+      border: 0;
+      background: none;
+      overflow: visible;
+    }
+    .confirm::backdrop {
+      background: rgba(0, 0, 0, 0.4);
+      backdrop-filter: blur(4px);
+      -webkit-backdrop-filter: blur(4px);
+    }
+    .confirm[open] .confirm-form { animation: confirm-up 0.4s var(--ease-spring) both; }
+    .confirm[open]::backdrop { animation: confirm-fade 0.2s var(--ease-out) both; }
 
-  .confirm-form { display: flex; flex-direction: column; gap: 8px; }
-  .confirm-group {
-    border-radius: 18px; overflow: hidden; border: 1px solid var(--border);
-    /* Apple's THICK material, deliberately: at 80% the kernel behind ghosted through the card
-       (founder-caught on the QR grid). The frosted feel comes from the blur, not from letting
-       content bleed into the words — a sheet asking for a decision must be legible first. */
-    background: color-mix(in srgb, var(--bg) 93%, transparent);
-    backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
-  }
-  .confirm-msg { padding: 18px 18px 16px; text-align: center; display: flex; flex-direction: column; gap: 5px; }
-  .confirm-msg strong { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
-  .confirm-msg span { font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.45; }
-  /* a title-less sheet's body is not supporting text under a headline — it IS the voice AND the
-     title, so it speaks in the primary colour at the native body size (founder: the question
-     deserves reading size, not caption size) */
-  .confirm-msg span:only-child { color: var(--text); font-size: var(--fs-base); line-height: 1.5; }
-  .confirm-act {
-    width: 100%; padding: 15px; border: 0; border-block-start: 1px solid var(--border);
-    /* --confirm-accent: the declared hook for personas whose accent is too BRIGHT to read as text
-       on the frosted card in light mode (cleanmylink's mint, howlong's amber, whatismyip's mint —
-       the same three that once hooked the old filled consent button). They set a theme-aware
-       darker tone of their own hue; everyone else says nothing. */
-    background: none; font: 600 var(--fs-md) var(--font, inherit); color: var(--confirm-accent, var(--accent)); cursor: pointer;
-    transition: background 0.15s;
-  }
-  .confirm-act:active { background: color-mix(in srgb, var(--text) 9%, transparent); }
-  /* focus is a wash, not a ring: the fleet's 4px focus ring gets CLIPPED by the card's
-     overflow:hidden into two stray bars — inside a sheet, the focused button fills with a
-     whisper of its own colour instead (currentColor: accent, red, or text alike) */
-  .confirm-act:focus-visible { box-shadow: none; outline: none; background: color-mix(in srgb, currentColor 12%, transparent); }
-  /* iOS system red — the one colour that means "this ends something" on every persona alike */
-  .confirm-act.destructive { color: var(--danger); }
-  /* the ASK genre: the invitation is the preferred path (Apple's bold preferredAction)… */
-  .confirm-act.preferred { font-weight: 700; }
-  /* …and the safe choice answers in a calm, full-contrast regular voice — equal size, equal tap,
-     never dimmed (a decline you have to hunt for is not a free choice), just not the emphasis */
-  .confirm-act.quiet { color: var(--text); font-weight: 400; }
-  /* the safe choice wears the boldest face, in its own detached card */
-  .confirm-cancel {
-    border: 1px solid var(--border); border-radius: 18px;
-    background: color-mix(in srgb, var(--bg) 93%, transparent);
-    backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
-    font-weight: 700; color: var(--text);
-  }
-  @keyframes confirm-up { from { transform: translateY(20px); opacity: 0; } }
-  @keyframes confirm-fade { from { opacity: 0; } }
-  @media (prefers-reduced-motion: reduce) {
-    .confirm[open] .confirm-form, .confirm[open]::backdrop { animation: none; }
+    .confirm-form { display: flex; flex-direction: column; gap: 8px; }
+    .confirm-group {
+      border-radius: 18px; overflow: hidden; border: 1px solid var(--border);
+      /* Apple's THICK material, deliberately: at 80% the kernel behind ghosted through the card
+         (founder-caught on the QR grid). The frosted feel comes from the blur, not from letting
+         content bleed into the words — a sheet asking for a decision must be legible first. */
+      background: color-mix(in srgb, var(--bg) 93%, transparent);
+      backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
+    }
+    .confirm-msg { padding: 18px 18px 16px; text-align: center; display: flex; flex-direction: column; gap: 5px; }
+    .confirm-msg strong { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
+    .confirm-msg span { font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.45; }
+    /* a title-less sheet's body is not supporting text under a headline — it IS the voice AND the
+       title, so it speaks in the primary colour at the native body size (founder: the question
+       deserves reading size, not caption size) */
+    .confirm-msg span:only-child { color: var(--text); font-size: var(--fs-base); line-height: 1.5; }
+    .confirm-act {
+      width: 100%; padding: 15px; border: 0; border-block-start: 1px solid var(--border);
+      /* --confirm-accent: the declared hook for personas whose accent is too BRIGHT to read as text
+         on the frosted card in light mode (cleanmylink's mint, howlong's amber, whatismyip's mint —
+         the same three that once hooked the old filled consent button). They set a theme-aware
+         darker tone of their own hue; everyone else says nothing. */
+      background: none; font: 600 var(--fs-md) var(--font, inherit); color: var(--confirm-accent, var(--accent)); cursor: pointer;
+      transition: background 0.15s;
+    }
+    .confirm-act:active { background: color-mix(in srgb, var(--text) 9%, transparent); }
+    /* focus is a wash, not a ring: the fleet's 4px focus ring gets CLIPPED by the card's
+       overflow:hidden into two stray bars — inside a sheet, the focused button fills with a
+       whisper of its own colour instead (currentColor: accent, red, or text alike) */
+    .confirm-act:focus-visible { box-shadow: none; outline: none; background: color-mix(in srgb, currentColor 12%, transparent); }
+    /* iOS system red — the one colour that means "this ends something" on every persona alike */
+    .confirm-act.destructive { color: var(--danger); }
+    /* the ASK genre: the invitation is the preferred path (Apple's bold preferredAction)… */
+    .confirm-act.preferred { font-weight: 700; }
+    /* …and the safe choice answers in a calm, full-contrast regular voice — equal size, equal tap,
+       never dimmed (a decline you have to hunt for is not a free choice), just not the emphasis */
+    .confirm-act.quiet { color: var(--text); font-weight: 400; }
+    /* the safe choice wears the boldest face, in its own detached card */
+    .confirm-cancel {
+      border: 1px solid var(--border); border-radius: 18px;
+      background: color-mix(in srgb, var(--bg) 93%, transparent);
+      backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
+      font-weight: 700; color: var(--text);
+    }
+    @keyframes confirm-up { from { transform: translateY(20px); opacity: 0; } }
+    @keyframes confirm-fade { from { opacity: 0; } }
+    @media (prefers-reduced-motion: reduce) {
+      .confirm[open] .confirm-form, .confirm[open]::backdrop { animation: none; }
+    }
   }
 </style>