studio-engine 0.131.0 → 0.133.0

data/app/views/studio/auth/_sign_in_body.html.erb

@@ -0,0 +1,236 @@
+<%#
+  The inside of the engine's standard sign-in card: Google, then "or", then the
+  email magic link, then the link-sent step with the resend footer. The page
+  card (studio/auth/_sign_in_card) and the modal (studio/auth/_sign_in_modal)
+  both render this, so the two cannot drift apart. Render one of those two, not
+  this one; the locals are theirs, documented in docs/SIGN_IN_CARD.md.
+
+  ONE ALPINE SCOPE, AND ITS SHAPE IS A CONTRACT. studio/modals/auth/_resend_footer
+  reads props.submitting, props.resendCooldown and props.resendError and calls
+  resendMagicLink() from the ENCLOSING x-data. This root is that x-data. Keep
+  those four names.
+
+  THE CONFIG RIDES A DATA ATTRIBUTE, NOT THE EXPRESSION. The endpoint, the
+  return path and the copy are server values. They go in as JSON in
+  data-sign-in-card, which ERB escapes, and the x-data reads them with
+  JSON.parse. No server value is spliced into JavaScript source.
+
+  DEMO MODE (demo: true) POSTS NOTHING. The style guide renders it. Google is a
+  plain type=button with no form around it. The email form has no action, and
+  send() waits on a timer instead of fetch(). The link-sent step and the resend
+  cooldown play as they do for real (cooldown 5s, not 60s). Guarded by
+  test/views/sign_in_card_test.rb and e2e/style_sign_in_card.spec.js.
+
+  REAL MODE posts as the hub's and Turf's cards do. Google is a button_to POST
+  to /auth/google_oauth2 with Turbo off; OmniAuth owns that path, and its
+  request phase is POST-only and CSRF-checked. When the app has no OAuth client
+  yet, studio/google_sign_in/_button draws its setup modal instead. The email
+  form is a real form_tag to the magic-link endpoint, so it still works with no
+  JavaScript; with JavaScript, send() posts the same fields by fetch() as JSON
+  and flips to the link-sent step only after the server says success.
+%>
+<%
+  demo           = local_assigns.fetch(:demo, false) ? true : false
+  dom_id         = local_assigns.fetch(:dom_id, "sign-in-card")
+  # Kept to a plain in-app path, as the server keeps it (Studio::LinkToken.sanitize_path).
+  return_to      = Studio::LocalPath.local?(local_assigns[:return_to]) ? local_assigns[:return_to].to_s : nil
+  modal_store    = local_assigns[:modal_store]
+  show_google    = local_assigns.fetch(:google, demo || Studio.auth_method?(:google))
+  show_email     = local_assigns.fetch(:magic_link, demo || Studio.auth_method?(:magic_link))
+  magic_link_path = local_assigns[:magic_link_path].presence ||
+                    ((respond_to?(:main_app) && main_app.respond_to?(:magic_link_request_path)) ? main_app.magic_link_request_path : "/magic_link")
+  google_path    = return_to ? "#{Studio::GoogleSignIn::REQUEST_PATH}?#{{ return_to: return_to }.to_query}" : Studio::GoogleSignIn::REQUEST_PATH
+  google_label   = local_assigns.fetch(:google_label, "Continue with Google")
+  link_noun      = Studio::AuthLabels.link_noun(Studio.sign_in_label)
+  send_label     = local_assigns.fetch(:send_label, "Email me a #{link_noun}")
+  ttl_minutes    = (Studio.magic_link_ttl.to_i / 60).clamp(1, 24 * 60)
+  # A slot entry is a partial path, or { partial:, locals: }. A named local, not a
+  # block: see Studio::PartialBlock for why a partial cannot trust block_given?.
+  slot = lambda do |entries|
+    Array(entries).filter_map do |entry|
+      entry = { partial: entry } if entry.is_a?(String)
+      render(partial: entry.fetch(:partial), locals: entry.fetch(:locals, {})) if entry.is_a?(Hash)
+    end.join.html_safe
+  end
+  preamble_html = slot.call(local_assigns[:preamble])
+  extras_html   = slot.call(local_assigns[:extras])
+  config = {
+    demo: demo,
+    endpoint: (demo ? nil : magic_link_path),
+    returnTo: return_to,
+    cooldown: (demo ? 5 : 60),
+    email: local_assigns[:email].to_s,
+    sendLabel: send_label,
+    messages: {
+      generic: "We could not send the link. Check your connection and try again.",
+      throttled: "Too many requests. Wait a minute, then try again.",
+      delivery_failed: Studio::MagicLinkIssuing::DELIVERY_FAILED
+    }
+  }
+%>
+<div data-sign-in-card="<%= config.to_json %>"
+     data-sign-in-card-mode="<%= demo ? "demo" : "live" %>"
+     x-data="{
+       cfg: JSON.parse($el.dataset.signInCard),
+       step: 'email',
+       email: '',
+       init() { this.email = this.cfg.email || ''; },
+       error: '',
+       demoNote: '',
+       props: { submitting: null, resendCooldown: 0, resendError: '' },
+       _timer: null,
+       get sending() { return this.props.submitting === 'magic-link'; },
+       async post() {
+         if (this.cfg.demo) { await new Promise((r) => setTimeout(r, 700)); return; }
+         const body = new URLSearchParams();
+         body.set('email', this.email.trim());
+         if (this.cfg.returnTo) body.set('return_to', this.cfg.returnTo);
+         const token = document.querySelector('meta[name=csrf-token]');
+         const resp = await fetch(this.cfg.endpoint, {
+           method: 'POST', credentials: 'same-origin',
+           headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRF-Token': token ? token.content : '' },
+           body: body.toString()
+         });
+         let payload = {};
+         try { payload = await resp.json(); } catch (e) { payload = {}; }
+         if (resp.ok && payload.success !== false) return;
+         if (resp.status === 429) throw new Error(this.cfg.messages.throttled);
+         if (payload.error === 'delivery_failed') throw new Error(this.cfg.messages.delivery_failed);
+         throw new Error(this.cfg.messages.generic);
+       },
+       startCooldown() {
+         clearInterval(this._timer);
+         this.props.resendCooldown = this.cfg.cooldown;
+         this._timer = setInterval(() => {
+           this.props.resendCooldown -= 1;
+           if (this.props.resendCooldown <= 0) { this.props.resendCooldown = 0; clearInterval(this._timer); }
+         }, 1000);
+       },
+       async send() {
+         if (!this.email.trim() || this.props.submitting) return;
+         this.error = '';
+         this.props.submitting = 'magic-link';
+         try {
+           await this.post();
+           this.step = 'sent';
+           this.startCooldown();
+           this.focusSoon(() => this.$refs.sentHeading);
+         } catch (e) {
+           this.error = e.message || this.cfg.messages.generic;
+         } finally { this.props.submitting = null; }
+       },
+       async resendMagicLink() {
+         if (this.props.submitting || this.props.resendCooldown > 0) return;
+         this.props.resendError = '';
+         this.props.submitting = 'magic-link';
+         try { await this.post(); this.startCooldown(); }
+         catch (e) { this.props.resendError = e.message || this.cfg.messages.generic; }
+         finally { this.props.submitting = null; }
+       },
+       useAnotherEmail() {
+         clearInterval(this._timer);
+         this.props.resendCooldown = 0;
+         this.props.resendError = '';
+         this.step = 'email';
+         this.focusSoon(() => this.$refs.emailForm && this.$refs.emailForm.querySelector('input[type=email]'));
+       },
+       // Focus follows the step, for a keyboard or screen-reader user: the
+       // pressed button is hidden with its step. A hidden node cannot take
+       // focus, and x-show can reveal the new step a frame or more after the
+       // change (measured: still display none in the first frame), so wait
+       // frame by frame until it is rendered, ten frames at most.
+       focusSoon(target, tries = 10) {
+         requestAnimationFrame(() => {
+           const el = target();
+           if (el && el.offsetParent !== null) el.focus();
+           else if (tries > 1) this.focusSoon(target, tries - 1);
+         });
+       },
+       destroy() { clearInterval(this._timer); }
+     }">
+
+  <%# ---- Step 1: the ways in ---- %>
+  <div x-show="step === 'email'" data-sign-in-step="email">
+    <% if preamble_html.present? %>
+      <div class="mb-4" data-sign-in-slot="preamble"><%= preamble_html %></div>
+    <% end %>
+
+    <% if show_google %>
+      <% if demo %>
+        <button type="button" class="btn btn-google btn-lg w-full gap-3" data-sign-in-google="demo"
+                @click="demoNote = 'Demo only: Google sign-in does not run on the style guide.'">
+          <%= render "components/google_logo" %>
+          <%= google_label %>
+        </button>
+      <% elsif Studio::GoogleSignIn.button_posts? %>
+        <%= button_to google_path, method: :post,
+              form: { data: { sign_in_google: "ready" } },
+              data: { turbo: false },
+              class: "btn btn-google btn-lg w-full gap-3" do %>
+          <%= render "components/google_logo" %>
+          <%= google_label %>
+        <% end %>
+      <% else %>
+        <%= render "studio/google_sign_in/button", label: google_label %>
+      <% end %>
+    <% end %>
+
+    <% if extras_html.present? %>
+      <div class="mt-3 space-y-3" data-sign-in-slot="extras"><%= extras_html %></div>
+    <% end %>
+
+    <% if show_email && (show_google || extras_html.present?) %>
+      <div class="flex items-center gap-3 my-5 text-sm" aria-hidden="true">
+        <div class="flex-1 border-t border-strong"></div>
+        <span class="text-secondary">or</span>
+        <div class="flex-1 border-t border-strong"></div>
+      </div>
+    <% end %>
+
+    <% if show_email %>
+      <% form_attrs = { "x-ref" => "emailForm", "@submit.prevent" => "send()", novalidate: true, data: { sign_in_email_form: (demo ? "demo" : "live") } } %>
+      <% email_form_body = capture do %>
+        <label for="<%= dom_id %>-email" class="block text-sm text-secondary mb-2 font-medium">Email</label>
+        <%= render "studio/modals/shared/email_field",
+              name: "email", id: "#{dom_id}-email", required: true,
+              x_model: "email",
+              disabled_expr: "props.submitting === 'magic-link'" %>
+        <% if return_to %><input type="hidden" name="return_to" value="<%= return_to %>"><% end %>
+        <button type="submit" class="btn btn-primary btn-lg w-full mt-4 disabled:cursor-wait disabled:opacity-60"
+                :disabled="sending || !email.trim()">
+          <span x-text="sending ? 'Sending…' : cfg.sendLabel"><%= send_label %></span>
+        </button>
+        <p role="alert" x-show="error" x-cloak class="text-xs text-danger-ink text-center mt-2" x-text="error"></p>
+        <p class="text-xs text-muted text-center mt-2">One tap from your inbox. No password.</p>
+      <% end %>
+      <% if demo %>
+        <%= tag.form(**form_attrs) { email_form_body } %>
+      <% else %>
+        <%= form_tag(magic_link_path, method: :post, **form_attrs) { email_form_body } %>
+      <% end %>
+    <% end %>
+
+    <p x-show="demoNote" x-cloak class="text-xs text-muted text-center mt-3" x-text="demoNote" data-sign-in-demo-note></p>
+  </div>
+
+  <%# ---- Step 2: the link is on its way ---- %>
+  <div x-show="step === 'sent'" x-cloak class="text-center" data-sign-in-step="sent">
+    <div class="text-3xl leading-none mb-3" aria-hidden="true">📬</div>
+    <h3 x-ref="sentHeading" tabindex="-1" class="text-heading font-bold text-lg leading-tight outline-none">Check your email</h3>
+    <p class="text-sm text-body mt-2">
+      We sent a <%= link_noun %> to <strong class="text-heading" x-text="email.trim()"></strong>.
+      It works once and expires in <%= ttl_minutes %> minutes.
+    </p>
+    <div class="border-t border-subtle mt-5 pt-4">
+      <% if modal_store %>
+        <%= render "studio/modals/auth/resend_footer", modal_store: modal_store %>
+      <% else %>
+        <%= render "studio/modals/auth/resend_footer", close: false %>
+      <% end %>
+    </div>
+    <button type="button" @click="useAnotherEmail()"
+            class="block mx-auto mt-3 text-xs text-muted hover:text-secondary underline underline-offset-2">
+      Use a different email
+    </button>
+  </div>
+</div>

data/app/views/studio/auth/_sign_in_card.html.erb

@@ -0,0 +1,50 @@
+<%#
+  The engine's standard sign-in card, for a page: the app's heading, then one
+  card with Google, "or", and the email magic link. Sending the link flips the
+  same card to its link-sent step, with the resend footer. No modal is needed.
+
+    render "studio/auth/sign_in_card"
+    render "studio/auth/sign_in_card", return_to: "/contests/42",
+          subheading: "Sign in to play",
+          preamble: "studio/modals/shared/age_attestation",
+          extras: "shared/solana_wallet_connect"
+
+  Locals (all optional):
+    heading      — default "Sign in to <Studio.app_name>" (Studio::AuthLabels.to_app)
+    subheading   — default "New here? The same step creates your account."
+    logo         — default true: Studio.logo_for("Auth Logo"), when the app has one
+    return_to    — an in-app path the visitor lands on after sign-in. Anything
+                   but a plain local path is dropped. Rides the magic-link POST
+                   and the Google request URL (?return_to=).
+    preamble     — a partial (or { partial:, locals: }, or an Array) above Google
+    extras       — the same, after Google and before "or": extra providers
+    google       — default Studio.auth_method?(:google)
+    magic_link   — default Studio.auth_method?(:magic_link)
+    magic_link_path — default the engine's POST /magic_link
+    email        — prefill for the email field
+    demo         — default false. true posts nothing (the style guide).
+    dom_id       — id prefix for the email field. Default "sign-in-card".
+
+  The body is studio/auth/_sign_in_body; docs/SIGN_IN_CARD.md has the contract.
+%>
+<%
+  heading    = local_assigns[:heading].presence || Studio::AuthLabels.to_app(Studio.sign_in_label, Studio.app_name)
+  subheading = local_assigns.key?(:subheading) ? local_assigns[:subheading] : "New here? The same step creates your account."
+  logo_path  = local_assigns.fetch(:logo, true) ? Studio.logo_for("Auth Logo") : nil
+  body_locals = local_assigns.slice(:return_to, :preamble, :extras, :google, :magic_link, :magic_link_path,
+                                    :email, :demo, :dom_id, :google_label, :send_label)
+%>
+<div class="min-h-[70vh] flex items-center justify-center" data-sign-in-card-page>
+  <div class="w-full max-w-md">
+    <div class="text-center mb-8">
+      <% if logo_path %>
+        <img src="<%= logo_path %>" alt="" class="w-20 h-20 rounded-full shadow-lg mx-auto mb-4">
+      <% end %>
+      <h1 class="text-3xl font-extrabold text-heading tracking-tight"><%= heading %></h1>
+      <% if subheading.present? %><p class="text-secondary mt-2"><%= subheading %></p><% end %>
+    </div>
+    <div class="card shadow p-8">
+      <%= render "studio/auth/sign_in_body", **body_locals %>
+    </div>
+  </div>
+</div>

data/app/views/studio/auth/_sign_in_modal.html.erb

@@ -0,0 +1,36 @@
+<%#
+  The engine's standard sign-in card, as a modal: the same body as
+  studio/auth/_sign_in_card (studio/auth/_sign_in_body), under a modal header
+  and a ×. Single root, for a modal host's <template x-if>:
+
+    <template x-if="$store.modals.current()?.id === 'sign-in'">
+      <div>render "studio/auth/sign_in_modal", return_to: request.path</div>
+    </template>
+
+    $store.modals.open('sign-in')
+
+  Locals: every local of studio/auth/_sign_in_card except logo, plus
+    modal_store — the Alpine store the × and the resend footer's Close close.
+                  Default "modals". VALIDATED as a JS identifier
+                  (Studio::JsIdentifier): it is spliced as a bare name.
+  dom_id defaults to "sign-in-modal", so a page can carry the page card and the
+  modal at once with no duplicate ids.
+%>
+<%
+  # IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier.
+  modal_store = Studio::JsIdentifier.validate!(
+                local_assigns.fetch(:modal_store, "modals"), local: :modal_store)
+  heading    = local_assigns[:heading].presence || Studio::AuthLabels.to_app(Studio.sign_in_label, Studio.app_name)
+  subheading = local_assigns.key?(:subheading) ? local_assigns[:subheading] : "New here? The same step creates your account."
+  body_locals = local_assigns.slice(:return_to, :preamble, :extras, :google, :magic_link, :magic_link_path,
+                                    :email, :demo, :google_label, :send_label)
+                             .merge(dom_id: local_assigns.fetch(:dom_id, "sign-in-modal"), modal_store: modal_store)
+%>
+<div class="relative text-left" data-sign-in-modal>
+  <%= render "studio/modals/blocks/close_x", modal_store: modal_store %>
+  <div class="mb-5 pr-6">
+    <h3 class="text-heading font-bold text-xl leading-tight"><%= heading %></h3>
+    <% if subheading.present? %><p class="text-secondary text-sm mt-1"><%= subheading %></p><% end %>
+  </div>
+  <%= render "studio/auth/sign_in_body", **body_locals %>
+</div>

data/app/views/studio/modals/auth/_resend_footer.html.erb

@@ -10,6 +10,9 @@
 
   Locals:
     modal_store — Alpine store name backing close(). Default "modals".
+    close       — default true. false drops the Close button, for a host that
+                  is not a modal (studio/auth/_sign_in_card on a page), where
+                  there is no store to close.
 
   ERROR INK, not a static red. The error paragraph is text-danger-ink, the
   per-theme red Studio::ThemeResolver derives to a 4.5:1 target. It replaced
@@ -38,6 +41,7 @@
   # IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier.
   modal_store = Studio::JsIdentifier.validate!(
                 local_assigns.fetch(:modal_store, "modals"), local: :modal_store)
+  show_close = local_assigns.fetch(:close, true)
 %>
 <button @click="resendMagicLink()" :disabled="props.submitting === 'magic-link' || (props.resendCooldown || 0) > 0"
         class="block mx-auto text-sm text-primary hover:text-primary-300 underline underline-offset-2 disabled:opacity-50 disabled:no-underline">
@@ -48,4 +52,6 @@
   </span>
 </button>
 <p role="alert" x-show="props.resendError" x-cloak class="text-xs text-danger-ink mt-3 text-center" x-text="props.resendError"></p>
+<% if show_close %>
 <button @click="$store.<%= modal_store %>.close()" class="block mx-auto mt-3 text-sm text-secondary hover:text-heading transition">Close</button>
+<% end %>

data/app/views/style/_glass.html.erb

@@ -15,8 +15,7 @@
   </div>
   <div class="grid gap-4 md:grid-cols-2">
     <%= render layout: "style/specimen",
-          locals: { klass: "Studio.surface_style = :glass",
-                    usage: %(config.surface_style = :glass, and <html data-surface-style="glass">),
+          locals: { trick: "glass",
                     disabled: !surface_on, disabled_label: "surface style is off on this app" } do %>
       <div class="<%= glass_backing %> w-full space-y-2" data-test="style-glass-surfaces">
         <div class="card p-3 text-sm text-heading">.card, the dense tier: no blur</div>
@@ -24,8 +23,7 @@
       </div>
     <% end %>
     <%= render layout: "style/specimen",
-          locals: { klass: "Studio.sidebar_style = :glass",
-                    usage: %(config.sidebar_style = :glass),
+          locals: { trick: "glass_sidebar",
                     disabled: !sidebar_on, disabled_label: "glass sidebar is off on this app" } do %>
       <div class="<%= glass_backing %> w-full" data-test="style-glass-sidebar">
         <div class="flex flex-col" data-sidebar-glass-shell>
@@ -42,8 +40,7 @@
       <% end %>
     <% end %>
     <%= render layout: "style/specimen",
-          locals: { klass: "Lit from above, under surface_style = :glass",
-                    usage: %(.btn-primary, .btn-danger, .btn-neutral, .badge, .input-field),
+          locals: { trick: "glass", variant: "lit",
                     disabled: !surface_on, disabled_label: "surface style is off on this app" } do %>
       <div class="w-full overflow-x-auto" data-test="style-lit-states">
         <table class="text-xs text-muted">
@@ -68,8 +65,7 @@
       </div>
     <% end %>
     <%= render layout: "style/specimen",
-          locals: { klass: "studio_icon(name, size: 18)",
-                    usage: %(studio_icon("rocket", size: 22)) } do %>
+          locals: { trick: "icon" } do %>
       <ul class="grid grid-cols-4 gap-3 w-full text-heading" data-test="style-glass-icons">
         <% Studio::Icons.names.each do |name| %>
           <li class="flex flex-col items-center gap-1 min-w-0" title="<%= name %>">

data/app/views/style/_loaders.html.erb

@@ -5,7 +5,9 @@
      progress bar, pulsing dots, button loader, full-screen loader, pull to
      refresh, infinite scroll. Every specimen is the engine's own helper
      (Studio::LoaderHelper, docs/LOADER.md), so what is on this page is what a
-     view gets. The branded styles themselves are under Tricks.
+     view gets, under its trick name (config/studio_tricks.yml): Spinner, Skeleton,
+     Progress Bar, Typing Dots, Busy Button, Overlay, Pull Refresh, Infinite Scroll.
+     The branded styles themselves are under Tricks.
 
      The infinite-scroll specimen is live: its pages come from feed_path, the
      admin-only demo feed (StyleController#loaders_feed) unless a caller names
@@ -16,18 +18,13 @@
   # path Studio.routes draws.
   feed_path = local_assigns[:feed_path] ||
               (respond_to?(:admin_style_loaders_feed_path) ? admin_style_loaders_feed_path : "/admin/style/loaders_feed")
-  erb = ->(code) { "<" + "%= " + code + " %" + ">" }
-  erb_end = "<" + "% end %" + ">"
 %>
 <section id="loaders" class="section-target space-y-6" data-style-loaders>
   <%= render "studio/section_header", title: "Loaders" %>
   <p class="text-muted text-sm max-w-2xl">Eight ways to say wait. Match the loader to the wait.</p>
 
   <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-    <%= render layout: "style/specimen",
-          locals: { klass: "studio_loader style: :spinner",
-                    note: "A small ring for a short wait beside text or in a control.",
-                    usage: erb.call("studio_loader style: :spinner") } do %>
+    <%= render layout: "style/specimen", locals: { trick: "spinner" } do %>
       <div data-loader-specimen="spinner" class="flex items-center gap-4">
         <%= studio_loader style: :spinner %>
         <%= studio_loader style: :spinner, size: 32 %>
@@ -35,40 +32,28 @@
       </div>
     <% end %>
 
-    <%= render layout: "style/specimen",
-          locals: { klass: "studio_skeleton :avatar / :card / :lines / :media",
-                    note: "Grey shapes of the content to come, so the page keeps its layout.",
-                    usage: [erb.call("studio_skeleton :avatar, count: 3"), erb.call('studio_skeleton :card, count: 3, class: "sm:grid-cols-3"')].join("\n") } do %>
+    <%= render layout: "style/specimen", locals: { trick: "skeleton" } do %>
       <div data-loader-specimen="skeleton" class="grid w-full gap-4">
         <%= studio_skeleton :avatar, count: 2, label: "Loading people" %>
         <%= studio_skeleton :lines, lines: 2, label: "Loading notes" %>
       </div>
     <% end %>
 
-    <%= render layout: "style/specimen",
-          locals: { klass: "studio_loader style: :bar, percent:",
-                    note: "A bar for a wait you can measure; with no percent it sweeps.",
-                    usage: [erb.call("studio_loader style: :bar, percent: 62"), erb.call("studio_loader style: :bar"), 'StudioLoader.setPercent(el, 80)'].join("\n") } do %>
+    <%= render layout: "style/specimen", locals: { trick: "progress_bar" } do %>
       <div data-loader-specimen="bar" class="grid w-full gap-4">
         <%= studio_loader style: :bar, percent: 62, label: "Uploading" %>
         <%= studio_loader style: :bar, label: "Importing" %>
       </div>
     <% end %>
 
-    <%= render layout: "style/specimen",
-          locals: { klass: "studio_loader style: :dots",
-                    note: "Three dots for a reply on its way, such as a chat answer.",
-                    usage: erb.call("studio_loader style: :dots") } do %>
+    <%= render layout: "style/specimen", locals: { trick: "typing_dots" } do %>
       <div data-loader-specimen="dots" class="flex items-center gap-6">
         <%= studio_loader style: :dots %>
         <span class="inline-flex items-center gap-2 rounded-2xl bg-inset px-3 py-2 text-sm text-body"><%= studio_loader style: :dots, size: 24, label: "Alex is typing" %></span>
       </div>
     <% end %>
 
-    <%= render layout: "style/specimen",
-          locals: { klass: "studio_loader_pending (inside a button)",
-                    note: "The button keeps its place and shows that it is working.",
-                    usage: ["<button class=\"btn btn-primary\">", "  <span data-loader-idle>Save</span>", "  #{erb.call('studio_loader_pending style: :spinner')}", "  <span data-loader-busy>Saving…</span>", "</button>"].join("\n") } do %>
+    <%= render layout: "style/specimen", locals: { trick: "busy_button" } do %>
       <div data-loader-specimen="button" class="flex flex-wrap items-center gap-3" x-data="{ busy: false }">
         <button type="button" class="btn btn-primary" x-bind:aria-busy="busy ? 'true' : 'false'" aria-busy="false"
                 x-on:click="busy = true; setTimeout(() => busy = false, 2000)" data-test="style-loader-save">
@@ -81,10 +66,7 @@
       </div>
     <% end %>
 
-    <%= render layout: "style/specimen",
-          locals: { klass: "studio_loader_overlay (full screen)",
-                    note: "The branded overlay, for a page that takes longer than 350ms.",
-                    usage: ['window.StudioLoader.show("Caption")', "window.StudioLoader.hide()"].join("\n") } do %>
+    <%= render layout: "style/specimen", locals: { trick: "overlay" } do %>
       <div data-loader-specimen="overlay">
         <button type="button" class="btn btn-secondary" data-test="style-loaders-overlay"
                 x-data x-on:click="window.StudioLoader && window.StudioLoader.show('Loading your page…'); setTimeout(() => window.StudioLoader && window.StudioLoader.hide(), 2000)">
@@ -93,10 +75,7 @@
       </div>
     <% end %>
 
-    <%= render layout: "style/specimen",
-          locals: { klass: "studio_pull_to_refresh (phones only)",
-                    note: "On a phone, pull down from the top of the page to reload it.",
-                    usage: [erb.call('studio_pull_to_refresh frame: "feed" do'), "  ...", erb_end].join("\n") } do %>
+    <%= render layout: "style/specimen", locals: { trick: "pull_refresh" } do %>
       <%# Drawn still, mid-refresh: this wrapper has no controller, so it never arms. %>
       <div data-loader-specimen="pull" class="studio-pull-refresh w-40 h-40 overflow-hidden rounded-2xl border border-subtle bg-surface pt-20 px-3" data-pull-state="refreshing">
         <span class="studio-pull-refresh-indicator" aria-hidden="true">
@@ -106,10 +85,7 @@
       </div>
     <% end %>
 
-    <%= render layout: "style/specimen",
-          locals: { klass: "studio_infinite_scroll id:, page:, next_url:",
-                    note: "The next page loads as the list's end comes near, and Load more stays.",
-                    usage: [erb.call('studio_infinite_scroll id: "posts", page: @page, next_url: @next_url do'), "  ...one page of items...", erb_end].join("\n") } do %>
+    <%= render layout: "style/specimen", locals: { trick: "infinite_scroll" } do %>
       <div data-loader-specimen="infinite" class="w-full">
         <%= render "style/loaders_feed_page", page: 1, feed_path: feed_path %>
       </div>

data/app/views/style/_modals.html.erb

@@ -14,8 +14,8 @@
      card behind ours. So this section owns a tiny, self-contained store + overlay
      and registers all specimen content itself.
 
-     Groups: Auth (the engine-owned FRAGMENTS an app's own sign-in card is built
-     from — the engine ships no auth card), Eligibility and entry (the
+     Groups: Auth (the engine's standard sign-in card, studio/auth/_sign_in_modal,
+     in demo mode), Eligibility and entry (the
      app-supplied-policy age-gate DOB primitive, gated by Studio.feature?(:age_gate)),
      Profile (crop / upload, opened
      through studio/cropper_assets), Web3 (wallet-connect and web3-step-up now
@@ -97,7 +97,8 @@
   # THE AUTH METHOD-TOGGLE DEFAULTS USED TO LIVE HERE (ml_default / g_default /
   # w_default / auth_toggles) and are gone with the card they configured. They
   # belonged to style/modals/_auth, a MIRROR of turf-monster's sign-in modal,
-  # retired on 2026-09-09. The engine ships no auth card to configure.
+  # retired on 2026-09-09. The engine's own card (studio/auth/_sign_in_modal,
+  # 2026-11-06) has no toggles: its specimen runs it in demo mode as shipped.
   #
   # The rule they were built to enforce OUTLIVES them and is worth keeping: a
   # TRIGGER must carry at least the gate its target's REGISTRATION carries, or
@@ -202,17 +203,15 @@
       <div class="bg-surface rounded-xl border border-subtle shadow-2xl p-6 w-full"
            :class="$store.dsModals.cardClasses()">
 
-        <%# --- Auth fragments --- %>
-        <%# NOT an auth card. The engine owns no sign-in modal — each app cards
-            its own on its own host section (turf-monster: style/host/_modals).
-            These two register the PIECES every app's auth card is built from,
-            which had no specimen until style/modals/_auth, a mirror of turf's
-            card, was retired on 2026-09-09 and took their only render with it. %>
-        <template x-if="$store.dsModals.current().id === 'ds-email-field'">
-          <div><%= render "style/modals/ds_email_field" %></div>
-        </template>
-        <template x-if="$store.dsModals.current().id === 'ds-resend-footer'">
-          <div><%= render "style/modals/ds_resend_footer" %></div>
+        <%# --- Auth --- %>
+        <%# The engine's standard sign-in card (studio/auth/_sign_in_modal), the
+            REAL partial in demo mode: Google and Send post nothing, and the
+            link-sent step and resend cooldown play. It folds in the two pieces
+            that used to be carded alone here, studio/modals/shared/_email_field
+            and studio/modals/auth/_resend_footer (Alex McRitchie, 2026-11-06:
+            "this should use the standard auth component with Google and Email"). %>
+        <template x-if="$store.dsModals.current().id === 'ds-sign-in'">
+          <div><%= render "studio/auth/sign_in_modal", modal_store: "dsModals", demo: true %></div>
         </template>
 
         <%# --- Onboarding step (its card now lives in Profile) --- %>
@@ -452,36 +451,27 @@
   <section id="modals-auth" class="space-y-5">
     <div class="space-y-1">
       <h3 class="type-h4 text-heading">Auth</h3>
-      <p class="text-muted text-sm">The engine ships no sign-in card, only these pieces.</p>
+      <p class="text-muted text-sm">The engine's standard sign-in card: Google, or, email magic link.</p>
     </div>
     <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-      <%# email field — the one piece every app's auth card renders. %>
       <%= render layout: "style/modal_specimen", locals: {
-            label:     "Email field",
-            reference: %(the modal family's email input (studio/modals/shared/_email_field) — a themed <input type="email"> that either posts through its own `name` or feeds an enclosing x-model, with locals name/id/value/placeholder/required/autocomplete/autofocus/input_class/x_model/x_ref/disabled_expr/validator. THE `validator` LOCAL IS A FORK, NOT A FLAG: off, the partial is self-contained and the SERVER stays the only boundary; on, it wraps itself in x-data="emailValidator()" and paints a right-edge spinner/check/X that only works if the CONSUMER ships that factory, so passing it without one yields an Alpine scope error and a dead indicator. The specimen draws both faces side by side; this guide ships no emailValidator, which is why the second indicator stays blank. Open with $store.dsModals.open('ds-email-field')),
-            open_expr: "$store.dsModals.open('ds-email-field')",
-            glow_when: ds_glow.call("ds-email-field") } do %>
+            label:     "Sign in",
+            reference: %(the engine's standard sign-in card as a modal (studio/auth/_sign_in_modal; the page form is studio/auth/_sign_in_card) — Google, then "or", then the email magic link, and on send the link-sent step with the shared resend footer (studio/modals/auth/_resend_footer) under the shared email field (studio/modals/shared/_email_field). Locals: heading, subheading (default "Sign in to" the app name), return_to (kept to an in-app path, rides both Google and the magic link), preamble and extras (partials above Google and after it, for age attestation or a Solana wallet button), google, magic_link, modal_store, demo. Real use posts Google to /auth/google_oauth2 (button_to POST, Turbo off) and the email to POST /magic_link. THIS SPECIMEN IS demo: true, SO NOTHING POSTS: Google is an inert button, Send waits on a timer, and the resend cooldown is 5s instead of 60s. Open with $store.dsModals.open('ds-sign-in')),
+            open_expr: "$store.dsModals.open('ds-sign-in')",
+            glow_when: ds_glow.call("ds-sign-in") } do %>
         <div class="pointer-events-none w-40 rounded-lg bg-surface border border-subtle shadow p-4 space-y-2">
-          <span class="block h-1.5 w-12 rounded" style="background: var(--color-text); opacity: .18"></span>
-          <span class="block h-6 w-full rounded border" style="border-color: var(--color-border-strong)"></span>
-          <span class="flex items-center h-6 w-full rounded border px-1.5" style="border-color: var(--color-border-strong)">
-            <span class="block h-1.5 flex-1 rounded" style="background: var(--color-text); opacity: .12"></span>
-            <span class="block w-3 h-3 rounded-full ml-1" style="background: var(--color-success); opacity: .55"></span>
+          <span class="block h-2 w-20 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+          <span class="flex items-center justify-center gap-1 h-6 w-full rounded border" style="border-color: var(--color-border-strong)">
+            <span class="block w-2.5 h-2.5 rounded-full" style="background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0)"></span>
+            <span class="block h-1.5 w-12 rounded" style="background: var(--color-text); opacity: .2"></span>
           </span>
-        </div>
-      <% end %>
-
-      <%# resend footer — the piece both link-sent steps share. %>
-      <%= render layout: "style/modal_specimen", locals: {
-            label:     "Resend footer",
-            reference: %(the magic-link resend footer (studio/modals/auth/_resend_footer) — the resend link, its error line and the Close beneath it, shared by an auth card's magic-link-sent and magic-link-resent steps because the two are identical, which is why it was extracted. IT RESOLVES FROM AN ENCLOSING x-data, NOT A STORE: it reads props.submitting, props.resendCooldown and props.resendError and calls resendMagicLink(), so a scope supplying none of them fails SILENTLY — nothing errors, the link simply never enables and the cooldown never counts. The specimen supplies a stand-in host so all three states are reachable, and shortens the cooldown from production's 60s to 5s because the partial does not own the duration, the host does. Open with $store.dsModals.open('ds-resend-footer')),
-            open_expr: "$store.dsModals.open('ds-resend-footer')",
-            glow_when: ds_glow.call("ds-resend-footer") } do %>
-        <div class="pointer-events-none w-40 rounded-lg bg-surface border border-subtle shadow p-4 text-center space-y-2">
-          <div class="text-2xl leading-none">📬</div>
-          <span class="block h-1.5 w-24 mx-auto rounded" style="background: var(--color-text); opacity: .12"></span>
-          <span class="block h-1.5 w-16 mx-auto rounded" style="background: var(--color-primary); opacity: .7"></span>
-          <span class="block h-1.5 w-10 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+          <span class="flex items-center gap-1.5">
+            <span class="block h-px flex-1" style="background: var(--color-border-strong)"></span>
+            <span class="block h-1 w-2 rounded" style="background: var(--color-text); opacity: .25"></span>
+            <span class="block h-px flex-1" style="background: var(--color-border-strong)"></span>
+          </span>
+          <span class="block h-6 w-full rounded border" style="border-color: var(--color-border-strong)"></span>
+          <span class="block h-5 w-full rounded" style="background: var(--color-primary)"></span>
         </div>
       <% end %>
     </div>