npm - @justai/cuts - Versions diffs - 0.18.0 → 0.20.0 - Mend

@justai/cuts 0.18.0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/package.json CHANGED Viewed

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

package/src/Base.astro CHANGED Viewed

@@ -5,8 +5,9 @@
  * Measured before it was written: across the nine app.zone tool personas this file was 154 lines,
  * of which 132 were IDENTICAL. The 22 that differed were all identity — the host, the theme colour,
  * the favicon, the analytics property — plus two real ones, both preserved here as contract rather
- * than flattened: --on-accent (cleanmylink and howlong have light accents where white text fails
- * contrast) and the DEV service-worker kill, which came from the one persona that had it.
+ * than flattened: the bright-accent contrast hook (now --confirm-accent on the ConfirmSheet, for the
+ * personas whose mint/amber fails as text on the frosted card in light mode) and the DEV
+ * service-worker kill, which came from the one persona that had it.
  *
  * NO head slot, and the docstring claimed one for a while before anyone checked. time self-hosts
  * Geist through `import "@fontsource-variable/geist"` in its OWN layout frontmatter — a build-time
@@ -29,6 +30,9 @@ import { dir as dirOf } from "@justai/ui/locale";
 // 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, JS_CLASS_JS, REVEAL_CSS } 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";
 interface Props {
   lang: string;
@@ -231,81 +235,70 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
   </head>
   <body>
     <slot />
-    {/* Consent banner — shown only to European-timezone visitors with no stored choice. The
-         Consent Mode region default already denies analytics for the EEA/UK until "Allow". Gated on
-         gaId with the analytics block above: a persona that runs no analytics has nothing to consent
-         to, so it renders no banner.
+    {/* Consent — the ConfirmSheet, asked as a MODAL. Gated on gaId with the analytics block above:
+         a persona that runs no analytics has nothing to consent to, so it renders no sheet.
-         The <style> below sits INSIDE this {gaId && (...)} expression, so Astro does NOT scope it — a
-         style that is a direct static child of a component gets a data-astro-cid hash, but one nested
-         in a JSX expression is emitted verbatim, GLOBAL. So every selector here is fleet-wide and MUST
-         carry its own namespace. It once used a two-letter `.cc` for the banner container; the feed
-         loader emits `<div class="cc">` for its content column, so the global `.cc { display: none }`
-         hid the feed's text on EVERY persona. The whole family is `consent-*` now: unmistakably this
-         widget's, never anyone else's. A generic global class is a landmine that the shell hides from
-         the persona until a feed goes white — see [[the-shell-guarantees-you-cannot-see]]. */}
+         Why it BLOCKS (founder's law, 2026-07-24): a banner at the ankle of the page treats the
+         question as ignorable — and most visitors oblige, leaving the ask hanging on every page
+         forever. Blocking says the opposite: this choice is respected enough to be asked properly,
+         ONCE. Apple's own consent (the ATT prompt) is exactly this — a blocking sheet, two equally
+         dignified choices. Three conditions keep it justai: it only auto-asks where consent is
+         legally asked (Europe — everyone else just has the door), it arrives on the SECOND beat over
+         a persona already visibly doing its job behind the scrim (ask-after-proof, never a wall
+         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 && (
-    <div id="consent" class="consent" role="dialog" aria-label={t.chromePrivacy} data-choice-label={t.consentChoice}>
-      <div class="consent-card">
-        <p class="consent-text">{t.consentText}</p>
-        <div class="consent-row">
-          <button type="button" class="consent-btn" data-consent="denied">{t.consentDecline}</button>
-          <button type="button" class="consent-btn consent-ok" data-consent="granted">{t.consentAllow}</button>
-        </div>
-      </div>
-    </div>
-    <style>
-      .consent { display: none; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 300; justify-content: center; padding: 0 12px; pointer-events: none; }
-      .consent.show { display: flex; }
-      .consent-card { pointer-events: auto; width: 100%; max-width: 460px; margin-block-end: max(12px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 93%, transparent); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 14px 40px -20px rgba(0, 0, 0, 0.2); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; animation: consent-up 0.45s var(--ease-spring) both; }
-      .consent-text { font-size: var(--fs-xs); color: var(--text); line-height: 1.5; }
-      .consent-row { display: flex; gap: 8px; justify-content: flex-end; }
-      .consent-btn { font: inherit; font-size: var(--fs-xs); font-weight: 600; padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; transition: transform 0.2s var(--ease-spring); }
-      .consent-btn:active { transform: scale(0.94); }
-      /* The consent button is the one place the fleet genuinely disagreed, and the disagreement is
-         about CONTRAST rather than taste. Seven personas have dark accents and take white text on
-         --accent-press. cleanmylink and howlong have bright ones — mint and amber — where white
-         fails, so they fill with --accent and set --on-accent to a dark tone that passes.
-         Two hooks with the majority as the default, so the seven say nothing and the two say
-         exactly what they already verified. This is the styling contract working as designed:
-         colour is the persona's, and a real difference gets a declared hook rather than a fork. */
-      .consent-ok { background: var(--consent-ok-bg, var(--accent-press)); border-color: var(--consent-ok-bg, var(--accent-press)); color: var(--on-accent, #fff); }
-      @keyframes consent-up { from { transform: translateY(24px); opacity: 0; } }
-      @media (prefers-reduced-motion: reduce) { .consent-card { animation: none; } }
-    </style>
+    <ConfirmSheet id="consent" ask body={t.consentText}
+                  actionLabel={t.consentAllow} cancelLabel={t.consentDecline} cancelValue="denied"
+                  data-choice-label={t.consentChoice} />
     <script is:inline>
       (function () {
         try {
           // same non-production guard as the analytics block: no measurement → nothing to consent to
           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) return;
-          var show = function () { el.classList.add("show"); };
-          el.addEventListener("click", function (e) {
-            var v = e.target.getAttribute("data-consent"); if (!v) return;
-            gtag("consent", "update", { analytics_storage: v });
-            try { localStorage.setItem("consent", v); } catch (_) {}
-            el.classList.remove("show");
+          var el = document.getElementById("consent"); if (!el || !el.showModal) return;
+          // 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;
+            // "confirm" = the ❤️. "denied" = a CHOSEN "Stay invisible" (the sheet's cancelValue).
+            // 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
           // ([data-consent-open]); this script labels it, reveals it, and wires it to reopen the
-          // banner for ANY visitor in ANY region, stored choice or not. A non-EEA visitor gets a real
+          // sheet for ANY visitor in ANY region, stored choice or not. A non-EEA visitor gets a real
           // opt-out they were never offered before; an EEA visitor can reverse either answer. The
-          // auto-show below keeps its narrow gates — the DOOR has none.
+          // auto-ask below keeps its narrow gates — the DOOR has none.
           var doors = document.querySelectorAll("[data-consent-open]");
           for (var i = 0; i < doors.length; i++) {
             var a = doors[i];
             if (!a.textContent) a.textContent = el.getAttribute("data-choice-label") || "privacy choice";
             a.hidden = false;
             var w = a.closest("[data-consent-door]"); if (w) w.hidden = false;
-            a.addEventListener("click", function (ev) { ev.preventDefault(); show(); });
+            a.addEventListener("click", function (ev) { ev.preventDefault(); open(); });
           }
-          // auto-show: 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;
-          show();
+          // the first second belongs to the kernel; the question arrives on the second beat
+          setTimeout(open, 700);
         } catch (_) {}
       })();
     </script>

package/src/ConfirmSheet.astro CHANGED Viewed

@@ -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.
@@ -21,31 +33,48 @@
 //                 actionLabel={t.erase} cancelLabel={t.cancel} destructive />
 //   open:    document.getElementById("eraseConfirm").showModal()
 //   outcome: dialog.addEventListener("close", () => dialog.returnValue === "confirm" ? ... : ...)
-// Both buttons live in a <form method="dialog">, so closing is native: Cancel returns "", the
-// action returns "confirm", Escape returns "". No custom event vocabulary to learn or misspell.
+// Both buttons live in a <form method="dialog">, so closing is native: Cancel returns cancelValue
+// (default ""), the action returns "confirm", Escape returns "". No custom event vocabulary to
+// learn or misspell. NOTE for repeat-open consumers: returnValue survives a close — reset it to ""
+// before each showModal(), or a stale "confirm" will masquerade as this open's answer.
 interface Props {
   /** The dialog element's id — the consumer opens it via getElementById(id).showModal(). */
   id: string;
-  title: string;
+  /** Optional. A title-less sheet is a single spoken line (the consent ask is one): the body then
+   *  wears the primary text colour and labels the dialog itself. */
+  title?: string;
   body: string;
   actionLabel: string;
   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 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 } = Astro.props;
+const { id, title, body, actionLabel, cancelLabel, destructive = false, ask = false, cancelValue = "", ...rest } = Astro.props;
 ---
-<dialog class="confirm" id={id} aria-labelledby={`${id}-t`} aria-describedby={`${id}-b`}>
+<dialog class="confirm" id={id} aria-labelledby={title ? `${id}-t` : `${id}-b`} aria-describedby={`${id}-b`} {...rest}>
   <form method="dialog" class="confirm-form">
     <div class="confirm-group">
       <div class="confirm-msg">
-        <strong id={`${id}-t`}>{title}</strong>
+        {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="" formnovalidate autofocus>{cancelLabel}</button>
+    {!ask && <button class="confirm-act confirm-cancel" id={`${id}-cancel`} value={cancelValue} formnovalidate autofocus>{cancelLabel}</button>}
   </form>
 </dialog>
@@ -77,14 +106,30 @@ const { id, title, body, actionLabel, cancelLabel, destructive = false } = Astro
   .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); }
   .confirm-act {
     width: 100%; padding: 15px; border: 0; border-block-start: 1px solid var(--border);
-    background: none; font: 600 var(--fs-md) var(--font, inherit); color: var(--accent); cursor: pointer;
+    /* --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: #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;