studio-engine 0.59.0 → 0.60.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 47709f3ad708764cdbf14ab7bb8f82d3698180f201a123e7ec097363ec5f260b
-  data.tar.gz: 1fc08166c64c745d19c2bf9c640aac8ecac5726902fa4157a136fd8ddb0ed821
+  metadata.gz: d48986ae997517eba2f2ae27edf0ef145069a69d09382ee2bdced6ff7839a630
+  data.tar.gz: e2e6b4b71af934b23536a94a03352e0340f47b8add6398f485f1f9c1262c240b
 SHA512:
-  metadata.gz: 300e04e693d5cba7a50d38abd445f71163e3e24b35f693f498e5a167442b389a624fcd3a618231701cd4d116b9a248dd8e1b3279b5ea5fce6d688a3fb8b083ec
-  data.tar.gz: c93897b51c64938d0446f73038c0273a815fb761a357c53b54d615e7e11ae3eb0ca4138a8ea918b3fd05fe4053ac58c64445e4cc2fdc0aa5dc154b7828768a2d
+  metadata.gz: 96fce3596b86f2ea40f0cce0e8801cb57dc0d848e00d68f4b151b72885944fe99b346e49241d0ece5d79ae8a7293e4829ad5b055e38bddb12e3a8ee3730f8169
+  data.tar.gz: c5003ca60f6d27a5ea6c81b40ca50902f0ce6df4f11fc2a127392e1993af1147209f13a580c18006b69585b7ce1e8882b7da50dc30cfbd8c05ad4c7daf4edb50

data/CHANGELOG.md

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

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

@@ -47,11 +47,40 @@
       which one is missing rather than a vague "unavailable". %>
   <% geo_routes = respond_to?(:admin_geo_path) %>
   <% geo_live   = Studio.geo_blocking_enabled? && geo_routes %>
-  <% geo_hint   = geo_routes ? "Set ENABLE_GEO_BLOCKING=true" : "Draw the geo routes first" %>
-  <% geo_title  = geo_routes ? "Set ENABLE_GEO_BLOCKING=true to manage geo blocking" : "Set config.draw_geo_routes = true in config/initializers/studio.rb, then ENABLE_GEO_BLOCKING=true" %>
-  <% geo_close  = local_assigns[:close_action].presence %>
 
-  <% if local_assigns.fetch(:variant, :dropdown).to_sym == :sidebar %>
+  <%# THE HINT IS TWO PIECES, prose and machine string, and they are separate
+      elements on purpose. The subtitle exists to hand the operator a string to
+      copy, and that string is one unbreakable token — no spaces, and neither an
+      underscore nor an "=" is a break opportunity. Left as one run of text it
+      measured 187px inside the dropdown's 142px content box and painted past the
+      panel's right border, in every theme and at every width.
+
+      Splitting it lets the break class land on the token ALONE: prose still
+      wraps at word boundaries, and only the machine string breaks mid-character.
+      The class is `break-all`, not `break-words`, deliberately — the engine
+      ships no compiled CSS of its own, so a utility reaches a consumer only when
+      that consumer's Tailwind build scans these views. `break-all` is already
+      carried by engine views that print S3 keys, emails and magic URLs, so it is
+      in every consumer's output today; `break-words` appears nowhere in the
+      engine, and a consumer on a stale build would silently render this row with
+      no break at all — the bug again, in production. Widening the panel was the
+      third option and was declined: w-44 is the shared admin menu for every app,
+      and one row's subtitle is not a reason to move it.
+
+      The code string is also the ANSWER to the title-only instruction. In the
+      no-routes branch the initializer line used to live only in `title`, which
+      is mouse-only and invisible on touch; it is visible text now, and `title`
+      keeps the long form with the file path. %>
+  <% geo_lead  = geo_routes ? "Set" : "Draw the geo routes first" %>
+  <% geo_code  = geo_routes ? "ENABLE_GEO_BLOCKING=true" : "config.draw_geo_routes = true" %>
+  <% geo_title = geo_routes ? "Set ENABLE_GEO_BLOCKING=true to manage geo blocking" : "Set config.draw_geo_routes = true in config/initializers/studio.rb, then ENABLE_GEO_BLOCKING=true" %>
+  <% geo_close = local_assigns[:close_action].presence %>
+
+  <%# `local_assigns[...].presence`, not `fetch(:variant, :dropdown)`. fetch only
+      defaults an ABSENT key, so a caller computing the variant inline —
+      `variant: sidebar? && :sidebar` — hands over an explicit nil, and the old
+      `nil.to_sym` raised NoMethodError inside admin chrome on every page. %>
+  <% if local_assigns[:variant].presence&.to_sym == :sidebar %>
     <%# Sidebar variant: the wide emoji row the link sidebar's own sections use,
         so an engine-owned row is indistinguishable from a host-declared one. %>
     <% if geo_live %>
@@ -65,13 +94,21 @@
         </span>
       <% end %>
     <% else %>
-      <span class="flex items-start gap-3 px-4 py-3 text-sm text-muted cursor-not-allowed select-none"
+      <%# No `select-none` here, and that is the fix rather than an omission: the
+          row's whole job in this state is to hand over the string below, and
+          select-none made it unselectable. role/aria-disabled give a screen
+          reader the "unavailable destination" this paints for a sighted eye. %>
+      <span class="flex items-start gap-3 px-4 py-3 text-sm text-muted cursor-not-allowed"
+            role="link"
+            aria-disabled="true"
             data-test="geo-signpost-disabled"
             title="<%= geo_title %>">
         <span class="text-lg leading-none flex-shrink-0">🌍</span>
         <span class="min-w-0">
           <span class="block font-medium truncate">Geo</span>
-          <span class="block text-xs text-muted leading-snug mt-0.5"><%= geo_hint %></span>
+          <span class="block text-xs text-muted leading-snug mt-0.5"><%= geo_lead %>
+            <code class="font-mono break-all"><%= geo_code %></code>
+          </span>
         </span>
       </span>
     <% end %>
@@ -81,11 +118,15 @@
     <% if geo_live %>
       <a href="<%= admin_geo_path %>" class="block px-4 py-2 text-sm text-body hover:text-heading hover:bg-surface-alt transition">Geo</a>
     <% else %>
-      <span class="block px-4 py-2 text-sm text-muted cursor-not-allowed select-none"
+      <span class="block px-4 py-2 text-sm text-muted cursor-not-allowed"
+            role="link"
+            aria-disabled="true"
             data-test="geo-signpost-disabled"
             title="<%= geo_title %>">
         Geo
-        <span class="block text-xs text-muted"><%= geo_hint %></span>
+        <span class="block text-xs text-muted"><%= geo_lead %>
+          <code class="font-mono break-all"><%= geo_code %></code>
+        </span>
       </span>
     <% end %>
   <% end %>

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

@@ -1,27 +1,39 @@
 <%#
-  ageVerifyModal factory — the Alpine data for the engine age-gate DOB modal
-  (studio/modals/blocks/_age_verify). Ships here, at PAGE level, on purpose: the
+  birthdayModal factory — the Alpine data for the engine birthday DOB modal
+  (studio/modals/blocks/_birthday). Ships here, at PAGE level, on purpose: the
   modal partial mounts inside a modal host's single-root template, and a script
   cloned out of a template never runs. So a consumer renders THIS once in its
   layout (like the shared alpine factories), and the modal partial anywhere below
-  just references window.ageVerifyModal. Mirrors how studio/_cropper_assets homes
+  just references window.birthdayModal. Mirrors how studio/_cropper_assets homes
   the cropPhotoModal factory for the crop modal.
 
   The factory holds ZERO legal policy — no age default, no state table. minAge is
   whatever the app hands it (a required prop upstream); the client "too young"
   hint is UX only, and the server recompute at submit_url stays authoritative.
 
-  opts: { minAge, state, url, store, demo }.
+  opts: { minAge, state, url, store, demo, demoUnderage, gateId }.
     minAge  app-supplied minimum age (no engine fallback — 0 means unsupplied).
     state   passive jurisdiction label (server-detected upstream; never editable).
     url     app endpoint the DOB POSTs to (the app owns the authoritative check).
     store   Alpine modal store name backing close() (default "modals").
     demo    style-guide preview: resolve locally, skip the network POST.
+    demoUnderage  demo only — take the REFUSED branch, so the style guide can
+            walk the handoff with no backend.
+    gateId  modal id opened on a refusal (default "age-gate"). Blank falls back
+            to the inline error line, for a host mid-adoption that has not
+            registered the second card yet.
+
+  THE REFUSAL IS A HANDOFF, NOT AN ERROR (2026-08-24). This factory used to
+  early-return on an under-age date, leaving the modal red with its own button
+  disabled — the one state with nothing to press. `_reject` now opens the
+  age-gate card instead. `_finish` is unchanged: the success path still flips
+  session.ageVerified and dispatches `age-verified`, which is the hook consuming
+  apps already listen on, so nothing downstream had to change.
 %>
 <script>
   (function () {
-    if (window.ageVerifyModal) return;
-    window.ageVerifyModal = function (opts) {
+    if (window.birthdayModal) return;
+    window.birthdayModal = function (opts) {
       opts = opts || {};
       var now = new Date();
       return {
@@ -34,6 +46,10 @@
         url: opts.url || "",
         store: opts.store || "modals",
         demo: !!opts.demo,
+        demoUnderage: !!opts.demoUnderage,
+        // Blank gateId => no second card registered yet; the refusal falls back
+        // to the error line so a host mid-adoption still SAYS something.
+        gateId: opts.gateId || "",
         months: [
           { n: 1, label: "January" }, { n: 2, label: "February" }, { n: 3, label: "March" },
           { n: 4, label: "April" }, { n: 5, label: "May" }, { n: 6, label: "June" },
@@ -83,17 +99,58 @@
           try { Alpine.store(this.store).close(); } catch (e) {}
           window.dispatchEvent(new CustomEvent("age-verified"));
         },
+        // Refusal path: hand off to the age-gate card, which owns the CTAs
+        // ("watch instead", "fix your birthday"). Deliberately NOT an error —
+        // the card that refuses is also the card that offers somewhere to go.
+        // swap(), not open(), so the back-link on that card returns HERE.
+        _reject(message) {
+          if (!this.gateId) {
+            // No gate registered (host mid-adoption): say it inline rather than
+            // closing silently, which would look like the date was accepted.
+            this.error = message || this._refusalLine();
+            return;
+          }
+          try {
+            Alpine.store(this.store).swap(this.gateId, {
+              minAge: this.minAge,
+              state: this.stateCode,
+              message: message || "",
+              // The DATE, so the gate card can say WHEN rather than only "no".
+              // Passed as parts rather than a Date: this crosses a store, and a
+              // Date through Alpine's reactive proxy is a class waiting to be
+              // stringified by something downstream.
+              dobYear: parseInt(this.year, 10) || null,
+              dobMonth: parseInt(this.month, 10) || null,
+              dobDay: parseInt(this.day, 10) || null
+            });
+          } catch (e) {
+            this.error = message || this._refusalLine();
+          }
+        },
+        _refusalLine() {
+          return "You must be " + this.minAge + "+" +
+            (this.stateCode ? " in " + this.stateCode : "") + ".";
+        },
+        get isUnderage() {
+          return this.computedAge !== null && !!this.minAge && this.computedAge < this.minAge;
+        },
         submit() {
           if (!this.complete || this.submitting) return;
           this.error = "";
-          // Client courtesy gate only — the server recompute is authoritative.
-          if (this.computedAge !== null && this.minAge && this.computedAge < this.minAge) return;
+          // NO client-side refusal. This used to early-return on an under-age
+          // date, which is what left the card red with a disabled button. The
+          // date goes to the server like any other; the server recompute is and
+          // always was the authoritative check, and its verdict routes here.
           this.submitting = true;
           var self = this;
           if (this.demo) {
-            // Style-guide preview: no backend, resolve locally so the modal
-            // demonstrates the success handoff without an endpoint.
-            setTimeout(function () { self.submitting = false; self._finish(); }, 450);
+            // Style-guide preview: no backend. demoUnderage picks which branch
+            // the local resolve takes, so the guide can walk BOTH outcomes.
+            setTimeout(function () {
+              self.submitting = false;
+              if (self.demoUnderage || self.isUnderage) self._reject();
+              else self._finish();
+            }, 450);
             return;
           }
           var csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content || "";
@@ -102,11 +159,20 @@
             headers: { "Content-Type": "application/json", "X-CSRF-Token": csrf, "Accept": "application/json" },
             body: JSON.stringify({ year: this.year, month: this.month, day: this.day })
           })
-            .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
+            .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, status: r.status, body: j }; }); })
             .then(function (res) {
               self.submitting = false;
               if (res.ok && res.body && res.body.verified) { self._finish(); return; }
-              self.error = (res.body && res.body.error) ||
+              // The app distinguishes "too young" from "bad request". An explicit
+              // underage verdict — body.underage, or a 403 — is a REFUSAL and
+              // routes to the gate card; anything else is a real error and stays
+              // on the red line here.
+              var body = res.body || {};
+              if (body.underage === true || res.status === 403) {
+                self._reject(body.error || body.message || "");
+                return;
+              }
+              self.error = body.error ||
                 "We couldn't verify your age. Please check the date and try again.";
             })
             .catch(function () {

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

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

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

@@ -5,8 +5,8 @@
   inside a modal host's single-root template, and a script cloned out of a template
   never runs. So a consumer renders THIS once in its layout (like the other shared
   Alpine factories), and the modal partial anywhere below just references
-  window.levelingActionModal. Mirrors how studio/_age_verify_assets homes the
-  ageVerifyModal factory.
+  window.levelingActionModal. Mirrors how studio/_birthday_assets homes the
+  birthdayModal factory.
 
   CRITICAL BOUNDARY — this factory is UI ONLY. It POSTs to an app-supplied
   submitUrl and reacts to a NEUTRAL JSON contract; it holds ZERO on-chain logic,

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

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

data/app/views/studio/modals/_web3_step_up.html.erb

@@ -0,0 +1,292 @@
+<%#
+  Web3 step-up — the shared "your session cannot sign on-chain" card.
+
+  THE SITUATION IT NAMES: an account that holds a self-custody wallet signs in
+  with a WEB2 credential — a magic link, email, or Google. Both facts are
+  ordinary alone; together they mean the person is signed in but cannot sign
+  anything on-chain. `SessionContext` has modelled that intersection since it was
+  lifted into this engine (`web2?` AND `phantom_linked?`) and nothing acted on
+  it, so every web3 Studio app logged a wallet owner straight in with no web3
+  beat at all. This partial is the missing step; SessionContext stays the state.
+
+  Ported from turf-monster (2026-08-21), where it shipped first as the working
+  vertical. What is NOT shared — and deliberately stays in the host — is WHEN to
+  show it and what it costs to dismiss: the host's policy decides who sees the
+  card, and the host's gates keep their own teeth. This partial owns ONE step.
+
+  ADVISORY BY CONSTRUCTION. The card is dismissible and says so. A self-custody
+  wallet is the one credential a host cannot reset for a user, so a card that
+  could not be closed would lock a legitimate owner out of their own account
+  over a wallet they merely cannot reach right now. That is why the escape hatch
+  below is not optional decoration — and why enforcement must live in the host's
+  on-chain gates, never in this card.
+
+  Locals (all optional, defaults via local_assigns.fetch):
+    heading         — (default "Sign in with your wallet")
+    subtext         — the one-line why
+    help_url        — the escape hatch for a user who cannot reach their wallet
+                      (default "/help"). Set to nil to drop the line entirely.
+    help_label      — (default "Get help")
+    picker_modal_id — the host's brand picker, reached by "Use a different
+                      wallet" (default "wallet-connect"). The picker is expected
+                      to honour a `backTo` prop pointing back at this card.
+    modal_id        — this card's own id, passed to the picker as backTo
+                      (default "web3-step-up")
+    modal_store     — Alpine store name (default "modals"; the living style
+                      guide mounts a page-scoped host and passes "dsModals")
+    dismiss_event   — window event dispatched on dismissal (default
+                      "web3-step-up-dismissed"). The HOST decides what happens
+                      next — typically releasing an onboarding chain it held
+                      while this card had the screen. This partial never opens
+                      another modal itself.
+
+  PROPS (set by the opener, all optional — the host's policy produces them):
+    provider      — normalised brand key ('phantom' / 'solflare' / 'backpack'),
+                    or null when the account linked its wallet before the host
+                    started remembering the brand.
+    providerLabel — how that brand writes its own name, for the row.
+    walletHint    — the truncated address (4…4), so the user can confirm the
+                    card is asking for the wallet they think it is.
+
+  WITH a remembered provider this is ONE row. Without one it is the same card
+  with the picker as its primary action — the fallback is never a dead end.
+
+  CONTRACT WITH THE HOST'S JS. Signing calls `window.solanaConnectAndVerify(name,
+  { linkMode: false })`, the global every web3 Studio app already provides, and
+  hands a success to `window.handleSolanaVerifySuccess` when present. linkMode is
+  deliberately FALSE: the link path binds to the current user but does not grant
+  the on-chain session, which is the thing this card exists to obtain. One
+  inherited consequence, stated plainly: signing with a DIFFERENT wallet signs
+  you into that wallet's account, exactly as a standalone wallet button does. The
+  walletHint is shown precisely so that is a visible choice, not a surprise.
+
+  CRITICAL (Alpine): this partial is cloned from a <template x-if> by the modal
+  host, so it must have ONE root element, and the x-data below is a
+  DOUBLE-QUOTED attribute — a single " anywhere inside it (a code comment
+  included) closes it early and the whole component mounts as a silent no-op that
+  still renders markup. Keep every inner string SINGLE-quoted.
+%>
+<%
+  heading         = local_assigns.fetch(:heading, "Sign in with your wallet")
+  subtext         = local_assigns.fetch(:subtext,
+                      "This account is secured by a Solana wallet. You are signed in, but this " \
+                      "session can’t sign on-chain — so on-chain actions still need your wallet.")
+  help_url        = local_assigns.fetch(:help_url, "/help")
+  help_label      = local_assigns.fetch(:help_label, "Get help")
+  picker_modal_id = local_assigns.fetch(:picker_modal_id, "wallet-connect")
+  modal_id        = local_assigns.fetch(:modal_id, "web3-step-up")
+  modal_store     = local_assigns.fetch(:modal_store, "modals")
+  dismiss_event   = local_assigns.fetch(:dismiss_event, "web3-step-up-dismissed")
+%>
+<div x-data="{
+       get props() { var c = $store.<%= modal_store %>.current(); return (c && c.props) || {}; },
+       connecting: false,
+       error: '',
+       // Set when the remembered wallet turns out not to be reachable in THIS
+       // browser (a different machine, the extension removed). It flips the card
+       // to the picker rather than leaving the user pressing a button that
+       // cannot work.
+       providerMissing: false,
+       // Which wallets this document can actually see. Read on a poll, NOT once
+       // at mount: wallet provider registration fills in asynchronously, and
+       // this card auto-opens on the render right after auth — the worst
+       // possible moment. A single early read is a coin flip that would badge an
+       // installed wallet as missing.
+       wallets: [],
+       _poll: null,
+       _onRegister: null,
+       get provider() { return this.props.provider || null; },
+       get providerLabel() { return this.props.providerLabel || null; },
+       get walletHint() { return this.props.walletHint || null; },
+       // One-click only while we remember a brand AND it is still reachable.
+       get canOneClick() { return !!this.provider && !this.providerMissing; },
+       // Does the remembered brand answer in THIS document right now? Drives the
+       // Installed badge, the same one the connect picker shows, so a detected
+       // wallet reads identically in both places.
+       get detected() {
+         var name = ('' + (this.provider || '')).toLowerCase();
+         if (!name) return false;
+         return (this.wallets || []).some(function(w) { return w.name && w.name.toLowerCase() === name; });
+       },
+       init() {
+         var self = this;
+         this.refresh();
+         this._onRegister = function() { if (!self.connecting) self.refresh(); };
+         window.addEventListener('wallet-standard:register-wallet', this._onRegister);
+         this._poll = setInterval(function() {
+           if (self.connecting) return;
+           self.refresh();
+           if (self.wallets.length > 0) { clearInterval(self._poll); self._poll = null; }
+         }, 1000);
+       },
+       destroy() {
+         if (this._poll) clearInterval(this._poll);
+         if (this._onRegister) window.removeEventListener('wallet-standard:register-wallet', this._onRegister);
+       },
+       refresh() {
+         this.wallets = (window.walletProvider && window.walletProvider.available && window.walletProvider.available()) || [];
+       },
+       reachable(name) {
+         if (!window.walletProvider || !window.walletProvider.get) return false;
+         return !!window.walletProvider.get(name);
+       },
+       async signIn() {
+         if (this.connecting) return;
+         var name = this.provider;
+         if (!name) return this.openPicker();
+         if (!this.reachable(name)) {
+           this.providerMissing = true;
+           this.error = 'We could not reach your ' + (this.providerLabel || 'wallet') + ' in this browser.';
+           return;
+         }
+         if (typeof window.solanaConnectAndVerify !== 'function') {
+           this.error = 'Wallet sign-in is unavailable on this page.';
+           return;
+         }
+         this.connecting = true; this.error = '';
+         try {
+           var result = await window.solanaConnectAndVerify(name, { linkMode: false });
+           if (result && result.success) {
+             if (typeof window.handleSolanaVerifySuccess === 'function') window.handleSolanaVerifySuccess(result);
+             // Reload rather than follow a redirect: the user was already
+             // somewhere, and the only thing that changed is that this session
+             // can now sign. Sending them to a post-login landing would move
+             // them off the page they were reading.
+             window.location.reload();
+             return;
+           }
+           this.error = (result && result.error) || 'Verification failed.';
+         } catch (e) {
+           var msg = (e && e.code === 4001) ? 'Signature rejected' : ((e && e.message) || 'Connection failed');
+           if (typeof parseSolanaError === 'function') msg = parseSolanaError(msg);
+           this.error = msg;
+         }
+         this.connecting = false;
+       },
+       // Hand off to the host's brand picker. swap() rather than open() so the
+       // picker's back arrow returns HERE instead of stranding the user.
+       openPicker() {
+         if (this.connecting) return;
+         $store.<%= modal_store %>.swap('<%= picker_modal_id %>',
+           { backTo: '<%= modal_id %>', stepUpProps: this.props, returnUrl: window.location.href });
+       },
+       // Dismiss. Dispatched so the HOST knows this card is done and can release
+       // whatever it was holding — this partial never opens another modal.
+       dismiss() {
+         if (this.connecting) return;
+         window.dispatchEvent(new CustomEvent('<%= dismiss_event %>'));
+         $store.<%= modal_store %>.close();
+       }
+     }"
+     class="relative">
+
+  <%# Brand sprite — MUST live inside this card's single root so the host's
+      <template x-if> clones it along with the card. A sibling of the root is
+      dropped and the icon paints empty. %>
+  <%= render "studio/modals/blocks/wallet_brand_sprite" %>
+
+  <div class="relative mb-1">
+    <button @click="dismiss()" :disabled="connecting"
+            class="absolute top-0 right-0 -mr-1 text-secondary hover:text-heading text-xl leading-none disabled:opacity-50"
+            aria-label="Close">&times;</button>
+  </div>
+
+  <%= render "studio/modals/blocks/card_header", icon_emoji: "🔐", title: heading do %>
+    <p class="text-sm text-body"><%= subtext %></p>
+  <% end %>
+
+  <%# PRIMARY — THE STANDARD WEB3 AUTH BUTTON: a wallet row, not a filled CTA.
+      Same shape the connect picker uses — brand mark, the wallet's own name, an
+      Installed badge, chevron — so a wallet reads identically everywhere it is
+      offered and this card does not invent a third look for one action.
+
+      It carries `pulse-cta` (engine-motion) because it is the ONE target on the
+      card and the whole point of the card is that the user should press it. %>
+  <template x-if="canOneClick">
+    <div>
+      <button type="button" @click="signIn()" :disabled="connecting"
+              style="--pulse-cta-color: var(--color-primary); --pulse-cta-strength: 0.4; --pulse-cta-scale: 1.02"
+              class="pulse-cta w-full flex items-center gap-3 p-3 rounded-xl bg-surface-alt border border-strong hover:bg-surface transition text-left disabled:opacity-60 disabled:cursor-wait">
+        <span class="w-9 h-9 rounded-lg overflow-hidden flex items-center justify-center shrink-0">
+          <svg class="w-9 h-9" aria-hidden="true"><use :href="'#se-wallet-' + provider"></use></svg>
+        </span>
+        <span class="font-semibold text-heading" x-text="providerLabel"></span>
+        <span class="ml-auto flex items-center gap-2">
+          <span x-show="connecting" class="inline-flex items-center gap-1.5 text-xs text-secondary"><span class="spinner" aria-hidden="true"></span>Connecting&hellip;</span>
+          <span x-show="!connecting && detected" class="badge border-primary text-primary">Installed</span>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-muted">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+          </svg>
+        </span>
+      </button>
+      <%# One line on what pressing it DOES. A signature prompt is alarming
+          without it, and "no funds move" is the difference between clicking and
+          bailing. The address rides here so the user can confirm the card is
+          asking for the wallet they think it is. %>
+      <p class="text-[11px] text-muted mt-1.5 px-1">
+        Signing proves the wallet is yours &mdash; it does not move any funds.
+        <template x-if="walletHint">
+          <span>Wallet <span class="font-mono text-secondary" x-text="walletHint"></span></span>
+        </template>
+      </p>
+    </div>
+  </template>
+
+  <%# No remembered brand — the same row shape with no mark to show, so the two
+      halves of this card look like one card. %>
+  <template x-if="!canOneClick">
+    <button type="button" @click="openPicker()" :disabled="connecting"
+            style="--pulse-cta-color: var(--color-primary); --pulse-cta-strength: 0.4; --pulse-cta-scale: 1.02"
+            class="pulse-cta w-full flex items-center gap-3 p-3 rounded-xl bg-surface-alt border border-strong hover:bg-surface transition text-left disabled:opacity-60">
+      <%# A neutral wallet mark, NOT an emoji. This tile sits inches from a real
+          brand mark, so a platform emoji (the first pass used U+1F45B PURSE)
+          reads as a pink handbag next to Phantom and is the one thing on the
+          card that belongs to no design system. Stroked in the same idiom as
+          the chevron beside it, on theme tokens.
+
+          A billfold: body plus clasp, and NO band across the top. The first
+          drawing had one and it read as a credit-card magstripe at 20px — the
+          wrong object on a card whose whole subject is a wallet. %>
+      <span class="w-9 h-9 rounded-lg bg-inset flex items-center justify-center shrink-0" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" class="w-5 h-5 text-secondary">
+          <rect x="3" y="6.5" width="18" height="11" rx="2.5" />
+          <circle cx="16.6" cy="12" r="1.3" fill="currentColor" stroke="none" />
+        </svg>
+      </span>
+      <span class="font-semibold text-heading">Connect your wallet</span>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="ml-auto w-4 h-4 text-muted">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+      </svg>
+    </button>
+  </template>
+
+  <template x-if="error">
+    <p class="text-red-400 text-sm mt-3 text-center" x-text="error"></p>
+  </template>
+
+  <%# SECONDARY — always reachable, so a user whose remembered wallet is the
+      wrong one is never cornered by our memory of it. %>
+  <template x-if="canOneClick">
+    <button type="button" @click="openPicker()" :disabled="connecting"
+            class="mt-3 block w-full text-center text-sm text-secondary hover:text-heading disabled:opacity-50">
+      Use a different wallet
+    </button>
+  </template>
+
+  <div class="mt-4 pt-3 border-t border-strong">
+    <button type="button" @click="dismiss()" :disabled="connecting"
+            class="block w-full text-center text-sm text-secondary hover:text-heading disabled:opacity-50">
+      Not now
+    </button>
+    <%# THE ESCAPE HATCH. A self-custody wallet is the one credential a host
+        cannot reset for the user, so the card must not end without a way to
+        reach a human. Droppable only by passing help_url: nil, which is a
+        deliberate act at the callsite rather than an omission. %>
+    <% if help_url.present? %>
+      <p class="mt-2 text-center text-[11px] text-muted">
+        Can&rsquo;t access your wallet?
+        <a href="<%= help_url %>" class="underline hover:text-secondary"><%= help_label %></a>
+      </p>
+    <% end %>
+  </div>
+</div>