@justai/cuts 0.19.0 → 0.21.0

package/package.json

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

package/src/Base.astro

@@ -248,7 +248,7 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
          before the work), and it never asks twice (a slip-away counts as the quiet no; the door in
          the footer is the change-of-mind path). */}
     {gaId && (
-    <ConfirmSheet id="consent" body={t.consentText}
+    <ConfirmSheet id="consent" ask body={t.consentText}
                   actionLabel={t.consentAllow} cancelLabel={t.consentDecline} cancelValue="denied"
                   data-choice-label={t.consentChoice} />
     <script is:inline>
@@ -258,21 +258,24 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
           var h = location.hostname;
           if (h === "localhost" || h === "127.0.0.1" || h === "::1" || h === "[::1]" || h.indexOf("dev-") === 0) return;
           var el = document.getElementById("consent"); if (!el || !el.showModal) return;
-          // Whether the CURRENT open is the first-visit auto-ask (vs a change-your-mind reopen) —
-          // it decides what a slip-away means in the close handler below.
-          var autoAsk = false;
           // returnValue survives a close, so reset before every open or a stale answer replays.
           var open = function () { if (!el.open) { el.returnValue = ""; el.showModal(); } };
           el.addEventListener("close", function () {
-            var rv = el.returnValue, first = autoAsk; autoAsk = false;
+            var rv = el.returnValue;
             // "confirm" = the ❤️. "denied" = a CHOSEN "Stay invisible" (the sheet's cancelValue).
-            // "" is a slip-away (Escape / backdrop tap): on the first ask it counts as the quiet
-            // no — asking again on every visit would be the nag we promised never to be — but on a
-            // door reopen it is "never mind", and an accident must not overwrite a stored choice.
-            var v = rv === "confirm" ? "granted" : rv === "denied" ? "denied" : first ? "denied" : null;
-            if (!v) return;
-            gtag("consent", "update", { analytics_storage: v });
-            try { localStorage.setItem("consent", v); } catch (_) {}
+            // Anything else (Escape, a backdrop tap) is NOT an answer, and ONLY A CHOICE MAY BE
+            // REMEMBERED AS A CHOICE (founder's law, 2026-07-24 — an earlier draft recorded the
+            // slip-away as a "quiet no", i.e. an answer the visitor never gave). A slip-away
+            // stores nothing: analytics stays at the regional default and the ask RETURNS on the
+            // next visit; the session flag below just keeps THIS visit quiet — one dodge buys one
+            // visit of peace, not an answer.
+            var v = rv === "confirm" ? "granted" : rv === "denied" ? "denied" : null;
+            if (v) {
+              gtag("consent", "update", { analytics_storage: v });
+              try { localStorage.setItem("consent", v); } catch (_) {}
+            } else {
+              try { sessionStorage.setItem("consent-later", "1"); } catch (_) {}
+            }
           });
           // THE CHANGE-YOUR-MIND DOOR — and it is universal, not a consent-region courtesy. Trust is
           // the choice staying reachable: the Posts cut's footer carries a hidden anchor
@@ -288,12 +291,14 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
             var w = a.closest("[data-consent-door]"); if (w) w.hidden = false;
             a.addEventListener("click", function (ev) { ev.preventDefault(); open(); });
           }
-          // auto-ask: only the first visit, only where consent is legally asked, only on a content page
+          // auto-ask: no stored CHOICE, not already dodged THIS visit, only where consent is
+          // legally asked, only on a content page
           if (localStorage.getItem("consent")) return;
+          try { if (sessionStorage.getItem("consent-later")) return; } catch (_) {}
           if (!document.getElementById("kernel")) return; // no kernel = not a content page (e.g. 404) — don't ask for consent on a dead end
           if ((Intl.DateTimeFormat().resolvedOptions().timeZone || "").indexOf("Europe/") !== 0) return;
           // the first second belongs to the kernel; the question arrives on the second beat
-          setTimeout(function () { if (!el.open) { autoAsk = true; open(); } }, 700);
+          setTimeout(open, 700);
         } catch (_) {}
       })();
     </script>

package/src/ConfirmSheet.astro

@@ -6,10 +6,22 @@
 // actions with one dialect while another improvises a different one is how a fleet stops feeling
 // like one hand made it. Anything that needs "are you sure?" uses THIS.
 //
-// The anatomy is Apple's, faithfully: a frosted grouped card (message + the full-width action,
-// separated by a hairline) and a PHYSICALLY DETACHED Cancel in its own card — bolder than the
-// action, because the safe choice wears the most confident face. A destructive action is iOS
-// system red. The sheet springs up from the bottom (reduced-motion honored).
+// The anatomy is Apple's, faithfully — and Apple has TWO genres, so this sheet has two:
+//
+//   CONFIRM (default) — the destructive action sheet: message + the action in the grouped card,
+//   and a PHYSICALLY DETACHED Cancel in its own card, bolder than the action, because when
+//   something can end, the safe choice wears the most confident face. iOS system red for
+//   destruction. This is /me's "Erase everything?".
+//
+//   ASK (`ask` prop) — the alert/ATT genre, for INVITATIONS: both choices live INSIDE the grouped
+//   card, stacked; the action wears the preferred bold face (Apple's preferredAction) and takes
+//   the focus; the safe choice sits beneath it in calm regular weight — equal size, equal tap,
+//   one hairline apart, but the invitation is the emphasized path. Porting the confirm genre to a
+//   friendly ask was tried and rejected by the founder on sight (2026-07-24): a detached, boldest,
+//   focus-ringed "Stay invisible" ENCOURAGED declining — the destructive anatomy exists to protect,
+//   and there is nothing to protect from in a warm question.
+//
+// The sheet springs up from the bottom (reduced-motion honored).
 //
 // WHY native <dialog> + showModal(), and not a hand-rolled scrim: the /me original had the visible
 // half of Apple right and the INVISIBLE half missing — no focus trap, no Escape, no focus restore.
@@ -36,15 +48,20 @@ interface Props {
   cancelLabel: string;
   /** Paint the action iOS system red — for actions that delete or end something. */
   destructive?: boolean;
+  /** The ASK genre: an invitation, not a guard. Both choices join the grouped card, the action is
+   *  the preferred (bold, focused) path, the safe choice sits quietly beneath. Use for questions
+   *  you'd be glad to hear "yes" to (consent); never for actions that end something. */
+  ask?: boolean;
   /** What returnValue reports when the safe button is chosen. Default "" — indistinguishable from
    *  Escape/backdrop, which is fine when both mean "do nothing". Pass a distinct value when a
-   *  CHOSEN no must be tellable apart from a slip-away (consent stores the first, ignores the
-   *  second on a reopen). */
+   *  CHOSEN no must be tellable apart from a slip-away — consent does: only a choice may be
+   *  remembered as a choice, so the chosen no is stored while a slip-away stores nothing and the
+   *  ask returns next visit. */
   cancelValue?: string;
   /** Anything else (data-* attributes, aria overrides) lands on the <dialog> itself. */
   [key: string]: unknown;
 }
-const { id, title, body, actionLabel, cancelLabel, destructive = false, cancelValue = "", ...rest } = Astro.props;
+const { id, title, body, actionLabel, cancelLabel, destructive = false, ask = false, cancelValue = "", ...rest } = Astro.props;
 ---
 
 <dialog class="confirm" id={id} aria-labelledby={title ? `${id}-t` : `${id}-b`} aria-describedby={`${id}-b`} {...rest}>
@@ -54,9 +71,10 @@ const { id, title, body, actionLabel, cancelLabel, destructive = false, cancelVa
         {title && <strong id={`${id}-t`}>{title}</strong>}
         <span id={`${id}-b`}>{body}</span>
       </div>
-      <button class:list={["confirm-act", { destructive }]} id={`${id}-act`} value="confirm">{actionLabel}</button>
+      <button class:list={["confirm-act", { destructive, preferred: ask }]} id={`${id}-act`} value="confirm" autofocus={ask || undefined}>{actionLabel}</button>
+      {ask && <button class="confirm-act quiet" id={`${id}-cancel`} value={cancelValue} formnovalidate>{cancelLabel}</button>}
     </div>
-    <button class="confirm-act confirm-cancel" id={`${id}-cancel`} value={cancelValue} formnovalidate autofocus>{cancelLabel}</button>
+    {!ask && <button class="confirm-act confirm-cancel" id={`${id}-cancel`} value={cancelValue} formnovalidate autofocus>{cancelLabel}</button>}
   </form>
 </dialog>
 
@@ -82,15 +100,19 @@ const { id, title, body, actionLabel, cancelLabel, destructive = false, cancelVa
   .confirm-form { display: flex; flex-direction: column; gap: 8px; }
   .confirm-group {
     border-radius: 18px; overflow: hidden; border: 1px solid var(--border);
-    background: color-mix(in srgb, var(--bg) 80%, transparent);
+    /* 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, so it
-     speaks in the primary colour at reading size */
-  .confirm-msg span:only-child { color: var(--text); font-size: var(--fs-sm); }
+  /* 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
@@ -101,12 +123,21 @@ const { id, title, body, actionLabel, cancelLabel, destructive = false, cancelVa
     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: #ff453a; }
+  /* 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) 88%, transparent);
+    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);
   }