studio-engine 0.60.0 → 0.60.2

data/app/views/style/modals/_age_gate.html.erb

@@ -0,0 +1,21 @@
+<%#
+  Living style guide specimen for the engine AGE GATE refusal card
+  (studio/modals/blocks/_age_gate). New 2026-08-24.
+
+  It is reached two ways, and both are worth seeing:
+    - directly, from its own card here
+    - as the HANDOFF from the birthday card's refused branch, which is how a
+      real person meets it
+
+  Demo values only. watch_url points at an anchor rather than a route because the
+  engine has no idea what a contest is — the target is app-supplied, and a host
+  passes its own contest path. The back link swaps to 'birthday', the id this
+  page registers for the DOB card, so the round trip works on this page exactly
+  as it does in an app.
+%>
+<%= render "studio/modals/blocks/age_gate",
+      min_age:           21,
+      state:             "CA",
+      watch_url:         "#demo-watch-contest",
+      birthday_modal_id: "birthday",
+      modal_store:       "dsModals" %>

data/app/views/style/modals/_birthday.html.erb

@@ -0,0 +1,59 @@
+<%#
+  Living style guide specimen for the engine BIRTHDAY DOB card
+  (studio/modals/blocks/_birthday, renamed from _age_verify on 2026-08-24).
+  Opened on the page-scoped dsModals host.
+
+  TWO MODES, ONE CARD, chosen by props.validates — the same choice a host makes
+  by passing min_age or leaving it out:
+
+    validates: true   the app HAS a bar. min_age + state ride in, the card says
+                      what the rule is, and submitting takes the refused branch
+                      so the guide can walk the handoff to the age-gate card.
+    validates: false  the app has NO bar. No min_age at all: the card is a plain
+                      birthday asker, which is what a hub app wants when it
+                      collects the date for a greeting rather than for entry.
+
+  The point of the seam: every legal value here is a DEMO the app feeds. The
+  engine primitive hardcodes no age and no state table, which is why the same
+  partial serves an app whose minimum is jurisdiction-dependent and an app with
+  no minimum at all.
+%>
+<%# ABSENT `validates` MEANS VALIDATING, and the default has exactly one home
+    here so the two branches cannot disagree about it.
+
+    Why absent is not "no bar": the only card that can REACH the age gate is the
+    validating one — the no-bar card carries no min_age, so the factory's _reject
+    never fires. So every arrival with no props is a return trip from the gate,
+    and `back()` swaps with EMPTY props by design (blocks/_age_gate.html.erb).
+    Reading undefined as falsy sent that return trip to the NO-BAR card, where
+    resubmitting the SAME under-age date was accepted — the guide demonstrating an
+    age gate being bypassed. Caught in review, 2026-08-25.
+
+    The engine primitive is right and is NOT changed: in a real host the mode
+    comes from ERB locals, not from a prop, so this is a two-mode SPECIMEN's
+    problem alone. %>
+<div x-data="{
+       get props() { var c = $store.dsModals.current(); return (c && c.props) || {} },
+       get validates() { return this.props.validates !== false; }
+     }">
+  <template x-if="validates">
+    <div><%= render "studio/modals/blocks/birthday",
+          min_age:       21,
+          state:         "CA",
+          submit_url:    "#demo-birthday",
+          modal_store:   "dsModals",
+          demo:          true,
+          demo_underage: true,
+          fine_print:    "Demo policy the app supplies: 21+ in CA. The engine hardcodes no age and no state table. Submitting from here takes the REFUSED branch, so you land on the age-gate card." %></div>
+  </template>
+
+  <%# No min_age at all — not min_age: 0, which would be the app claiming a bar
+      of zero. Omitting it is how a host says "I do not gate on this". %>
+  <template x-if="!validates">
+    <div><%= render "studio/modals/blocks/birthday",
+          submit_url:  "#demo-birthday",
+          modal_store: "dsModals",
+          demo:        true,
+          fine_print:  "No age bar on this app. The card asks for the date and nothing gates on it — the eligibility wording and the refusal handoff are both absent." %></div>
+  </template>
+</div>

data/app/views/style/modals/_cosign_rejected.html.erb

@@ -0,0 +1,36 @@
+<%#
+  Living style guide specimen — the "we did not co-sign that" refusal.
+
+  APP-SPECIFIC FLOW, engine chrome only. What this card names is turf-monster's:
+  POST confirm_onchain_entry answered 422 with code `tx_rejected`, meaning the
+  server refused to co-sign because the submitted transaction did not match the
+  entry it had prepared. The engine owns no entry preparation, no co-signing and
+  no verdict — it lends `blocks/_card_header` and nothing else, exactly as
+  style/modals/_entry_tokens borrows chrome for a flow the engine does not own.
+
+  WHY THE COPY IS VAGUE, and why a reviewer should not "improve" it: good actors
+  never see this card. It fires on a tampered or mismatched transaction, so the
+  copy is deliberately reassuring and deliberately silent about WHICH
+  server-side check failed — naming the check would help an attacker probe the
+  validation. The reassurance ("nothing was submitted and your funds are safe")
+  is the part that matters to the one honest user who ever hits it.
+
+  Single root: the outer <div> is the host's required root.
+%>
+<div x-data="{}">
+  <%= render "studio/modals/blocks/card_header",
+        icon_emoji: "🛡️",
+        title: "Transaction not signed" do %>
+    <p class="text-sm text-body">
+      For your security we didn&rsquo;t co-sign this transaction &mdash; it
+      didn&rsquo;t match the entry we prepared, so nothing was submitted and your
+      funds are safe. Please close this and try entering again. If it keeps
+      happening, <span class="text-primary">contact support</span>.
+    </p>
+  <% end %>
+
+  <%# One button, because there is exactly one thing to do. The host also closes
+      on escape and click-outside; this card is dismissible by design. %>
+  <button type="button" @click="$store.dsModals.close()"
+          class="btn btn-primary btn-lg w-full">Got it</button>
+</div>

data/app/views/style/modals/_email_change_pending.html.erb

@@ -0,0 +1,39 @@
+<%#
+  Living style guide specimen — the email-change handoff.
+
+  APP-SPECIFIC, engine chrome only (`blocks/_card_header`). The engine sends no
+  confirmation mail and holds no pending change; turf's AccountsController#update
+  does both.
+
+  IT IS AN INFORMATIONAL HANDOFF, NOT A CELEBRATION, and the distinction is the
+  card's whole job. Nothing has happened yet: the change is HELD until the person
+  clicks a link sent to their CURRENT address, not the new one. A card that read
+  as success would tell them the opposite of the truth.
+
+  Deliberately distinct from the check-email card, which says "finish entering"
+  and carries a resend CTA wired to the contest board. This one has no resend and
+  no contest wiring — one button, which closes.
+
+  Both addresses are shown because the point of confirming to the OLD address is
+  that someone who did not make the request finds out. Seeing both is how they
+  notice.
+
+  Single root: the outer <div> is the host's required root.
+%>
+<div x-data="{ get props() { var c = $store.dsModals.current(); return (c && c.props) || {} } }">
+  <%= render "studio/modals/blocks/card_header",
+        icon_emoji: "📬",
+        title: "Confirm your email change" do %>
+    <p class="text-sm text-body">
+      We sent a confirmation link to
+      <span class="text-heading font-medium" x-text="props.currentEmail || 'you@example.com'"></span>
+      (your current address). Click the link in that email to confirm changing your
+      email to
+      <span class="text-heading font-medium" x-text="props.newEmail || 'new@example.com'"></span>.
+      Your email won&rsquo;t change until you do &mdash; the link expires in 30 minutes.
+    </p>
+  <% end %>
+
+  <button type="button" @click="$store.dsModals.close()"
+          class="btn btn-primary btn-lg w-full">Got it</button>
+</div>

data/app/views/style/modals/_it_begins.html.erb

@@ -0,0 +1,46 @@
+<%#
+  Living style guide specimen — the moment a contest locks.
+
+  APP-SPECIFIC, engine chrome only. What fires it is turf's: a contest's lock
+  countdown reaching zero (contests/_timestamp_countdown). The engine owns no
+  contests and no lock. It lends `blocks/_cta_redirect` — the DRAINING button,
+  which is the whole reason this card is worth a specimen.
+
+  WHY THE DRAIN MATTERS, and why a reviewer should watch it rather than read it:
+  this card interrupts someone mid-page at a moment they did not choose. A
+  dismissible modal would leave them staring at a stale board; a hard redirect
+  would yank the page out from under them. The drain is the middle — it announces
+  what is about to happen and gives them the length of the bar to opt out. That
+  behaviour is a TIMER, and a timer is not visible in markup.
+
+  Shortened to 4 seconds here (production runs 8) so the drain can be watched
+  twice without waiting. In the app the destination rides in on props.lobbyUrl,
+  set by whoever opened it.
+
+  Single root: the outer <div> is the host's required root.
+%>
+<div class="text-center">
+  <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary/15 text-3xl">
+    &#127967;&#65039;
+  </div>
+  <h2 class="text-2xl font-extrabold text-heading">It Begins</h2>
+  <p class="mt-2 text-sm text-secondary">
+    Entries are locked &mdash; the contest is underway. Good luck.
+  </p>
+  <div class="mt-5">
+    <%# NULL destination, which is the block's documented gallery mode (see
+        blocks/_cta_redirect's header): the drain plays, the timer fires a no-op,
+        and a click falls through to closing the modal — so the specimen stays
+        alive to be opened again.
+        A truthy href here is NOT a harmless demo destination. It takes the
+        REDIRECT path, which sets `redirecting = true` and never resets it; and
+        because "#modals" is a same-document fragment, no reload ever clears the
+        component. The card ends as a permanently dead spinner: label and drain
+        bar hidden, anchor pointer-events-none and aria-disabled. %>
+    <%= render "studio/modals/blocks/cta_redirect",
+          href_key:         "null",
+          label_html:       "Enter the Lobby",
+          duration_seconds: 4,
+          modal_store:      "dsModals" %>
+  </div>
+</div>

data/app/views/style/modals/_network_guard.html.erb

@@ -0,0 +1,55 @@
+<%#
+  Living style guide specimen — the network confirmation before a wallet request.
+
+  APP-SPECIFIC, engine chrome only (`blocks/_card_header`). The engine knows
+  nothing about networks or environments; every label here is app-supplied and
+  only ever DISPLAYED.
+
+  THE CHECKBOX IS THE POINT, and it is not friction for its own sake. A wallet
+  request signed against the wrong network is the kind of mistake that looks
+  identical to a correct one until it is irreversible — mainnet money moved on a
+  devnet assumption, or the reverse. So the card does three things a plain
+  confirm cannot: it NAMES both the network and the environment, it makes
+  Continue INERT until the person has ticked an explicit acknowledgement, and it
+  gives Cancel equal visual weight rather than burying it.
+
+  A confirmation whose safe path is harder to reach than its risky one is a
+  formality. This one is deliberately not.
+
+  Single root; x-data single-quoted throughout.
+%>
+<div x-data="{
+       checked: false,
+       get props() { var c = $store.dsModals.current(); return (c && c.props) || {} }
+     }">
+  <%= render "studio/modals/blocks/card_header",
+        icon_emoji: "⚠️",
+        title_key: "props.title || 'Check Network'" do %>
+    <p class="text-sm text-body"
+       x-text="props.message || 'This request will be signed on the network shown below.'"></p>
+  <% end %>
+
+  <%# Both facts, named. The app supplies them; the engine never detects either. %>
+  <div class="rounded-lg border border-subtle bg-surface-alt p-3 mb-4 text-sm">
+    <div class="flex items-center justify-between gap-3">
+      <span class="text-secondary">App network</span>
+      <span class="font-semibold text-heading" x-text="props.networkLabel || 'devnet'"></span>
+    </div>
+    <div class="flex items-center justify-between gap-3 mt-2">
+      <span class="text-secondary">Environment</span>
+      <span class="font-semibold text-heading" x-text="props.environmentLabel || 'QA'"></span>
+    </div>
+  </div>
+
+  <label class="flex items-start gap-3 rounded-lg border border-subtle p-3 mb-4 cursor-pointer">
+    <input type="checkbox" x-model="checked" class="mt-1">
+    <span class="text-sm text-secondary">I understand this wallet request will use the network shown above.</span>
+  </label>
+
+  <%# Equal weight, deliberately. Cancel is not the quiet option here. %>
+  <div class="grid grid-cols-2 gap-3">
+    <button type="button" class="btn btn-secondary btn-lg" @click="$store.dsModals.close()">Cancel</button>
+    <button type="button" class="btn btn-primary btn-lg" :disabled="!checked"
+            @click="$store.dsModals.close()">Continue</button>
+  </div>
+</div>

data/app/views/style/modals/_newsletter_email.html.erb

@@ -0,0 +1,57 @@
+<%#
+  Living style guide specimen — web3 email capture.
+
+  APP-SPECIFIC, engine chrome only (`blocks/_card_header`). The engine owns no
+  newsletter and no seeds.
+
+  WHY THIS CARD EXISTS AT ALL, which is the thing worth understanding: a web3
+  account signed in with a wallet has NO EMAIL ON FILE. Every other newsletter
+  path can assume one. This is the branch that cannot, so it asks — and it asks
+  at the last possible moment, mid-quest, rather than up front where it would
+  read as a signup wall on a product that deliberately does not have one.
+
+  It hands the address BACK rather than posting it: the real card closes itself
+  and calls props.onSubmit, so the caller owns the POST. That keeps one subscribe
+  path instead of two. Here the callback resolves locally.
+
+  Single root, and everything inside the double-quoted x-data is single-quoted —
+  an inner double quote closes the attribute and mounts a silent no-op.
+%>
+<div x-data="{
+       email: '',
+       submitted: false,
+       get valid() { return (this.email || '').trim().indexOf('@') > 0; },
+       submit() {
+         if (!this.valid) return;
+         // Demo: the real card closes and hands the address to props.onSubmit.
+         // Showing the acknowledgement instead keeps the specimen on screen.
+         this.submitted = true;
+       }
+     }">
+  <%= render "studio/modals/blocks/card_header",
+        size: :md,
+        icon_emoji: "📬",
+        title: "One more thing" do %>
+    <p class="text-sm text-body">
+      Drop your email to join the list and claim your 25 seeds. We only use it for
+      the newsletter.
+    </p>
+  <% end %>
+
+  <template x-if="!submitted">
+    <div>
+      <input type="email" x-model="email" @keydown.enter.prevent="submit()"
+             placeholder="you@example.com" autocomplete="email"
+             class="w-full bg-inset border border-subtle rounded-lg px-3 py-2 text-sm text-heading mb-3 focus:border-primary/50 focus:outline-none">
+      <button type="button" @click="submit()" :disabled="!valid"
+              class="btn btn-primary w-full disabled:opacity-60">Join &amp; Claim 25 Seeds</button>
+    </div>
+  </template>
+
+  <template x-if="submitted">
+    <p class="text-sm text-center text-secondary">
+      Handed <span class="text-heading font-medium" x-text="email"></span> back to the
+      caller &mdash; the app owns the POST from here.
+    </p>
+  </template>
+</div>

data/app/views/style/modals/_quest_success.html.erb

@@ -0,0 +1,55 @@
+<%#
+  Living style guide specimen — the off-page quest celebration.
+
+  WHY IT EXISTS ALONGSIDE "Great Username", which looks almost identical: they
+  are the same beat reached two different ways, and the difference is where the
+  user is standing. The leveling-activity celebration fires INSIDE the modal that
+  did the work. This card is what a host shows when the quest completed somewhere
+  with no quest card to advance in place — turf's /account username change — so
+  the celebration has to arrive on its own.
+
+  APP-SPECIFIC FLOW, engine chrome only. The engine lends `blocks/_card_header`
+  and `blocks/_seeds_bar` (a :leveling primitive — the bar is the engine's, the
+  NUMBERS are app-supplied Alpine expressions). What stays the host's: which
+  quests exist, what they pay, and where "Next Quest" goes.
+
+  THE FORK AT THE BOTTOM is the interesting part and the reason this is one card
+  with a toggle rather than two cards. A viewer who has NOT joined the newsletter
+  is offered it as the next quest — the celebration doubles as the funnel. One who
+  already has is sent to the contest, where the remaining quests live. In the real
+  card that gate is SERVER-rendered from current_user.subscribed_to_newsletter?,
+  precisely so the CTA never flashes the wrong option at someone already in.
+
+  Single root: the outer <div> is the host's required root.
+%>
+<div x-data="{ get props() { var c = $store.dsModals.current(); return (c && c.props) || {} } }">
+  <%= render "studio/modals/blocks/card_header",
+        size: :lg,
+        icon_emoji: "🌱",
+        title: "Great Username",
+        subtitle: "Nice — you earned 25 seeds by completing a quest. Complete more quests to earn a Free Entry Token." %>
+
+  <%# The engine's bar, fed demo numbers. A host passes its own live totals; the
+      bar decides on its own whether a level was crossed and runs the flourish. %>
+  <div class="mb-5">
+    <%= render "studio/modals/blocks/seeds_bar",
+          seeds_earned_key: "25",
+          seeds_total_key:  "props.seedsTotal || 25",
+          free_entry_label: "Free Entry Token 🎟️" %>
+  </div>
+
+  <template x-if="props.subscribed">
+    <button type="button" @click="$store.dsModals.close()"
+            class="btn btn-primary btn-lg w-full">Next Quest</button>
+  </template>
+  <template x-if="!props.subscribed">
+    <%# Not subscribed: the celebration hands off to the newsletter quest. %>
+    <button type="button" @click="$store.dsModals.swap('join-newsletter', { demo: true, leveling: true })"
+            class="btn btn-primary btn-lg w-full">Next Quest</button>
+  </template>
+
+  <button type="button" @click="$store.dsModals.close()"
+          class="block mx-auto mt-3 text-sm text-secondary hover:text-heading transition">
+    Close
+  </button>
+</div>

data/app/views/style/modals/_rate_limit_general.html.erb

@@ -0,0 +1,61 @@
+<%#
+  Living style guide specimen — the soft rate-limit wait.
+
+  APP-SPECIFIC, engine chrome only (`blocks/_card_header`). The engine throttles
+  nothing; turf's authedFetch 429 interceptor opens this when a general-tier cap
+  trips (hammering "Mint USDC", say).
+
+  THE TONE IS THE DESIGN. This is a SOFT cap on someone who did nothing wrong —
+  they clicked too fast. So the card is dismissible, the copy is "Easy there"
+  rather than an error, and it AUTO-CLOSES when the wait elapses instead of
+  making them acknowledge a penalty. A hard-looking card here would punish
+  enthusiasm.
+
+  The countdown is seeded from the 429's own Retry-After, so the number is the
+  server's, not a guess.
+
+  TWO THINGS THIS CARD ALREADY GETS RIGHT, worth preserving if it is ever
+  rewritten — both were learned the hard way on blocks/_age_gate this week:
+  it clears its interval in a destroy() METHOD (Alpine 3 dispatches no "destroy"
+  DOM event, so an @destroy listener never fires and the timer outlives every
+  close), and it counts whole seconds rather than dividing milliseconds.
+
+  Single root; x-data is single-quoted throughout.
+%>
+<div x-data="{
+       secondsLeft: 0,
+       _timer: null,
+       get props() { var c = $store.dsModals.current(); return (c && c.props) || {} },
+       get waitDisplay() {
+         var s = this.secondsLeft || 0;
+         return s > 90 ? (Math.ceil(s / 60) + ' min') : (s + 's');
+       },
+       init() {
+         this.secondsLeft = this.props.secondsLeft || 20;
+         var self = this;
+         this._timer = setInterval(function () {
+           self.secondsLeft = self.secondsLeft - 1;
+           if (self.secondsLeft <= 0) {
+             self.secondsLeft = 0;
+             self.stop();
+             $store.dsModals.close();
+           }
+         }, 1000);
+       },
+       stop() { if (this._timer) { clearInterval(this._timer); this._timer = null; } },
+       destroy() { this.stop(); }
+     }">
+  <%= render "studio/modals/blocks/card_header",
+        icon_emoji: "✋",
+        title: "Easy there" do %>
+    <p class="text-sm text-body">
+      <span x-text="props.message || 'You are going a bit fast.'"></span>
+      <span class="block mt-1">
+        Try again in <span class="text-heading font-semibold" x-text="waitDisplay"></span>.
+      </span>
+    </p>
+  <% end %>
+
+  <button type="button" @click="$store.dsModals.close()"
+          class="block mx-auto mt-1 text-sm text-secondary hover:text-heading transition">Dismiss</button>
+</div>

data/app/views/style/modals/_unsubscribe_confirm.html.erb

@@ -0,0 +1,52 @@
+<%#
+  Living style guide specimen — the unsubscribe confirmation, and the handoff to
+  its goodbye beat.
+
+  APP-SPECIFIC FLOW, engine chrome only. The real card POSTs the host's
+  newsletter_unsubscribe_path and swaps to the goodbye card on success; the engine
+  owns no newsletter and no endpoint. Here the POST resolves locally so the guide
+  can walk the handoff with no backend — the SWAP is the thing worth reviewing,
+  and you cannot see a handoff by looking at either card alone.
+
+  THE BOTTOM LINK IS THE POINT OF THE CARD. "Close" is the never-mind out, and it
+  is deliberately the quiet option while the destructive action wears the primary
+  button. A confirmation dialog whose safe path is harder to find than its
+  destructive one is not a confirmation, it is a formality.
+
+  Single root: the outer <div> is the host's required root, and everything inside
+  the double-quoted x-data is single-quoted — an inner double quote closes the
+  attribute and mounts the component as a silent no-op.
+%>
+<div x-data="{
+       saving: false,
+       unsubscribe() {
+         if (this.saving) return;
+         this.saving = true;
+         var s = this;
+         // Demo: the real card awaits a POST. Hold briefly so the pending state
+         // is visible rather than skipped, then hand off exactly as it does.
+         setTimeout(function () {
+           s.saving = false;
+           $store.dsModals.swap('unsubscribe-goodbye');
+         }, 450);
+       }
+     }">
+  <%= render "studio/modals/blocks/card_header",
+        icon_emoji: "📭",
+        title: "Leave the newsletter?",
+        subtitle: "You'll stop getting sports news and contest updates. You can rejoin anytime." %>
+
+  <button type="button" @click="unsubscribe()" :disabled="saving"
+          class="btn btn-primary btn-lg w-full disabled:opacity-60">
+    <span x-show="!saving">Unsubscribe</span>
+    <span x-show="saving" class="inline-flex items-center justify-center gap-2" style="display: none;">
+      <span class="spinner" aria-hidden="true"></span>
+      Unsubscribing&hellip;
+    </span>
+  </button>
+
+  <button type="button" @click="$store.dsModals.close()"
+          class="block mx-auto mt-3 text-sm text-secondary hover:text-heading transition">
+    Close
+  </button>
+</div>

data/app/views/style/modals/_unsubscribe_goodbye.html.erb

@@ -0,0 +1,30 @@
+<%#
+  Living style guide specimen — the final beat after a confirmed unsubscribe.
+
+  The smallest card in the guide, and it earns its place: it is the half of the
+  newsletter story the guide could not previously show. The Profile Leveling
+  section already walked the way IN (Join the Newsletter → Subscribed!); this and
+  its sibling walk the way OUT. A section that only ever demonstrates opt-in is
+  not showing the flow, it is showing the happy half of it.
+
+  APP-SPECIFIC, engine chrome only: the engine owns no newsletter. It lends
+  `blocks/_card_header` and the tone.
+
+  NOTE THE COPY IS NOT A GUILT TRIP — "Change your mind anytime from your
+  account" is a door left open, not a plea. Worth preserving if this is ever
+  reworded.
+
+  Single root: the outer <div> is the host's required root.
+%>
+<div x-data="{}">
+  <%= render "studio/modals/blocks/card_header",
+        size: :lg,
+        icon_emoji: "✌️",
+        title: "See you later",
+        subtitle: "You're off the list. Change your mind anytime from your account." %>
+
+  <button type="button" @click="$store.dsModals.close()"
+          class="btn btn-primary btn-lg w-full">
+    Close
+  </button>
+</div>

data/app/views/style/modals/_wallet_changed.html.erb

@@ -0,0 +1,70 @@
+<%#
+  Living style guide specimen — the wallet switched underneath the session.
+
+  APP-SPECIFIC, engine chrome only (`blocks/_card_header`). The switch itself is
+  the host's: turf's wallet store owns continueSwitch, and the engine owns no
+  wallet.
+
+  THE SITUATION IT NAMES: the person changed accounts inside their wallet
+  extension while signed in here. Nothing is broken and nobody did anything
+  wrong — but the session and the extension now disagree about who this is, and
+  every on-chain action from here would use an identity the page is not showing.
+
+  SO IT SHOWS BOTH ADDRESSES, truncated the way every Solana UI truncates them
+  (4 leading, 4 trailing). Recognising your own address is the only way to tell a
+  deliberate switch from an accident, and it is the one check the app cannot make
+  for them.
+
+  The busy state matters: continuing re-derives a session against the new wallet,
+  which is a round trip. Without it the button looks dead and gets double-clicked.
+
+  Single root; x-data single-quoted throughout.
+%>
+<div x-data="{
+       busy: false,
+       get props() { var c = $store.dsModals.current(); return (c && c.props) || {} },
+       short(addr) {
+         addr = addr || '';
+         return addr.length > 12 ? (addr.slice(0, 6) + '...' + addr.slice(-4)) : addr;
+       },
+       go() {
+         if (this.busy) return;
+         this.busy = true;
+         var s = this;
+         // Demo: the real card awaits the host's wallet store. Hold briefly so
+         // the pending state is visible rather than skipped.
+         setTimeout(function () { s.busy = false; $store.dsModals.close(); }, 600);
+       }
+     }">
+  <%= render "studio/modals/blocks/card_header",
+        icon_emoji: "🔀",
+        title: "Wallet changed" do %>
+    <p class="text-sm text-body">
+      Your wallet is now on a different account than the one you signed in with.
+      Continue with the new one, or switch back in your wallet.
+    </p>
+  <% end %>
+
+  <div class="rounded-lg border border-subtle bg-surface-alt p-3 mb-4 text-sm">
+    <div class="flex items-center justify-between gap-3">
+      <span class="text-secondary">Signed in as</span>
+      <span class="font-mono text-heading" x-text="short(props.currentAddress) || '7xKp...JZ2Q'"></span>
+    </div>
+    <div class="flex items-center justify-between gap-3 mt-2">
+      <span class="text-secondary">Wallet now</span>
+      <span class="font-mono text-heading" x-text="short(props.newAddress) || '9mQt...Ld4V'"></span>
+    </div>
+  </div>
+
+  <button type="button" @click="go()" :disabled="busy"
+          class="btn btn-primary btn-lg w-full disabled:opacity-60">
+    <span x-show="!busy">Continue with this wallet</span>
+    <span x-show="busy" class="inline-flex items-center justify-center gap-2" style="display: none;">
+      <span class="spinner" aria-hidden="true"></span>
+      Switching&hellip;
+    </span>
+  </button>
+
+  <button type="button" @click="$store.dsModals.close()"
+          class="block mx-auto mt-3 text-sm text-secondary hover:text-heading transition">Not now</button>
+</div>