studio-engine 0.60.0 → 0.60.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9bf3942309a578282c3ed5d194123c773c659fde728ac53db036f29abee6d09f
-  data.tar.gz: 96dcf654f30bbbc63d7682394b24460091acbc52d310b39cb065ae771e3108a0
+  metadata.gz: e147f36e9a7113442530805c34a0f5fe0b9fb1b37391b8e4271e89368b01236e
+  data.tar.gz: 17203c174004a90979e88259c32b5672907fe8b5b6deadb9cf240f1d4c9aab85
 SHA512:
-  metadata.gz: 67264dd6f10ab6be519740067057f7e39c1d960976e7409b3524de3e61f094bc523172e5e1721dfd09c1bfe95c6bc935c5ccd133696bbdbc581e046b8c1da0f7
-  data.tar.gz: a210c2bbd8591ea197438150788be7594dca951ce7405f975e91892376b739218e0f048ffec483ca702d23573b429b44f104a75b8ca8a67091522a4496b74209
+  metadata.gz: e1cacfd158c940e8d78c63d97d33c6bd248112a738032230a79ac480facc90077dffa185fa4fe352567b07204e91044f88dd7ea498906fb8ea8f5bba570944be
+  data.tar.gz: e1c274a2ff0726e5ebced0ba9185157798e6c194e149ad9c846b10d215f1e282731a8838cd1ec9fa85f6d93ee94ddada47fb16bad2cf37569c181c4791310840

data/CHANGELOG.md

@@ -4,6 +4,51 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+### Breaking
+
+- **The age-gate DOB modal is renamed, and the refusal moved to its own card.**
+  A host that renders these paths from the released gem must update them:
+
+  | Was | Is now |
+  |-----|--------|
+  | `studio/modals/blocks/_age_verify` | `studio/modals/blocks/_birthday` |
+  | `studio/_age_verify_assets` | `studio/_birthday_assets` |
+  | `window.ageVerifyModal` | `window.birthdayModal` |
+
+  Nothing in `mcritchie-studio`, `turf-monster`, `mcritchie-industries` or `rolio`
+  rendered the old paths at the time of this change (each app that shows an age
+  gate ships its own card and shares only `studio/fields/_date_of_birth`), so the
+  rename lands with no consumer edit — but the old paths are GONE, not aliased, so
+  a future adopter reaching for `blocks/age_verify` needs this table.
+
+  **`age-verified` is deliberately unchanged.** The success event and
+  `session.ageVerified` are what consuming apps already listen on, so the rename
+  stopped short of them and no host wiring moves.
+
+- **`min_age` is now OPTIONAL on the birthday card** (was REQUIRED). Absent — or
+  `0` — means the app asks for a birthday and does not gate on it: the card drops
+  the age line, the eligibility wording and the refusal handoff. Existing callers
+  that pass a number are unaffected. There is still NO engine default, because 18
+  is itself a policy value.
+
+- **An under-age date now SUBMITS.** It used to disable the card's own submit
+  button and turn the card red — the one screen state with nothing to press. The
+  factory routes on the RESPONSE instead: `body.underage === true`, or HTTP 403,
+  opens the age-gate card; anything else non-verified stays on the error line. An
+  app adopting this must make its verify endpoint answer "too young" distinctly
+  from "bad request", because a client that blocks submission never had to.
+
+### Added
+
+- **`studio/modals/blocks/_age_gate` — the refusal card.** Where the birthday card
+  hands off when the date is under the app's bar. Headed "Easy, Young'un" under a
+  teddy bear rather than a red X, because a person who will be welcome later is
+  not an error state. Carries a LIVE COUNTDOWN to the day they qualify, built from
+  the date the birthday card passes across the store, plus the two ways out: a
+  primary CTA to watch instead (app-supplied `watch_url`, dropped entirely when
+  absent rather than rendered dead) and a back link that returns to the birthday
+  card. Displays `min_age` / `state`; computes no eligibility of its own.
+
 ### Added
 
 - **A Geo row in the shared admin dropdown, with signage when it is off.** Every

data/app/views/studio/{_age_verify_assets.html.erb → _birthday_assets.html.erb}

@@ -1,27 +1,39 @@
 <%#
-  ageVerifyModal factory — the Alpine data for the engine age-gate DOB modal
-  (studio/modals/blocks/_age_verify). Ships here, at PAGE level, on purpose: the
+  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.ageVerifyModal. Mirrors how studio/_cropper_assets homes
+  just references window.birthdayModal. Mirrors how studio/_cropper_assets homes
   the cropPhotoModal factory for the crop modal.
 
   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 }.
+  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.
 %>
 <script>
   (function () {
-    if (window.ageVerifyModal) return;
-    window.ageVerifyModal = function (opts) {
+    if (window.birthdayModal) return;
+    window.birthdayModal = function (opts) {
       opts = opts || {};
       var now = new Date();
       return {
@@ -34,6 +46,10 @@
         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" },
@@ -83,17 +99,58 @@
           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 = "";
-          // Client courtesy gate only — the server recompute is authoritative.
-          if (this.computedAge !== null && this.minAge && this.computedAge < this.minAge) return;
+          // 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, resolve locally so the modal
-            // demonstrates the success handoff without an endpoint.
-            setTimeout(function () { self.submitting = false; self._finish(); }, 450);
+            // 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 || "";
@@ -102,11 +159,20 @@
             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, body: j }; }); })
+            .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; }
-              self.error = (res.body && res.body.error) ||
+              // 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 () {

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

@@ -3,7 +3,7 @@
   (studio/board/_board). Ships here at PAGE level on purpose: a <script> inside the
   board component template would be cloned/re-parsed and never run, so a consumer
   renders THIS once in its layout (like studio/_leveling_activity_assets homes
-  levelingActionModal and studio/_age_verify_assets homes ageVerifyModal), and the
+  levelingActionModal and studio/_birthday_assets homes birthdayModal), and the
   board anywhere below just references window.studioBoard. SortableJS is loaded
   globally by layouts/studio/_head (vendored, no CDN); this factory drives it.
 

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

@@ -5,8 +5,8 @@
   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 other shared
   Alpine factories), and the modal partial anywhere below just references
-  window.levelingActionModal. Mirrors how studio/_age_verify_assets homes the
-  ageVerifyModal factory.
+  window.levelingActionModal. Mirrors how studio/_birthday_assets homes the
+  birthdayModal factory.
 
   CRITICAL BOUNDARY — this factory is UI ONLY. It POSTs to an app-supplied
   submitUrl and reacts to a NEUTRAL JSON contract; it holds ZERO on-chain logic,

data/app/views/studio/fields/_date_of_birth.html.erb

@@ -6,7 +6,7 @@
                   site can recompute whatever it derives. Defaults to the
                   age-gate's onMonthChange(), which every current caller has.
 
-                  ONE HOOK FOR ALL THREE, where age_verify used onMonthChange()
+                  ONE HOOK FOR ALL THREE, where the birthday modal used onMonthChange()
                   for month/year and `error = ''` for day. That is not a
                   behaviour change: onMonthChange() clears an out-of-range day
                   and then clears the error, and a day just chosen FROM
@@ -24,8 +24,9 @@
       years              — the year range this caller offers
 
     EXTRACTED BECAUSE IT WAS ALREADY DUPLICATED: these selects lived in
-    studio/modals/blocks/_age_verify, and turf-monster forked a second copy into
-    its own modals/_age_verify. Two copies of one field is how they drift.
+    studio/modals/blocks/_birthday (named _age_verify until 2026-08-24), and
+    turf-monster forked a second copy into its own modals/_age_verify. Two copies
+    of one field is how they drift.
 
     AND BECAUSE IT REPLACED SOMETHING WORSE. /profile/edit used a custom calendar
     popover, which shipped four defects in three days — its grid collapsed in

data/app/views/studio/modals/blocks/_age_gate.html.erb

@@ -0,0 +1,225 @@
+<%#
+  Age gate — the REFUSAL card. New 2026-08-24, and it exists because a refusal
+  needs somewhere to go.
+
+  WHAT IT REPLACED. blocks/_birthday (then blocks/_age_verify) used to carry the
+  refusal itself: enter an under-age date and the card turned red and disabled
+  its own submit button. That is the one screen state with nothing to press —
+  the person is told no and handed no next move, on a card whose only other
+  control closes it. This card is that next move.
+
+  THE TWO WAYS OUT, and both are real:
+    watch_url  — the thing they CAN do. Being too young to enter is not being too
+                 young to watch, so the primary CTA is a way to stay rather than
+                 a way to leave. App-supplied: the engine has no idea what a
+                 contest is.
+    the back link — the thing they might NEED. A wrong birthday is an ordinary
+                 typo (a mis-picked year is one scroll away), and a gate with no
+                 way back turns a typo into a locked door. swap()s back to the
+                 birthday card, so this is a correction, not a restart.
+
+  DELIBERATELY NOT DISMISSIBLE-BY-DEFAULT-ONLY: the host still decides via
+  props.dismissible at open() time, exactly like every other card. What this
+  partial guarantees is that there is always a visible way forward even when the
+  host locks the backdrop.
+
+  NO LEGAL POLICY LIVES HERE, same rule as the birthday card. min_age and state
+  are passed in and only ever displayed; nothing here computes eligibility.
+
+  Locals:
+    min_age     (Integer, optional) — for the headline. Falls back to props.minAge,
+                which _birthday's _reject passes, so a host that opens this card
+                through the handoff needs to supply nothing at all.
+    state       (String, optional)  — passive jurisdiction label. Same fallback.
+    watch_url   (String, optional)  — the primary CTA target. Omit and the CTA is
+                dropped rather than rendered dead.
+    watch_label (String, optional)  — default "Watch the Contest".
+    birthday_modal_id (String, optional) — the card the back link returns to.
+                Default "birthday". Pass nil to drop the link.
+    back_label  (String, optional)  — default "Update your Birthday".
+    title       (String, optional)  — default is built from min_age.
+    countdown   (Boolean, optional) — default true. FALSE drops the countdown line
+                entirely and falls back to the plain rule sentence. It does not
+                merely stop the clock: a frozen countdown reads as a rendering
+                artefact, which is the very thing this card exists not to be.
+    modal_store (String, optional)  — Alpine store name. Default "modals".
+
+  Single root element (modal-host template mount rule).
+%>
+<%
+  min_age           = local_assigns[:min_age]
+  state             = local_assigns[:state].to_s.strip
+  countdown         = local_assigns.fetch(:countdown, true)
+  watch_url         = local_assigns[:watch_url].to_s
+  watch_label       = local_assigns.fetch(:watch_label, "Watch the Contest")
+  birthday_modal_id = local_assigns.fetch(:birthday_modal_id, "birthday")
+  back_label        = local_assigns.fetch(:back_label, "Update your Birthday")
+  title             = local_assigns[:title]
+  modal_store       = local_assigns.fetch(:modal_store, "modals")
+%>
+<div x-data="{
+       now: Date.now(),
+       _tick: null,
+       get props() { var c = $store.<%= modal_store %>.current(); return (c && c.props) || {}; },
+       get minAge() { return <%= min_age.present? ? min_age.to_i : 0 %> || this.props.minAge || null; },
+       get stateCode() { return '<%= j state %>' || this.props.state || ''; },
+       get headline() {
+         // Single-quoted + j-escaped, NOT to_json: to_json emits DOUBLE quotes,
+         // which close this double-quoted x-data attribute and mount the
+         // component as a silent no-op. The markup still renders, so every
+         // assertion passes while the card is dead in a browser.
+         var t = '<%= j title.to_s %>';
+         return t ? t : 'Easy, Young’un';
+       },
+       // The date they become eligible: their birthday, plus the app's minimum
+       // age in years. Built from PARTS the birthday card handed across the
+       // store, because a Date through a reactive proxy is a class waiting to be
+       // stringified by something downstream.
+       get eligibleAt() {
+         var p = this.props, y = p.dobYear, m = p.dobMonth, d = p.dobDay;
+         if (!y || !m || !d || !this.minAge) return null;
+         return new Date(y + this.minAge, m - 1, d);
+       },
+       // Add n months and CLAMP to the end of the target month. Bare setMonth
+       // overflows: Jan 31 + 1 month is Feb 31, which JS rolls forward to Mar 3,
+       // and the countdown then reports one month less than it should for every
+       // person born on a 29th, 30th or 31st.
+       addMonths(d, n) {
+         var day = d.getDate();
+         var r = new Date(d.getTime());
+         r.setDate(1);
+         r.setMonth(r.getMonth() + n);
+         var lastDay = new Date(r.getFullYear(), r.getMonth() + 1, 0).getDate();
+         r.setDate(day < lastDay ? day : lastDay);
+         return r;
+       },
+       get remaining() {
+         var target = this.eligibleAt;
+         if (!target) return null;
+         if (target.getTime() - this.now <= 0) return null;
+
+         // Calendar months and days, not 30-day approximations — this number is
+         // read as a real date difference and a rounded one is wrong by days.
+         var from = new Date(this.now), months = 0;
+         while (this.addMonths(from, months + 1).getTime() <= target.getTime()) months++;
+         var probe = this.addMonths(from, months);
+
+         // Days walked with setDate, NOT by dividing milliseconds: a day across a
+         // DST boundary is 23 or 25 hours, and ms-division reports 27d 23h where
+         // the calendar says 28d.
+         var days = 0;
+         while (true) {
+           var next = new Date(probe.getTime());
+           next.setDate(next.getDate() + 1);
+           if (next.getTime() > target.getTime()) break;
+           probe = next; days++;
+         }
+
+         var rest = target.getTime() - probe.getTime();
+         var hours = Math.floor(rest / 3600000); rest -= hours * 3600000;
+         var mins = Math.floor(rest / 60000); rest -= mins * 60000;
+         var secs = Math.floor(rest / 1000);
+         return { months: months, days: days, hours: hours, minutes: mins, seconds: secs };
+       },
+       get countdownText() {
+         var r = this.remaining;
+         if (!r) return '';
+         var unit = function (n, one) { return n + ' ' + one + (n === 1 ? '' : 's'); };
+         // YEARS, because the whole point of this line is that nobody should have
+         // to divide. Ninety months — the reachable worst case for a 13-year-old
+         // at a 21 bar — is exactly the is-that-a-week-or-a-decade arithmetic the
+         // comment below claims to remove. Months carry the remainder.
+         // (No double quotes in here: this whole object is one HTML attribute.)
+         var years = Math.floor(r.months / 12), months = r.months % 12;
+         var parts = [];
+         if (years) parts.push(unit(years, 'year'));
+         if (months || years) parts.push(unit(months, 'month'));
+         if (r.days || months || years) parts.push(unit(r.days, 'day'));
+         return parts.join(' ') + (parts.length ? ', ' : '') +
+           unit(r.hours, 'hour') + ', ' + unit(r.minutes, 'minute') + ', ' + unit(r.seconds, 'second');
+       },
+       start() { var s = this; this._tick = setInterval(function () { s.now = Date.now(); }, 1000); },
+       stop() { if (this._tick) { clearInterval(this._tick); this._tick = null; } },
+       // Alpine 3 calls destroy() ON THE DATA OBJECT at teardown and dispatches
+       // no `destroy` DOM event, so the `@destroy` listener this used to carry
+       // never fired and the interval outlived every close. Same idiom as the
+       // sibling cards that poll: modals/_web3_step_up, blocks/_cta_redirect,
+       // blocks/_seeds_bar.
+       destroy() { this.stop(); },
+       back() { $store.<%= modal_store %>.swap('<%= j birthday_modal_id.to_s %>', {}); }
+     }"
+     <% if countdown %>x-init="start()"<% end %>
+     class="relative">
+  <%# A TEDDY BEAR, not a red X. The X pill is the engine's error icon and this
+      is not an error — it is a person who will be welcome later. The card that
+      turns someone away is the last place to reach for alarm styling; the copy
+      does the same work ("Easy, Young’un" rather than "You must be 21+"),
+      and the two have to agree or the card reads as scolding.
+
+      title_key, not title: the headline may arrive as a LOCAL or fall back to
+      the default, and the block below replaces the subtitle area. %>
+  <%= render "studio/modals/blocks/card_header",
+        size: :lg,
+        icon_emoji: "🧸",
+        title_key: "headline" do %>
+    <%# WHEN, not just no. A refusal that only says "not yet" leaves the person
+        to work out whether that means a week or a decade; the countdown answers
+        it in the units they actually feel. It ticks live because a frozen
+        number reads as a rendering artefact rather than a clock. %>
+    <template x-if="<%= countdown ? 'countdownText' : 'false' %>">
+      <p class="text-sm text-body">
+        You have <strong class="text-heading" x-text="countdownText"></strong>
+        before you can join your first contest.
+        <span x-show="stateCode" x-cloak>
+          The minimum age <span x-text="'in ' + stateCode"></span> is
+          <strong class="text-heading" x-text="minAge"></strong>.
+        </span>
+      </p>
+    </template>
+
+    <%# No date to count from (the card was opened directly, or the handoff
+        carried no DOB). Say the rule plainly rather than an empty sentence. %>
+    <template x-if="<%= countdown ? '!countdownText' : 'true' %>">
+      <p class="text-sm text-body">
+        <span x-show="stateCode" x-cloak>
+          The minimum age <span x-text="'in ' + stateCode"></span> is
+          <strong class="text-heading" x-text="minAge"></strong>.
+        </span>
+        <span x-show="!stateCode">You are not old enough to enter this contest yet.</span>
+      </p>
+    </template>
+
+    <%# A server-authored reason, when there is one. Never invented here. %>
+    <template x-if="props.message">
+      <p class="text-sm text-muted mt-2" x-text="props.message"></p>
+    </template>
+  <% end %>
+
+  <%# Breathing room before the CTA. card_header's block sits flush against
+      whatever follows it, and a full-width primary button landing directly on
+      the last line of body copy reads as one block rather than as a sentence
+      and then a choice. %>
+  <div class="mt-5"></div>
+
+  <% if watch_url.present? %>
+    <%# The primary action is the thing they CAN do. Too young to enter is not
+        too young to watch, so this keeps them in rather than showing them out. %>
+    <%= link_to watch_label, watch_url,
+          class: "btn btn-primary btn-lg w-full",
+          "@click": "$store.#{modal_store}.close()" %>
+  <% end %>
+
+  <% if birthday_modal_id.present? %>
+    <%# The correction path. A mis-picked year is one scroll away from a right
+        one, and without this the typo is indistinguishable from the verdict. %>
+    <button type="button" @click="back()"
+            class="block mx-auto mt-3 text-sm text-secondary hover:text-heading transition underline-offset-2 hover:underline">
+      <%= back_label %>
+    </button>
+  <% end %>
+
+  <button type="button" @click="$store.<%= modal_store %>.close()"
+          class="block mx-auto mt-3 text-sm text-muted hover:text-secondary transition">
+    Close
+  </button>
+</div>

data/app/views/studio/modals/blocks/_birthday.html.erb

@@ -0,0 +1,134 @@
+<%#
+  Birthday modal — engine primitive. Collects a real date of birth
+  (Month / Day / Year) and submits it. Homed in the engine as the heavier sibling
+  of studio/modals/shared/_age_attestation (the lighter one-checkbox legal
+  attestation). RUN ONE OR THE OTHER, not both: the attestation is a signup-time
+  "I confirm I'm of legal age" checkbox; this is an entry-time DOB gate that a
+  server can recompute and stamp.
+
+  RENAMED 2026-08-24, and the rename carries a behaviour change. This partial was
+  `blocks/_age_verify` and it owned BOTH halves of the question: it collected the
+  date AND, when the date failed, it turned red and disabled its own button. That
+  is a dead end — the one screen state with nothing to press and nowhere to go.
+  The two halves are now two cards:
+
+    THIS ONE (birthday)  — asks. Always submittable.
+    blocks/_age_gate     — answers, when the answer is no. Carries the CTAs
+                           (watch instead / fix the date), so the refusal is a
+                           card with somewhere to go rather than red text.
+
+  So an under-age date no longer disables the button; it SUBMITS, and the app's
+  verdict opens the age-gate card. The inline red text that used to carry the
+  refusal is gone. What remains red here is a genuine ERROR — an invalid date, a
+  network failure — which is a different thing from "you are too young", and
+  conflating the two is what made the old state a dead end.
+
+  CRITICAL — the engine hardcodes NO legal policy. It renders the modal UI, the
+  DOB fields, and the submit; everything legal is app-supplied:
+
+    min_age     (Integer, OPTIONAL) — the app's minimum age. There is NO engine
+                default (18 is itself a policy value); the app resolves it from
+                its own policy against its own server-detected jurisdiction.
+                ABSENT (or 0) = this app asks for a birthday and does not gate on
+                it. That is a first-class mode, not a degraded one: a hub app may
+                want the date for a greeting and have no bar at all, and the card
+                then drops the age line, the eligibility wording and the refusal
+                handoff rather than rendering "You must be 0+".
+    submit_url  (String, REQUIRED)  — the app endpoint the DOB POSTs to. The
+                app owns the authoritative recompute + DOB persistence; the modal
+                only shows the response.
+    state       (String, optional)  — a PASSIVE jurisdiction label for the copy
+                (e.g. "CA"). Server-detected upstream; the modal never detects
+                geography and never offers an editable state field (a spoofable
+                client state must not be able to lower the bar). Blank => the
+                jurisdiction clause is dropped.
+    title       (String, optional)  — modal title. Default "Your birthday"
+                (it was "Verify your age" under the old _age_verify name).
+    intro       (String, optional)  — the lead sentence after the age line.
+    fine_print  (String, optional)  — the app's legal / jurisdiction copy (e.g.
+                its per-state age table). The engine ships only a neutral,
+                policy-free default; the app passes its real copy here.
+    modal_store (String, optional)  — Alpine store backing close(). Default "modals".
+    age_gate_modal_id (String, optional) — the id opened when the app’s verdict is
+                UNDER age. Default "age-gate". Pass nil to keep the old
+                inline-refusal behaviour (the refusal then falls back to the
+                error line), which exists only so a host mid-adoption is not
+                forced to register a second modal on the same deploy.
+    demo        (Boolean, optional) — style-guide preview: resolve locally, no POST.
+    demo_underage (Boolean, optional) — style-guide preview ONLY: make the local
+                resolve take the REFUSED branch, so the guide can show the
+                handoff without a backend. Ignored unless demo.
+
+  Requires window.birthdayModal — render studio/_birthday_assets once at
+  layout level (the factory can’t ship inside this template; a cloned script
+  never runs). Single root element (modal-host template mount rule).
+%>
+<%
+  # min_age is OPTIONAL now. Absent (or 0) means this app asks for a birthday and
+  # does not gate on it — McRitchie Studio wants the date for a greeting, not for
+  # eligibility. Present means the app validates, and the shape of that validation
+  # is the APP's: turf-monster's varies by jurisdiction, which is exactly why the
+  # engine takes a resolved number and a passive label rather than a rule.
+  min_age     = local_assigns[:min_age]
+  validates   = min_age.to_i.positive?
+  submit_url  = local_assigns.fetch(:submit_url)
+  state       = local_assigns[:state].to_s.strip
+  title       = local_assigns.fetch(:title, "Your birthday")
+  intro       = local_assigns.fetch(:intro,
+                  validates ? "Enter your date of birth to confirm you're eligible — we only ask once."
+                            : "Enter your date of birth — we only ask once.")
+  fine_print  = local_assigns.fetch(:fine_print,
+                  validates ? "We use your date of birth only to confirm eligibility."
+                            : "We use your date of birth only to know when to wish you a happy birthday.")
+  modal_store = local_assigns.fetch(:modal_store, "modals")
+  demo        = local_assigns.fetch(:demo, false)
+  demo_underage     = local_assigns.fetch(:demo_underage, false)
+  age_gate_modal_id = local_assigns.fetch(:age_gate_modal_id, "age-gate")
+%>
+<div x-data="birthdayModal({ minAge: <%= min_age.to_i %>, state: '<%= j state %>', url: '<%= j submit_url %>', store: '<%= j modal_store %>', demo: <%= demo ? 'true' : 'false' %>, demoUnderage: <%= demo_underage ? 'true' : 'false' %>, gateId: '<%= j age_gate_modal_id.to_s %>' })">
+  <%= render layout: "studio/modals/blocks/shell", locals: { title: title, modal_store: modal_store } do %>
+    <%# The age line only exists when the app HAS a bar. A card that says
+        "You must be 0+" is what an unconditional line produces for a host that
+        just wants the date. %>
+    <p class="text-sm text-muted mb-4">
+      <% if validates %>
+        You must be <span class="text-heading font-semibold"><%= min_age %>+</span><%= state.present? ? " in #{state}" : "" %>.
+      <% end %>
+      <%= intro %>
+    </p>
+
+    <%# Month / Day / Year — the engine's one DOB field, shared with the profile
+        page's birthday row. It lived here first and turf-monster forked a second
+        copy; extracting it is what stops the two drifting. %>
+    <div class="mb-4">
+      <%= render "studio/fields/date_of_birth" %>
+    </div>
+
+    <%# NO inline too-young hint. It used to live here, and turning the card red
+        while disabling its own button is the dead end this rename removed — the
+        refusal is now its own card (blocks/_age_gate) with somewhere to go.
+
+        This line stays for genuine ERRORS: an invalid date, a network failure.
+        A refusal is not an error, and showing them in the same red paragraph is
+        what let the dead end hide. %>
+    <template x-if="error">
+      <p class="text-red-400 text-sm mb-3" x-text="error"></p>
+    </template>
+
+    <%# Disabled ONLY for an incomplete date or an in-flight submit. It used to be
+        disabled for an under-age date too, which is precisely the dead end: the
+        one state where the card had nothing to press. An under-age date now
+        submits like any other and the app’s verdict opens the age-gate card. %>
+    <button type="button" @click="submit()"
+            class="btn btn-primary btn-lg w-full"
+            :disabled="!complete || submitting">
+      <span x-show="!submitting">Confirm &amp; Continue</span>
+      <span x-show="submitting" class="inline-flex items-center justify-center gap-2" style="display: none;">
+        <span class="cta-spinner" aria-hidden="true"></span>
+        Verifying…
+      </span>
+    </button>
+
+    <p class="text-[11px] text-muted text-center mt-3 leading-snug"><%= fine_print %></p>
+  <% end %>
+</div>

data/app/views/studio/profiles/_birthday_fields.html.erb

@@ -10,7 +10,7 @@
     second one badly.
 
     THE SAME FIELD THE AGE GATE USES (operator's call, 2026-08-15). It renders
-    studio/fields/_date_of_birth, which studio/modals/blocks/_age_verify also
+    studio/fields/_date_of_birth, which studio/modals/blocks/_birthday also
     renders — one field, two surfaces. It replaced a custom calendar popover that
     shipped four defects in three days; see the component script for the list.