studio-engine 0.51.0 → 0.52.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '047185d5f84476c97f8c3ecbc62c8392b4ab2b13f4124c1088ee3c92d99748ba'
-  data.tar.gz: c2c5406a1892ef48e20fd2cd6c93409697cd8e1419e1b47799e86d913106c18f
+  metadata.gz: 2a59868c458671e78335fa67057b5914b85fa9ec7f237852dc4d3a543262dcc1
+  data.tar.gz: 580857e88f928bbf76882d984cee10bd2bd86471d1a649f0d2b8e9228832622e
 SHA512:
-  metadata.gz: e11dfb9c11733764b8267f3e447f6af65f5778e252357bb6da1aa8daeb464a988361671ebdfd096b2477d78e40cc5561f0d643dc036e8ce210ba32e406ff739c
-  data.tar.gz: 1a2f0d7e26663e7afcffd87888eb06f3c6b1bd4345b4148990b1f07d1da3f6fae24cf1c00a1e68232d1b30ab79ad386c98af78927c544bff9892e51c6d761ca5
+  metadata.gz: 2b3dad1a4bb20643705d263a3edaaa3ec97f9fb3cea437d12833bda1dc30766450cfdeb021cd01759df3334e23721a05bb26f0af3c55df324d4bfc1f54e53223
+  data.tar.gz: 48c6b729890c548c00c5b1f6881ffda6a636acde4303914e9bf243fbbf3065f82613a970630554880ca9ccbdaa1cf4f2f4b74618d55f458556a42fc98a768da8

data/CHANGELOG.md

@@ -4,6 +4,114 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+### Changed
+
+- **The edit page's avatar is now the control; its corner badge is gone.**
+  Hovering the identity card fades a **Change photo** label over the picture, and
+  clicking anywhere on the picture opens the file picker and then the cropper. A
+  128px target replaces a 28px one, and a label replaces a glyph that had to be
+  interpreted. The reveal also fires on **focus**, because a keyboard never
+  hovers and this is the only route to changing a photo; on touch the label stays
+  visible over a thinner scrim, so the affordance exists without hiding the photo
+  it describes.
+
+  The label is the button's **accessible name**, so it is hidden by `opacity`
+  and never by `display`/`visibility` — either of those would drop it out of the
+  accessibility tree and leave the button silently unnamed at rest.
+
+  **The read page is unchanged**: its whole card is a link to `/profile/edit` and
+  its badge stays a decorative `<span>` (an `<a>` inside an `<a>` is invalid, and
+  browsers repair it by closing the outer link early).
+
+- **Birthday is entered through a calendar rather than an open field.** The
+  popover carries month and year **selects** rather than only step arrows —
+  stepping from today to 1985 is about four hundred clicks, which is why
+  turf-monster's contest picker could not simply be reused. Future dates are
+  disabled per-day (the boundary month is half valid), today is still selectable,
+  and a set birthday can be cleared.
+
+  It is `position: fixed`, placed from the trigger's rect, for two reasons: an
+  absolutely-positioned popover is clipped the day a consumer's card carries
+  `position: relative` alongside `overflow-hidden`, and viewport coordinates only
+  stay meaningful under `fixed` once the page scrolls.
+
+  **Without JavaScript the native `<input type="date">` renders instead**, and
+  the two branches are `<template x-if>` rather than `x-show` — only one is ever
+  in the DOM, so the form can never submit two `profile[birthday]` fields.
+
+  The three integer columns are unchanged; the UI joins them for entry and
+  `ProfilesController#update` splits them again.
+
+
+### Added
+
+- **`/profile` gains the Newsletter row.** Lifted from turf-monster's `/account`
+  card, which has run this flow in production, and stripped of everything
+  turf-specific on the way: its 25-seed on-chain welcome bonus, its quest state,
+  its seeds level-up payload. What the engine takes is the part every app needs.
+
+  New routes: `POST /profile/newsletter` (`profile_newsletter_path`) joins,
+  `DELETE` on the same path leaves.
+
+  **TWO TIMESTAMPS, NOT A BOOLEAN.** `joined_email_list_at` and
+  `left_email_list_at`, matching turf, because the pair carries three states a
+  flag cannot: never asked (both nil), subscribed (joined after left, *including
+  a rejoin where both are set*), and unsubscribed. `Studio::Newsletter` holds the
+  rules — `subscribed?`, `ever_joined?`, `needs_email?` — pure and duck-typed
+  like `Studio::OauthIdentity`.
+
+  `ever_joined?` is deliberately a different question from `subscribed?`: leaving
+  stamps a date and never clears the join, so a consumer paying a once-ever
+  welcome bonus cannot have it re-earned by cycling.
+
+  **ASYMMETRIC ON PURPOSE.** Joining is one click; leaving asks for confirmation
+  in a modal. Joining is reversible from the same card, so a confirm step would
+  be friction protecting nothing — a mis-click on leave is silent until the next
+  send that never arrives. An account with **no address on file** (a wallet-only
+  sign-in) is asked for one in a modal rather than allowed to submit and fail;
+  the address is written but **not** marked verified, because typing an address
+  is not the same as holding it.
+
+  Gated on `requires:` like every other row, so a host without the columns gets
+  silence rather than a 500. The columns ship consumer-first under
+  *Roll Out Standard Profile Columns*.
+
+### Fixed
+
+- **A page-scoped modal host rendered outside an Alpine scope was inert, and
+  `/profile/edit` was in exactly that state.** `studio/modals/_scoped_host`
+  declares no `x-data` of its own, and Alpine 3 only initialises trees rooted at
+  one — so its outer `<template x-if>` never runs. The store registers, `open()`
+  pushes onto the stack, `current()` returns the right modal id, and **no dialog
+  reaches the document**. Every symptom points at the modal id or the store;
+  none of them is the cause.
+
+  `/profile/edit` mounts its crop-photo host after the `studioProfileForm` div
+  closes, with no scope above it, so the avatar cropper could not open. The
+  engine's other live call site (`studio/emails/index.html.erb`) happens to
+  render inside `x-data="emailRecipients(...)"`, which is the only reason this
+  pattern has worked anywhere.
+
+  Both pages now wrap the host in `<div x-data>`. Found by the newsletter row's
+  first browser spec — the view suite was green on the `@click` attribute
+  throughout.
+
+### Changed
+
+- **The read page mounts a modal host only when a row asks for one.** This is the
+  registry's `modals:` key finally doing the job it was documented for — until
+  the newsletter row, nothing on `/profile` opened a modal and mounting a host
+  would have been furniture for nobody.
+
+  `modals:` is now **a partial path rather than a boolean**. A host row that
+  declares modals keeps its partial in the host's own app, so any convention like
+  `"studio/profiles/#{key}_modals"` would resolve to a path that does not exist
+  there. It costs one string and works for everyone.
+
+  The host is **not** the cropper: `/profile` mounts `studio/modals/_scoped_host`
+  and never `studio/cropper_assets`, because the avatar is read-only on that page.
+
+
 ### Added
 
 - **The link sidebar leads with a Profile link, shipped by the engine.** The

data/app/controllers/studio/profiles_controller.rb

@@ -142,6 +142,59 @@ module Studio
       end
     end
 
+    # POST /profile/newsletter — join the mailing list.
+    #
+    # DIRECT, no confirmation. Joining is reversible in one click from the same
+    # card, so a confirm step would be friction protecting nothing. LEAVING is the
+    # one that asks, because a mis-click there is silent until the next send that
+    # never arrives.
+    #
+    # An account with no address on file supplies one here — a wallet-only sign-in
+    # has no email, and a newsletter needs somewhere to send. It is written as the
+    # account email but NOT marked verified: this proves the person can type an
+    # address, not that they hold it, and treating it as verified would turn a
+    # mailing-list form into an account-recovery path.
+    def subscribe_newsletter
+      return unsupported("newsletter") unless row_rendered?(:newsletter)
+
+      if Studio::Newsletter.needs_email?(current_user)
+        value = params.dig(:profile, :email).to_s.strip
+        unless value.match?(URI::MailTo::EMAIL_REGEXP)
+          return redirect_to profile_path, status: :see_other,
+                             alert: "Enter an email address to subscribe."
+        end
+        current_user.email = value
+      end
+
+      rescue_and_log(target: current_user) do
+        # left_email_list_at is CLEARED rather than left in place. `subscribed?`
+        # compares the two dates, so a stale leave date in the future of the join
+        # would read as unsubscribed the moment the clock disagreed.
+        current_user.update!(joined_email_list_at: Time.current, left_email_list_at: nil)
+        redirect_to profile_path, notice: "You're on the list."
+      end
+    end
+
+    # DELETE /profile/newsletter — leave it.
+    #
+    # STAMPS A DATE, never clears the join. "Have they ever joined" is a different
+    # question from "are they on the list", and a consumer that pays a once-ever
+    # welcome bonus (turf-monster does, on-chain) needs the first one to survive
+    # every leave and rejoin. Clearing joined_email_list_at here would let someone
+    # re-earn it by cycling.
+    def unsubscribe_newsletter
+      return unsupported("newsletter") unless row_rendered?(:newsletter)
+
+      unless Studio::Newsletter.subscribed?(current_user)
+        return redirect_to profile_path, alert: "You're not subscribed.", status: :see_other
+      end
+
+      rescue_and_log(target: current_user) do
+        current_user.update!(left_email_list_at: Time.current)
+        redirect_to profile_path, notice: "You've been unsubscribed."
+      end
+    end
+
     private
 
     # Would the page render this row for this viewer?

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

@@ -1,4 +1,4 @@
-<%# Birthday — ONE date input over THREE integer columns.
+<%# Birthday — ONE date over THREE integer columns, entered through a calendar.
 
     Locals: user (required).
 
@@ -9,23 +9,221 @@
     (needs month and day, and no year at all). A single date column answers the
     second one badly.
 
-    So the UI joins them and ProfilesController#update splits them again. A
-    native date input is used rather than three selects because a date is one
-    idea to the person entering it, and the browser already knows how to enter
-    one on every platform.
+    So the UI joins them and ProfilesController#update splits them again. The row
+    renders only when the host has all three columns, so nothing here re-checks.
 
-    The row renders only when the host has all three columns, so nothing here
-    re-checks.
+    TWO INPUTS, ONE NAME, AND ONLY EVER ONE IN THE DOM. `<template x-if>` is what
+    makes that true rather than a claim: the branch Alpine does not take is never
+    instantiated, so the form can never carry two `profile[birthday]` fields and
+    the server can never receive the wrong one. Toggling with x-show would leave
+    BOTH present and submit the hidden one's value too — the last duplicate wins
+    in Rack's params, which is precisely the bug this shape avoids.
+
+      no JS  — the native `<input type="date">`. It is not a downgrade; it is the
+               control every platform already knows how to render, and the reason
+               a JS-less page can still set a birthday at all.
+      JS     — the calendar below. `alpine` comes from the enclosing
+               studioProfileForm and is true only once that component has booted.
+
+    The operator asked for a calendar rather than an open field (2026-08-15).
 %>
+<label class="block text-sm text-secondary mb-2 font-medium" for="profile_birthday">Date of birth</label>
+
 <%
   y = user.birth_year
   m = user.birth_month
   d = user.birth_day
   value = (y.present? && m.present? && d.present?) ? format("%04d-%02d-%02d", y, m, d) : nil
 %>
-<label class="block text-sm text-secondary mb-2 font-medium" for="profile_birthday">Date of birth</label>
-<input type="date" name="profile[birthday]" id="profile_birthday"
-       value="<%= value %>" class="input-field"
-       autocomplete="bday" max="<%= Date.current.iso8601 %>"
-       x-model="fields.birthday">
+
+<div x-data="studioBirthdayPicker('<%= value %>')">
+  <%# --- the JS-less path ------------------------------------------------- %>
+  <template x-if="!alpine">
+    <input type="date" name="profile[birthday]" id="profile_birthday"
+           value="<%= value %>" class="input-field"
+           autocomplete="bday" max="<%= Date.current.iso8601 %>">
+  </template>
+
+  <%# --- the calendar ------------------------------------------------------ %>
+  <template x-if="alpine">
+    <div>
+      <%# The value the form actually submits. The calendar writes here; nothing
+          types into it. %>
+      <input type="hidden" name="profile[birthday]" :value="value">
+
+      <button type="button" x-ref="trigger" @click="toggle()"
+              @keydown.escape="open = false"
+              :aria-expanded="open ? 'true' : 'false'"
+              aria-haspopup="dialog"
+              class="input-field w-full text-left flex items-center justify-between gap-2">
+        <span :class="displayValue ? 'text-heading' : 'text-muted'"
+              x-text="displayValue || 'Select your date of birth'"></span>
+        <svg class="w-4 h-4 text-muted flex-shrink-0" fill="none" stroke="currentColor"
+             stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round"
+                d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"/>
+        </svg>
+      </button>
+
+      <div x-show="open" x-cloak
+           @click.outside="open = false"
+           @keydown.escape.window="open = false"
+           @scroll.window="place()" @resize.window="place()"
+           role="dialog" aria-label="Choose your date of birth"
+           class="studio-birthday-popover"
+           :style="'top:' + top + 'px; left:' + left + 'px; min-width:' + width + 'px;'">
+
+        <%# Month and year JUMP rather than step. Stepping from today to 1985 is
+            about four hundred clicks, which is the whole reason this is not the
+            contest picker. %>
+        <div class="studio-birthday-nav">
+          <select x-model.number="viewMonth" class="input-field studio-birthday-month"
+                  aria-label="Month">
+            <template x-for="(name, i) in months" :key="name">
+              <option :value="i" x-text="name"></option>
+            </template>
+          </select>
+          <select x-model.number="viewYear" class="input-field studio-birthday-year"
+                  aria-label="Year">
+            <template x-for="y in years" :key="y">
+              <option :value="y" x-text="y"></option>
+            </template>
+          </select>
+        </div>
+
+        <div class="studio-birthday-grid studio-birthday-weekdays">
+          <template x-for="(wd, i) in weekdays" :key="i">
+            <div x-text="wd"></div>
+          </template>
+        </div>
+
+        <div class="studio-birthday-grid">
+          <template x-for="(cell, i) in calDays()" :key="i">
+            <div>
+              <template x-if="cell">
+                <button type="button" @click="pick(cell)" :disabled="isFuture(cell)"
+                        :class="isSelected(cell) && 'is-selected'"
+                        class="studio-birthday-day"
+                        x-text="cell"></button>
+              </template>
+            </div>
+          </template>
+        </div>
+
+        <%# A birthday already set is the only case where clearing is meaningful,
+            and without this the calendar is a one-way door — every day cell sets
+            a value and none of them unset one. %>
+        <div class="mt-3 flex justify-end" x-show="value">
+          <button type="button" @click="clear()"
+                  class="text-xs text-secondary hover:text-heading transition">
+            Clear
+          </button>
+        </div>
+      </div>
+    </div>
+  </template>
+</div>
+
 <p class="text-muted text-xs mt-2">Stored as day, month and year — we use it for birthdays and age checks.</p>
+
+<style>
+  /* EVERY RULE BELOW IS OWNED CSS, NOT TAILWIND UTILITIES, and that is not a
+     style preference — it is the bug the operator reported.
+     
+     The engine ships a PREBUILT bundle to consumers. A Tailwind utility exists in
+     a consuming app only if that app's OWN views already emitted it, because its
+     build scans its own source, not the gem's. This calendar first shipped using
+     `grid grid-cols-7`, and `grid-cols-7` is rare enough that NO consumer had
+     ever emitted it: measured in mcritchie-studio's compiled bundle, zero
+     occurrences. With no grid, the seven weekday letters stacked into a single
+     vertical column and the popover grew to the height of the page.
+     `hover:bg-surface-alt` was missing for the same reason.
+     
+     The same note is on studio/profiles/_identity_styles for the same reason.
+     
+     AND THE BROWSER LANE COULD NOT SEE IT. e2e/tailwind_input.css carries
+     `@source "../app/views"`, so the lane compiles the engine's OWN views and
+     emits grid-cols-7 — every spec passed against a page no consumer renders.
+     That blindness is recorded in docs/E2E_LANE.md; the fix here is to stop
+     depending on the utility at all. */
+  .studio-birthday-nav {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .studio-birthday-month { flex: 1 1 auto; }
+
+  .studio-birthday-month,
+  .studio-birthday-year {
+    font-size: 0.875rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+
+  /* THE ONE THAT BROKE. Seven columns, owned outright. */
+  .studio-birthday-grid {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    text-align: center;
+  }
+
+  .studio-birthday-weekdays {
+    margin-bottom: 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--color-text-muted, #9ca3af);
+  }
+
+  .studio-birthday-weekdays > div { padding: 0.25rem 0; }
+
+  .studio-birthday-day {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    color: var(--color-text-body, inherit);
+    transition: background-color 150ms ease, color 150ms ease;
+  }
+
+  .studio-birthday-day:hover:not(:disabled) {
+    background: var(--color-surface-alt, rgba(127, 127, 127, 0.15));
+  }
+
+  .studio-birthday-day:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .studio-birthday-day.is-selected {
+    background: var(--color-primary);
+    color: #fff;
+    font-weight: 700;
+  }
+
+  /* FIXED, not absolute, for TWO reasons — and the second is the one a spec can
+     actually catch.
+
+     1. Clipping. The edit page's rows sit inside `card p-0 overflow-hidden`. An
+        absolutely-positioned popover only escapes that clip while NO ancestor is
+        positioned; the day a consumer's card grows a `position: relative` it is
+        clipped out of sight, with perfectly correct markup.
+     2. Anchoring. place() writes VIEWPORT coordinates from the trigger's rect.
+        Fixed keeps them meaningful as the page scrolls; absolute reinterprets
+        them as document coordinates and the popover drifts by the scroll offset.
+
+     At scroll 0 the two are indistinguishable, which is why the spec that proves
+     this scrolls first. */
+  .studio-birthday-popover {
+    position: fixed;
+    z-index: 40;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: 0.75rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25);
+    padding: 0.75rem;
+  }
+</style>
+
+<%= render "studio/profiles/birthday_picker_script" %>

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

@@ -0,0 +1,144 @@
+<%# The birthday calendar's Alpine component.
+
+    Its own partial so the field markup stays readable and this can be reasoned
+    about as behaviour.
+
+    WHY NOT REUSE turf-monster's contest_lock_picker. That component is the
+    nearest thing in the ecosystem and its GRID is where this one's shape came
+    from, but its navigation is built for the opposite problem: picking a lock
+    time a few weeks OUT, by stepping months from today. Stepping to 1985 that
+    way is roughly four hundred clicks. A birthday needs to JUMP — hence the year
+    and month selects in the header — and it needs the future closed off, which a
+    contest picker specifically must not do.
+
+    WHY `position: fixed` AND NOT `absolute`. The edit page renders its rows
+    inside `card p-0 overflow-hidden`, which CLIPS an absolutely-positioned child
+    — the popover would open and be invisible below the row. Fixed takes it out
+    of the clipping context entirely, at the cost of having to place it by hand
+    from the trigger's rect and re-place it while it is open. The compact identity
+    header is fixed for a related reason, so this is the file's second instance of
+    the same trade rather than a one-off.
+%>
+<script>
+  window.studioBirthdayPicker = function (initial) {
+    return {
+      open: false,
+      value: initial || "",
+      viewYear: 0,
+      viewMonth: 0,
+      top: 0,
+      left: 0,
+      width: 0,
+
+      // Oldest year offered. 120 covers every living person with room to spare;
+      // the point is a bounded list, because a select has to end somewhere.
+      get years() {
+        var now = new Date().getFullYear();
+        var out = [];
+        for (var y = now; y >= now - 120; y--) out.push(y);
+        return out;
+      },
+
+      months: ["January", "February", "March", "April", "May", "June",
+               "July", "August", "September", "October", "November", "December"],
+
+      weekdays: ["S", "M", "T", "W", "T", "F", "S"],
+
+      init() {
+        this.syncViewFromValue();
+      },
+
+      // The month the grid opens on: the chosen birthday when there is one, else
+      // a sensible landing spot. NOT today — opening a birthday picker on the
+      // current year means everyone starts 30+ years from where they are going.
+      syncViewFromValue() {
+        var parts = this.parse(this.value);
+        var now = new Date();
+        this.viewYear = parts ? parts.y : now.getFullYear() - 30;
+        this.viewMonth = parts ? parts.m - 1 : 0;
+      },
+
+      parse(iso) {
+        var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(iso || ""));
+        if (!m) return null;
+        return { y: +m[1], m: +m[2], d: +m[3] };
+      },
+
+      get displayValue() {
+        var p = this.parse(this.value);
+        if (!p) return "";
+        return this.months[p.m - 1] + " " + p.d + ", " + p.y;
+      },
+
+      // Leading blanks so the 1st lands under its real weekday, then the days.
+      calDays() {
+        var first = new Date(this.viewYear, this.viewMonth, 1).getDay();
+        var count = new Date(this.viewYear, this.viewMonth + 1, 0).getDate();
+        var cells = [];
+        for (var i = 0; i < first; i++) cells.push(null);
+        for (var d = 1; d <= count; d++) cells.push(d);
+        return cells;
+      },
+
+      // A birthday cannot be in the future. Checked per-DAY rather than by
+      // clamping the year, because the boundary month is half valid.
+      isFuture(day) {
+        var candidate = new Date(this.viewYear, this.viewMonth, day);
+        var today = new Date();
+        today.setHours(0, 0, 0, 0);
+        return candidate > today;
+      },
+
+      isSelected(day) {
+        var p = this.parse(this.value);
+        return !!p && p.y === this.viewYear && p.m === this.viewMonth + 1 && p.d === day;
+      },
+
+      pick(day) {
+        if (this.isFuture(day)) return;
+        var mm = String(this.viewMonth + 1).padStart(2, "0");
+        var dd = String(day).padStart(2, "0");
+        this.value = this.viewYear + "-" + mm + "-" + dd;
+
+        // `fields` belongs to the enclosing studioProfileForm component. Alpine's
+        // scope chain makes it reachable from here, and it is the SAME object, so
+        // assigning through it is what raises the save bar. Without this line the
+        // picker would set a value the dirty check never notices.
+        if (this.fields) this.fields.birthday = this.value;
+
+        this.open = false;
+      },
+
+      clear() {
+        this.value = "";
+        if (this.fields) this.fields.birthday = "";
+        this.syncViewFromValue();
+      },
+
+      toggle() {
+        this.open = !this.open;
+        if (this.open) {
+          this.syncViewFromValue();
+          this.place();
+        }
+      },
+
+      // Placed from the trigger's rect because the popover is fixed. Flips above
+      // the trigger when there is not room below, so it never opens off-screen on
+      // a short viewport.
+      place() {
+        var el = this.$refs.trigger;
+        if (!el) return;
+        var r = el.getBoundingClientRect();
+        var estimatedHeight = 340;
+        var below = window.innerHeight - r.bottom;
+
+        this.left = r.left;
+        this.width = r.width;
+        this.top = below < estimatedHeight && r.top > estimatedHeight
+          ? r.top - estimatedHeight - 4
+          : r.bottom + 4;
+      }
+    };
+  };
+</script>

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

@@ -28,7 +28,28 @@
 <%= render "studio/profiles/identity_mini", user: user %>
 
 <% if editable %>
-  <div data-studio-identity-full class="card p-6 mb-6 text-center">
+  <%# `studio-identity-card-editable` is the hover hook: the operator asked for the
+      overlay to reveal on hovering the CARD, not only the picture, so the card
+      needs a class the stylesheet can hang that off. Deliberately NOT the read
+      page's `studio-identity-card`, which also paints a primary border to say
+      "this whole thing is a link" — a claim that is false here. %>
+  <%# THE WHOLE CARD IS THE TRIGGER (operator's call, 2026-08-15). The hover
+      already revealed the label across the whole card, so the click had to match
+      it — a surface that lights up on hover and does nothing when clicked reads
+      as broken.
+
+      `@click.self` is NOT used: the click must count anywhere on the card,
+      including on the name and the address. The inner avatar button keeps its own
+      handler with `.stop`, so clicking the picture fires the picker ONCE rather
+      than twice — the button and the card would otherwise both handle it and open
+      two file dialogs.
+
+      The button stays for keyboard and assistive tech: a div with a click handler
+      is unreachable by either, and this is still the only route to changing the
+      photo. %>
+  <div data-studio-identity-full
+       @click="$refs.filePicker.click()"
+       class="studio-identity-card-editable studio-identity-card-clickable card p-6 mb-6 text-center">
     <%= render "studio/profiles/identity_body", user: user, editable: true, attachable: attachable %>
   </div>
 <% else %>

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

@@ -5,38 +5,67 @@
 
     Locals: user, editable, attachable.
 %>
-<div class="relative mb-3 studio-avatar mx-auto" style="width: 128px; height: 128px;">
+<%# THE PICTURE ITSELF IS THE CONTROL ON THE EDIT PAGE (operator's call). The
+    28px pencil badge that used to sit in the corner is gone there: hovering the
+    card fades a label over the avatar, and clicking anywhere on it opens the
+    picker and then the cropper. A 128px target beats a 28px one, and the label
+    says what will happen instead of leaving a glyph to be interpreted.
+
+    The badge REMAINS on the read page, where it is decorative and the whole card
+    is the link. %>
+<% avatar_style = "width: 128px; height: 128px;" %>
+
+<% avatar_inner = capture do %>
   <% if attachable && user.avatar.attached? %>
     <%= image_tag user.avatar, class: "rounded-full object-cover",
-                  style: "width: 128px; height: 128px;", alt: user.display_name %>
+                  style: avatar_style, alt: user.display_name %>
   <% else %>
     <div class="rounded-full flex items-center justify-center font-bold text-white text-4xl"
-         style="width: 128px; height: 128px; background-color: <%= user.avatar_color %>">
+         style="<%= avatar_style %> background-color: <%= user.avatar_color %>">
       <%= user.avatar_initials %>
     </div>
   <% end %>
+<% end %>
+
+<% if editable && attachable %>
+  <%# A BUTTON, not a div with a click handler: this is the only route to
+      changing the photo, and a div is unreachable by keyboard and invisible to
+      assistive tech.
 
-  <% badge_class = "studio-avatar-badge absolute bottom-0 right-0 flex items-center justify-center rounded-full border-2 border-page bg-primary text-white transition" %>
-  <% badge_style = "width: 28px; height: 28px;" %>
-
-  <% if editable && attachable %>
-    <%# A real button: on the edit page this opens the cropper. %>
-    <button type="button" @click="$refs.filePicker.click()"
-            aria-label="Change your profile photo"
-            class="<%= badge_class %>" style="<%= badge_style %>">
-      <%= render "studio/profiles/pencil_icon" %>
-    </button>
-  <% elsif !editable %>
-    <%# DECORATIVE on the read page, and it has to be: the whole card is a link
-        now, and an <a> inside an <a> is invalid HTML that browsers repair by
-        closing the outer one early — which would silently cut the card's
-        clickable area down to whatever came before the badge. The card carries
-        the destination and the accessible name; this is just the glyph. %>
-    <span class="<%= badge_class %>" style="<%= badge_style %>" aria-hidden="true">
-      <%= render "studio/profiles/pencil_icon" %>
+      The visible label doubles as the ACCESSIBLE NAME, which is why it lives
+      inside the button rather than beside it and why there is no aria-label to
+      drift from it. It is hidden by opacity, never by `display:none` or
+      `visibility:hidden` — those two remove an element from the accessibility
+      tree, which would leave this button silently unnamed for a screen reader
+      at rest. %>
+  <%# `.stop` because the CARD now carries the same handler. Without it the click
+      bubbles and the picker opens twice. %>
+  <button type="button" @click.stop="$refs.filePicker.click()"
+          class="studio-avatar studio-avatar-trigger relative mb-3 mx-auto block rounded-full overflow-hidden"
+          style="<%= avatar_style %>">
+    <%= avatar_inner %>
+
+    <span class="studio-avatar-overlay absolute inset-0 flex items-center justify-center rounded-full text-white font-semibold text-sm px-2 text-center">
+      Change photo
     </span>
-  <% end %>
-</div>
+  </button>
+<% else %>
+  <div class="relative mb-3 studio-avatar mx-auto" style="<%= avatar_style %>">
+    <%= avatar_inner %>
+
+    <% if !editable %>
+      <%# DECORATIVE on the read page, and it has to be: the whole card is a link
+          now, and an <a> inside an <a> is invalid HTML that browsers repair by
+          closing the outer one early — which would silently cut the card's
+          clickable area down to whatever came before the badge. The card carries
+          the destination and the accessible name; this is just the glyph. %>
+      <span class="studio-avatar-badge absolute bottom-0 right-0 flex items-center justify-center rounded-full border-2 border-page bg-primary text-white transition"
+            style="width: 28px; height: 28px;" aria-hidden="true">
+        <%= render "studio/profiles/pencil_icon" %>
+      </span>
+    <% end %>
+  </div>
+<% end %>
 
 <p class="text-3xl font-extrabold text-heading"><%= user.display_name %></p>
 <% if user.respond_to?(:email) && user.email.present? %>

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

@@ -1,7 +1,14 @@
-<%# The avatar badge's reveal.
+<%# The identity header's styles — the read page's badge, the edit page's avatar
+    control, and the compact header that takes over on scroll.
 
-    The badge sits empty until you hover the picture, then the pencil fades in —
-    the operator's call, and it keeps the resting state quiet.
+    TWO DIFFERENT AFFORDANCES, because the two pages ask different questions.
+
+      READ  — the whole card is a link to /profile/edit. A 28px badge sits in the
+              avatar's corner, empty until you hover the card, and then the pencil
+              fades in. Decorative: the card carries the destination.
+      EDIT  — there is no badge. The PICTURE is the button (operator's call,
+              2026-08-15), and hovering the card fades a "Change photo" label over
+              it. A 128px target beats a 28px one, and a label beats a glyph.
 
     WRITTEN AS CSS RATHER THAN TAILWIND UTILITIES on purpose. The engine ships a
     prebuilt bundle to consumers, so a utility only exists if something already
@@ -21,7 +28,8 @@
                       visible there rather than never appearing
 
     The badge circle itself is always visible in every case; it is only the
-    glyph inside it that waits.
+    glyph inside it that waits. The edit page's overlay follows the same three
+    paths for the same reasons.
 %>
 <style>
   .studio-avatar-badge-icon {
@@ -29,19 +37,51 @@
     transition: opacity 200ms ease;
   }
 
-  /* The read page: the whole card is the link, so hovering ANYWHERE on it
-     reveals the glyph. The avatar and badge selectors stay for the edit page,
-     where the badge is its own button. */
+  /* The READ page only. The badge is decorative there and the whole card is the
+     link, so hovering anywhere on it reveals the glyph.
+
+     The edit page's badge-button selectors used to live here and are GONE with
+     the button — the picture itself is the control there now, and its reveal is
+     the overlay block below. A selector for an element that no longer renders is
+     not harmless: it reads as coverage. */
   .studio-identity-card:hover .studio-avatar-badge-icon,
   .studio-identity-card:focus .studio-avatar-badge-icon,
   .studio-identity-card:focus-visible .studio-avatar-badge-icon,
-  .studio-avatar:hover .studio-avatar-badge-icon,
-  .studio-avatar-badge:hover .studio-avatar-badge-icon,
-  .studio-avatar-badge:focus .studio-avatar-badge-icon,
-  .studio-avatar-badge:focus-visible .studio-avatar-badge-icon {
+  .studio-avatar:hover .studio-avatar-badge-icon {
+    opacity: 1;
+  }
+
+  /* ---- THE EDIT PAGE'S AVATAR CONTROL -------------------------------------
+     The picture is the button. A scrim + label fades in over it on hover, so the
+     resting state is just the photo. */
+  .studio-avatar-overlay {
+    opacity: 0;
+    background: rgba(0, 0, 0, 0.55);
+    transition: opacity 200ms ease;
+    /* The label must never be the reason the button changes size. */
+    pointer-events: none;
+  }
+
+  /* Hovering the CARD reveals it (operator's call — not only the picture), and
+     so does focusing the button, because a keyboard never hovers and this is the
+     only route to changing the photo. */
+  .studio-identity-card-editable:hover .studio-avatar-overlay,
+  .studio-avatar-trigger:hover .studio-avatar-overlay,
+  .studio-avatar-trigger:focus .studio-avatar-overlay,
+  .studio-avatar-trigger:focus-visible .studio-avatar-overlay {
     opacity: 1;
   }
 
+  /* The whole card is the trigger, so it has to say so. */
+  .studio-identity-card-clickable { cursor: pointer; }
+
+  /* The button is a bare circle; give focus something to land on that is visible
+     against both a photo and a flat initials colour. */
+  .studio-avatar-trigger:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 3px;
+  }
+
   /* The card reads as clickable before you click it. Kept subtle — this is a
      whole card lighting up, not a button. */
   .studio-identity-card {
@@ -53,18 +93,38 @@
     border-color: var(--color-primary);
   }
 
-  /* No hover to give: show it and be done. */
+  /* No hover to give: show it and be done.
+
+     The overlay is a JUDGEMENT CALL rather than the same rule. Showing the full
+     scrim permanently on touch would hide the photo it is describing, so the
+     label stays but the scrim thins to where the picture still reads through.
+     The affordance exists; the picture is not lost to it. */
   @media (hover: none) {
     .studio-avatar-badge-icon { opacity: 1; }
+
+    .studio-avatar-overlay {
+      opacity: 1;
+      background: rgba(0, 0, 0, 0.35);
+    }
   }
 
   /* The compact header that takes over on scroll. FIXED so it costs no layout
      height while hidden; pinned to the navbar height the host publishes. */
   .studio-identity-mini {
     position: fixed;
-    /* Sits just under the host navbar, with a little air so it reads as a card
-       floating over the page rather than a second navbar welded to the first. */
-    top: calc(var(--nav-h, 0px) + 0.5rem);
+    /* --nav-bottom, NOT --nav-h, and the engine already learned this once: the
+       two differ by exactly the height of any chrome an app stacks ABOVE the
+       navbar, and mcritchie-industries' 47px environment banner is exactly such
+       chrome. test/integration/sidebar_navbar_render_test.rb refuses `--nav-h`
+       for the sidebar panel for this reason; this bar had the same bug.
+       A `fixed` element's `top` is a viewport coordinate, so it must be the
+       header's BOTTOM EDGE.
+
+       FLUSH, with no added gap. It first carried `+ 0.5rem` "so it reads as a
+       card floating over the page"; the operator saw that as a strip of dead
+       space between the navbar and the bar (2026-08-15). The bar is a
+       continuation of the chrome, not a card hovering under it. */
+    top: var(--nav-bottom, var(--nav-h, 0px));
     /* CARD WIDTH, not full bleed. 42rem is max-w-2xl — the page container's
        width — and the calc keeps it inside the viewport's gutters on a narrow
        screen, where a fixed 42rem would run off the edge. Centred with the same
@@ -90,6 +150,7 @@
 
   @media (prefers-reduced-motion: reduce) {
     .studio-avatar-badge-icon,
+    .studio-avatar-overlay,
     .studio-identity-card,
     .studio-identity-mini { transition: none; }
   }

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

@@ -0,0 +1,61 @@
+<%# The newsletter row's two modals, registered into the page's scoped host.
+
+    Locals: user (required).
+
+    BOTH CARRY THE FORM THEY SUBMIT, so there is exactly one place each verb is
+    issued from. A confirmation whose button posts a form elsewhere on the page
+    drifts the moment that form moves.
+
+      newsletter-unsubscribe — the confirmation. DELETE.
+      newsletter-email       — the address capture, for an account with none on
+                               file. POST, with the address in the same request.
+
+    The email modal exists because a wallet-only account (turf-monster has many)
+    has no address, and a newsletter needs somewhere to send. It is written as the
+    account email but NOT marked verified — see the controller for why that
+    distinction is load-bearing.
+%>
+
+<%# --- leaving asks --------------------------------------------------------- %>
+<template x-if="$store.profileModals.current()?.id === 'newsletter-unsubscribe'">
+  <div>
+    <%= render "studio/modals/blocks/card_header",
+          size: :lg,
+          icon: :error,
+          title: "Unsubscribe?",
+          subtitle: "You'll stop receiving updates. You can join again from this page any time." %>
+
+    <%= form_with url: profile_newsletter_path, method: :delete, data: { turbo: false } do %>
+      <button type="submit" class="btn btn-danger btn-lg w-full">Unsubscribe</button>
+    <% end %>
+
+    <button type="button" @click="$store.profileModals.close()"
+            class="block mx-auto mt-3 text-sm text-secondary hover:text-heading transition">
+      Cancel
+    </button>
+  </div>
+</template>
+
+<%# --- joining without an address on file ----------------------------------- %>
+<template x-if="$store.profileModals.current()?.id === 'newsletter-email'">
+  <div>
+    <%= render "studio/modals/blocks/card_header",
+          size: :lg,
+          icon_color: :primary,
+          title: "Where should we send it?",
+          subtitle: "There's no email on this account yet. We'll use this for the newsletter." %>
+
+    <%= form_with url: profile_newsletter_path, method: :post, scope: :profile,
+                  data: { turbo: false } do |f| %>
+      <%= f.email_field :email, required: true, autocomplete: "email",
+                        placeholder: "you@example.com",
+                        class: "input-field w-full mb-3" %>
+      <button type="submit" class="btn btn-primary btn-lg w-full">Subscribe</button>
+    <% end %>
+
+    <button type="button" @click="$store.profileModals.close()"
+            class="block mx-auto mt-3 text-sm text-secondary hover:text-heading transition">
+      Cancel
+    </button>
+  </div>
+</template>

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

@@ -0,0 +1,65 @@
+<%# The newsletter row — subscribe, and unsubscribe behind a confirmation.
+
+    Locals: user (required).
+
+    LIFTED FROM turf-monster's /account card, which has run this flow in
+    production, and deliberately stripped of everything turf-specific on the way:
+    its 25-seed on-chain welcome bonus, its quest state, its seeds level-up
+    payload. What survives is the part every app needs — two states, a join, a
+    leave, and a confirmation before leaving.
+
+    SERVER-RENDERED, not JSON. turf's version POSTs and patches the card in place
+    because it sits beside a live seeds counter that must tick in the same
+    breath. Nothing on /profile is live, so a form and a redirect is the simpler
+    mechanism and the one that still works with no JavaScript at all. The only
+    JavaScript here is the confirmation.
+
+    ASYMMETRIC ON PURPOSE: joining is one click, leaving asks. Joining is
+    reversible from this same card in one more click, so a confirm step would be
+    friction protecting nothing; a mis-click on LEAVE is silent until the next
+    send that never arrives.
+%>
+<% subscribed = Studio::Newsletter.subscribed?(user) %>
+
+<% if subscribed %>
+  <div class="flex items-center justify-between gap-3 flex-wrap">
+    <div class="flex items-center gap-2 min-w-0">
+      <svg class="w-5 h-5 text-primary flex-shrink-0" fill="none" stroke="currentColor"
+           stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
+      </svg>
+      <span class="text-body">Subscribed</span>
+    </div>
+
+    <%# Opens the confirmation rather than submitting. The FORM it submits lives
+        in the modal, so there is exactly one place the DELETE is issued from. %>
+    <button type="button" @click="$store.profileModals.open('newsletter-unsubscribe')"
+            class="text-sm text-secondary hover:text-heading transition underline-offset-2 hover:underline">
+      Unsubscribe
+    </button>
+  </div>
+<% else %>
+  <div class="flex items-center justify-between gap-3 flex-wrap">
+    <p class="text-secondary text-sm min-w-0">
+      <% if Studio::Newsletter.ever_joined?(user) %>
+        You're not on the list. Join again any time.
+      <% else %>
+        Occasional updates. No spam, and one click to leave.
+      <% end %>
+    </p>
+
+    <%# NO EMAIL ON FILE — a wallet-only account. Asking in a modal rather than
+        growing a second inline form keeps the resting card one line, and it is
+        the same shape the operator asked for: the flow uses the modals. %>
+    <% if Studio::Newsletter.needs_email?(user) %>
+      <button type="button" @click="$store.profileModals.open('newsletter-email')"
+              class="btn btn-primary btn-sm flex-shrink-0">
+        Subscribe
+      </button>
+    <% else %>
+      <%= button_to "Subscribe", profile_newsletter_path, method: :post,
+                    class: "btn btn-primary btn-sm flex-shrink-0",
+                    form: { class: "flex-shrink-0" } %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -98,14 +98,31 @@
 <%= render "studio/profiles/form_script" %>
 
 <% if avatar_editable %>
-  <%# Mounted ONCE per page. Two hosts sharing a store name would register the
+  <%# THE `x-data` IS LOAD-BEARING, and this page was missing it. Alpine 3 only
+      initialises trees rooted at an x-data, and studio/modals/_scoped_host
+      declares none of its own — so its outer `<template x-if>` sits inert, the
+      store registers fine, `open()` pushes onto the stack, and NOTHING RENDERS.
+      Every symptom points at the modal id or the store; none of them is the
+      cause.
+
+      This host sits AFTER the studioProfileForm div closes, so it had no Alpine
+      scope above it at all. Found while wiring the newsletter row's confirmation
+      on /profile, where the identical shape produced an identical silent
+      failure — current() returning the right id with no dialog in the document.
+      The engine's other live call site (studio/emails/index.html.erb) renders
+      inside `x-data="emailRecipients(...)"`, which is the only reason this
+      pattern has ever worked anywhere.
+
+      Mounted ONCE per page. Two hosts sharing a store name would register the
       same modal ids twice and render duplicate cards. %>
-  <%= render "studio/modals/scoped_host", store: "profileModals" do %>
-    <template x-if="$store.profileModals.current()?.id === 'crop-photo'">
-      <div><%= render "studio/modals/crop_photo", store: "profileModals" %></div>
-    </template>
-    <template x-if="$store.profileModals.current()?.id === 'saving'">
-      <div><%= render "studio/modals/saving", store: "profileModals" %></div>
-    </template>
-  <% end %>
+  <div x-data>
+    <%= render "studio/modals/scoped_host", store: "profileModals" do %>
+      <template x-if="$store.profileModals.current()?.id === 'crop-photo'">
+        <div><%= render "studio/modals/crop_photo", store: "profileModals" %></div>
+      </template>
+      <template x-if="$store.profileModals.current()?.id === 'saving'">
+        <div><%= render "studio/modals/saving", store: "profileModals" %></div>
+      </template>
+    <% end %>
+  </div>
 <% end %>

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

@@ -6,9 +6,21 @@
 
     Editing lives at /profile/edit. The avatar's badge links there, so the same
     control in the same place means "change this" on both pages.
+
+    THE MODAL HOST IS CONDITIONAL, and that is the registry's `modals:` key doing
+    the job it was documented for. Until the newsletter row shipped, NOTHING on
+    this page opened a modal, so mounting a host would have been furniture for
+    nobody. Now one row asks and the host appears; a host that declares the row
+    away gets no host again, automatically.
+
+    NOT studio/cropper_assets. That is ~40 KB of cropper.js for an upload
+    affordance this page does not have — the avatar is read-only here and the
+    picker lives on /profile/edit. A host is not a cropper.
 %>
 <% content_for(:title, "Profile") %>
 
+<% modal_rows = @profile_sections.to_a.select { |section| section[:modals] } %>
+
 <div class="max-w-2xl mx-auto py-8">
   <%= render "studio/profiles/identity", user: current_user, editable: false %>
 
@@ -26,3 +38,26 @@
     </div>
   <% end %>
 </div>
+
+<% if modal_rows.any? %>
+  <%# THE `x-data` IS LOAD-BEARING, and its absence is silent. Alpine 3 only
+      initialises trees rooted at an x-data, and _scoped_host declares none of its
+      own — its outer `<template x-if>` is inert without an Alpine scope above it.
+      The store still registers, `open()` still pushes onto the stack, and NOTHING
+      RENDERS. Measured on this very page: current() returned the right modal id
+      while the document contained no dialog at all.
+
+      The engine's own live call site (studio/emails/index.html.erb) happens to
+      render the host inside `x-data="emailRecipients(...)"`, which is the only
+      reason this has ever worked anywhere.
+
+      Mounted ONCE per page, on the page's own store — two hosts sharing a store
+      name would register the same ids twice and render duplicate cards. %>
+  <div x-data>
+  <%= render "studio/modals/scoped_host", store: "profileModals" do %>
+    <% modal_rows.each do |section| %>
+      <%= render section[:modals], user: current_user %>
+    <% end %>
+  <% end %>
+  </div>
+<% end %>

data/lib/studio/newsletter.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+# The newsletter subscription's rules. Pure Ruby and duck-typed, like
+# Studio::OauthIdentity and Studio::ProfileImage — it loads without Rails, takes
+# any object that answers the readers, and the unit suite exercises it without
+# booting the dummy app.
+#
+# TWO TIMESTAMPS, NOT A BOOLEAN, and this is the decision the rest of the file
+# follows from. `joined_email_list_at` and `left_email_list_at` are lifted from
+# turf-monster, which has run this shape in production, and the pair carries
+# three states a boolean cannot:
+#
+#   never asked   both nil            — distinct from "unsubscribed"
+#   subscribed    joined after left   — including a REJOIN, where both are set
+#   unsubscribed  left after joined   — and the leave date survives the rejoin
+#
+# The third row is why turf keeps them: its 25-seed welcome bonus is once-ever,
+# guarded on-chain, and "have they EVER joined" is a different question from "are
+# they on the list today". A boolean answers neither. None of turf's seed
+# machinery belongs in the engine — but the state shape does, because a consumer
+# that adopts this and later wants that rule must not have to migrate away from a
+# flag first.
+module Studio
+  module Newsletter
+    module_function
+
+    # The columns a host must have for any of this to mean anything. The profile
+    # row declares the same pair in `requires:`, so a host without them silently
+    # gets no newsletter card rather than a NoMethodError on every page load.
+    COLUMNS = %i[joined_email_list_at left_email_list_at].freeze
+
+    def serves?(user)
+      return false if user.nil?
+
+      COLUMNS.all? { |column| user.respond_to?(column) }
+    end
+
+    # On the list right now.
+    #
+    # `joined > left` rather than `left.nil?`, because a REJOIN leaves both set
+    # and the later date wins. Reading only `left_email_list_at.nil?` would call
+    # every rejoined account unsubscribed forever.
+    def subscribed?(user)
+      return false unless serves?(user)
+
+      joined = user.joined_email_list_at
+      return false if joined.nil?
+
+      left = user.left_email_list_at
+      left.nil? || joined > left
+    end
+
+    # Has this account EVER been on the list? Distinct from `subscribed?`, and the
+    # question a once-ever welcome bonus asks. The engine does not pay bonuses; it
+    # answers the question so a consumer that does never has to reach past this
+    # module into the columns.
+    def ever_joined?(user)
+      serves?(user) && !user.joined_email_list_at.nil?
+    end
+
+    # A newsletter needs somewhere to send. An account with no address on file —
+    # a wallet-only sign-in, which turf-monster has plenty of — has to supply one
+    # before it can subscribe, so the UI asks rather than failing the submit.
+    def needs_email?(user)
+      return false unless serves?(user)
+
+      !user.respond_to?(:email) || user.email.to_s.strip.empty?
+    end
+  end
+end

data/lib/studio/profile_sections.rb

@@ -1,5 +1,12 @@
 # frozen_string_literal: true
 
+# REQUIRED HERE, not left to lib/studio.rb's ordering. DEFAULTS names
+# Studio::Newsletter::COLUMNS at LOAD time, and profile_sections is required
+# BEFORE newsletter in that file — so without this line the constant is undefined
+# and the engine fails to boot. Declaring the dependency where it is used makes
+# the pair immune to a future reorder of that require list.
+require_relative "newsletter"
+
 # Resolves Studio.profile_sections — the rows that make up the shared /profile
 # page — for a given view context. Pure Ruby (no Rails dependency) so the unit
 # suite exercises the resolution rules without booting the dummy app.
@@ -33,12 +40,19 @@
 #              AND `auth_methods = %i[magic_link]` with no omniauth gem at all,
 #              so it would have rendered a "Link Google Account" button leading
 #              nowhere. Having a column is not the same as offering the feature.
-#   modals   — the row opens the shared crop/saving modals. The PAGE mounts them
-#              once (studio/modals/_scoped_host on a "profileModals" store) when
-#              any resolved row asks for them, so a row never has to know whether
-#              the host app renders a modal host of its own. Two of the five
-#              consumers render none at all, and the two that do ship a FORK of
-#              the engine's shared host that would shadow it.
+#   modals   — a partial of modal registrations this row needs, or nil. The PAGE
+#              mounts studio/modals/_scoped_host on a "profileModals" store when
+#              ANY resolved row declares one, and renders each declared partial
+#              inside it — so a row never has to know whether the host app renders
+#              a modal host of its own. Two of the five consumers render none at
+#              all, and the two that do ship a FORK of the engine's shared host
+#              that would shadow it.
+#
+#              A PATH, not a boolean, and not derived from `key`. A host row
+#              declaring modals keeps its partial in the host's own app, so any
+#              convention like "studio/profiles/#{key}_modals" would resolve to a
+#              path that does not exist there. Saying it outright costs one string
+#              and works for everyone.
 #
 # ON `requires` — this is the whole reason the registry exists rather than a
 # hardcoded page. The consuming apps do NOT agree on their users table:
@@ -73,6 +87,19 @@ module Studio
         partial: "studio/profiles/google_section", requires: %i[provider uid],
         if: -> { Studio.auth_method?(:google) } },
 
+      # The mailing list. READ-level for the same reason Google is: it is a state
+      # you look at and occasionally flip, not a field you type into.
+      #
+      # `modals: true` is what makes the page mount a host — leaving asks for
+      # confirmation, and an account with no address on file is asked for one.
+      # This is the FIRST row to declare the flag, which the registry has
+      # documented since it shipped; before this the read page mounted no host at
+      # all, correctly, because nothing asked.
+      { key: :newsletter, title: "Newsletter", page: :show,
+        partial: "studio/profiles/newsletter_section",
+        requires: Studio::Newsletter::COLUMNS,
+        modals: "studio/profiles/newsletter_modals" },
+
       # --- the edit page ------------------------------------------------------
       # These are FIELDS in one form with one Save, so they carry no buttons of
       # their own. Email included: it needed a separate action only while it was

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.51.0"
+  VERSION = "0.52.0"
 end

data/lib/studio.rb

@@ -10,6 +10,7 @@ require "studio/sidebar_sections"
 require "studio/profile_sections"
 require "studio/profile_image"
 require "studio/oauth_identity"
+require "studio/newsletter"
 require "studio/username_generator"
 require "studio/s3"
 require "studio/image_cache"
@@ -690,6 +691,14 @@ module Studio
         # here: it is OmniAuth's own /auth/:provider, which the middleware owns.
         delete "profile/google", to: "studio/profiles#unlink_google",
                as: :profile_unlink_google
+
+        # POST joins, DELETE leaves — the verbs the two actions actually are, on
+        # one path. Not a PATCH on the profile: subscribing is its own decision
+        # with its own confirmation, and folding it into the bulk field save would
+        # mean every name change re-asserted a mailing-list preference.
+        post   "profile/newsletter", to: "studio/profiles#subscribe_newsletter",
+               as: :profile_newsletter
+        delete "profile/newsletter", to: "studio/profiles#unsubscribe_newsletter"
       end
 
       resources :error_logs, only: [:index, :show]

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.51.0
+  version: 0.52.0
 platform: ruby
 authors:
 - Alex McRitchie
@@ -339,6 +339,7 @@ files:
 - app/views/studio/profile_mailer/email_change_notification.html.erb
 - app/views/studio/profile_mailer/email_change_notification.text.erb
 - app/views/studio/profiles/_birthday_fields.html.erb
+- app/views/studio/profiles/_birthday_picker_script.html.erb
 - app/views/studio/profiles/_editable_identity.html.erb
 - app/views/studio/profiles/_email_fields.html.erb
 - app/views/studio/profiles/_form_script.html.erb
@@ -348,6 +349,8 @@ files:
 - app/views/studio/profiles/_identity_mini.html.erb
 - app/views/studio/profiles/_identity_styles.html.erb
 - app/views/studio/profiles/_name_fields.html.erb
+- app/views/studio/profiles/_newsletter_modals.html.erb
+- app/views/studio/profiles/_newsletter_section.html.erb
 - app/views/studio/profiles/_pencil_icon.html.erb
 - app/views/studio/profiles/_save_bar.html.erb
 - app/views/studio/profiles/edit.html.erb
@@ -392,6 +395,7 @@ files:
 - lib/studio/link_token.rb
 - lib/studio/log_rotation.rb
 - lib/studio/mail_transport.rb
+- lib/studio/newsletter.rb
 - lib/studio/oauth_identity.rb
 - lib/studio/profile_image.rb
 - lib/studio/profile_sections.rb