@justai/cuts 0.17.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justai/cuts",
-  "version": "0.17.0",
+  "version": "0.18.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

@@ -245,7 +245,7 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
          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]]. */}
     {gaId && (
-    <div id="consent" class="consent" role="dialog" aria-label={t.chromePrivacy}>
+    <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">
@@ -279,17 +279,33 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
           // 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");
+          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");
           });
+          // 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
+          // 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.
+          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(); });
+          }
+          // auto-show: 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;
+          show();
         } catch (_) {}
       })();
     </script>

package/src/ConfirmSheet.astro

@@ -0,0 +1,108 @@
+---
+// ░░ 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 "", the
+// action returns "confirm", Escape returns "". No custom event vocabulary to learn or misspell.
+interface Props {
+  /** The dialog element's id — the consumer opens it via getElementById(id).showModal(). */
+  id: string;
+  title: string;
+  body: string;
+  actionLabel: string;
+  cancelLabel: string;
+  /** Paint the action iOS system red — for actions that delete or end something. */
+  destructive?: boolean;
+}
+const { id, title, body, actionLabel, cancelLabel, destructive = false } = Astro.props;
+---
+
+<dialog class="confirm" id={id} aria-labelledby={`${id}-t`} aria-describedby={`${id}-b`}>
+  <form method="dialog" class="confirm-form">
+    <div class="confirm-group">
+      <div class="confirm-msg">
+        <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="" 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; }
+  .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;
+    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

@@ -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>