studio-engine 0.118.0 → 0.119.0

data/app/javascript/studio/loader.js

@@ -0,0 +1,214 @@
+// studio/loader: drives the branded loader's two live states (docs/LOADER.md).
+// The motion itself is CSS (engine-motion.css, "Branded loader"); this module
+// only decides WHEN the page-load overlay shows and marks busy buttons.
+//
+//   the overlay   [data-studio-loader-overlay], rendered once by
+//                 studio_loader_overlay. Shown when a visit the USER started (a
+//                 Turbo advance or restore; never a replace, a refresh, a frame
+//                 or a prefetch), or a submit of a form marked
+//                 data-studio-loader-overlay, outlasts the overlay's data-delay
+//                 ms; hidden when the page arrives. Its role=status label is
+//                 announced: the overlay never marks itself aria-busy.
+//   pending       a button holding studio_loader_pending. Turbo marks a
+//                 submitting form aria-busy itself; for a form Turbo does not
+//                 drive, the submitter is marked here, and cleared on pagehide
+//                 and on pageshow (a bfcache restore).
+//   the cap       a submit Turbo does not drive clears its overlay and button
+//                 after data-max-wait ms (MAX_WAIT_MS by default): a response that
+//                 turned into a download replaces no page, so nothing else
+//                 would. A Turbo visit is never capped; a non-HTML response
+//                 clears at once, on turbo:reload.
+//   the API       window.StudioLoader.show(caption) / hide() for any other long
+//                 wait, and setPercent(el, n) for a loader drawn with percent:.
+//
+// The logic is exported for test/javascript/loader.test.mjs.
+
+export var DEFAULT_DELAY_MS = 350
+export var MAX_WAIT_MS = 15000
+
+// Only a visit the user started earns the overlay: a click or Turbo.visit
+// (advance) and Back or Forward (restore). A replace is a background refresh
+// (a poll, Turbo 8's page refresh); frames and prefetches never fire turbo:visit.
+export function userVisit(event) {
+  var action = event && event.detail && event.detail.action
+  return action === 'advance' || action === 'restore'
+}
+
+export function overlayDelay(overlay) {
+  var value = overlay ? parseInt(overlay.getAttribute('data-delay'), 10) : NaN
+  return value >= 0 ? value : DEFAULT_DELAY_MS
+}
+
+// The percent a caller handed setPercent, clamped to a number in 0..100.
+export function clampPercent(value) {
+  var n = Number(value)
+  if (!isFinite(n)) return 0
+  return Math.min(100, Math.max(0, n))
+}
+
+export function maxWait(overlay) {
+  var value = overlay ? parseInt(overlay.getAttribute('data-max-wait'), 10) : NaN
+  return value > 0 ? value : MAX_WAIT_MS
+}
+
+function findOverlay(doc) {
+  return doc.querySelector('[data-studio-loader-overlay]')
+}
+
+var pendingTimer = null
+var capTimer = null
+var autoShown = false
+
+// The overlay's status is a live region; rewriting its label after the overlay
+// unhides makes a screen reader say it, where text already present when a
+// region appears is often skipped. The label is kept in data-studio-loader-label,
+// so a second show inside the gap restores it rather than the emptied text.
+function announce(overlay, doc) {
+  var label = overlay.querySelector('[role="status"] .sr-only')
+  if (!label) return
+  var text = label.getAttribute('data-studio-loader-label')
+  if (text === null) { text = label.textContent; label.setAttribute('data-studio-loader-label', text) }
+  label.textContent = ''
+  var win = doc.defaultView
+  ;(win && win.setTimeout ? win.setTimeout.bind(win) : setTimeout)(function () { label.textContent = text }, 50)
+}
+
+export function show(caption, doc) {
+  doc = doc || document
+  clearTimeout(pendingTimer)
+  pendingTimer = null
+  autoShown = false
+  var overlay = findOverlay(doc)
+  if (!overlay) return false
+  var line = overlay.querySelector('[data-studio-loader-caption]')
+  if (line) line.textContent = caption || ''
+  overlay.hidden = false
+  announce(overlay, doc)
+  // One frame hidden=false at opacity 0, then fade in.
+  var raf = (doc.defaultView && doc.defaultView.requestAnimationFrame) || function (fn) { return setTimeout(fn, 16) }
+  raf(function () { if (!overlay.hidden) overlay.setAttribute('data-state', 'shown') })
+  return true
+}
+
+export function hide(doc) {
+  doc = doc || document
+  clearTimeout(pendingTimer)
+  pendingTimer = null
+  var overlay = findOverlay(doc)
+  if (!overlay) return false
+  overlay.removeAttribute('data-state')
+  overlay.hidden = true
+  return true
+}
+
+// Clear the buttons studio/loader marked busy (never one a page marked itself).
+export function clearBusy(doc) {
+  doc = doc || document
+  clearTimeout(capTimer)
+  capTimer = null
+  var marked = doc.querySelectorAll('[data-studio-loader-busy]')
+  for (var i = 0; i < marked.length; i++) {
+    marked[i].removeAttribute('aria-busy')
+    marked[i].removeAttribute('data-studio-loader-busy')
+  }
+}
+
+// Hide the overlay and clear every busy button: the page is ours again.
+export function settle(doc) {
+  doc = doc || document
+  hide(doc)
+  clearBusy(doc)
+}
+
+// The cap never hides an overlay a caller showed through StudioLoader.show().
+function armCap(doc) {
+  clearTimeout(capTimer)
+  capTimer = setTimeout(function () {
+    var shownByUs = autoShown
+    clearBusy(doc)
+    if (shownByUs) hide(doc)
+  }, maxWait(findOverlay(doc)))
+}
+
+// Show after the overlay's delay, so a fast load never flashes it. Uncapped: a
+// slow Turbo visit keeps its overlay until the page arrives.
+export function showSoon(caption, doc) {
+  doc = doc || document
+  var overlay = findOverlay(doc)
+  if (!overlay || !overlay.hidden) return
+  clearTimeout(pendingTimer)
+  pendingTimer = setTimeout(function () { show(caption, doc); autoShown = true }, overlayDelay(overlay))
+}
+
+export function markBusy(button, doc) {
+  doc = doc || document
+  button.setAttribute('aria-busy', 'true')
+  button.setAttribute('data-studio-loader-busy', '')
+  armCap(doc)
+}
+
+export function setPercent(el, value) {
+  if (!el) return
+  var loader = el.classList && el.classList.contains('studio-loader') ? el : el.querySelector('.studio-loader')
+  if (!loader) return
+  loader.setAttribute('data-loader-percent', '')
+  loader.style.setProperty('--studio-loader-percent', String(clampPercent(value)))
+}
+
+// A submitter that carries a pending loader.
+export function pendingSubmitter(event) {
+  var submitter = event && (event.submitter || (event.detail && event.detail.formSubmission && event.detail.formSubmission.submitter))
+  if (!submitter || !submitter.querySelector) return null
+  return submitter.querySelector('.studio-loader[data-loader-pending]') ? submitter : null
+}
+
+var installed = false
+export function installStudioLoader(doc) {
+  doc = doc || document
+  if (installed) return
+  installed = true
+
+  doc.addEventListener('turbo:visit', function (event) { if (userVisit(event)) showSoon('', doc) })
+  // turbo:reload: the response was not HTML (a download), or the visit failed,
+  // and Turbo hands the URL to the browser; no page may ever replace this one.
+  ;['turbo:load', 'turbo:render', 'turbo:before-cache', 'turbo:fetch-request-error', 'turbo:frame-load', 'turbo:reload'].forEach(function (name) {
+    doc.addEventListener(name, function () { hide(doc) })
+  })
+  // Leaving clears the page before the bfcache keeps it; a restore clears it
+  // again, in case it was kept some other way.
+  if (doc.defaultView) {
+    doc.defaultView.addEventListener('pagehide', function () { settle(doc) })
+    doc.defaultView.addEventListener('pageshow', function (event) { if (event.persisted) settle(doc) })
+  }
+
+  doc.addEventListener('turbo:submit-start', function (event) {
+    var form = event.target
+    if (form && form.hasAttribute && form.hasAttribute('data-studio-loader-overlay')) {
+      showSoon(form.getAttribute('data-studio-loader-overlay') || '', doc)
+    }
+  })
+  doc.addEventListener('turbo:submit-end', function (event) {
+    var form = event.target
+    if (form && form.hasAttribute && form.hasAttribute('data-studio-loader-overlay')) hide(doc)
+  })
+
+  // A form Turbo does not drive navigates away on its own; mark the button and,
+  // when asked, the overlay, until the next page replaces this one.
+  doc.addEventListener('submit', function (event) {
+    var form = event.target
+    if (event.defaultPrevented || !form || !form.getAttribute) return
+    var win = doc.defaultView
+    if (win && win.Turbo && form.getAttribute('data-turbo') !== 'false') return
+    var button = pendingSubmitter(event)
+    if (button) markBusy(button, doc)
+    if (form.hasAttribute('data-studio-loader-overlay')) { showSoon(form.getAttribute('data-studio-loader-overlay') || '', doc); armCap(doc) }
+  })
+
+  if (doc.defaultView && !doc.defaultView.StudioLoader) {
+    doc.defaultView.StudioLoader = {
+      show: function (caption) { return show(caption, doc) },
+      hide: function () { return hide(doc) },
+      setPercent: setPercent
+    }
+  }
+}

data/app/mailers/studio/google_setup_mailer.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Studio
+  # "Request Google setup", sent to the team when someone presses it in the
+  # Google modal of an app whose OAuth client is not configured yet
+  # (Studio::GoogleSetupRequestsController, Studio::GoogleSignIn). Namespaced so
+  # a host's own mailers cannot shadow it; plain strings in, so an outbox row
+  # stores nothing but text.
+  class GoogleSetupMailer < ApplicationMailer
+    layout false
+
+    # The shared production OAuth client every app's callback is added to, and
+    # who adds it. Facts for the reader of the email, not configuration.
+    OAUTH_PROJECT = "enduring-maxim-491202-t6"
+
+    # host and redirect_uri come from the app's CONFIGURED canonical host
+    # (Studio::GoogleSignIn.canonical_host), never from the request, and are
+    # blank when the app names none: the email then says to set one.
+    def setup_requested(app_name, host, redirect_uri, to)
+      @app_name = app_name
+      @host = host.to_s.strip.presence
+      @redirect_uri = redirect_uri.to_s.strip.presence
+      @oauth_project = OAUTH_PROJECT
+      subject = "Google sign-in setup requested: #{app_name}"
+      subject += " (#{@host})" if @host
+      mail(to: to, subject: subject)
+    end
+  end
+end

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

@@ -0,0 +1,153 @@
+# frozen_string_literal: true
+
+require "securerandom"
+
+module Studio
+  # The engine's default Google find-or-create (docs/USER_CONTRACT.md, "Google
+  # sign-in"), so an app signs people in with Google before it writes a line of
+  # its own User code.
+  #
+  # OmniauthCallbacksController calls Studio::OmniauthUser.resolve(User, ...),
+  # which uses the host's own User.from_omniauth when the class answers it and
+  # this module's find_or_create otherwise. A host that wants the default under
+  # its own name includes the concern; a host that defines `def
+  # self.from_omniauth` in the class body overrides it either way, because a
+  # method on the class itself is found before one from an extended module.
+  #
+  # The default, in order:
+  #
+  #   1. the account already holding this Google id (provider + uid);
+  #   2. else the account holding the address, compared case-insensitively, but
+  #      only when Google verified the address: an unverified match answers
+  #      :email_not_verified, since it proves nothing about who holds the
+  #      mailbox;
+  #   3. else a new account, address downcased.
+  #
+  # THE SLUG COLLISION (Carl, 2026-10-29, on voicebox). The documented example
+  # created a second "Mia" whose name_slug was "mia" again; the unique slug index
+  # raised RecordNotUnique, the rescue looked for the address and the uid, found
+  # nobody, and sign-in failed. So the create checks the slug first, and a slug
+  # that is blank or already held becomes user-<id> (settled by Sluggable after
+  # the insert). A collision that survives that, with nobody to find, is logged
+  # with ErrorLog.capture! and answers nil, which the controller turns into a
+  # "use another method" redirect rather than a 500.
+  module OmniauthUser
+    extend ActiveSupport::Concern
+
+    class_methods do
+      def from_omniauth(auth, email_verified: false)
+        Studio::OmniauthUser.find_or_create(self, auth, email_verified: email_verified)
+      end
+    end
+
+    class << self
+      def resolve(model, auth, email_verified: false)
+        if model.respond_to?(:from_omniauth)
+          model.from_omniauth(auth, email_verified: email_verified)
+        else
+          find_or_create(model, auth, email_verified: email_verified)
+        end
+      end
+
+      def find_or_create(model, auth, email_verified: false)
+        provider = read(auth, "provider")
+        uid = read(auth, "uid")
+        return nil if provider.nil? || uid.nil?
+
+        user = model.find_by(provider: provider, uid: uid)
+        return user if user
+
+        email = normalize_email(read(auth, "info", "email"))
+        if email && (existing = find_by_email(model, email))
+          return :email_not_verified unless email_verified
+
+          existing.update!(provider: provider, uid: uid)
+          return existing
+        end
+
+        attributes = { provider: provider, uid: uid, email: email, name: read(auth, "info", "name") }
+        create_with_free_slug(model, attributes, email_verified: email_verified)
+      end
+
+      def normalize_email(value)
+        email = value.to_s.strip.downcase
+        email.empty? ? nil : email
+      end
+
+      def find_by_email(model, email)
+        return nil unless column?(model, "email")
+
+        model.where(model.arel_table[:email].lower.eq(email)).first
+      end
+
+      private
+
+      def create_with_free_slug(model, attributes, email_verified: false)
+        assignable = attributes.select { |key, value| !value.nil? && column?(model, key.to_s) }
+        last_error = nil
+
+        [false, true].each do |force_fallback|
+          record = model.new(assignable)
+          install_fallback_slug(record) if force_fallback || slug_needs_fallback?(model, record)
+          begin
+            model.transaction(requires_new: true) { record.save! }
+            return record
+          rescue ActiveRecord::RecordNotUnique => e
+            last_error = e
+            # A concurrent sign-in made the row first: that row is the answer.
+            # The Google id always identifies it; the address only when Google
+            # verified it, the same rule as step 2 above. An unverified address
+            # that collides with someone else's row hands that row to nobody.
+            found = model.find_by(provider: assignable[:provider], uid: assignable[:uid])
+            found ||= find_by_email(model, assignable[:email]) if email_verified && assignable[:email]
+            return found if found
+          end
+        end
+
+        log_unmatched_collision(last_error)
+        nil
+      end
+
+      def slug_needs_fallback?(model, record)
+        return false unless column?(model, "slug") && record.respond_to?(:name_slug, true)
+
+        candidate = begin
+          record.send(:name_slug).to_s
+        rescue StandardError
+          ""
+        end
+        candidate.strip.empty? || model.unscoped.where(slug: candidate).exists?
+      end
+
+      # user-<token> before the insert, user-<id> once the id exists: Sluggable
+      # writes the first in before_save and settles the second after_create.
+      def install_fallback_slug(record)
+        token = SecureRandom.hex(4)
+        record.define_singleton_method(:name_slug) { id ? "user-#{id}" : "user-#{token}" }
+      end
+
+      def log_unmatched_collision(error)
+        return unless error
+
+        Rails.logger.warn("[omniauth] Google sign-in collided with nobody to find: #{error.class}: #{error.message.to_s[0, 300]}")
+        ErrorLog.capture!(error) if defined?(::ErrorLog) && ::ErrorLog.respond_to?(:capture!)
+      rescue StandardError => e
+        Rails.logger.warn("[omniauth] could not log the collision: #{e.class}")
+      end
+
+      def column?(model, name)
+        model.respond_to?(:attribute_names) && model.attribute_names.include?(name)
+      end
+
+      def read(auth, *path)
+        value = path.reduce(auth) do |node, key|
+          break nil if node.nil?
+
+          node.respond_to?(:[]) ? (node[key] || (node[key.to_sym] if node.is_a?(Hash))) : nil
+        end
+        string = value.to_s.strip
+        string.empty? ? nil : string
+      end
+    end
+  end
+end

data/app/views/registrations/new.html.erb

@@ -87,11 +87,9 @@
           </div>
         <% end %>
 
-        <%= button_to "/auth/google_oauth2", method: :post, data: { turbo: false },
-          class: "btn btn-google btn-lg w-full gap-3" do %>
-          <%= render "components/google_logo" %>
-          Sign up with Google
-        <% end %>
+        <%# A POST to the strategy once the app has its OAuth client, the setup
+            modal until then (studio/google_sign_in/_button). %>
+        <%= render "studio/google_sign_in/button", label: "Sign up with Google" %>
       <% end %>
 
       <p class="text-center text-secondary text-sm mt-6">

data/app/views/sessions/new.html.erb

@@ -87,11 +87,9 @@
           </div>
         <% end %>
 
-        <%= button_to "/auth/google_oauth2", method: :post, data: { turbo: false },
-          class: "btn btn-google btn-lg w-full gap-3" do %>
-          <%= render "components/google_logo" %>
-          Sign in with Google
-        <% end %>
+        <%# A POST to the strategy once the app has its OAuth client, the setup
+            modal until then (studio/google_sign_in/_button). %>
+        <%= render "studio/google_sign_in/button", label: "Sign in with Google" %>
       <% end %>
 
       <p class="text-center text-secondary text-sm mt-6">

data/app/views/studio/google_setup_mailer/setup_requested.html.erb

@@ -0,0 +1,18 @@
+<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.5; color: #1f2937; max-width: 560px;">
+  <p>Someone asked for Google sign-in on <strong><%= @app_name %></strong><%= " (#{@host})" if @host %>.</p>
+  <p>The app already draws the "Sign in with Google" button; it opens a setup notice until the OAuth client is in place. Two steps finish it:</p>
+  <ol>
+    <li>
+      Add this redirect URI to the shared production OAuth client
+      (Google Cloud project <code><%= @oauth_project %></code>, admin@ Chrome profile; Steffon's lane):
+      <% if @redirect_uri %>
+        <p><code style="background: #f3f4f6; padding: 2px 6px; border-radius: 4px;"><%= @redirect_uri %></code></p>
+      <% else %>
+        <p>None yet: the app names no canonical host. Set <code>APP_HOST</code>, or <code>Studio.google_canonical_host</code>, to its production hostname; the URI is then <code>https://&lt;that host&gt;/auth/google_oauth2/callback</code>.</p>
+      <% end %>
+    </li>
+    <li>Set <code>GOOGLE_CLIENT_ID</code> and <code>GOOGLE_CLIENT_SECRET</code> on the app, then restart it.</li>
+  </ol>
+  <p>Once both are set, the button posts straight to Google. This request is sent at most once per app per day. The URI above comes from the app's configuration, never from the request that asked.</p>
+  <p style="color: #6b7280; font-size: 13px;">Guide: studio-engine docs/GOOGLE_AUTH_SETUP.md</p>
+</div>

data/app/views/studio/google_setup_mailer/setup_requested.text.erb

@@ -0,0 +1,23 @@
+Someone asked for Google sign-in on <%= @app_name %><%= " (#{@host})" if @host %>.
+
+The app already draws the "Sign in with Google" button; it opens a setup notice
+until the OAuth client is in place. Two steps finish it:
+
+1. Add this redirect URI to the shared production OAuth client
+   (Google Cloud project <%= @oauth_project %>, admin@ Chrome profile; Steffon's lane):
+
+<% if @redirect_uri -%>
+   <%= @redirect_uri %>
+<% else -%>
+   (none yet: the app names no canonical host. Set APP_HOST, or
+   Studio.google_canonical_host, to its production hostname; the URI is then
+   https://<that host>/auth/google_oauth2/callback)
+<% end -%>
+
+2. Set GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET on the app, then restart it.
+
+Once both are set, the button posts straight to Google. This request is sent at
+most once per app per day. The URI above comes from the app's configuration,
+never from the request that asked.
+
+Guide: studio-engine docs/GOOGLE_AUTH_SETUP.md

data/app/views/studio/google_sign_in/_button.html.erb

@@ -0,0 +1,52 @@
+<%# The "Sign in with Google" button, for every engine page that offers Google
+    (sessions/new, registrations/new, studio/profiles/_google_section).
+
+    Locals:
+      label          — REQUIRED. The button's words ("Sign in with Google").
+      button_class   — optional. Default "btn btn-google btn-lg w-full gap-3".
+      email_fallback — optional, default true. The modal's "Use email instead",
+                       which closes it and focuses the page's email field. The
+                       profile page, where the person is already signed in,
+                       passes false and gets "Not now".
+
+    TWO STATES, by Studio::GoogleSignIn.button_posts?:
+
+      READY — the app has its OAuth client (or registered its own provider, or
+      OmniAuth is in test mode). A POST form to /auth/google_oauth2, Turbo off:
+      OmniAuth's middleware owns that path, and the request phase is POST-only
+      and CSRF-checked.
+
+      NOT YET — no client yet. The same button, opening a modal on a page-scoped
+      host (store googleSetupModals) that says Google sign-in is still being set
+      up, offers "Request Google setup" (POST /_studio/google_setup_request,
+      which mails the team once per app per day) and a way back to email.
+
+    The x-data on the wrapper is load-bearing: studio/modals/_scoped_host
+    declares no Alpine scope of its own, and without one above it the modal
+    registers, opens, and renders nothing (see studio/profiles/show). One button
+    per page; two would mount two hosts on one store. %>
+<%
+  google_label = local_assigns.fetch(:label)
+  google_button_class = local_assigns.fetch(:button_class, "btn btn-google btn-lg w-full gap-3")
+  google_email_fallback = local_assigns.fetch(:email_fallback, true)
+%>
+<% if Studio::GoogleSignIn.button_posts? %>
+  <%= button_to Studio::GoogleSignIn::REQUEST_PATH, method: :post, data: { turbo: false, google_sign_in: "ready" },
+        class: google_button_class do %>
+    <%= render "components/google_logo" %>
+    <%= google_label %>
+  <% end %>
+<% else %>
+  <div x-data data-google-sign-in="setup">
+    <button type="button" class="<%= google_button_class %>" aria-haspopup="dialog"
+            @click="$store.googleSetupModals.open('google-setup')">
+      <%= render "components/google_logo" %>
+      <%= google_label %>
+    </button>
+    <%= render "studio/modals/scoped_host", store: "googleSetupModals" do %>
+      <template x-if="$store.googleSetupModals.current()?.id === 'google-setup'">
+        <%= render "studio/google_sign_in/setup_modal", email_fallback: google_email_fallback %>
+      </template>
+    <% end %>
+  </div>
+<% end %>

data/app/views/studio/google_sign_in/_setup_modal.html.erb

@@ -0,0 +1,55 @@
+<%# The Google setup modal, opened by studio/google_sign_in/_button while the
+    app has no OAuth client. One root element: the host's template x-if clones
+    only the first. No double quote inside any x-data or @click below.
+
+    Locals:
+      email_fallback — true: "Use email instead" closes the modal and focuses
+                       the page's email field. false: "Not now" only closes it.
+                       The focus waits out the close: the host hands focus
+                       back to the opener when its last card leaves (220ms,
+                       CLOSE_ANIM_MS), which would otherwise undo it.
+
+    "Request Google setup" is a plain form POST with Turbo off, so it works with
+    the same CSRF token as every other engine form, and the flash on the page it
+    lands back on says what happened. Hidden when the host draws its own routes
+    without Studio.routes, which leaves nowhere to send it. %>
+<%
+  setup_email_fallback = local_assigns.fetch(:email_fallback, true)
+  setup_request_path = respond_to?(:studio_google_setup_request_path) ? studio_google_setup_request_path : nil
+%>
+<div class="text-center" data-google-setup-modal>
+  <div class="flex justify-end -mt-2 -mr-2">
+    <button type="button" @click="$store.googleSetupModals.close()"
+            class="text-secondary hover:text-heading text-xl leading-none"
+            aria-label="Close">&times;</button>
+  </div>
+
+  <div class="mx-auto mb-4 w-12 h-12 rounded-full bg-white border border-subtle shadow-sm flex items-center justify-center">
+    <%= render "components/google_logo" %>
+  </div>
+
+  <h3 class="text-heading font-bold text-lg leading-tight">Google sign-in is almost ready</h3>
+  <p class="text-secondary text-sm mt-2">
+    Google sign-in is still being set up for <%= Studio.app_name %>.
+    <% if setup_request_path %>Ask the team to finish it, and<% else %>Until it is,<% end %>
+    <% if setup_email_fallback %>sign in with your email in the meantime.<% else %>use another sign-in method in the meantime.<% end %>
+  </p>
+
+  <div class="mt-6 flex flex-col gap-3">
+    <% if setup_request_path %>
+      <%= button_to "Request Google setup", setup_request_path, method: :post,
+            data: { turbo: false }, class: "btn btn-primary w-full", form: { class: "w-full" } %>
+    <% end %>
+
+    <% if setup_email_fallback %>
+      <button type="button" class="btn btn-neutral w-full"
+              @click="$store.googleSetupModals.close(); setTimeout(() => document.querySelector('input[type=email]')?.focus(), 260)">
+        Use email instead
+      </button>
+    <% else %>
+      <button type="button" class="btn btn-neutral w-full" @click="$store.googleSetupModals.close()">
+        Not now
+      </button>
+    <% end %>
+  </div>
+</div>

data/app/views/studio/loader/_loader.html.erb

@@ -0,0 +1,75 @@
+<%# locals: (style:, size:, icon:, art:, label:, percent:, mono:, pending:, uid:, html: {}) %>
+<%#
+  The branded loader (Studio::LoaderHelper#studio_loader, docs/LOADER.md): ONE
+  class, .studio-loader, sized by --studio-loader-size, styled per
+  data-loader-style by engine-motion.css (section "Branded loader"). The icon is
+  the app's own file; a signature style inlines the art's marked layers over it.
+
+  A pending loader sits inside a button: hidden from assistive tech (the button
+  carries aria-busy) and from sight until the button or its form is busy.
+%>
+<%
+  extra = html.dup
+  data = (extra.delete(:data) || {}).merge(loader_style: style.to_s.tr("_", "-"))
+  data[:loader_pending] = "" if pending
+  data[:loader_mono] = "" if mono
+  data[:loader_percent] = "" unless percent.nil?
+  vars = [ "--studio-loader-size: #{size}" ]
+  vars << "--studio-loader-percent: #{percent}" unless percent.nil?
+  vars << extra.delete(:style) if extra[:style]
+  classes = [ "studio-loader", extra.delete(:class) ].compact.join(" ")
+  draw_icon = lambda do |modifier = nil|
+    css = [ "studio-loader-icon", modifier ].compact.join(" ")
+    if icon.blank?
+      tag.span(class: css, data: { loader_blank: "" })
+    elsif mono
+      tag.span(class: css, style: "--studio-loader-mask: url(\"#{icon.to_s.gsub('"', '%22')}\")")
+    else
+      tag.img(src: icon, alt: "", class: css, draggable: "false", decoding: "async")
+    end
+  end
+  aria = pending ? { hidden: "true" } : { live: "polite" }
+%>
+<%= tag.span(class: classes, role: (pending ? nil : "status"), aria: aria, data: data, style: vars.join("; "), **extra) do %>
+  <% case style %>
+  <% when :breathe %>
+    <span class="studio-loader-halo" aria-hidden="true"></span>
+    <%= draw_icon.call %>
+  <% when :liquid %>
+    <%= draw_icon.call("studio-loader-ghost") %>
+    <span class="studio-loader-fill" aria-hidden="true"><%= draw_icon.call %></span>
+  <% when :orbit %>
+    <span class="studio-loader-track" aria-hidden="true"></span>
+    <%= draw_icon.call %>
+    <span class="studio-loader-orb" aria-hidden="true"><span class="studio-loader-trail"></span><span class="studio-loader-spark"></span></span>
+  <% when :steel %>
+    <svg class="studio-loader-frame" viewBox="0 0 100 100" aria-hidden="true"><path d="M0,14V0H14M86,0H100V14M100,86V100H86M14,100H0V86"/></svg>
+    <%= draw_icon.call %>
+  <% when :weld_bead %>
+    <%= draw_icon.call %>
+    <svg class="studio-loader-art" viewBox="<%= art[:view_box] %>" aria-hidden="true">
+      <defs><filter id="<%= uid %>-glow" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="<%= (art[:width] / 52.86).round(2) %>" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs>
+      <% outline = art[:layers].first %>
+      <% layers = studio_loader_bead_layers(art) %>
+      <% [ layers.reject { |l| l[:glow] }, layers.select { |l| l[:glow] } ].each_with_index do |group, glowing| %>
+        <%= tag.g(filter: (glowing == 1 ? "url(##{uid}-glow)" : nil), transform: outline[:transform]) do %>
+          <% group.each do |layer| %>
+            <%= tag.path(d: outline[:d], pathLength: "100", class: "studio-loader-bead", data: { layer: layer[:n] },
+                         "stroke-width": layer[:width], "stroke-opacity": layer[:opacity],
+                         "stroke-dasharray": "#{layer[:dash]} #{(100 - layer[:dash]).round(2)}",
+                         style: "--studio-loader-bead-length: #{layer[:dash]}") %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </svg>
+  <% when :sparkle %>
+    <%= draw_icon.call %>
+    <svg class="studio-loader-art" viewBox="<%= art[:view_box] %>" aria-hidden="true">
+      <% art[:layers].each_with_index do |spark, index| %>
+        <%= tag.path(d: spark[:d], transform: spark[:transform], class: "studio-loader-sparkle",
+                     style: "--studio-loader-i: #{index}; --studio-loader-sparks: #{art[:layers].size}") %>
+      <% end %>
+    </svg>
+  <% end %>
+  <% unless pending || label.blank? %><span class="sr-only"><%= label %></span><% end %>
+<% end %>