studio-engine 0.60.1 → 0.60.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d48986ae997517eba2f2ae27edf0ef145069a69d09382ee2bdced6ff7839a630
-  data.tar.gz: e2e6b4b71af934b23536a94a03352e0340f47b8add6398f485f1f9c1262c240b
+  metadata.gz: e147f36e9a7113442530805c34a0f5fe0b9fb1b37391b8e4271e89368b01236e
+  data.tar.gz: 17203c174004a90979e88259c32b5672907fe8b5b6deadb9cf240f1d4c9aab85
 SHA512:
-  metadata.gz: 96fce3596b86f2ea40f0cce0e8801cb57dc0d848e00d68f4b151b72885944fe99b346e49241d0ece5d79ae8a7293e4829ad5b055e38bddb12e3a8ee3730f8169
-  data.tar.gz: c5003ca60f6d27a5ea6c81b40ca50902f0ce6df4f11fc2a127392e1993af1147209f13a580c18006b69585b7ce1e8882b7da50dc30cfbd8c05ad4c7daf4edb50
+  metadata.gz: e1cacfd158c940e8d78c63d97d33c6bd248112a738032230a79ac480facc90077dffa185fa4fe352567b07204e91044f88dd7ea498906fb8ea8f5bba570944be
+  data.tar.gz: e1c274a2ff0726e5ebced0ba9185157798e6c194e149ad9c846b10d215f1e282731a8838cd1ec9fa85f6d93ee94ddada47fb16bad2cf37569c181c4791310840

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

@@ -363,6 +363,26 @@
           <div><%= render "style/modals/wallet_setup" %></div>
         </template>
 
+        <%# --- Batch 3: the modals that had no card on EITHER page --- %>
+        <template x-if="$store.dsModals.current().id === 'it-begins'">
+          <div><%= render "style/modals/it_begins" %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'newsletter-email'">
+          <div><%= render "style/modals/newsletter_email" %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'email-change-pending'">
+          <div><%= render "style/modals/email_change_pending" %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'network-guard'">
+          <div><%= render "style/modals/network_guard" %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'rate-limit-general'">
+          <div><%= render "style/modals/rate_limit_general" %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'wallet-changed'">
+          <div><%= render "style/modals/wallet_changed" %></div>
+        </template>
+
         <%# --- Newsletter exit + the off-page quest celebration --- %>
         <template x-if="$store.dsModals.current().id === 'quest-success'">
           <div><%= render "style/modals/quest_success" %></div>
@@ -763,6 +783,24 @@
           <span class="block h-2 w-20 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
         </div>
       <% end %>
+
+      <%# email-change-pending — the informational handoff after an email change.
+          NOT a success card: nothing has changed yet, and the confirmation goes
+          to the CURRENT address so an unrequested change gets noticed. %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Email change pending",
+            reference: %(the Profile "Confirm your email change" handoff (style/modals/_email_change_pending) — turf-monster's modals/_email_change_pending. Composes the engine's blocks/_card_header; the pending change and the confirmation mail are the app's (AccountsController#update). It is an INFORMATIONAL handoff, not a celebration — nothing has changed yet, and a card that read as success would tell the person the opposite of the truth. The link goes to the CURRENT address precisely so someone who did NOT request the change finds out, which is why both addresses are shown. Distinct from the check-email card: no resend, no contest wiring, one button that closes. Open with $store.dsModals.open('email-change-pending', { currentEmail: 'you@example.com', newEmail: 'new@example.com' })),
+            open_expr: "$store.dsModals.open('email-change-pending', { currentEmail: 'you@example.com', newEmail: 'new@example.com' })",
+            glow_when: ds_glow.call("email-change-pending") } 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-2 w-24 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+          <%# both addresses, which is the card's point %>
+          <span class="block h-1.5 w-28 mx-auto rounded" style="background: var(--color-text); opacity: .3"></span>
+          <span class="block h-1.5 w-20 mx-auto rounded" style="background: var(--color-text); opacity: .3"></span>
+          <span class="block h-5 w-full rounded" style="background: var(--color-cta)"></span>
+        </div>
+      <% end %>
     </div>
   </section>
 
@@ -940,6 +978,22 @@
           <span class="block h-5 w-full rounded" style="background: var(--color-cta)"></span>
         </div>
       <% end %>
+
+      <%# newsletter-email — the branch a wallet-only account has to take: no
+          email on file, so the quest asks for one mid-flight. %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Newsletter email",
+            reference: %(the web3 newsletter email capture (style/modals/_newsletter_email) — turf-monster's modals/_newsletter_email. Composes the engine's blocks/_card_header; the newsletter and the seeds are the app's. It exists because an account signed in with a WALLET has no email on file — every other newsletter path can assume one, and this is the branch that cannot. It asks mid-quest rather than up front, where it would read as a signup wall on a product that deliberately has none. The real card hands the address BACK to props.onSubmit and closes, so the app keeps ONE subscribe path instead of two; the specimen resolves locally so it stays on screen. Open with $store.dsModals.open('newsletter-email')),
+            open_expr: "$store.dsModals.open('newsletter-email')",
+            glow_when: ds_glow.call("newsletter-email") } 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-2 w-24 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+          <%# the ask itself — an email field, which no other newsletter card has %>
+          <span class="block h-5 w-full rounded border" style="border-color: var(--color-border-strong)"></span>
+          <span class="block h-5 w-full rounded" style="background: var(--color-cta)"></span>
+        </div>
+      <% end %>
     </div>
   </section>
 
@@ -1207,6 +1261,57 @@
           <span class="block h-4 w-full rounded" style="background: var(--color-cta)"></span>
         </div>
       <% end %>
+
+      <%# network-guard — the explicit acknowledgement before a wallet request.
+          Continue stays INERT until the box is ticked and Cancel carries equal
+          weight: a confirmation whose safe path is harder to reach is theatre. %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Network guard",
+            reference: %(the Web3 network confirmation (style/modals/_network_guard) — turf-monster's modals/_network_guard, shown before a wallet request when the app wants the network acknowledged. Composes the engine's blocks/_card_header and nothing else: the engine detects no network and no environment, so every label here is app-supplied and only ever DISPLAYED. A request signed against the wrong network looks identical to a correct one until it is irreversible, so the card NAMES both facts, keeps Continue inert until an explicit tick, and gives Cancel equal visual weight rather than burying it. Open with $store.dsModals.open('network-guard', { networkLabel: 'devnet', environmentLabel: 'QA' })),
+            open_expr: "$store.dsModals.open('network-guard', { networkLabel: 'devnet', environmentLabel: 'QA' })",
+            glow_when: ds_glow.call("network-guard"),
+            disabled: !web3_on, openable: true } 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>
+          <%# the two named facts, then the tick that gates Continue %>
+          <span class="block h-1.5 w-full rounded" style="background: var(--color-text); opacity: .3"></span>
+          <span class="block h-1.5 w-full rounded" style="background: var(--color-text); opacity: .3"></span>
+          <span class="flex items-center gap-1.5">
+            <span class="block h-2.5 w-2.5 rounded-sm border" style="border-color: var(--color-border-strong)"></span>
+            <span class="block h-1.5 flex-1 rounded" style="background: var(--color-text); opacity: .18"></span>
+          </span>
+          <%# equal weight, deliberately %>
+          <span class="grid grid-cols-2 gap-1.5">
+            <span class="block h-4 rounded border" style="border-color: var(--color-border-strong)"></span>
+            <span class="block h-4 rounded" style="background: var(--color-cta); opacity: .5"></span>
+          </span>
+        </div>
+      <% end %>
+
+      <%# wallet-changed — the extension switched accounts underneath the session.
+          Both addresses are shown because recognising your own is the only way to
+          tell a deliberate switch from an accident. %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Wallet changed",
+            reference: %(the Web3 "Wallet changed" reconciliation (style/modals/_wallet_changed) — turf-monster's modals/_wallet_changed, fired when the person switches accounts inside their wallet extension while signed in. Composes the engine's blocks/_card_header; the switch itself belongs to turf's wallet store (continueSwitch) and the engine owns no wallet. Nothing is broken — 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 prints BOTH addresses, truncated the Solana way, because recognising your own is the one check the app cannot make for you. Continuing re-derives a session against the new wallet, which is a round trip, so the button carries a busy state rather than looking dead. Open with $store.dsModals.open('wallet-changed', { currentAddress: '…', newAddress: '…' })),
+            open_expr: "$store.dsModals.open('wallet-changed', { currentAddress: '7xKpDemoSignedInWallet9JZ2Q', newAddress: '9mQtDemoSwitchedWalletLd4V' })",
+            glow_when: ds_glow.call("wallet-changed"),
+            disabled: !web3_on, openable: true } 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-2 w-24 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+          <%# the two truncated addresses — the comparison IS the card %>
+          <span class="flex items-center justify-between gap-2">
+            <span class="block h-1.5 w-10 rounded" style="background: var(--color-text); opacity: .18"></span>
+            <span class="block h-1.5 w-12 rounded" style="background: var(--color-text); opacity: .35"></span>
+          </span>
+          <span class="flex items-center justify-between gap-2">
+            <span class="block h-1.5 w-10 rounded" style="background: var(--color-text); opacity: .18"></span>
+            <span class="block h-1.5 w-12 rounded" style="background: var(--color-text); opacity: .35"></span>
+          </span>
+          <span class="block h-5 w-full rounded" style="background: var(--color-cta)"></span>
+        </div>
+      <% end %>
     </div>
   </section>
 
@@ -1339,6 +1444,25 @@
           <span class="block h-4 w-full rounded" style="background: var(--color-cta)"></span>
         </div>
       <% end %>
+
+      <%# it-begins — the moment a contest locks. The DRAINING CTA is the whole
+          card: it interrupts someone mid-page at a moment they did not choose,
+          and the drain is what gives them a say in what happens next. %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "It Begins",
+            reference: %(the contest-lock announcement (style/modals/_it_begins) — turf-monster's modals/_it_begins, fired when a contest's lock countdown reaches zero. APP-SPECIFIC: 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 and the one part you have to WATCH rather than read, because a timer is not visible in markup. This card interrupts someone mid-page at a moment they did not choose: a dismissible modal would leave them on a stale board, a hard redirect would yank the page away, and the drain is the middle — it announces what is about to happen and gives them the length of the bar to opt out. Shortened to 4 seconds here (production runs 8) so the drain can be watched twice; it redirects NOWHERE — the block's null-destination gallery mode, so the drain completes and the card stays openable instead of ending as a stuck spinner. Open with $store.dsModals.open('it-begins')),
+            open_expr: "$store.dsModals.open('it-begins')",
+            glow_when: ds_glow.call("it-begins") } 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-2 w-20 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+          <span class="block h-1.5 w-28 mx-auto rounded" style="background: var(--color-text); opacity: .12"></span>
+          <%# the CTA mid-drain — the bar empties, and leaving is the way out %>
+          <span class="block h-5 w-full rounded overflow-hidden" style="background: color-mix(in srgb, var(--color-cta) 25%, transparent)">
+            <span class="block h-full rounded" style="width: 55%; background: var(--color-cta)"></span>
+          </span>
+        </div>
+      <% end %>
     </div>
   </section>
 
@@ -1401,6 +1525,23 @@
           <span class="block h-1.5 w-16 mx-auto rounded" style="background: var(--color-text); opacity: .12"></span>
         </div>
       <% end %>
+
+      <%# rate-limit-general — the SOFT cap. Dismissible, apologetic, and it
+          auto-closes when the wait elapses rather than making anyone
+          acknowledge a penalty for clicking too fast. %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Rate limited (soft)",
+            reference: %(the soft rate-limit wait (style/modals/_rate_limit_general) — turf-monster's modals/_rate_limit_general, opened by the authedFetch 429 interceptor when a general-tier cap trips. Composes the engine's blocks/_card_header; the engine throttles nothing. THE TONE IS THE DESIGN: this is a soft cap on someone who did nothing wrong, so the card is dismissible, the copy is "Easy there" rather than an error, and it AUTO-CLOSES when the wait elapses instead of demanding an acknowledgement. The countdown is seeded from the 429's own Retry-After, so the number is the server's rather than a guess. It also 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. Shortened to 10 seconds here so the auto-close can be watched. Open with $store.dsModals.open('rate-limit-general', { secondsLeft: 10 })),
+            open_expr: "$store.dsModals.open('rate-limit-general', { secondsLeft: 10 })",
+            glow_when: ds_glow.call("rate-limit-general") } 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-2 w-20 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+          <span class="block h-1.5 w-28 mx-auto rounded" style="background: var(--color-text); opacity: .12"></span>
+          <%# a dismiss link, not a button — the soft cap has no penalty to accept %>
+          <span class="block h-1.5 w-12 mx-auto rounded" style="background: var(--color-text); opacity: .3"></span>
+        </div>
+      <% end %>
     </div>
   </section>
 

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/_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/_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>

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.60.1"
+  VERSION = "0.60.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.60.1
+  version: 0.60.2
 platform: ruby
 authors:
 - Alex McRitchie
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-08-25 00:00:00.000000000 Z
+date: 2026-08-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -507,11 +507,17 @@ files:
 - app/views/style/modals/_auth.html.erb
 - app/views/style/modals/_birthday.html.erb
 - app/views/style/modals/_cosign_rejected.html.erb
+- app/views/style/modals/_email_change_pending.html.erb
 - app/views/style/modals/_entry_tokens.html.erb
+- app/views/style/modals/_it_begins.html.erb
+- app/views/style/modals/_network_guard.html.erb
+- app/views/style/modals/_newsletter_email.html.erb
 - app/views/style/modals/_onchain_tx.html.erb
 - app/views/style/modals/_quest_success.html.erb
+- app/views/style/modals/_rate_limit_general.html.erb
 - app/views/style/modals/_unsubscribe_confirm.html.erb
 - app/views/style/modals/_unsubscribe_goodbye.html.erb
+- app/views/style/modals/_wallet_changed.html.erb
 - app/views/style/modals/_wallet_connect.html.erb
 - app/views/style/modals/_wallet_deposit.html.erb
 - app/views/style/modals/_wallet_setup.html.erb