studio-engine 0.47.2 → 0.49.0

data/app/models/concerns/studio/user_profile.rb

@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+require "digest"
+
+module Studio
+  # The four things every Studio app's User has had to define for itself: how to
+  # name a person on screen, and how to draw them when they have no picture.
+  #
+  # WHY THIS EXISTS. The engine's own components/_avatar partial calls
+  # `display_name`, `avatar_initials` and `avatar_color` — and the engine has
+  # never provided any of them. Every consumer wrote its own; mcritchie-industries'
+  # user.rb even carries a comment explaining that it must, because the engine's
+  # nav renders the partial. Three copies, and by 2026-08-14 they had drifted:
+  #
+  #   mcritchie-studio      name → email prefix (capitalized) → wallet → "anon"
+  #   mcritchie-industries  name → email prefix (raw)                  → "User"
+  #   turf-monster          username → name → email prefix (cap) → wallet → "anon"
+  #
+  # Same intent, three answers, and two different words for the same empty state.
+  # That is the drift a concern removes.
+  #
+  # ON THE MERGED CHAIN. It is turf-monster's — the richest of the three — with
+  # `first_name` folded in after `name`, because /profile now lets people set that
+  # field and a name someone just typed should be the name they see. Apps missing
+  # a link in the chain simply skip it; the chain is respond_to?-guarded end to
+  # end, so mcritchie-industries' eight-column users table walks it without
+  # raising. One consequence worth stating rather than burying: an MI user with no
+  # name now falls back to "anon" instead of "User", and an email-derived name is
+  # capitalized. That is MI adopting the house standard, and its adoption task
+  # owns the change.
+  #
+  # EVERY METHOD IS OVERRIDABLE. These are plain instance methods from an included
+  # module, so a host that defines its own `display_name` in the class body wins
+  # outright. Standardizing the default is the goal; forbidding an app from having
+  # an opinion is not.
+  module UserProfile
+    extend ActiveSupport::Concern
+
+    # The house palette for initial-circle backgrounds. Identical in all three
+    # apps today, which is the clearest possible signal it belonged here.
+    AVATAR_COLORS = %w[#EF4444 #F97316 #EAB308 #22C55E #06B6D4 #3B82F6 #8B5CF6 #EC4899].freeze
+
+    # What to call this person on screen.
+    def display_name
+      studio_profile_username.presence ||
+        studio_profile_attr(:name).presence ||
+        studio_profile_attr(:first_name).presence ||
+        studio_profile_email_prefix.presence ||
+        studio_profile_wallet.presence ||
+        "anon"
+    end
+
+    # One character for the initials circle. Deliberately NOT derived from
+    # display_name: that chain ends in a wallet address or the word "anon", and
+    # "a" for every anonymous account is worse than a neutral mark.
+    def avatar_initials
+      source = studio_profile_username.presence ||
+               studio_profile_attr(:name).presence ||
+               studio_profile_attr(:first_name).presence ||
+               studio_profile_email_prefix.presence
+
+      # `source[0]`, not ActiveSupport's `String#first`: this module is included
+      # into a host model, and nothing here should depend on which core_ext that
+      # host happens to have loaded. Plain Ruby costs nothing and cannot vanish.
+      source.presence.to_s[0]&.upcase || "?"
+    end
+
+    # A stable colour for this account — same person, same circle, every render.
+    # Hashed rather than random for exactly that reason, and keyed off identity
+    # fields so it survives a display-name change.
+    def avatar_color
+      key = studio_profile_username.presence ||
+            studio_profile_attr(:name).presence ||
+            studio_profile_attr(:email).presence ||
+            id.to_s
+
+      AVATAR_COLORS[Digest::MD5.hexdigest(key.to_s).hex % AVATAR_COLORS.size]
+    end
+
+    private
+
+    # Read an attribute only if this host's model actually has it. The whole
+    # tolerance of the chain lives in this one method.
+    def studio_profile_attr(attribute)
+      return nil unless respond_to?(attribute)
+
+      public_send(attribute)
+    end
+
+    # `username` is turf-monster's on-chain handle and does not exist in the hub
+    # apps. It leads the chain where it exists because it is what that app's
+    # people call each other.
+    def studio_profile_username
+      studio_profile_attr(:username)
+    end
+
+    def studio_profile_email_prefix
+      email = studio_profile_attr(:email)
+      return nil if email.blank?
+
+      email.to_s.split("@").first.to_s.capitalize
+    end
+
+    # Defers to the host's own truncation rather than reformatting an address
+    # here — mcritchie-studio and turf-monster both define `truncated_solana`,
+    # and turf's has to pick between a web2 and a web3 address to do it.
+    def studio_profile_wallet
+      studio_profile_attr(:truncated_solana)
+    end
+  end
+end

data/app/services/studio/email_catalog.rb

@@ -193,6 +193,27 @@ module Studio
         # inherited email with no preview is a row on every app's manager that
         # cannot be looked at.
         preview: -> { Studio::NewsletterMailer.subscribed("preview@example.com", name: "Alex") }
+      },
+      {
+        key: "email_change_notification",
+        label: "Email change — heads up",
+        description: "Sent to the OLD address after a change lands, so an unauthorized change is visible rather than silent.",
+        # Reuses the shipped email-change artwork. The asset is named for a
+        # confirmation email that no longer exists; the picture is right for the
+        # subject either way, and renaming a shipped asset is its own migration.
+        default_asset: "emails/email-change-confirmation.gif",
+        header: "Your email was changed",
+        header_fallback: "Your email was changed",
+        subtext: "a heads-up from {app}",
+        subject: "Your {app} email was changed",
+        body: "The email address on your {app} account was just changed. " \
+              "If you did not do this, contact us straight away — this message " \
+              "was sent to your previous address on purpose.",
+        # No button: there is nothing to click. The point is the notice itself.
+        supports_cta: false,
+        preview: lambda {
+          Studio::ProfileMailer.email_change_notification(nil, "old@example.com", "new@example.com")
+        }
       }
     ].freeze
 

data/app/views/components/_user_nav.html.erb

@@ -40,6 +40,33 @@
      end
    end %>
 
+<%# Where the username and the avatar point — resolved ONCE, used by both.
+
+    A HOST'S OWN account_path WINS: an app that already has an account page keeps
+    it rather than being repointed at a thinner /profile by a routine dependency
+    bump. An app adopting /profile flips over by DELETING its account route, so
+    the last step of the migration is the deliberate one.
+
+    NO CONSUMER EXERCISES THAT BRANCH TODAY, and the comment here said otherwise
+    until 2026-08-14. turf-monster is the only app with an account_path, and it
+    ships its own app/views/components/_user_nav.html.erb — a host view SHADOWS
+    the engine's in this non-isolated engine, so turf never renders THIS file.
+    The rule is for apps that adopt /profile later.
+
+    nil when NEITHER exists, and then the name and avatar render as plain text.
+    They used to render `href="#"`, which was not a graceful degradation but a
+    dead link. Who that actually reached: mcritchie-industries and
+    acquisition-studio — the consumers rendering this partial rather than a fork
+    of it. A link that goes nowhere looks identical to one that works until it is
+    clicked, which is why nobody reported it.
+%>
+<% studio_nav_destination =
+     if defined?(account_path)
+       account_path
+     elsif defined?(profile_path)
+       profile_path
+     end %>
+
 <div class="flex gap-2">
   <% if logged_in? %>
     <%# Left column: Div 1 + Div 2 stacked %>
@@ -61,9 +88,11 @@
           <%= render "components/admin_dropdown" unless respond_to?(:studio_sidebar_replaces_admin_menu?) && studio_sidebar_replaces_admin_menu? %>
           <%= render "components/theme_toggle_morph" %>
         </div>
-        <% account_link = defined?(account_path) ? account_path : "#" %>
-        <%= link_to account_link, class: "text-heading font-semibold hover:text-primary transition text-base leading-none truncate text-right" do %>
-          <%= current_user.display_name %>
+        <% nav_name_classes = "text-heading font-semibold hover:text-primary transition text-base leading-none truncate text-right" %>
+        <% if studio_nav_destination %>
+          <%= link_to current_user.display_name, studio_nav_destination, class: nav_name_classes %>
+        <% else %>
+          <span class="<%= nav_name_classes %>"><%= current_user.display_name %></span>
         <% end %>
       </div>
       <% div2_content = studio_nav_slot.call(div2_slot, div2_html) %>
@@ -168,9 +197,14 @@
       <% end %>
     </div>
     <%# Div 3 (Avatar): spans both rows %>
-    <% account_link = defined?(account_path) ? account_path : "#" %>
-    <%= link_to account_link, class: "hover:opacity-80 transition flex-shrink-0 flex items-center", "x-bind:style": "$store.devMode && 'background: lightgreen'" do %>
-      <%= render "components/avatar", user: current_user, size: "nav" %>
+    <% if studio_nav_destination %>
+      <%= link_to studio_nav_destination, class: "hover:opacity-80 transition flex-shrink-0 flex items-center", "x-bind:style": "$store.devMode && 'background: lightgreen'" do %>
+        <%= render "components/avatar", user: current_user, size: "nav" %>
+      <% end %>
+    <% else %>
+      <span class="flex-shrink-0 flex items-center" x-bind:style="$store.devMode && 'background: lightgreen'">
+        <%= render "components/avatar", user: current_user, size: "nav" %>
+      </span>
     <% end %>
   <% else %>
     <%= render "components/admin_dropdown" unless respond_to?(:studio_sidebar_replaces_admin_menu?) && studio_sidebar_replaces_admin_menu? %>

data/app/views/studio/profile_mailer/email_change_notification.html.erb

@@ -0,0 +1,30 @@
+<%# Body only — branded_mailer supplies the banner + card.
+
+    NO BUTTON, deliberately: there is nothing to click. This email exists so an
+    unauthorised change is VISIBLE to the person losing the account, and the
+    catalogue entry sets supports_cta: false to match. Adding a CTA here would
+    invite someone to click their way somewhere from a message that may itself
+    be the first sign of a compromise.
+%>
+<%
+  body = @body.presence || Studio::EmailCatalog.body(:email_change_notification)
+%>
+<h1 style="margin:0 0 18px;font-size:22px;line-height:1.3;color:#1f2a1c;">Your email was changed</h1>
+
+<% if body.present? %>
+  <%= simple_format body, { style: "margin:0 0 24px;font-size:16px;line-height:1.6;color:#3f4a3c;" }, sanitize: true %>
+<% end %>
+
+<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0 0 24px;">
+  <tr>
+    <td style="padding:14px 16px;background:#f4f6f3;border-radius:10px;font-size:15px;line-height:1.6;color:#3f4a3c;">
+      <strong style="color:#2f3a2c;">Was:</strong> <%= @old_email %><br>
+      <strong style="color:#2f3a2c;">Now:</strong> <%= @new_email %>
+    </td>
+  </tr>
+</table>
+
+<p style="margin:28px 0 0;font-size:13px;line-height:1.5;color:#6b756a;text-align:center;">
+  This message was sent to <strong style="color:#2f3a2c;"><%= @old_email %></strong> — your previous
+  address — on purpose, so a change you did not make cannot happen quietly.
+</p>

data/app/views/studio/profile_mailer/email_change_notification.text.erb

@@ -0,0 +1,11 @@
+The email address on your <%= @app_name %> account was just changed.
+
+  Was: <%= @old_email %>
+  Now: <%= @new_email %>
+
+If you did not do this, contact us straight away.
+
+This message was sent to <%= @old_email %> — your previous address — on purpose,
+so a change you did not make cannot happen quietly.
+
+— <%= @app_name %>

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

@@ -0,0 +1,93 @@
+<%# Profile photo row — lifted from turf-monster's /account, which is the
+    interaction the operator wants standardized: click the avatar, hover reveals
+    an "Update" cap, pick a file, crop it square, and it saves immediately. No
+    Save button, no visible file field.
+
+    Locals: user (required).
+
+    HOW IT HANGS TOGETHER
+      imageUploadHost()      the engine's crop-then-immediate-save x-data factory
+                             (studio/modals/_image_upload). onFileSelected() reads
+                             the picked file and opens the crop modal; the modal
+                             dispatches the cropped Blob back on
+                             'crop-photo-confirmed'; applyCrop() drops it into the
+                             hidden form's file input and submits with a saving
+                             card.
+      profileModals          the PAGE-SCOPED Alpine store mounted by show.html.erb.
+                             Not the shared "modals" store — see below.
+      profile_avatar_path    its own endpoint, because an attachment param
+                             submitted empty PURGES the attachment.
+
+    WHY THE PAGE-SCOPED STORE AND NOT `modals`. turf's copy opens on
+    Alpine.store('modals') — the app's shared modal host — which works there
+    because turf's layout mounts one and registers crop-photo in it. Two of the
+    five consumers (mcritchie-industries, moms-app) render NO shared host at all,
+    and the two that do would each have to add a crop-photo registration to their
+    layout before this row worked. An engine page cannot ask that. show.html.erb
+    mounts studio/modals/_scoped_host instead, so the page brings its own modals
+    and this row behaves identically in every app. /admin/emails already does
+    exactly this.
+
+    WHY onCropConfirmed AND NOT applyCrop DIRECTLY. turf's call site binds
+    `applyCrop($event.detail.blob)`, which predates the owner guard. Every
+    imageUploadHost on a page hears the same window event, so a page that later
+    grows a second uploader (a host row with its own image) would have both
+    hosts save the same crop. onCropConfirmed() checks the owner token first and
+    is a strict improvement at the same call cost.
+
+    ON THE INLINE PIXEL SIZES. Same reason turf gives: the exact circle geometry
+    is expressed inline rather than through w-24/h-24, because a size utility
+    only exists if something already emitted it into the compiled bundle. The
+    classes used here (group-hover:opacity-100, rounded-full, object-cover,
+    absolute inset-0) already ship in other engine partials.
+%>
+<div x-data="imageUploadHost({
+       store: 'profileModals',
+       aspectRatio: 1,
+       filename: 'avatar.png',
+       saving: 'Saving photo…',
+       toast: false
+     })"
+     @crop-photo-confirmed.window="onCropConfirmed($event.detail)"
+     class="flex flex-col items-center">
+
+  <%# Auto-submitted once a crop is confirmed. Hidden because the person never
+      touches it — applyCrop() writes the cropped File onto fileInput and calls
+      submitFormWithProgress on form. %>
+  <%= form_with url: profile_avatar_path, method: :patch, scope: :profile,
+                html: { multipart: true, "x-ref": "form", class: "hidden" } do %>
+    <input type="file" name="profile[avatar]" x-ref="fileInput">
+  <% end %>
+
+  <%# The real picker. Opened by the avatar button; never shown. %>
+  <input type="file" x-ref="filePicker" @change="onFileSelected($event)"
+         accept="<%= Studio::ProfileImage::ALLOWED_CONTENT_TYPES.join(",") %>" class="hidden">
+
+  <%# The clickable avatar. A BUTTON rather than turf's <div @click>: a div is
+      unreachable by keyboard and invisible to a screen reader, so the only way
+      to change your photo would be a mouse. Same visual, and it focuses. %>
+  <button type="button"
+          @click="$refs.filePicker.click()"
+          aria-label="Change your profile photo"
+          style="width: 96px; height: 96px;"
+          class="relative rounded-full cursor-pointer group overflow-hidden mb-3 flex-shrink-0 p-0 border-0 bg-transparent">
+    <% if user.avatar.attached? %>
+      <%= image_tag user.avatar, class: "rounded-full object-cover",
+                    style: "width: 96px; height: 96px;", alt: user.display_name %>
+    <% else %>
+      <div class="rounded-full flex items-center justify-center font-bold text-white text-3xl"
+           style="width: 96px; height: 96px; background-color: <%= user.avatar_color %>">
+        <%= user.avatar_initials %>
+      </div>
+    <% end %>
+
+    <%# The hover cap. group-hover reveals it on pointer; focus-within is the
+        keyboard equivalent, so a tabbing user sees the same affordance. %>
+    <span class="absolute inset-0 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200"
+          style="background: rgba(0,0,0,0.5)">
+      <span class="text-white text-xs font-bold">Update</span>
+    </span>
+  </button>
+
+  <div class="text-xl font-bold text-heading"><%= user.display_name %></div>
+</div>

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

@@ -0,0 +1,55 @@
+<%# Email row.
+
+    Locals: user (required).
+
+    DIRECT CHANGE from any signed-in session (operator's call, 2026-08-14). The
+    earlier build mailed a confirmation link to the current address and applied
+    the change only when someone clicked it; the session is the authority now.
+    The row therefore saves what you type, and the copy says so plainly rather
+    than implying a pending step that no longer exists.
+
+    THE GOOGLE EXCEPTION. An account with a linked Google identity cannot change
+    its email here — Google is the authoritative source for that address, and
+    letting the two drift means the next OAuth sign-in either re-links to a
+    stranger's row or cannot find its own. The locked branch renders NO form at
+    all — there is nothing to type into and nothing to submit — and
+    ProfilesController#email refuses the request independently anyway, because a
+    missing form is a courtesy and anyone can POST.
+
+    Gated on a real delta for the same reason the name row is — an empty field,
+    or the address you already have, is not a change.
+%>
+<% locked = Studio::OauthIdentity.google_linked?(user) %>
+<% current = user.email.to_s.strip %>
+
+<% if locked %>
+  <p class="text-sm text-secondary mb-1">Current address</p>
+  <p class="text-heading font-semibold mb-3 break-all"><%= user.email %></p>
+  <div class="rounded-lg p-3 flex items-start gap-2" style="background: var(--color-surface-alt);">
+    <span aria-hidden="true">🔒</span>
+    <p class="text-muted text-xs">
+      This comes from your linked Google account. Unlink Google below if you want to change it.
+    </p>
+  </div>
+<% else %>
+  <%= form_with url: profile_email_path, method: :patch, scope: :profile,
+                data: { turbo: false },
+                html: { "x-data": "{ current: #{current.downcase.to_json}, value: #{current.to_json} }" },
+                class: "flex flex-wrap items-end gap-3" do |form| %>
+    <div class="flex-1 min-w-0" style="min-width: 14rem;">
+      <label class="block text-sm text-secondary mb-2 font-medium" for="profile_email">Email</label>
+      <%= form.email_field :email, value: user.email, autocomplete: "email",
+                           placeholder: "you@example.com", class: "input-field",
+                           "x-model": "value" %>
+    </div>
+    <%= form.submit "Update",
+                    class: "btn btn-primary",
+                    ":disabled": "value.trim() === '' || value.trim().toLowerCase() === current",
+                    ":class": "(value.trim() === '' || value.trim().toLowerCase() === current) && 'opacity-50 cursor-not-allowed'" %>
+  <% end %>
+  <% if current.present? %>
+    <p class="text-muted text-xs mt-2">
+      We'll let <span class="font-semibold"><%= user.email %></span> know it changed, and sign out your other devices.
+    </p>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,42 @@
+<%# First-name row.
+
+    Locals: user (required).
+
+    PREFILLED, with the Update button to the right of the input and DISABLED
+    until the value actually differs (operator's call, 2026-08-14). A blank field
+    made you retype a name you had already set just to see what it was, and an
+    always-live Save invited a no-op write that flashed "Name updated." over a
+    change nobody made.
+
+    The delta is computed against the value the server rendered, and both sides
+    are trimmed — leading or trailing whitespace is not a change, and the
+    controller trims on the way in too, so the button agrees with what the server
+    would actually do.
+
+    NO-JS FALLBACK: the button carries no `disabled` attribute in the markup;
+    Alpine adds it on init. A page whose JS never ran therefore gets a working,
+    always-enabled Save rather than a control it can never turn on — the server
+    re-checks anyway.
+
+    This row only renders when the host's user model answers `first_name`
+    (Studio::ProfileSections drops it otherwise), so nothing here re-checks.
+%>
+<%= form_with url: profile_path, method: :patch, scope: :profile,
+              data: { turbo: false },
+              html: { "x-data": "{ initial: #{user.first_name.to_s.strip.to_json}, value: #{user.first_name.to_s.strip.to_json} }" },
+              class: "flex flex-wrap items-end gap-3" do |form| %>
+  <div class="flex-1 min-w-0" style="min-width: 12rem;">
+    <label class="block text-sm text-secondary mb-2 font-medium" for="profile_first_name">First name</label>
+    <%= form.text_field :first_name,
+                        value: user.first_name,
+                        maxlength: Studio::FIRST_NAME_MAX_LENGTH,
+                        autocomplete: "given-name",
+                        placeholder: "What should we call you?",
+                        class: "input-field",
+                        "x-model": "value" %>
+  </div>
+  <%= form.submit "Update",
+                  class: "btn btn-primary",
+                  ":disabled": "value.trim() === initial.trim()",
+                  ":class": "value.trim() === initial.trim() && 'opacity-50 cursor-not-allowed'" %>
+<% end %>

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

@@ -0,0 +1,56 @@
+<%# Google account row — lifted from turf-monster's /account Identities card.
+
+    Locals: user (required).
+
+    Two states. LINKED: a tick, "Connected via Google", and an Unlink button
+    behind a confirm. NOT LINKED: the branded Connect button, which POSTs to
+    OmniAuth's own /auth/google_oauth2 — the engine does not draw that path, the
+    middleware owns it, which is why this is a literal string and not a helper.
+
+    The row only renders when the host's user model answers provider AND uid
+    (Studio::ProfileSections drops it otherwise), so nothing here re-checks.
+
+    ON THE PREDICATE: turf's view asks `@user.google_connected?`, a method only
+    turf defines. The engine cannot call that — it reads provider/uid itself
+    through Studio::OauthIdentity, which also matches BOTH spellings that appear
+    in the wild (`google_oauth2` from the OmniAuth strategy, `google` from
+    Studio.auth_methods).
+%>
+<% linked = Studio::OauthIdentity.google_linked?(user) %>
+
+<% if linked %>
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <div class="flex items-center gap-3">
+      <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" stroke-width="2" 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">Connected via Google</span>
+    </div>
+
+    <%# The button is rendered either way; when unlinking would orphan the
+        account it is DISABLED with the reason beside it, rather than hidden.
+        A control that vanishes teaches nothing — the person cannot tell whether
+        the feature is missing or their account is special. The server refuses
+        this case regardless (ProfilesController#unlink_google); this is the
+        explanation, not the enforcement. %>
+    <% orphans = Studio::OauthIdentity.unlink_orphans_account?(user) %>
+    <% if orphans %>
+      <div class="text-right">
+        <button type="button" disabled
+                class="btn btn-danger btn-sm opacity-50 cursor-not-allowed"
+                title="Google is currently the only way to sign in">Unlink</button>
+        <p class="text-muted text-xs mt-1">Add an email address first — Google is your only sign-in.</p>
+      </div>
+    <% else %>
+      <%= button_to "Unlink", profile_unlink_google_path, method: :delete,
+                    class: "btn btn-danger btn-sm",
+                    data: { turbo_confirm: "Unlink your Google account?" } %>
+    <% end %>
+  </div>
+<% else %>
+  <%= button_to "/auth/google_oauth2", method: :post, data: { turbo: false },
+                class: "btn btn-google gap-3 w-full" do %>
+    <%= render "components/google_logo" %>
+    Link Google Account
+  <% end %>
+<% end %>

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

@@ -0,0 +1,81 @@
+<%# The shared /profile page.
+
+    A bare content wrapper, not a layout: it renders inside the host's
+    application layout and inherits that app's navbar, theme and flash. Same
+    shape as /admin/style and /admin/emails.
+
+    ONE CARD, rows inside it (operator's call, 2026-08-14). Each row used to be
+    its own card, which read as four unrelated settings pages stacked up rather
+    than one profile. Rows are separated by a hairline instead, so the page has a
+    single edge and the eye runs down one column.
+
+    The page is still nothing but its sections. @profile_sections is already
+    resolved and filtered by the controller (Studio.profile_sections_for) — rows
+    the host cannot serve, and admin rows for non-admins, are gone before we get
+    here — so this template makes no decisions of its own beyond the empty state.
+%>
+<% content_for(:title, "Profile") %>
+
+<%# Does any resolved row need the crop/saving modals? A row declares
+    `modals: true` and the page mounts them once, here.
+
+    The page owns its modal host DELIBERATELY. The obvious alternative — render
+    "studio/modals/host" and let the app supply it — fails in both directions:
+    mcritchie-industries and moms-app render no shared host at all, so there
+    would be nowhere to open a modal from; and mcritchie-studio and turf-monster
+    each ship their OWN app/views/studio/modals/_host.html.erb, which shadows the
+    engine's in this non-isolated engine, so the page would silently get their
+    fork and its registrations. studio/modals/_scoped_host is unforked in every
+    app. /admin/emails reached the same conclusion first. %>
+<%# Mounted ONCE per page, not once per row. Two hosts sharing a store name
+    would register the same modal ids twice and render duplicate cards, so the
+    page owns the host and the rows only ask for it. %>
+<% profile_needs_modals = Array(@profile_sections).any? { |section| section[:modals] } %>
+
+<% if profile_needs_modals %>
+  <%# cropper.js + the imageUploadHost / cropPhotoModal / submitFormWithProgress
+      factories. Loaded only when a row can actually open the cropper, which is
+      the whole reason this is a partial and not a global include. %>
+  <%= render "studio/cropper_assets" %>
+<% end %>
+
+<div class="max-w-2xl mx-auto py-8">
+  <h1 class="text-2xl font-extrabold text-heading mb-8">Profile</h1>
+
+  <% if @profile_sections.blank? %>
+    <%# Reachable, and worth rendering honestly rather than as a blank page: an
+        app whose user model serves none of the declared rows (no avatar
+        attachment, no first_name column) lands here until it installs the
+        standard profile columns. %>
+    <%= render "components/empty_state",
+               message: "Nothing to edit yet",
+               detail: "This app has not enabled any profile fields." %>
+  <% else %>
+    <div class="card p-0 overflow-hidden">
+      <% @profile_sections.each_with_index do |section, index| %>
+        <%# The divider is a TOP border on every row but the first, so a row can
+            be added or dropped anywhere without leaving a trailing rule. %>
+        <section class="p-6 <%= "border-t border-subtle" unless index.zero? %>"
+                 data-profile-section="<%= section[:key] %>">
+          <% if section[:title].present? %>
+            <h2 class="text-sm font-bold text-heading mb-4"><%= section[:title] %></h2>
+          <% end %>
+          <%= render section[:partial], **section.fetch(:locals, {}).merge(user: current_user) %>
+        </section>
+      <% end %>
+    </div>
+  <% end %>
+</div>
+
+<% if profile_needs_modals %>
+  <%# Optional chaining on current() is load-bearing: the outer template unmounts
+      one tick AFTER the stack empties, so a bare .id throws on every close. %>
+  <%= 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 %>
+<% end %>