studio-engine 0.74.2 → 0.74.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6694226dcc9e100149692ef60162478d4927a69280343c5047c0222517f1f68c
-  data.tar.gz: 8e6b5c07f8bb5fa60466049f321c7be0a09168fb750766202a5d122734cb6699
+  metadata.gz: 2ef2370af4941b05f724ac0eea748c555d6c70610d63194806deb812fbb4cc81
+  data.tar.gz: 5dd92c0a97e42fb9c29a5d644720c9cf1e7a83ce2db97e85c6ade6a5db35f297
 SHA512:
-  metadata.gz: 6ec39596a087d56cc64f3a211ea349bf6a00b7a21c6eb1d1c70b36136dda3f3ab7f8fe1a1f61b26593661283f12707501727d9f3d5119f01b3fa28995ece7bd7
-  data.tar.gz: 3d65093bf62c9088976d9ea56e756cabd7e01e65aaae06205419e337a0d8b6a1a1b93c60b93631bf724d254f01bcdc5fb0c7360c50525c1f519b35b6b7b49946
+  metadata.gz: baac9edc9c8fe756d3bb44994539cce055bf2987d3e19109b076793a1c9d93c1ac3704fa4e38d60e839cd4a79f03128f75e05d25db7ef3789116361cb6ec3568
+  data.tar.gz: db54e015edb969381a2f5d26f3c8836aca367294051a944d669279e5ce249f0e0c4655777c247784462a07a4b691dac197fe273854c26d9d60c9fbd830990043

data/CHANGELOG.md

@@ -6,6 +6,52 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ### Fixed
 
+- **A store name that is not a JS identifier half-worked, silently, in seventeen
+  partials — it now raises.** `$store.<%= modal_store %>.close()` splices the local
+  in as a bare NAME, so `modal_store: "my store"` emitted
+  `$store.my store.close()`: a SyntaxError that Alpine mounts as a no-op which still
+  renders every element. `Studio::JsIdentifier.validate!` is the new shared contract
+  (`/\A[A-Za-z_$][A-Za-z0-9_$]*\z/`), called once per partial at the fetch.
+
+  **THIS IS A BEHAVIOUR TIGHTENING, NOT A REPAIR, and it is breaking.** A host that
+  passed a non-identifier store name got a working page with a dead button; it now
+  gets an `ArgumentError` at render. That is the right trade — loud beats silent —
+  but it is a 500 where there was a 200. **Blast radius is zero, measured:** every
+  explicit store name in mcritchie-studio, turf-monster, rolio and this engine is
+  `modals`, `dsModals`, `emailModals` or `profileModals`, and no consumer app passes
+  one at all. **Rollback is one file:** make `validate!` return its argument instead
+  of raising and every partial is back to the old leniency, with no call site to
+  revisit.
+
+  **ESCAPING IS THE WRONG REPAIR HERE, which is why this is a second module rather
+  than a second method on `Studio::JsLiteral`.** `escape_javascript` also escapes
+  `$`, so the legal name `dsModals$2` comes back as `dsModals\$2` and
+  `$store.dsModals\$2.close()` is a different SyntaxError — the same dead card on a
+  value that was never hostile. A pattern rather than an allowlist, deliberately: an
+  allowlist would be a shared gem enumerating its own consumers, and the next app to
+  mount a page-scoped host would be refused by its own dependency.
+
+  **MEASURED, AND TWO OF THE LISTED SITES WERE LEFT ALONE.** Nineteen partials fetch
+  a store-name local. Counted on the tree: 36 splices of a store name in identifier
+  position — 32 in ERB, 4 assembled in Ruby — across 17 files. Rendering a hostile
+  value through all nineteen (rather than reading them) showed 17 emitting at least
+  one DEAD splice, one already refusing, and one unaffected. Seventeen now carry the
+  guard: 16 new, plus `modals/onboarding/_first_name` moved onto the shared one.
+  `modals/_crop_photo` is the unaffected one — its name is a JS string argument
+  resolved with `$store[name]`, a lookup where a space is as legal as a letter, and
+  it was already escaped, so demanding an identifier would break a host for nothing.
+  `blocks/_birthday` has no splice of its own — it hands the name to `Alpine.store()`
+  and forwards it to `blocks/_shell`, which validates — so a second guard there would
+  have been one that survives deletion.
+
+  **NOTHING MOVED FOR A LEGAL NAME.** All nineteen partials rendered before and
+  after, against the default, `dsModals` and `ds_Modals$2`, are byte-identical
+  (186,310 bytes each): a value matching the pattern carries no character ERB
+  escapes, and the validator returns a plain String so ERB's escaping stays armed
+  for the day the pattern widens. `modals/onboarding/_first_name` carried this
+  regex inline as the worked example and now calls the shared one — same pattern,
+  same error, same message.
+
 - **The email banner assembled two attributes INCLUDING THEIR OWN QUOTES in Ruby,
   so ERB escaping never ran on them.** `_layered_banner.html.erb` wrote
   `background="..."` and `bgcolor="..."` as Ruby strings and marked them

data/README.md

@@ -238,6 +238,30 @@ the block:
 <% end %>
 ```
 
+#### Writing a modal's content partial — two rules the host imposes
+
+Both of these fail SILENTLY. Nothing raises, nothing logs, and the card renders;
+it just does less than it looks like it does.
+
+**1. SINGLE ROOT.** A content partial's outer `<div>` is the host's required
+root. Alpine's `<template x-if>` clones only the FIRST root element of its
+content, so a second top-level sibling — a stray `<span>`, a trailing `<style>`
+block, a comment-turned-node — is dropped on the floor. Bake anything extra
+inside the wrapping `<div>`.
+
+**2. NO DOUBLE QUOTE INSIDE `x-data`.** The attribute is double-quoted, so an
+inner double quote CLOSES it. Alpine then mounts a component whose expression is
+truncated mid-statement: every element still renders and every handler does
+nothing. Single-quote everything inside `x-data`.
+
+These are properties of the HOST, not of any one card, and they apply to every
+consumer partial an app registers — not only to the specimens in this gem. They
+are recorded here because they used to be recorded only in the style guide's
+specimen headers, which made them deletable by a change that removed a specimen:
+retiring the `style/modals/_network_guard` and `_wallet_deposit` mirrors on
+2026-09-09 would otherwise have taken the single-root rule out of both this repo
+and the app that inherited those cards.
+
 **Wallet modals moved to `solana-studio`.** The Connect Wallet picker, the Web3
 step-up card and the Phantom deep link used to ship here as
 `studio/modals/wallet_connect`, `studio/modals/web3_step_up` and

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

@@ -28,7 +28,11 @@
                                    the app rather than to one call site
 
   Consumer integration example and API reference: the "Modal host"
-  section of the gem README.
+  section of the gem README — which also carries the two rules this host
+  IMPOSES on the content partials registered in its block: a SINGLE ROOT
+  element (a template x-if clones only the first one; later siblings are
+  dropped) and NO double quote inside x-data (it closes the attribute and
+  Alpine mounts a silent no-op). Both fail without raising.
 %>
 <style>
   /* Scroll lock applied by $store.modals._sync() when the stack is non-empty.

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

@@ -10,7 +10,8 @@
                      apps omit this; the /admin/style demo passes an expression
                      (e.g. close) so the specimen self-terminates after min_duration
                      instead of spinning forever. %>
-<% saving_store = local_assigns.fetch(:store, "modals") %>
+<%# IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier. %>
+<% saving_store = Studio::JsIdentifier.validate!(local_assigns.fetch(:store, "modals"), local: :store) %>
 <div>
   <%= render "studio/modals/blocks/processing_card",
         title_key: "$store.#{saving_store}.current()?.props?.title || 'Saving…'",

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

@@ -41,12 +41,26 @@
   chaining (`current()?.id`): the outer template unmounts one tick AFTER the
   stack empties, so a bare `.id` throws on every close.
 
+  THE CONTENT PARTIALS OBEY THE SAME TWO RULES AS THE SHARED HOST'S, and both
+  fail silently: a SINGLE ROOT element (a template x-if clones only the first
+  one) and NO double quote inside x-data (it closes the attribute and Alpine
+  mounts a component that renders everything and does nothing). Stated in full
+  in the gem README's "Modal host" section.
+
+  AND EVERY ID REGISTERED HERE MUST BE REACHABLE, both ways round. A card that
+  opens an id no template registers shows an EMPTY panel; a template no card
+  opens is a modal nobody can reach. That pairing is the one thing a cabinet of
+  modals cannot check by looking at itself, so the living style guide holds it
+  in a test (test/views/style_guide_no_dangling_specimens_test.rb).
+
   (No inline ERB example here on purpose. An ERB comment ends at its FIRST "%" +
   ">", so an example containing one silently closes the comment and dumps the
   rest of it onto the page as visible text. That shipped once.)
 %>
 <%
-  scoped_store = local_assigns.fetch(:store)
+  # IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier.
+  scoped_store = Studio::JsIdentifier.validate!(
+                 local_assigns.fetch(:store), local: :store)
   card_class   = local_assigns.fetch(:card_class,
                    "bg-surface rounded-xl border border-subtle shadow-2xl p-6 max-w-sm w-full")
 %>

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

@@ -12,7 +12,9 @@
     modal_store — Alpine store name backing close(). Default "modals".
 %>
 <%
-  modal_store = local_assigns.fetch(:modal_store, "modals")
+  # IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier.
+  modal_store = Studio::JsIdentifier.validate!(
+                local_assigns.fetch(:modal_store, "modals"), local: :modal_store)
 %>
 <button @click="resendMagicLink()" :disabled="props.submitting === 'magic-link' || (props.resendCooldown || 0) > 0"
         class="block mx-auto text-sm text-primary hover:text-primary-300 underline underline-offset-2 disabled:opacity-50 disabled:no-underline">

data/app/views/studio/modals/blocks/_age_gate.html.erb

@@ -62,7 +62,9 @@
   birthday_modal_id = local_assigns.fetch(:birthday_modal_id, "birthday")
   back_label        = local_assigns.fetch(:back_label, "Update your Birthday")
   title             = local_assigns[:title]
-  modal_store       = local_assigns.fetch(:modal_store, "modals")
+  # IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier.
+  modal_store       = Studio::JsIdentifier.validate!(
+                      local_assigns.fetch(:modal_store, "modals"), local: :modal_store)
 %>
 <div x-data="{
        now: Date.now(),

data/app/views/studio/modals/blocks/_birthday.html.erb

@@ -80,6 +80,13 @@
   fine_print  = local_assigns.fetch(:fine_print,
                   validates ? "We use your date of birth only to confirm eligibility."
                             : "We use your date of birth only to know when to wish you a happy birthday.")
+  # NOT VALIDATED HERE, deliberately. This partial never splices the store name into
+  # identifier position: it reaches birthdayModal as a JS STRING (escaped below) and
+  # the factory looks it up with Alpine.store(name), where any character is legal.
+  # The identifier contract is owed by blocks/_shell, which this card renders one
+  # line further down and which validates it — so a hostile value still raises,
+  # once, at the site that actually splices it. A second guard here would be a
+  # redundant one: it would survive being deleted.
   modal_store = local_assigns.fetch(:modal_store, "modals")
   demo        = local_assigns.fetch(:demo, false)
   demo_underage     = local_assigns.fetch(:demo_underage, false)

data/app/views/studio/modals/blocks/_close_x.html.erb

@@ -42,7 +42,9 @@
     label       — aria-label. Default "Close".
 %>
 <%
-  modal_store = local_assigns.fetch(:modal_store, "modals")
+  # IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier.
+  modal_store = Studio::JsIdentifier.validate!(
+                local_assigns.fetch(:modal_store, "modals"), local: :modal_store)
   label       = local_assigns.fetch(:label, "Close")
 %>
 <button type="button" @click="$store.<%= modal_store %>.close()"

data/app/views/studio/modals/blocks/_cta_redirect.html.erb

@@ -25,7 +25,9 @@
   href_key         = local_assigns.fetch(:href_key)
   label_html       = local_assigns.fetch(:label_html, "Continue")
   duration_seconds = local_assigns.fetch(:duration_seconds, 5)
-  modal_store      = local_assigns.fetch(:modal_store, "modals")
+  # IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier.
+  modal_store      = Studio::JsIdentifier.validate!(
+                     local_assigns.fetch(:modal_store, "modals"), local: :modal_store)
 %>
 <div x-data="{
        _redirectTimer: null,

data/app/views/studio/modals/blocks/_entry_confirmed.html.erb

@@ -60,7 +60,9 @@
                        that does nothing.
 %>
 <%
-  modal_store      = local_assigns.fetch(:modal_store, "modals")
+  # IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier.
+  modal_store      = Studio::JsIdentifier.validate!(
+                     local_assigns.fetch(:modal_store, "modals"), local: :modal_store)
   props_expr       = local_assigns.fetch(:props_expr,
                        "(function () { var c = $store.#{modal_store}.current(); return (c && c.props) || {}; })()")
   above_seeds        = local_assigns[:above_seeds]

data/app/views/studio/modals/blocks/_free_entry_earned.html.erb

@@ -19,7 +19,9 @@
     close_label  — dismiss link text. Default "Close".
 %>
 <%
-  modal_store  = local_assigns.fetch(:modal_store, "modals")
+  # IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier.
+  modal_store  = Studio::JsIdentifier.validate!(
+                 local_assigns.fetch(:modal_store, "modals"), local: :modal_store)
   icon_emoji   = local_assigns.fetch(:icon_emoji, "🎉")
   title_key    = local_assigns.fetch(:title_key, "props.level ? ('Level ' + props.level) : 'Free Entry Earned'")
   subtitle     = local_assigns.fetch(:subtitle, "You leveled up and earned a reward. Keep earning more with each level.")

data/app/views/studio/modals/blocks/_leveling_activity.html.erb

@@ -91,7 +91,9 @@
   free_entry_label   = local_assigns.fetch(:free_entry_label, "Free Entry Earned 🎟️")
   seeds_per_level    = local_assigns.fetch(:seeds_per_level, 100)
   leveling           = local_assigns.fetch(:leveling, Studio.feature?(:leveling))
-  modal_store        = local_assigns.fetch(:modal_store, "modals")
+  # IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier.
+  modal_store        = Studio::JsIdentifier.validate!(
+                       local_assigns.fetch(:modal_store, "modals"), local: :modal_store)
   demo               = local_assigns.fetch(:demo, false)
   # consent_label — render a consent checkbox that gates the action (newsletter
   # join). next_label / next_open — an optional "Next Quest" button in the

data/app/views/studio/modals/blocks/_onchain_success.html.erb

@@ -27,7 +27,9 @@
   cta_label_key    = local_assigns.fetch(:cta_label_key)
   cta_href_key     = local_assigns.fetch(:cta_href_key)
   cluster_param    = local_assigns.fetch(:cluster_param, "")
-  modal_store      = local_assigns.fetch(:modal_store, "modals")
+  # IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier.
+  modal_store      = Studio::JsIdentifier.validate!(
+                     local_assigns.fetch(:modal_store, "modals"), local: :modal_store)
 %>
 <div>
   <%= render "studio/modals/blocks/card_header",

data/app/views/studio/modals/blocks/_shell.html.erb

@@ -13,7 +13,9 @@
 <%
   shell_title       = local_assigns[:title]
   shell_dismissible = local_assigns.fetch(:dismissible, true)
-  modal_store       = local_assigns.fetch(:modal_store, "modals")
+  # IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier.
+  modal_store       = Studio::JsIdentifier.validate!(
+                      local_assigns.fetch(:modal_store, "modals"), local: :modal_store)
 %>
 <div>
   <% if shell_title || shell_dismissible %>

data/app/views/studio/modals/onboarding/_first_name.html.erb

@@ -104,8 +104,8 @@
       sites: the props getter, finish's close, and the Ruby-built dismiss_action
       emitted into the x's click handler. Escaping is the WRONG repair here: an
       escaped identifier is a different SyntaxError and the same dead card.
-      Repair: refuse a value that is not a JS identifier, which the Ruby block
-      below does once, at the source, so all three sites are covered.
+      Repair: refuse a value that is not a JS identifier, which one call to
+      Studio::JsIdentifier.validate! does at the source, covering all three sites.
 
   A PATTERN, NOT AN ALLOWLIST, and the reason is worth keeping: an allowlist would
   be this engine enumerating its own consumers, so the next app to mount a
@@ -116,7 +116,9 @@
 
   NOTE THE SAME LOCAL TAKES THE OTHER REPAIR ELSEWHERE. blocks/_birthday and
   blocks/_leveling_activity pass modal_store in STRING position and escape it,
-  correctly. The shape decides the repair, never the name of the local.
+  correctly. The shape decides the repair, never the name of the local. And where
+  a store name reaches ONLY a string — blocks/_birthday hands it to Alpine.store(),
+  a lookup by string — no identifier is owed and none is demanded.
 %>
 <%
   submit_path = local_assigns.fetch(:submit_path, "/onboarding/first_name")
@@ -163,37 +165,21 @@
   typed_placeholder = !placeholder_names.nil?
   max_length  = local_assigns.fetch(:max_length, Studio::FULL_NAME_MAX_LENGTH)
   progress    = local_assigns.fetch(:progress, nil)
-  modal_store = local_assigns.fetch(:modal_store, "modals")
   # VALIDATED, NOT ESCAPED — and that distinction is the whole point of this local.
   # Every other value inside the x-data is a JS STRING and is repaired by escaping.
   # This one is spliced in as a bare NAME (`$store.<name>.current()`), so the same
-  # repair breaks it: escape_javascript turns `a'b` into `a\'b`, and
-  # `$store.a\'b.current()` is not a rescued identifier, it is a different
-  # SyntaxError — the same silently dead card, reached a longer way.
+  # repair breaks it: escape_javascript backslash-escapes the apostrophe, and an
+  # escaped apostrophe is not a rescued identifier — it is a different SyntaxError,
+  # the same silently dead card reached a longer way.
   #
-  # A PATTERN RATHER THAN AN ALLOWLIST, deliberately. An allowlist would be this
-  # engine enumerating its own CONSUMERS — "modals" and the style guide's
-  # "dsModals" today — so the next app to mount a page-scoped host would be refused
-  # by its own dependency until a gem release admitted the name. That is backwards
-  # for a shared primitive. The real contract is narrower and stateless: this is
-  # spliced into member-access position, so it must be a JS identifier, and WHICH
-  # identifier is none of the engine's business.
-  #
-  # ASCII IdentifierName, which is what member access after a dot accepts. It
-  # admits every store name a host would plausibly write and rejects every
-  # character that could leave identifier position — quote, apostrophe, backslash,
-  # dot, space, semicolon, angle bracket.
-  #
-  # IT RAISES RATHER THAN FALLING BACK TO THE DEFAULT. A silent fallback is the
-  # worse of the two repairs: the card would mount, look perfect, and talk to a
-  # store that is not the host's — which is the SILENT-brick failure class this
-  # guard exists to leave behind. A host sees this the first time it renders.
-  unless modal_store.to_s.match?(/\A[A-Za-z_$][A-Za-z0-9_$]*\z/)
-    raise ArgumentError,
-          "modal_store must be a JS identifier (it is spliced into $store.<name>); " \
-          "got #{modal_store.inspect}. Escaping it would not help — an escaped " \
-          "identifier is a different SyntaxError, and the card would mount dead."
-  end
+  # THE REGEX AND THE ARGUMENT USED TO LIVE HERE, INLINE. This card was the first
+  # site to need them, so it carried the worked example; the engine has sixteen more
+  # splices of a store name in identifier position, and the contract now lives in ONE
+  # place. Studio::JsIdentifier holds the pattern, why it is a pattern and not an
+  # allowlist, and why it raises rather than falling back to the default. Behaviour
+  # here is unchanged: same pattern, same ArgumentError, same message.
+  modal_store = Studio::JsIdentifier.validate!(
+                  local_assigns.fetch(:modal_store, "modals"), local: :modal_store)
   done_event  = local_assigns.fetch(:done_event, "onboarding-step-done")
   # THE SAME HAZARD empty_error_js CARRIES, on the three remaining locals that land
   # inside a JS SINGLE-quoted literal in the x-data below. A bare apostrophe in any

data/app/views/studio/modals/templates/_action.html.erb

@@ -7,7 +7,8 @@
     icon_color :primary / :success / :warning to card_header.
 
     Local: modal_store — Alpine store name backing close(). Default "modals". %>
-<% modal_store = local_assigns.fetch(:modal_store, "modals") %>
+<%# IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier. %>
+<% modal_store = Studio::JsIdentifier.validate!(local_assigns.fetch(:modal_store, "modals"), local: :modal_store) %>
 <div x-data>
   <%= render "studio/modals/blocks/card_header",
         size: :lg,

data/app/views/studio/modals/templates/_form.html.erb

@@ -4,7 +4,8 @@
     + close ×. Ported from turf-monster.
 
     Local: modal_store — Alpine store name backing close(). Default "modals". %>
-<% modal_store = local_assigns.fetch(:modal_store, "modals") %>
+<%# IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier. %>
+<% modal_store = Studio::JsIdentifier.validate!(local_assigns.fetch(:modal_store, "modals"), local: :modal_store) %>
 <div x-data="{ value: '' }">
   <%= render layout: "studio/modals/blocks/shell", locals: { title: "Form Template", modal_store: modal_store } do %>
     <p class="text-sm text-muted mb-4">

data/app/views/studio/modals/templates/_status.html.erb

@@ -6,7 +6,8 @@
     at 1.6s so a viewer can step through both states.
 
     Local: modal_store — Alpine store name backing close(). Default "modals". %>
-<% modal_store = local_assigns.fetch(:modal_store, "modals") %>
+<%# IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier. %>
+<% modal_store = Studio::JsIdentifier.validate!(local_assigns.fetch(:modal_store, "modals"), local: :modal_store) %>
 <div x-data="{
        state: 'loading',
        start() {

data/app/views/studio/modals/templates/_success.html.erb

@@ -5,7 +5,8 @@
     use studio/modals/blocks/_onchain_success instead. Ported from turf-monster.
 
     Local: modal_store — Alpine store name backing close(). Default "modals". %>
-<% modal_store = local_assigns.fetch(:modal_store, "modals") %>
+<%# IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier. %>
+<% modal_store = Studio::JsIdentifier.validate!(local_assigns.fetch(:modal_store, "modals"), local: :modal_store) %>
 <div x-data>
   <%= render "studio/modals/blocks/card_header",
         size: :lg,

data/app/views/studio/modals/templates/_wizard.html.erb

@@ -8,7 +8,8 @@
     primary CTA pulling forward; Back as a subtle link, hidden on step 1.
 
     Local: modal_store — Alpine store name backing close(). Default "modals". %>
-<% modal_store = local_assigns.fetch(:modal_store, "modals") %>
+<%# IDENTIFIER position ($store.<name>) — VALIDATED, never escaped: Studio::JsIdentifier. %>
+<% modal_store = Studio::JsIdentifier.validate!(local_assigns.fetch(:modal_store, "modals"), local: :modal_store) %>
 <div x-data="{ step: 1, total: 3 }">
   <div class="relative mb-3 -mt-2">
     <h3 class="text-heading font-bold text-lg leading-tight text-center pt-1">Wizard Template</h3>

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

@@ -468,7 +468,6 @@
                     resolve_expr: "$store.dsModals.close()" %></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>
@@ -479,9 +478,6 @@
         <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>
         <%# --- funding chrome primitives (extract-funding-modal-chrome) --- %>
         <template x-if="$store.dsModals.current().id === 'ds-rail-row'">
           <div><%= render "style/modals/ds_rail_row" %></div>
@@ -496,25 +492,14 @@
         <template x-if="$store.dsModals.current().id === 'ds-onramp-hub'">
           <div><%= render "style/modals/ds_onramp_hub" %></div>
         </template>
-        <template x-if="$store.dsModals.current().id === 'ds-newsletter-success'">
-          <div><%= render "style/modals/ds_newsletter_success" %></div>
-        </template>
         <template x-if="$store.dsModals.current().id === 'rate-limit-general'">
           <div><%= render "style/modals/rate_limit_general" %></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>
-        </template>
+        <%# --- Newsletter exit --- %>
         <template x-if="$store.dsModals.current().id === 'unsubscribe-confirm'">
           <div><%= render "style/modals/unsubscribe_confirm" %></div>
         </template>
-        <%# Registered alongside its confirm card, because unsubscribe-confirm
-            SWAPS to it — a handoff to an unregistered id renders a blank shell. %>
-        <template x-if="$store.dsModals.current().id === 'unsubscribe-goodbye'">
-          <div><%= render "style/modals/unsubscribe_goodbye" %></div>
-        </template>
 
         <%# --- Web3 --- %>
         <%# Both web3 sign-in cards render from SOLANA-STUDIO, and both are the
@@ -535,9 +520,6 @@
         <template x-if="$store.dsModals.current().id === 'onchain-tx'">
           <div><%= render "style/modals/onchain_tx" %></div>
         </template>
-        <template x-if="$store.dsModals.current().id === 'wallet-deposit'">
-          <div><%= render "style/modals/wallet_deposit" %></div>
-        </template>
         <%# entry-confirmed — the engine celebration composed via _success_card's
             yield. One registration serves the generic (web3) + seeds (leveling)
             specimens; the seeds bar self-gates on Studio.feature?(:leveling). %>
@@ -861,7 +843,6 @@
         </div>
       <% end %>
 
-
       <%# Image upload FIRST — the empty picker (crop-photo opened with no imageUrl).
           cropReady: false is the defined starting sub-state; the crop factory
           flips it true once an image is picked, moving the glow to Crop photo. %>
@@ -1042,36 +1023,19 @@
         </div>
       <% end %>
 
-      <%# ds-newsletter-success — the STANDALONE celebration, and its two forks. %>
-      <%= render layout: "style/modal_specimen", locals: {
-            label:     "Subscribed! (standalone)",
-            reference: %(the standalone newsletter celebration (style/modals/_ds_newsletter_success) — turf-monster's modals/_newsletter_success. Distinct from the card above, which is the leveling activity celebrating IN PLACE on the card the person was already on; this one arrives on its own — swapped in from the subscribe modal, or opened from the /account newsletter row — so it has to carry its own way forward. TWO FORKS, NEITHER VISIBLE IN THE MARKUP, which is why it is carded separately rather than folded in. THE SEEDS BAR IS FIRST-JOIN ONLY: a re-subscribe earns nothing, and the card HIDES the bar rather than showing a flat "0 seeds", which would read to the person as a bug about their own account rather than an accurate zero. THE CTA IS SERVER-DECIDED: with the username quest still open (current_user.next_quest == :username) the button nudges straight into it, otherwise it sends them to browse contests — showing only one of those hides the funnel this celebration doubles as. Both are toggles here so the cabinet can walk all four combinations; in the app the CTA fork is SERVER-rendered, precisely so the button never flashes the wrong option at someone whose quest is already done. Open with $store.dsModals.open('ds-newsletter-success', { firstJoin: true, questOpen: true })),
-            card_data: "opts: { firstJoin: true, questOpen: true }",
-            toggles:   [{ model: "opts.firstJoin", label: "First join" },
-                        { model: "opts.questOpen", label: "Quest open" }],
-            open_expr: "$store.dsModals.open('ds-newsletter-success', { firstJoin: opts.firstJoin, questOpen: opts.questOpen })",
-            glow_when: ds_glow.call("ds-newsletter-success") } 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>
-          <%# the first-join seeds bar %>
-          <span class="flex gap-1">
-            <span class="flex-1 h-2 rounded" style="background: var(--color-cta)"></span>
-            <span class="flex-1 h-2 rounded" style="background: var(--color-cta); opacity:.35"></span>
-            <span class="flex-1 h-2 rounded" style="background: var(--color-cta); opacity:.18"></span>
-          </span>
-          <span class="block h-4 w-full rounded" style="background: var(--color-cta)"></span>
-        </div>
-      <% end %>
-
       <%# THE WAY OUT. The three cards above walk a user IN; a section that only
           ever demonstrates opt-in is showing the happy half of a flow, not the
-          flow. These two are the exit, and they are a PAIR — the confirm card
-          swaps to the goodbye beat, so reviewing either alone misses the handoff.
+          flow. This is the exit.
+          IT WAS A PAIR UNTIL 2026-09-09: the goodbye beat it hands off to was a
+          mirror of turf's own card, and turf now cards the real one in its host
+          section, so only the half the engine owns is left here. The handoff is
+          still the interesting part of this card, and it is now REVIEWED ACROSS
+          TWO GUIDES rather than walked in one — which is why the specimen below
+          resolves by closing rather than swapping to an id nothing registers.
           App-specific (the engine owns no newsletter); engine chrome only. %>
       <%= render layout: "style/modal_specimen", locals: {
             label:     "Leave the newsletter?",
-            reference: %(the unsubscribe CONFIRM card (style/modals/_unsubscribe_confirm) — turf-monster's modals/_unsubscribe_confirm, which POSTs newsletter_unsubscribe_path and swaps to the goodbye beat on success. Here the POST resolves locally so the handoff is walkable with no backend: press Unsubscribe and you land on "See you later". The destructive action wears the primary button and the never-mind out is the quiet Close link below it — a confirmation whose safe path is harder to find than its destructive one is a formality, not a confirmation. Open with $store.dsModals.open('unsubscribe-confirm')),
+            reference: %(the unsubscribe CONFIRM card (style/modals/_unsubscribe_confirm) — turf-monster's modals/_unsubscribe_confirm, which POSTs newsletter_unsubscribe_path and swaps to the GOODBYE beat on success. That beat is carded on turf-monster's own section of this guide, not here: its engine mirror was retired on 2026-09-09. So this specimen holds the pending state and then CLOSES — pressing Unsubscribe shows the spinner the real card shows, and stops where the guide stops. The destructive action wears the primary button and the never-mind out is the quiet Close link below it — a confirmation whose safe path is harder to find than its destructive one is a formality, not a confirmation. Open with $store.dsModals.open('unsubscribe-confirm')),
             open_expr: "$store.dsModals.open('unsubscribe-confirm')",
             glow_when: ds_glow.call("unsubscribe-confirm") } do %>
         <div class="pointer-events-none w-40 rounded-lg bg-surface border border-subtle shadow p-4 text-center space-y-2">
@@ -1083,45 +1047,6 @@
         </div>
       <% end %>
 
-      <%= render layout: "style/modal_specimen", locals: {
-            label:     "See you later",
-            reference: %(the unsubscribe GOODBYE beat (style/modals/_unsubscribe_goodbye) — where the confirm card lands. The smallest card in the guide, and the copy is a door left open rather than a plea: "Change your mind anytime from your account". Worth preserving if it is ever reworded. Open with $store.dsModals.open('unsubscribe-goodbye')),
-            open_expr: "$store.dsModals.open('unsubscribe-goodbye')",
-            glow_when: ds_glow.call("unsubscribe-goodbye") } 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">&#9996;&#65039;</div>
-          <span class="block h-2 w-24 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: .18"></span>
-          <span class="block h-5 w-full rounded" style="background: var(--color-cta)"></span>
-        </div>
-      <% end %>
-
-      <%# THE SAME BEAT, REACHED FROM SOMEWHERE ELSE. Great Username (two cards up)
-          celebrates INSIDE the modal that did the work. This one is what a host
-          shows when the quest completed somewhere with no card to advance in
-          place — turf's /account username change — so the celebration arrives on
-          its own. The toggle is the fork at its foot, which is the whole reason
-          it is one card and not two. %>
-      <%= render layout: "style/modal_specimen", locals: {
-            label:     "Quest success (off-page)",
-            reference: %(the off-page quest celebration (style/modals/_quest_success) — turf-monster's modals/_quest_success, shown when a quest completes away from any quest card. Composes the engine's card_header AND blocks/_seeds_bar (a :leveling primitive: the bar is the engine's, the numbers are app-supplied). Toggle "Subscribed" to switch the fork at the foot: NOT subscribed offers the newsletter as the next quest, so the celebration doubles as the funnel; subscribed sends them 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. Open with $store.dsModals.open('quest-success', { subscribed: false })),
-            card_data: "opts: { subscribed: false }",
-            toggles:   [{ model: "opts.subscribed", label: "Subscribed" }],
-            open_expr: "$store.dsModals.open('quest-success', { subscribed: opts.subscribed, seedsTotal: 25 })",
-            glow_when: ds_glow.call("quest-success") } 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">&#127793;</div>
-          <span class="block h-2 w-24 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
-          <%# the seeds bar, which is the card's middle and the engine's %>
-          <span class="flex gap-1">
-            <span class="flex-1 h-2 rounded" style="background: var(--color-cta)"></span>
-            <span class="flex-1 h-2 rounded" style="background: var(--color-cta); opacity:.4"></span>
-            <span class="flex-1 h-2 rounded" style="background: var(--color-cta); opacity:.2"></span>
-          </span>
-          <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: {
@@ -1227,25 +1152,11 @@
         </div>
       <% end %>
 
-      <%# WALLET SETUP — new 2026-08-24, and moved here from Onboarding the same
-          day. It is grouped with the wallet cards rather than with the signup
-          chain because that is what it IS: getting a wallet. The card still
-          renders a 3-of-3 pill, which is the host's chain position and not this
-          section's business.
-          ONE card with a "Wallet detected" toggle rather than two cards sharing a
-          modal id: the two Sign Wallet cards below are what that shape costs. %>
-
       <%# SIGN WALLET — the web2-session-on-a-wallet-account card. NOT part of the
           walk above: that walk is one on-chain transaction, this is an AUTH state
           that precedes any of it. Two specimens because the card has exactly two
           shapes, and the second is what every wallet linked before a host recorded
-          brands will see.
-
-          OPPOSITE POPULATION to the "Setup Wallet" card two up in this
-          section, and worth stating because the two look alike: that one asks
-          "get a wallet", this one asks "prove the wallet you already have".
-          WalletSetupPolicy exits at its own step 1 for an account that holds a
-          wallet, so no user can ever meet both. %>
+          brands will see. %>
       <%= render layout: "style/modal_specimen", locals: {
             label:     "Sign Wallet",
             reference: %(the Web3 "Sign Wallet" card (solana-studio solana_studio/modals/_web3_step_up — the REAL shared partial, not a specimen copy) — shown to an account that holds a self-custody wallet but authenticated this session with a web2 credential. One wallet row, glowing, because it is the only thing to press. Open with $store.dsModals.open('web3-step-up', { provider: 'phantom', providerLabel: 'Phantom', walletHint: '7xKp…JZ2Q' })),
@@ -1355,25 +1266,6 @@
         </div>
       <% end %>
 
-      <%# THE OTHER FAILURE, and it is a different KIND of failure from the one
-          above. On-chain error is the chain saying no. This is the SERVER saying
-          no — refusing to co-sign because the transaction it was handed did not
-          match the entry it prepared. They sit together because a reviewer
-          reading either alone would not know the other existed. %>
-
-      <%# Wallet deposit — standalone top-up card (not part of the walk). %>
-      <%= render layout: "style/modal_specimen", locals: {
-            label:     "Wallet deposit",
-            reference: %(the Web3 "Wallet deposit" top-up card (style/modals/_wallet_deposit) — open with $store.dsModals.open('wallet-deposit', { neededCents: 500, usdcCents: 120, usdtCents: 0, address: 'Fo1L5…' })),
-            open_expr: "$store.dsModals.open('wallet-deposit', { neededCents: 500, usdcCents: 120, usdtCents: 0, address: 'Fo1L5demoWALLETaddr9xQ2' })",
-            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">
-          <span class="block h-2 w-24 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
-          <span class="block h-5 w-full rounded" style="background: var(--color-cta)"></span>
-          <span class="block h-5 w-full rounded border" style="border-color: var(--color-border-strong)"></span>
-        </div>
-      <% end %>
-
       <%# ds-wallet-topup — the FIRST funds modal, and a safety fork. %>
       <%= render layout: "style/modal_specimen", locals: {
             label:     "Top up wallet",
@@ -1421,8 +1313,6 @@
         </div>
       <% end %>
 
-
-
       <%# Entry confirmed — the GENERIC web3 celebration (tx link + heading + drain
           CTA). seedsEarned: 0 so no seeds bar even where leveling is on: this card
           demos the clean success a web3-only app gets. The seeds variant lives in
@@ -1442,32 +1332,6 @@
         </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 %>
-
     </div>
   </section>
 

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

@@ -1,12 +1,20 @@
 <%#
-  Living style guide specimen — the unsubscribe confirmation, and the handoff to
-  its goodbye beat.
+  Living style guide specimen — the unsubscribe confirmation.
 
   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.
+  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
+  pending state is walkable with no backend, and then the card CLOSES.
+
+  IT USED TO SWAP, and the swap was the point.
+  `$store.dsModals.swap('unsubscribe-goodbye')` was correct only while this
+  guide also carried a goodbye MIRROR; that mirror was retired on 2026-09-09
+  (turf-monster cards the real goodbye beat in its own section of this guide),
+  and a swap to an id no template registers opens an EMPTY panel — the exact
+  failure the cabinet exists to catch, wearing a working card's clothes. Closing
+  is the honest stop: it shows every state this guide still owns and claims no
+  beat it cannot render. Do not restore the swap without restoring a
+  registration for its target.
 
   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
@@ -24,10 +32,12 @@
          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.
+         // is visible rather than skipped. The real card then swaps to the
+         // goodbye beat; this guide no longer carries that mirror, so it stops
+         // here rather than swapping to an unregistered id (see the header).
          setTimeout(function () {
            s.saving = false;
-           $store.dsModals.swap('unsubscribe-goodbye');
+           $store.dsModals.close();
          }, 450);
        }
      }">

data/lib/studio/js_identifier.rb

@@ -0,0 +1,88 @@
+module Studio
+  # ONE home for the CONTRACT a host-supplied value must meet when a partial
+  # splices it into JS **identifier position** — a bare NAME rather than a string:
+  #
+  #     <button @click="$store.<%= modal_store %>.close()">
+  #
+  # THE SIBLING OF Studio::JsLiteral, AND ITS OPPOSITE. Both exist for the same
+  # silent failure: a host value that makes an Alpine expression a SyntaxError, so
+  # the component mounts as a NO-OP that still renders every element. Perfect
+  # markup, dead card, nothing raised and nothing logged. The two differ on the
+  # only question that matters — WHAT THE VALUE IS:
+  #
+  #   STRING position  — the value is DATA inside a JS literal. Any character is
+  #     legal; the repair is to ESCAPE it (Studio::JsLiteral.in_attribute).
+  #   IDENTIFIER position — the value is a NAME. Most characters are not legal at
+  #     all; the repair is to REFUSE it, which is this module.
+  #
+  # ESCAPING IS ACTIVELY WRONG HERE, which is why this is a second module rather
+  # than a second method on the first. escape_javascript also escapes `$`, so a
+  # perfectly legal store name like `dsModals$2` comes back as `dsModals\$2` and
+  # `$store.dsModals\$2.close()` is a SyntaxError — the same dead card, reached a
+  # longer way, on a value that was never hostile. And for a value that IS hostile,
+  # `$store.a\'b.close()` is not a rescued identifier either. There is no escaping
+  # of identifier position; there is only validity.
+  #
+  # A PATTERN, NOT AN ALLOWLIST, and the reason outlives this engine. An allowlist
+  # would be a shared primitive enumerating its own CONSUMERS — "modals" and the
+  # style guide's "dsModals" today — so the next app to mount a page-scoped host
+  # would be refused by its own dependency until a gem release admitted the name.
+  # The real contract is narrower and stateless: the value is spliced into
+  # member-access position, so it must be an identifier, and WHICH identifier is
+  # none of the engine's business.
+  #
+  # IT RAISES RATHER THAN FALLING BACK TO A DEFAULT. A silent fallback is the worse
+  # of the two repairs: the card would mount, look perfect, and talk to a store that
+  # is not the host's — the same SILENT class this guard exists to leave behind,
+  # only now with a working-looking page in front of it. A host meets this the first
+  # time it renders, in development, with the local named.
+  #
+  # WHAT IT DOES NOT COVER. A value in string position that is ALSO a store name
+  # (blocks/_birthday's `store: '<%= j modal_store %>'`, which reaches
+  # `Alpine.store(name)` — a lookup by string, where any character is legal) needs no
+  # identifier. Validate where the value reaches a SPLICE, not everywhere the word
+  # "store" appears; test/views/js_identifier_locals_test.rb carries the census.
+  module JsIdentifier
+    # ASCII IdentifierName — what member access after a dot accepts. It admits every
+    # store name a host would plausibly write (`modals`, `dsModals`, `ds_Modals$2`)
+    # and rejects every character that could leave identifier position: quote,
+    # apostrophe, backslash, dot, space, semicolon, angle bracket, and the empty
+    # string.
+    #
+    # DELIBERATELY NOT THE FULL ECMAScript GRAMMAR, which admits most of Unicode.
+    # Widening it is a decision, not a bug fix — and it would have to be taken
+    # together with the marking note on #validate! below, because the value's safety
+    # under ERB is what the narrow set buys.
+    PATTERN = /\A[A-Za-z_$][A-Za-z0-9_$]*\z/
+
+    module_function
+
+    # Return +value+ as a String, or raise ArgumentError naming +local+.
+    #
+    #     modal_store = Studio::JsIdentifier.validate!(
+    #                     local_assigns.fetch(:modal_store, "modals"), local: :modal_store)
+    #
+    # +local+ is REQUIRED and has no default on purpose. Fifteen of the engine's
+    # call sites name this local `modal_store` and two name it `store`; a default
+    # that is right fifteen times out of seventeen is exactly how the other two
+    # would hand a host the wrong local to go and fix.
+    #
+    # RETURNS A PLAIN STRING, NOT AN html_safe ONE, and that is load-bearing rather
+    # than an omission. A value that satisfies PATTERN contains no character ERB
+    # escapes, so ERB's pass over it is a byte-for-byte no-op and the identifier
+    # reaches the browser exactly as the host wrote it — the marking would buy
+    # nothing today. What it would cost is the day PATTERN is widened: ERB's
+    # escaping is the second layer that would still be standing, and a value marked
+    # safe here skips it. So the pattern is the only thing holding the line, and it
+    # is holding it alone by choice, in one place.
+    def validate!(value, local:)
+      name = "#{value}"
+      return name if name.match?(PATTERN)
+
+      raise ArgumentError,
+            "#{local} must be a JS identifier (it is spliced into $store.<name>); " \
+            "got #{value.inspect}. Escaping it would not help — an escaped " \
+            "identifier is a different SyntaxError, and the card would mount dead."
+    end
+  end
+end

data/lib/studio/js_literal.rb

@@ -80,8 +80,9 @@ module Studio
   # NAME — `$store.<%= modal_store %>.close()` — must be VALIDATED, never escaped:
   # escape_javascript also escapes `$`, so a legitimate store name like `dsModals$2`
   # comes back mangled and the card dies anyway. The SHAPE of the splice decides the
-  # repair, never the name of the local. studio/modals/onboarding/_first_name
-  # carries the worked example of both.
+  # repair, never the name of the local. That repair is Studio::JsIdentifier, this
+  # module's sibling and its opposite; studio/modals/onboarding/_first_name carries
+  # the worked example of both in one partial.
   module JsLiteral
     extend ActionView::Helpers::JavaScriptHelper
 

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.74.2"
+  VERSION = "0.74.4"
 end

data/lib/studio.rb

@@ -9,6 +9,7 @@ require "studio/environment_banner"
 require "studio/theme_resolver"
 require "studio/ui_primitives"
 require "studio/js_literal"
+require "studio/js_identifier"
 require "studio/sidebar_sections"
 require "studio/profile_sections"
 require "studio/profile_image"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.74.2
+  version: 0.74.4
 platform: ruby
 authors:
 - Alex McRitchie
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-09-08 00:00:00.000000000 Z
+date: 2026-09-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -522,23 +522,18 @@ files:
 - app/views/style/modals/_auth.html.erb
 - app/views/style/modals/_birthday.html.erb
 - app/views/style/modals/_ds_close_x.html.erb
-- app/views/style/modals/_ds_newsletter_success.html.erb
 - app/views/style/modals/_ds_onramp_hub.html.erb
 - app/views/style/modals/_ds_rail_row.html.erb
 - app/views/style/modals/_ds_wallet_topup.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_connect.html.erb
 - app/views/style/modals/_wallet_connect_slot.html.erb
-- app/views/style/modals/_wallet_deposit.html.erb
 - app/views/theme_settings/edit.html.erb
 - app/views/user_mailer/magic_link.html.erb
 - app/views/user_mailer/magic_link.text.erb
@@ -568,6 +563,7 @@ files:
 - lib/studio/geo/lookup.rb
 - lib/studio/image_cache.rb
 - lib/studio/ip_locations.rb
+- lib/studio/js_identifier.rb
 - lib/studio/js_literal.rb
 - lib/studio/link_resolution.rb
 - lib/studio/link_token.rb

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

@@ -1,67 +0,0 @@
-<%#
-  Living style guide specimen — Subscribed!, the standalone newsletter
-  celebration.
-
-  APP-SPECIFIC, engine chrome (blocks/_card_header at :lg). Distinct from the
-  Profile Leveling "Subscribed!" beat, which is the leveling activity celebrating
-  IN PLACE on the card the person was already on. This one arrives on its own —
-  swapped in from the subscribe modal, or opened from the /account newsletter
-  row — so it has to carry its own way forward.
-
-  TWO FORKS, AND NEITHER IS VISIBLE TO A READER OF THE MARKUP. That is the whole
-  reason this card exists separately rather than being folded into the leveling
-  beat:
-
-    · THE SEEDS BAR IS FIRST-JOIN ONLY. A re-subscribe earns nothing, and the
-      card HIDES the bar rather than showing a flat "0 seeds" — which would read
-      to the person as a bug about their own account rather than as an accurate
-      zero.
-    · THE CTA IS SERVER-DECIDED. If the username quest is still open
-      (current_user.next_quest == :username) the button nudges straight into it;
-      otherwise it sends them off to browse contests. Showing only one of those
-      hides the funnel that this celebration doubles as.
-
-  Both are gated on props here so the cabinet can walk all four combinations.
-  In the app the CTA fork is SERVER-rendered, precisely so the button never
-  flashes the wrong option at someone whose quest is already done.
-
-  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) || {} },
-       get firstJoin() { return !!this.props.firstJoin },
-       get questOpen() { return !!this.props.questOpen }
-     }">
-  <%= render "studio/modals/blocks/card_header",
-        size: :lg,
-        icon_emoji: "🌱",
-        title: "Subscribed!",
-        subtitle: "You're on the list. We'll keep the sports news and contest updates coming." %>
-
-  <%# First join only. The engine's :leveling seeds bar — the bar is the
-      engine's, the numbers are the app's. %>
-  <template x-if="firstJoin">
-    <div class="mb-5">
-      <%= render "studio/modals/blocks/seeds_bar",
-            seeds_earned_key: "25",
-            seeds_total_key:  "125",
-            seeds_per_level:  100,
-            free_entry_label: "Free Entry Token 🎟️" %>
-    </div>
-  </template>
-
-  <template x-if="questOpen">
-    <button type="button" @click="$store.dsModals.close()"
-            class="btn btn-primary btn-lg w-full">Next Quest</button>
-  </template>
-
-  <template x-if="!questOpen">
-    <button type="button" @click="$store.dsModals.close()"
-            class="btn btn-primary btn-lg w-full">Check Out Contests</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/_network_guard.html.erb

@@ -1,55 +0,0 @@
-<%#
-  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/_quest_success.html.erb

@@ -1,55 +0,0 @@
-<%#
-  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/_unsubscribe_goodbye.html.erb

@@ -1,30 +0,0 @@
-<%#
-  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_deposit.html.erb

@@ -1,56 +0,0 @@
-<%#
-  Wallet deposit / top-up modal — design-system port of turf-monster's
-  modals/_wallet_deposit, wired to the living style guide's page-scoped host
-  ($store.dsModals). Single-card design (no step machinery): the shortfall
-  math, a "Pay with Card" CTA, and a copy-your-address self-fund row.
-
-  Self-contained: the production Stripe form + CDP onramp button are replaced
-  with a neutral demo CTA, and the wallet address reads from props (a demo
-  value) rather than $store.session. Opened via
-  open('wallet-deposit', { neededCents, usdcCents, usdtCents, address }).
-
-  Single root: the outer <div> is the host's required root.
-%>
-<div x-data="{ get props() { return (Alpine.store('dsModals').current() || {}).props || {} } }"
-     class="relative">
-
-  <button @click="$store.dsModals.close()"
-          class="absolute top-0 right-0 -mt-2 -mr-2 text-secondary hover:text-heading text-xl leading-none z-10"
-          aria-label="Close">&times;</button>
-
-  <div class="text-center pt-1 mb-3">
-    <h3 class="text-heading font-bold text-lg leading-tight">Top Up Your Wallet</h3>
-  </div>
-  <p class="text-xs text-secondary mb-4 text-center">
-    You need $<span class="font-mono" x-text="((props.neededCents || 0) / 100).toFixed(2)"></span>
-    to enter.
-    You have $<span class="font-mono" x-text="((props.usdcCents || 0) / 100).toFixed(2)"></span> USDC
-    + $<span class="font-mono" x-text="((props.usdtCents || 0) / 100).toFixed(2)"></span> USDT.
-  </p>
-
-  <div class="space-y-3">
-    <%# Demo pay CTA — the production modal posts to Stripe checkout in a new
-        tab; here it just closes (no real payment). %>
-    <button type="button" @click="$store.dsModals.close()" class="btn btn-primary btn-lg w-full">
-      Pay with Card
-    </button>
-
-    <%# Send-to-address — self-fund from another wallet. Address from props. %>
-    <div class="border-t border-strong pt-3" x-data="{ copied: false }">
-      <p class="text-xs text-secondary text-center mb-2">Or send USDC/USDT to your wallet:</p>
-      <div class="flex items-center gap-2">
-        <code class="flex-1 px-2 py-1 bg-surface rounded text-xs font-mono truncate"
-              x-text="props.address || 'Fo1L5…demo…9xQ2'"></code>
-        <button type="button"
-                @click="navigator.clipboard && navigator.clipboard.writeText(props.address || ''); copied = true; setTimeout(() => copied = false, 1500)"
-                class="btn btn-sm">
-          <span x-text="copied ? 'Copied' : 'Copy'"></span>
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <p class="text-center text-xs text-muted mt-4">
-    Come back here once your deposit lands &mdash; we'll refresh the balance.
-  </p>
-</div>