studio-engine 0.97.0 → 0.98.0.rc1

data/app/views/studio/_birthday_assets.html.erb

@@ -1,243 +1,9 @@
 <%#
-  birthdayModal factory — the Alpine data for the engine birthday DOB modal
-  (studio/modals/blocks/_birthday). Ships here, at PAGE level, on purpose: the
-  modal partial mounts inside a modal host's single-root template, and a script
-  cloned out of a template never runs. So a consumer renders THIS once in its
-  layout (like the shared alpine factories), and the modal partial anywhere below
-  just references window.birthdayModal. Mirrors how studio/_cropper_assets homes
-  the cropPhotoModal factory for the crop modal.
+  The birthday card's scope, birthdayModal(), is studio/birthday, published on
+  every page by studio/alpine_scopes. The card (studio/modals/blocks/_birthday)
+  mounts inside a modal host's template, so its factory has to be on the page
+  before the card is.
 
-  The factory holds ZERO legal policy — no age default, no state table. minAge is
-  whatever the app hands it (a required prop upstream); the client "too young"
-  hint is UX only, and the server recompute at submit_url stays authoritative.
-
-  opts: { minAge, state, url, store, demo, demoUnderage, gateId }.
-    minAge  app-supplied minimum age (no engine fallback — 0 means unsupplied).
-    state   passive jurisdiction label (server-detected upstream; never editable).
-    url     app endpoint the DOB POSTs to (the app owns the authoritative check).
-    store   Alpine modal store name backing close() (default "modals").
-    demo    style-guide preview: resolve locally, skip the network POST.
-    demoUnderage  demo only — take the REFUSED branch, so the style guide can
-            walk the handoff with no backend.
-    gateId  modal id opened on a refusal (default "age-gate"). Blank falls back
-            to the inline error line, for a host mid-adoption that has not
-            registered the second card yet.
-
-  THE REFUSAL IS A HANDOFF, NOT AN ERROR (2026-08-24). This factory used to
-  early-return on an under-age date, leaving the modal red with its own button
-  disabled — the one state with nothing to press. `_reject` now opens the
-  age-gate card instead. `_finish` is unchanged: the success path still flips
-  session.ageVerified and dispatches `age-verified`, which is the hook consuming
-  apps already listen on, so nothing downstream had to change.
-
-  AND THE HANDOFF RETURNS (2026-08-26). `_reject` sends dobYear/dobMonth/dobDay
-  across the store; the gate card's back() hands the same three parts back; and
-  `init` re-picks the three selects from them, so the correction the gate card
-  offers costs one scroll rather than all three fields. The date is restored,
-  never the VERDICT: the card comes back submittable and the app's endpoint
-  re-decides on the next submit exactly as it did on the first.
+  THIS PARTIAL RENDERS NOTHING. It stays so a layout that renders it by name
+  gets no missing-template error; the render can be deleted.
 %>
-<script>
-  (function () {
-    if (window.birthdayModal) return;
-    window.birthdayModal = function (opts) {
-      opts = opts || {};
-      var now = new Date();
-      return {
-        month: "", day: "", year: "",
-        submitting: false,
-        error: "",
-        // No engine age default: 18 is itself a policy value. The app supplies it.
-        minAge: parseInt(opts.minAge, 10) || 0,
-        stateCode: opts.state || "",
-        url: opts.url || "",
-        store: opts.store || "modals",
-        demo: !!opts.demo,
-        demoUnderage: !!opts.demoUnderage,
-        // Blank gateId => no second card registered yet; the refusal falls back
-        // to the error line so a host mid-adoption still SAYS something.
-        gateId: opts.gateId || "",
-        months: [
-          { n: 1, label: "January" }, { n: 2, label: "February" }, { n: 3, label: "March" },
-          { n: 4, label: "April" }, { n: 5, label: "May" }, { n: 6, label: "June" },
-          { n: 7, label: "July" }, { n: 8, label: "August" }, { n: 9, label: "September" },
-          { n: 10, label: "October" }, { n: 11, label: "November" }, { n: 12, label: "December" }
-        ],
-        // Year range: 13 years ago (youngest plausible) back 100 years. This is a
-        // sane input range, not an age bar — the app's minAge decides eligibility.
-        years: (function () {
-          var ys = [], top = now.getFullYear() - 13, bottom = now.getFullYear() - 100;
-          for (var y = top; y >= bottom; y--) ys.push(y);
-          return ys;
-        })(),
-        // Days available for the chosen month/year (handles 28/29/30/31).
-        get dayOptions() {
-          var m = parseInt(this.month, 10), y = parseInt(this.year, 10);
-          var max = 31;
-          if (m) max = new Date(y || 2000, m, 0).getDate();
-          var ds = [];
-          for (var d = 1; d <= max; d++) ds.push(d);
-          return ds;
-        },
-        get complete() {
-          return !!(this.month && this.day && this.year);
-        },
-        get computedAge() {
-          if (!this.complete) return null;
-          var dob = new Date(parseInt(this.year, 10), parseInt(this.month, 10) - 1, parseInt(this.day, 10));
-          var age = now.getFullYear() - dob.getFullYear();
-          var hadBirthday = (now.getMonth() > dob.getMonth()) ||
-            (now.getMonth() === dob.getMonth() && now.getDate() >= dob.getDate());
-          if (!hadBirthday) age -= 1;
-          return age;
-        },
-        // Clamp an out-of-range day when the month changes (e.g. Feb after 31).
-        onMonthChange() {
-          if (this.day && parseInt(this.day, 10) > this.dayOptions.length) this.day = "";
-          this.error = "";
-        },
-        // THE RETURN TRIP. _reject writes dobYear/dobMonth/dobDay onto the store
-        // on the way out to the age-gate card, and that card's back() hands the
-        // same three parts straight back — so a card mounted from a return trip
-        // finds the person's date on its own modal entry and re-picks the three
-        // selects. Without this the factory started at "" whatever it was handed,
-        // and a mistyped year cost all three fields (fixed 2026-08-26).
-        //
-        // Read off the STORE rather than taken as an opt: that is where this
-        // factory already meets the store (_reject writes to the same object
-        // through the same guard), the ERB locals in blocks/_birthday are
-        // server-side and cannot carry a client value anyway, and it means a
-        // consuming app that renders the card needs no change at all.
-        //
-        // STRINGS, because that is what the selects produce: the options render
-        // :value="m.n" — a number stringified by the DOM — and x-model writes
-        // that string back. Seeding a Number would leave the field holding a type
-        // the person's own pick never produces.
-        _returnedDob() {
-          var props;
-          try {
-            var entry = Alpine.store(this.store).current();
-            props = (entry && entry.props) || {};
-          } catch (e) {
-            return null;
-          }
-          var y = parseInt(props.dobYear, 10),
-              m = parseInt(props.dobMonth, 10),
-              d = parseInt(props.dobDay, 10);
-          if (!y || !m || !d) return null;
-          return { year: String(y), month: String(m), day: String(d) };
-        },
-        // Alpine calls init() on the data object at MOUNT, synchronously, inside
-        // the x-data directive and before it walks the three <select>s below
-        // (Alpine 3.16.1 as vendored: `a.init && T(t, a.init)`). So this is the
-        // fields' initial state rather than a later mutation of them, and x-model
-        // paints the selects from it. Measured in chromium: all three hold the
-        // restored values on the FIRST frame the card exists, six runs out of six
-        // — no deferral needed, and e2e/birthday_gate.spec.js is what watches it.
-        init() {
-          var dob = this._returnedDob();
-          if (!dob) return;
-          this.year = dob.year;
-          this.month = dob.month;
-          // Day LAST, and clamped: dayOptions is only the restored month's list
-          // once month and year are set, and an impossible pair from a hand-built
-          // props bag (Feb 30) must land empty rather than leave the select
-          // holding a value its own options do not contain — which would read as
-          // complete and submit a date nobody picked.
-          this.day = parseInt(dob.day, 10) <= this.dayOptions.length ? dob.day : "";
-        },
-        // Success path: flip a session flag if present, close via the app's store,
-        // and let the app resume its own flow (the entry gate listens for this).
-        _finish() {
-          try {
-            var sess = window.Alpine && Alpine.store && Alpine.store("session");
-            if (sess) sess.ageVerified = true;
-          } catch (e) {}
-          try { Alpine.store(this.store).close(); } catch (e) {}
-          window.dispatchEvent(new CustomEvent("age-verified"));
-        },
-        // Refusal path: hand off to the age-gate card, which owns the CTAs
-        // ("watch instead", "fix your birthday"). Deliberately NOT an error —
-        // the card that refuses is also the card that offers somewhere to go.
-        // swap(), not open(), so the back-link on that card returns HERE.
-        _reject(message) {
-          if (!this.gateId) {
-            // No gate registered (host mid-adoption): say it inline rather than
-            // closing silently, which would look like the date was accepted.
-            this.error = message || this._refusalLine();
-            return;
-          }
-          try {
-            Alpine.store(this.store).swap(this.gateId, {
-              minAge: this.minAge,
-              state: this.stateCode,
-              message: message || "",
-              // The DATE, so the gate card can say WHEN rather than only "no".
-              // Passed as parts rather than a Date: this crosses a store, and a
-              // Date through Alpine's reactive proxy is a class waiting to be
-              // stringified by something downstream.
-              dobYear: parseInt(this.year, 10) || null,
-              dobMonth: parseInt(this.month, 10) || null,
-              dobDay: parseInt(this.day, 10) || null
-            });
-          } catch (e) {
-            this.error = message || this._refusalLine();
-          }
-        },
-        _refusalLine() {
-          return "You must be " + this.minAge + "+" +
-            (this.stateCode ? " in " + this.stateCode : "") + ".";
-        },
-        get isUnderage() {
-          return this.computedAge !== null && !!this.minAge && this.computedAge < this.minAge;
-        },
-        submit() {
-          if (!this.complete || this.submitting) return;
-          this.error = "";
-          // NO client-side refusal. This used to early-return on an under-age
-          // date, which is what left the card red with a disabled button. The
-          // date goes to the server like any other; the server recompute is and
-          // always was the authoritative check, and its verdict routes here.
-          this.submitting = true;
-          var self = this;
-          if (this.demo) {
-            // Style-guide preview: no backend. demoUnderage picks which branch
-            // the local resolve takes, so the guide can walk BOTH outcomes.
-            setTimeout(function () {
-              self.submitting = false;
-              if (self.demoUnderage || self.isUnderage) self._reject();
-              else self._finish();
-            }, 450);
-            return;
-          }
-          var csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content || "";
-          fetch(this.url, {
-            method: "POST",
-            headers: { "Content-Type": "application/json", "X-CSRF-Token": csrf, "Accept": "application/json" },
-            body: JSON.stringify({ year: this.year, month: this.month, day: this.day })
-          })
-            .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, status: r.status, body: j }; }); })
-            .then(function (res) {
-              self.submitting = false;
-              if (res.ok && res.body && res.body.verified) { self._finish(); return; }
-              // The app distinguishes "too young" from "bad request". An explicit
-              // underage verdict — body.underage, or a 403 — is a REFUSAL and
-              // routes to the gate card; anything else is a real error and stays
-              // on the red line here.
-              var body = res.body || {};
-              if (body.underage === true || res.status === 403) {
-                self._reject(body.error || body.message || "");
-                return;
-              }
-              self.error = body.error ||
-                "We couldn't verify your age. Please check the date and try again.";
-            })
-            .catch(function () {
-              self.submitting = false;
-              self.error = "Network error — please try again.";
-            });
-        }
-      };
-    };
-  })();
-</script>

data/app/views/studio/_confirm_interstitial.html.erb

@@ -7,6 +7,10 @@
   (full document).
 
   Local: consume_path — the POST target that burns the token + signs in.
+
+  Two ways through, and neither depends on the other: the page posts its own
+  form (studio/confirm_interstitial), and the button below shows itself after
+  four seconds, by CSS alone and by the module's timer as well.
 %>
 <!DOCTYPE html>
 <html lang="en">
@@ -42,10 +46,30 @@
         animation: magic-spin 0.8s linear infinite;
       }
 
+      /* THE FALLBACK SHOWS ITSELF, four seconds in, with no script: the button
+         is the way through when the auto-post stalls, and also when the script
+         that posts never arrives. Held at no height until then, so the spinner
+         sits where it would with the block absent. */
+      @keyframes magic-fallback-in {
+        to { max-height: 20rem; margin-top: 2rem; visibility: visible; }
+      }
+
       .magic-fallback {
-        display: none;
-        margin-top: 2rem;
+        max-height: 0;
+        margin-top: 0;
+        overflow: hidden;
+        visibility: hidden;
         color: rgba(248, 250, 252, 0.8);
+        animation: magic-fallback-in 1ms linear 4s forwards;
+      }
+
+      /* The module's own timer, for an engine that holds the animation while
+         the post is pending. */
+      .magic-fallback.is-shown {
+        max-height: 20rem;
+        margin-top: 2rem;
+        visibility: visible;
+        animation: none;
       }
 
       .magic-fallback p { margin: 0 0 1rem; font-size: 15px; }
@@ -82,25 +106,14 @@
 
     <noscript>
       <style>
-        #magic-fallback { display: block !important; }
+        #magic-fallback { animation: none; max-height: none; margin-top: 2rem; visibility: visible; }
         .magic-spinner { display: none; }
       </style>
     </noscript>
 
-    <script>
-      (function () {
-        var form = document.getElementById("magic-consume-form");
-        if (form && !form.dataset.autoSubmitted) {
-          form.dataset.autoSubmitted = "1";
-          if (typeof form.requestSubmit === "function") form.requestSubmit();
-          else form.submit();
-        }
-
-        setTimeout(function () {
-          var fallback = document.getElementById("magic-fallback");
-          if (fallback) fallback.style.display = "block";
-        }, 4000);
-      })();
-    </script>
+    <%# THE AUTO-POST is studio/confirm_interstitial, a module with no imports,
+        loaded by its own tag: this document has no import map. The tag carries
+        the request's CSP nonce when the host sets one. %>
+    <script type="module" src="<%= asset_path("studio/confirm_interstitial.js") %>"<%= tag.attributes(nonce: (content_security_policy_nonce if respond_to?(:content_security_policy_nonce))) %>></script>
   </body>
 </html>

data/app/views/studio/_cropper_assets.html.erb

@@ -1,11 +1,12 @@
-<%# Cropper.js + the image-upload factories for the shared crop-photo modal.
-    Render on pages that can open the cropper (an avatar field, a banner editor,
-    etc.) — this loads cropper.js (~40 KB) AND defines imageUploadHost /
-    cropPhotoModal / submitFormWithProgress inline, so both the library and the
-    behavior only load where an upload trigger exists rather than globally.
+<%# Cropper.js, for the shared crop-photo modal. Render on a page that can open
+    the cropper (an avatar field, a banner editor), so the library (~40 KB)
+    loads only where an upload trigger exists.
 
-    Pair with: the crop-photo + saving modal registrations in your modal-host
-    block (see the README / CHANGELOG), and x-data="imageUploadHost({...})". %>
+    The behaviour around it (cropPhotoModal, imageUploadHost,
+    submitFormWithProgress) is studio/cropper and studio/image_upload, on every
+    page through studio/alpine_scopes; this partial loads the library alone.
+
+    Pair with: the crop-photo and saving modal registrations in your modal-host
+    block (see the README and CHANGELOG), and x-data="imageUploadHost({...})". %>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
 <script defer src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
-<%= render "studio/modals/image_upload" %>

data/app/views/studio/modals/_crop_photo.html.erb

@@ -16,7 +16,7 @@
       lets the user choose a file inside the modal, then crops (e.g. a
       banner editor's open()).
 
-  The cropPhotoModal() factory ships in studio/modals/_image_upload; cropper.js
+  The cropPhotoModal() factory is studio/cropper (studio/alpine_scopes); cropper.js
   loads via studio/_cropper_assets on the pages that can open this modal.
 
   Single root: lives inside the host's <template x-if>, so only the outer