npm - @justai/cuts - Versions diffs - 0.17.0 → 0.19.0 - Mend

@justai/cuts 0.17.0 → 0.19.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 (4) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "A persona's named parts — the page shell that holds them, and the cuts themselves.",
   "license": "UNLICENSED",
   "repository": {
@@ -18,7 +18,8 @@
     "./BackToZone.astro": "./src/BackToZone.astro",
     "./Posts.astro": "./src/Posts.astro",
     "./Toolbar.astro": "./src/Toolbar.astro",
-    "./Profile.astro": "./src/Profile.astro"
+    "./Profile.astro": "./src/Profile.astro",
+    "./ConfirmSheet.astro": "./src/ConfirmSheet.astro"
   },
   "peerDependencies": {
     "@justai/ui": ">=0.2.0",

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,65 +235,65 @@ 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}>
-      <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" 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;
-          if (localStorage.getItem("consent")) return;
-          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;
-          var el = document.getElementById("consent"); if (!el) return;
-          el.classList.add("show");
-          el.addEventListener("click", function (e) {
-            var v = e.target.getAttribute("data-consent"); if (!v) 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;
+            // "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 (_) {}
-            el.classList.remove("show");
           });
+          // 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
+          // 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-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(); open(); });
+          }
+          // auto-ask: only the first visit, only where consent is legally asked, only on a content page
+          if (localStorage.getItem("consent")) return;
+          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);
         } catch (_) {}
       })();
     </script>

package/src/ConfirmSheet.astro ADDED Viewed

@@ -0,0 +1,126 @@
+---
+// ░░ CONFIRM SHEET — the fleet's ONE confirmation dialog: an iOS-style action sheet. ░░
+//
+// Born in the /me vault ("Forget everything?") and promoted to the framework because a confirmation
+// is a moment of trust, and trust surfaces must not drift: one persona confirming destructive
+// 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).
+//
+// 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.
+// The platform ships all of that, plus the top layer (no z-index wars, ever) and ::backdrop, for
+// free. The component's own script only adds the one thing <dialog> lacks: click-on-backdrop closes.
+//
+// HOW A CONSUMER USES IT (the whole contract):
+//   <ConfirmSheet id="eraseConfirm" title={t.confirmTitle} body={t.confirmBody}
+//                 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 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;
+  /** 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;
+  /** 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). */
+  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;
+---
+<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">
+        {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>
+    </div>
+    <button class="confirm-act confirm-cancel" id={`${id}-cancel`} value={cancelValue} formnovalidate autofocus>{cancelLabel}</button>
+  </form>
+</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; }
+  .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);
+    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); }
+  .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); }
+  /* iOS system red — the one colour that means "this ends something" on every persona alike */
+  .confirm-act.destructive { color: #ff453a; }
+  /* 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);
+    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>
+<script>
+  // The one behavior <dialog> lacks natively: a tap on the backdrop cancels. A click whose target is
+  // the dialog element itself can only be the backdrop area (the form fills the visible sheet).
+  for (const d of document.querySelectorAll<HTMLDialogElement>("dialog.confirm")) {
+    d.addEventListener("click", (e) => { if (e.target === d) d.close(); });
+  }
+</script>

package/src/Posts.astro CHANGED Viewed

@@ -47,7 +47,13 @@ const vars = [
 >
   <!-- filled at runtime by the loader below (lazy, on Posts-cut intersection) — single source: the console -->
   <div id="feed"></div>
-  <footer class="z-foot"><a href="https://justai.pro">justai.pro</a> · {footer}</footer>
+  <footer class="z-foot">
+    <a href="https://justai.pro">justai.pro</a> · {footer}
+    {/* the change-your-mind door: hidden until the shell's consent script labels + reveals it
+        (Base owns the behavior and the localized label; this cut only owns the placement). On a
+        page with no analytics — and so no consent banner — it simply never appears. */}
+    <span class="z-choice" hidden data-consent-door> · <a href="#" data-consent-open></a></span>
+  </footer>
 </section>
 <style>