@justai/cuts 0.5.0 → 0.5.2

package/package.json

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

package/src/Base.astro

@@ -185,7 +185,12 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
     {gaId && (
     <script is:inline define:vars={{ gaId }}>
       window.dataLayer = window.dataLayer || [];
-      function gtag() { dataLayer.push(arguments); }
+      // gtag is put on WINDOW, not declared as `function gtag`, and this is load-bearing: `define:vars`
+      // wraps this inline script in an IIFE to scope the injected `gaId`, so a `function gtag` here
+      // would be trapped in that IIFE — and the consent banner's own inline script (in the body) calls
+      // gtag, giving "gtag is not defined" the moment a European visitor clicks Allow/Decline (the
+      // choice is never applied, the banner never closes). Global on window, both scripts see it.
+      window.gtag = window.gtag || function () { window.dataLayer.push(arguments); };
       gtag("js", new Date());
       gtag("consent", "default", { ad_storage: "denied", ad_user_data: "denied", ad_personalization: "denied", analytics_storage: "granted" });
       // EEA + UK + CH: deny analytics until the visitor consents (the banner below grants it).
@@ -216,25 +221,34 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
     {/* 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. */}
+         to, so it renders no banner.
+
+         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]]. */}
     {gaId && (
-    <div id="cc" class="cc" role="dialog" aria-label={t.chromePrivacy}>
-      <div class="cc-card">
-        <p class="cc-text">{t.consentText}</p>
-        <div class="cc-row">
-          <button type="button" class="cc-btn" data-consent="denied">{t.consentDecline}</button>
-          <button type="button" class="cc-btn cc-ok" data-consent="granted">{t.consentAllow}</button>
+    <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>
-      .cc { display: none; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 300; justify-content: center; padding: 0 12px; pointer-events: none; }
-      .cc.show { display: flex; }
-      .cc-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: cc-up 0.45s var(--ease-spring) both; }
-      .cc-text { font-size: var(--fs-xs); color: var(--text); line-height: 1.5; }
-      .cc-row { display: flex; gap: 8px; justify-content: flex-end; }
-      .cc-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); }
-      .cc-btn:active { transform: scale(0.94); }
+      .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
@@ -242,9 +256,9 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
          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. */
-      .cc-ok { background: var(--consent-ok-bg, var(--accent-press)); border-color: var(--consent-ok-bg, var(--accent-press)); color: var(--on-accent, #fff); }
-      @keyframes cc-up { from { transform: translateY(24px); opacity: 0; } }
-      @media (prefers-reduced-motion: reduce) { .cc-card { animation: none; } }
+      .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>
     <script is:inline>
       (function () {
@@ -252,7 +266,7 @@ const localePath = (l: string) => (l === defaultLocale ? "/" : `/${l}/`);
           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("cc"); if (!el) 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;