studio-engine 0.20.0 → 0.22.0

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

@@ -14,7 +14,10 @@
      card behind ours. So this section owns a tiny, self-contained store + overlay
      and registers all specimen content itself.
 
-     Groups: Auth (the sign-in step machine), Profile (crop / upload, opened
+     Groups: Auth (the sign-in step machine), Eligibility and entry (the
+     app-supplied-policy age-gate DOB primitive, gated by Studio.feature?(:age_gate),
+     plus the app-specific entry-tokens purchase flow documented via engine chrome),
+     Profile (crop / upload, opened
      through studio/cropper_assets), Web3 (wallet-connect with engine-owned inline
      brand icons / on-chain-tx / deposit / the generic entry-confirmed celebration,
      gated by Studio.feature?(:web3) — disabled-but-present-yet-openable when off),
@@ -28,6 +31,7 @@
 <%
   web3_on     = Studio.feature?(:web3)
   leveling_on = Studio.feature?(:leveling)
+  age_gate_on = Studio.feature?(:age_gate)
 
   # Auth method-toggle defaults — mirror the app's Studio.auth_method? config;
   # Solana Wallet also needs the web3 capability, so it defaults OFF on an app
@@ -51,8 +55,17 @@
     expr
   end
 %>
+<%# DEMO flow wiring (style-page only): the age-gate primitive fires an
+    'age-verified' window event on a successful confirm — its designed handoff
+    hook, the same one a production app listens for to resume the entry. Here the
+    style page plays that "app": on age-verified it opens the entry-token purchase
+    modal, so the DS walks eligibility to purchase in sequence. The engine
+    primitive is untouched; its real submit still posts to the app-supplied
+    submit_url. Kept on the section (always mounted) so it fires even as the
+    age-gate card closes. %>
 <section id="modals" class="space-y-10" style="scroll-margin-top: calc(var(--nav-h, 0px) + 5rem)"
-         x-data="{}" @ds-modal-close.window="$store.dsModals.close()">
+         x-data="{}" @ds-modal-close.window="$store.dsModals.close()"
+         @age-verified.window="$store.dsModals.open('entry-tokens', { step: 'picker' })">
   <div class="space-y-1">
     <h2 class="text-2xl font-bold text-heading">Modals</h2>
     <p class="text-muted text-sm">
@@ -237,6 +250,16 @@
       defines the factory inline; no importmap change). %>
   <%= render "studio/cropper_assets" %>
 
+  <%# ageVerifyModal factory — rendered here at page level (never inside the
+      overlay template, where a cloned script would not run) so the age-gate
+      specimen opens live. A consumer app renders this in its layout the same way. %>
+  <%= render "studio/age_verify_assets" %>
+
+  <%# levelingActionModal factory — page level (never inside the overlay template,
+      where a cloned script would not run) so the change-username + quest-activity
+      specimens open live. A consumer app renders this in its layout the same way. %>
+  <%= render "studio/leveling_activity_assets" %>
+
   <%# ---- The overlay: one backdrop + card; every specimen's real content is a
       single-root <template x-if> gated on the current modal id. Faithful to the
       shared host — backdrop fade, scroll lock, escape + click-self dismissal
@@ -257,6 +280,14 @@
           <div><%= render "style/modals/auth" %></div>
         </template>
 
+        <%# --- Eligibility + entry --- %>
+        <template x-if="$store.dsModals.current().id === 'age-verify'">
+          <div><%= render "style/modals/age_verify" %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'entry-tokens'">
+          <div><%= render "style/modals/entry_tokens" %></div>
+        </template>
+
         <%# --- Profile (real engine partials, opened on dsModals) --- %>
         <template x-if="$store.dsModals.current().id === 'crop-photo'">
           <div><%= render "studio/modals/crop_photo", store: "dsModals" %></div>
@@ -350,6 +381,49 @@
                     subtitle: "You leveled up! A Free Entry lands in your account soon. Keep leveling for more." %></div>
         </template>
 
+        <%# --- Leveling activities: change username + quest activity --- %>
+        <%# Each id renders the SAME engine primitive with an EXPLICIT leveling:
+            flag, so BOTH modes stay visible here regardless of this app's real
+            :leveling setting. All demo:true — the save resolves locally (no
+            backend), and the on-chain-accurate copy is passed as an app-authored
+            description (the engine default stays neutral). %>
+        <template x-if="$store.dsModals.current().id === 'change-username'">
+          <div><%= render "studio/modals/blocks/change_username",
+                    modal_store: "dsModals", demo: true, leveling: true,
+                    current_username: "turfmonster",
+                    submit_url: "#demo-change-username",
+                    description: "Your username is stored on-chain. Changes are saved via your managed wallet.",
+                    quest_label: "Quest 1 of 4" %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'change-username-plain'">
+          <div><%= render "studio/modals/blocks/change_username",
+                    modal_store: "dsModals", demo: true, leveling: false,
+                    current_username: "mcritchie",
+                    submit_url: "#demo-change-username",
+                    description: "Choose the name shown across your account." %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'quest-activity'">
+          <div><%= render "studio/modals/blocks/leveling_activity",
+                    modal_store: "dsModals", demo: true, leveling: true,
+                    submit_url: "#demo-quest",
+                    title: "Join the Newsletter",
+                    description: "Sports news and contest updates — complete the quest for seeds.",
+                    input: true, input_type: "email", placeholder: "you@example.com",
+                    cta_label: "Subscribe", saved_label: "Subscribed", saving_label: "Subscribing…",
+                    quest_label: "Quest 2 of 4",
+                    icon_emoji: "📬", celebrate_title: "You're in",
+                    celebrate_subtitle: "Nice — you earned seeds for joining. Keep completing quests to earn a Free Entry." %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'quest-activity-plain'">
+          <div><%= render "studio/modals/blocks/leveling_activity",
+                    modal_store: "dsModals", demo: true, leveling: false,
+                    submit_url: "#demo-quest",
+                    title: "Join the Newsletter",
+                    description: "Sports news and contest updates.",
+                    input: true, input_type: "email", placeholder: "you@example.com",
+                    cta_label: "Subscribe", saved_label: "Subscribed", saving_label: "Subscribing…" %></div>
+        </template>
+
       </div>
     </div>
   </template>
@@ -432,6 +506,68 @@
     </div>
   </section>
 
+  <%# ===================================================================== %>
+  <%# 1b. ELIGIBILITY + ENTRY %>
+  <%# ===================================================================== %>
+  <section class="space-y-5">
+    <div class="space-y-1">
+      <div class="flex flex-wrap items-center gap-3">
+        <h3 class="text-xl font-bold text-heading">Eligibility &amp; entry</h3>
+        <% if age_gate_on %>
+          <span class="badge" style="color: var(--color-success); border-color: var(--color-success)">age gate on</span>
+        <% else %>
+          <span class="badge" style="color: var(--color-warning); border-color: var(--color-warning)">age gate off</span>
+        <% end %>
+      </div>
+      <p class="text-muted text-sm">
+        The pre-entry gate and the entry-purchase flow. The <strong>age gate</strong>
+        (<code class="font-mono text-2xs">studio/modals/blocks/_age_verify</code>) is a
+        NEW engine primitive gated by
+        <code class="font-mono text-2xs">Studio.feature?(:age_gate)</code> &mdash; a DOB
+        modal whose minimum age, jurisdiction label, endpoint, and legal copy are all
+        <strong>app-supplied</strong> (the engine hardcodes no policy). It is the heavier
+        sibling of the <code class="font-mono text-2xs">shared/_age_attestation</code>
+        checkbox inside Sign in above &mdash; <strong>run one or the other</strong>. The
+        <strong>entry-tokens</strong> flow is <strong>app-specific</strong> (payments
+        product): documented here composing engine chrome, but the packs, rails, and
+        the on-chain mint stay app-owned.
+      </p>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <%# Age gate — engine primitive, gated on :age_gate (disabled-but-present). %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Age gate (DOB)",
+            reference: %(the "Age gate" DOB modal (studio-engine studio/modals/blocks/_age_verify) — a NEW engine primitive; the app supplies min_age / state / submit_url / fine_print and the engine hardcodes no legal policy. In this demo, Confirm & Continue advances to the Entry tokens purchase (page-level dsModals wiring on the primitive's 'age-verified' hook; the primitive's real submit posts to submit_url). Open with $store.dsModals.open('age-verify')),
+            open_expr: "$store.dsModals.open('age-verify')",
+            glow_when: ds_glow.call("age-verify"),
+            disabled: !age_gate_on, openable: true, disabled_label: "age gate off" } do %>
+        <div class="pointer-events-none w-40 rounded-lg bg-surface border border-subtle shadow p-4 space-y-2 text-center">
+          <span class="block h-2 w-24 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+          <div class="grid grid-cols-3 gap-1">
+            <span class="h-6 rounded border" style="border-color: var(--color-border-strong)"></span>
+            <span class="h-6 rounded border" style="border-color: var(--color-border-strong)"></span>
+            <span class="h-6 rounded border" style="border-color: var(--color-border-strong)"></span>
+          </div>
+          <span class="block h-5 w-full rounded" style="background: var(--color-cta)"></span>
+        </div>
+      <% end %>
+
+      <%# Entry tokens — app-specific flow, documented (not capability-gated). %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Entry tokens",
+            reference: %(the "Entry tokens" purchase flow (app-specific — documented in the engine style guide composing studio/modals/blocks chrome). The packs, pricing, rails, and on-chain mint stay app-owned. Open with $store.dsModals.open('entry-tokens', { step: 'picker' })),
+            open_expr: "$store.dsModals.open('entry-tokens', { step: 'picker' })",
+            glow_when: ds_glow.call("entry-tokens") } do %>
+        <div class="pointer-events-none w-40 rounded-lg bg-surface border border-subtle shadow p-4 space-y-2">
+          <span class="block h-2 w-20 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+          <span class="block h-6 w-full rounded border" style="border-color: var(--color-border-strong)"></span>
+          <span class="block h-6 w-full rounded border" style="border-color: var(--color-primary)"></span>
+          <span class="block h-6 w-full rounded border" style="border-color: var(--color-border-strong)"></span>
+        </div>
+      <% end %>
+    </div>
+  </section>
+
   <%# ===================================================================== %>
   <%# 2. PROFILE — crop / upload, live via cropper_assets %>
   <%# ===================================================================== %>
@@ -771,4 +907,97 @@
       <% end %>
     </div>
   </section>
+
+  <%# ===================================================================== %>
+  <%# 7. LEVELING ACTIVITIES — change username + quest activities %>
+  <%# ===================================================================== %>
+  <section class="space-y-5">
+    <div class="space-y-1">
+      <div class="flex flex-wrap items-center gap-3">
+        <h3 class="text-xl font-bold text-heading">Leveling activities</h3>
+        <% if leveling_on %>
+          <span class="badge" style="color: var(--color-success); border-color: var(--color-success)">leveling on</span>
+        <% else %>
+          <span class="badge" style="color: var(--color-warning); border-color: var(--color-warning)">leveling off</span>
+        <% end %>
+      </div>
+      <p class="text-muted text-sm">
+        The quest/leveling action modals
+        (<code class="font-mono text-2xs">studio/modals/blocks/_change_username</code>,
+        <code class="font-mono text-2xs">studio/modals/blocks/_leveling_activity</code>),
+        migrated from Turf Monster. ONE primitive, <strong>two modes</strong>, decided
+        by <code class="font-mono text-2xs">Studio.feature?(:leveling)</code>:
+        <strong>leveling on</strong> adds the quest pill + the seeds level-up
+        celebration; <strong>leveling off</strong> is the plain action modal (just
+        the input + Save + a Saved state — the McRitchie Studio shape). Each modal is
+        shown <strong>both ways</strong> below (the specimens pass an explicit
+        <code class="font-mono text-2xs">leveling:</code> so both render regardless of
+        this app's flag). The actual save is an <strong>app-supplied callback</strong>:
+        the modal POSTs to <code class="font-mono text-2xs">submit_url</code> and, for
+        an app that needs a wallet step, delegates it opaquely to an app-supplied
+        <code class="font-mono text-2xs">finalize_hook</code> — <strong>no wallet,
+        signing, or on-chain write lives in the engine</strong>. (These demos resolve
+        the save locally.)
+      </p>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <%# Change username — leveling ON: quest pill + seeds celebration on save. %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Change username (leveling)",
+            reference: %(the "Change username" modal WITH leveling (studio-engine studio/modals/blocks/_change_username, leveling: true) — quest pill + seeds level-up celebration on save. The on-chain save is an app-supplied callback (submit_url + an opaque finalize_hook); the engine is UI only. Open with $store.dsModals.open('change-username')),
+            open_expr: "$store.dsModals.open('change-username')",
+            glow_when: ds_glow.call("change-username") } do %>
+        <div class="pointer-events-none w-40 rounded-lg bg-surface border border-subtle shadow p-4 space-y-2">
+          <div class="flex items-center justify-between gap-2">
+            <span class="block h-2 w-16 rounded" style="background: var(--color-text); opacity: .18"></span>
+            <span class="text-[8px] font-semibold uppercase rounded-full px-1.5 py-0.5" style="color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, transparent)">Quest 1/4</span>
+          </div>
+          <span class="block h-6 w-full rounded border" style="border-color: var(--color-border-strong)"></span>
+          <span class="block h-5 w-full rounded" style="background: var(--color-cta)"></span>
+        </div>
+      <% end %>
+
+      <%# Change username — leveling OFF: the plain MS-style action + Save. %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Change username (plain)",
+            reference: %(the "Change username" modal WITHOUT leveling (studio-engine studio/modals/blocks/_change_username, leveling: false) — the plain McRitchie Studio shape: input + Save, then a Saved state. No quest pill, no seeds. Same primitive, flag off. Open with $store.dsModals.open('change-username-plain')),
+            open_expr: "$store.dsModals.open('change-username-plain')",
+            glow_when: ds_glow.call("change-username-plain") } do %>
+        <div class="pointer-events-none w-40 rounded-lg bg-surface border border-subtle shadow p-4 space-y-2">
+          <span class="block h-2 w-16 rounded" style="background: var(--color-text); opacity: .18"></span>
+          <span class="block h-6 w-full rounded border" style="border-color: var(--color-border-strong)"></span>
+          <span class="block h-5 w-full rounded" style="background: var(--color-cta)"></span>
+        </div>
+      <% end %>
+
+      <%# Quest activity — leveling ON: generic quest (newsletter join) + seeds. %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Quest activity (leveling)",
+            reference: %(a generic quest activity WITH leveling (studio-engine studio/modals/blocks/_leveling_activity, leveling: true) — here a "Join the Newsletter" quest: quest pill + seeds celebration on complete. Covers join-newsletter / send-message and the rest as ONE parameterized primitive. Open with $store.dsModals.open('quest-activity')),
+            open_expr: "$store.dsModals.open('quest-activity')",
+            glow_when: ds_glow.call("quest-activity") } do %>
+        <div class="pointer-events-none w-40 rounded-lg bg-surface border border-subtle shadow p-4 space-y-2">
+          <div class="flex items-center justify-between gap-2">
+            <span class="text-lg leading-none">📬</span>
+            <span class="text-[8px] font-semibold uppercase rounded-full px-1.5 py-0.5" style="color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, transparent)">Quest 2/4</span>
+          </div>
+          <span class="block h-6 w-full rounded border" style="border-color: var(--color-border-strong)"></span>
+          <span class="block h-5 w-full rounded" style="background: var(--color-cta)"></span>
+        </div>
+      <% end %>
+
+      <%# Quest activity — leveling OFF: the plain action (no quest, no seeds). %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Quest activity (plain)",
+            reference: %(the SAME generic activity WITHOUT leveling (studio-engine studio/modals/blocks/_leveling_activity, leveling: false) — a plain "Join the Newsletter" action: input + Subscribe, then Subscribed. No quest pill, no seeds. Open with $store.dsModals.open('quest-activity-plain')),
+            open_expr: "$store.dsModals.open('quest-activity-plain')",
+            glow_when: ds_glow.call("quest-activity-plain") } do %>
+        <div class="pointer-events-none w-40 rounded-lg bg-surface border border-subtle shadow p-4 space-y-2">
+          <span class="text-lg leading-none">📬</span>
+          <span class="block h-6 w-full rounded border" style="border-color: var(--color-border-strong)"></span>
+          <span class="block h-5 w-full rounded" style="background: var(--color-cta)"></span>
+        </div>
+      <% end %>
+    </div>
+  </section>
 </section>

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

@@ -259,6 +259,52 @@
     </div>
   </section>
 
+  <!-- Confetti & pulse -->
+  <section class="space-y-5">
+    <div class="space-y-1">
+      <h3 class="text-xl font-bold text-heading">Confetti &amp; pulse</h3>
+      <p class="text-muted text-sm max-w-2xl">
+        Celebration effects lifted from Turf Monster into the engine. Confetti is
+        <code class="font-mono text-2xs">window.studioConfetti</code> - a zero-dependency,
+        no-CDN effect (canvas-confetti is vendored into the engine and shipped through the
+        asset pipeline). Two callable variants, both honoring
+        <code class="font-mono text-2xs">prefers-reduced-motion</code>. The pulse is the
+        <code class="font-mono text-2xs">.pulse-cta</code> attention beat. Fire the confetti
+        with the buttons below.
+      </p>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <%= render layout: "style/specimen",
+            locals: { klass: "window.studioConfetti.burst(el)",
+                      usage: %(window.studioConfetti.burst(cardEl)\n// radial burst from behind a card/modal, from its center) } do %>
+        <div x-data="{}" class="flex flex-col items-center gap-3 py-2">
+          <div x-ref="burstCard" class="card px-5 py-4 text-sm font-semibold text-heading text-center">Success!</div>
+          <button type="button" class="btn btn-primary btn-sm"
+                  @click="window.studioConfetti && window.studioConfetti.burst($refs.burstCard)">Fire burst</button>
+        </div>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: "window.studioConfetti.cannons()",
+                      usage: %(window.studioConfetti.cannons()\n// left + right side-cannons, full-screen celebration) } do %>
+        <div x-data="{}" class="flex flex-col items-center gap-3 py-2">
+          <p class="text-sm font-semibold text-heading text-center">You joined a contest!</p>
+          <button type="button" class="btn btn-success btn-sm"
+                  @click="window.studioConfetti && window.studioConfetti.cannons()">Fire cannons</button>
+        </div>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".pulse-cta  (knobs: --pulse-cta-color / -speed / -scale)",
+                      usage: %(<button class="btn btn-primary pulse-cta">Change Username</button>\n<button class="btn btn-success pulse-cta" style="--pulse-cta-color: var(--color-success)">Go</button>) } do %>
+        <div class="flex flex-wrap items-center justify-center gap-4">
+          <button type="button" class="btn btn-primary pulse-cta">Change Username</button>
+          <button type="button" class="btn btn-success pulse-cta" style="--pulse-cta-color: var(--color-success)">Go</button>
+        </div>
+      <% end %>
+    </div>
+  </section>
+
   <!-- Leveling (capability-gated: Studio.feature?(:leveling)) -->
   <section class="space-y-5">
     <div class="space-y-1">

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

@@ -0,0 +1,17 @@
+<%#
+  Living style guide specimen for the engine age-gate DOB modal
+  (studio/modals/blocks/_age_verify). Opened on the page-scoped dsModals host.
+
+  The whole point of this specimen is the SEAM: every legal value here is a DEMO
+  the app feeds — the engine primitive hardcodes none of it. So we pass an
+  illustrative policy (21+ in CA) and a demo fine_print that SAYS so, and run in
+  demo mode (no backend — submit resolves locally). A real app swaps these for
+  its own min_age / state / submit_url / legal copy resolved server-side.
+%>
+<%= render "studio/modals/blocks/age_verify",
+      min_age:     21,
+      state:       "CA",
+      submit_url:  "#demo-age-verify",
+      modal_store: "dsModals",
+      demo:        true,
+      fine_print:  "Demo policy the app supplies: 21+ in CA. The engine hardcodes no age and no state table — your app passes min_age, the jurisdiction label, this copy, and the endpoint that recomputes it server-side." %>

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

@@ -0,0 +1,123 @@
+<%#
+  Living style guide specimen — the entry-token purchase flow. This documents an
+  APP-SPECIFIC flow (Turf Monster's "Get Entry Tokens"); the engine deliberately
+  does NOT own the packs, pricing, or payment rails. The specimen composes only
+  engine CHROME (studio/modals/blocks/shell, card_header, progress_pill) and
+  represents the packs as an illustrative demo — the app owns the payment logic
+  and the on-chain mint.
+
+  Opened on the page-scoped dsModals host with an internal step machine on
+  props.step: picker -> confirming -> minted. Single-root templates throughout.
+
+  On-chain model (documented, not owned here): an entry token is a PROGRAM-OWNED
+  prepaid entry credit recorded on-chain (a per-token account), NOT a fungible
+  SPL token held in the user's wallet. Two distinct on-chain moments: (1) MINT at
+  purchase, server-signed after the payment clears — not on the buyer's click;
+  (2) CONSUME at entry, when the app's hold-to-confirm gesture spends one token to
+  create the contest entry.
+%>
+<%
+  # Illustrative packs only — a real app reads these from its own config
+  # (e.g. StripePurchase.available_packs), and they vary by funding mode.
+  demo_packs = [
+    { tokens: 1,  price: "$5",  note: nil },
+    { tokens: 3,  price: "$12", note: "Popular" },
+    { tokens: 10, price: "$35", note: "Best value" }
+  ]
+%>
+<div x-data="{
+       get props() { var c = Alpine.store('dsModals').current(); return (c && c.props) || {}; },
+       buy(count, balance) {
+         Alpine.store('dsModals').advance({ step: 'confirming', mintedCount: count, mintedBalance: balance });
+         setTimeout(function () {
+           var c = Alpine.store('dsModals').current();
+           if (c && c.id === 'entry-tokens') Alpine.store('dsModals').advance({ step: 'minted' });
+         }, 1300);
+       }
+     }" class="relative">
+
+  <%# Shared close — top-right, above whichever step is active. %>
+  <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>
+
+  <%# ===== PICKER ===== %>
+  <template x-if="(props.step || 'picker') === 'picker'">
+    <div>
+      <div class="text-center pt-1 mb-3">
+        <h3 class="text-heading font-bold text-lg leading-tight">Get Entry Tokens</h3>
+      </div>
+      <%= render "studio/modals/blocks/progress_pill", current: 2, total: 3 %>
+      <p class="text-xs text-secondary mb-4 text-center">
+        1 token = 1 contest entry. Pick a pack to finish.
+      </p>
+
+      <div class="space-y-2.5">
+        <% demo_packs.each do |pack| %>
+          <button type="button"
+                  @click="buy(<%= pack[:tokens] %>, '<%= pack[:tokens] %>')"
+                  class="w-full flex items-center justify-between gap-3 rounded-lg border border-strong bg-inset px-4 py-3 text-left hover:border-primary transition">
+            <span class="flex items-center gap-2">
+              <span class="text-heading font-semibold"><%= pack[:tokens] %> token<%= "s" unless pack[:tokens] == 1 %></span>
+              <% if pack[:note] %>
+                <span class="badge" style="color: var(--color-primary); border-color: var(--color-primary)"><%= pack[:note] %></span>
+              <% end %>
+            </span>
+            <span class="text-heading font-mono font-bold"><%= pack[:price] %></span>
+          </button>
+        <% end %>
+      </div>
+
+      <%# Rails — token-funded only. The picker documents which rails mint tokens.
+          The USDC-direct path is intentionally NOT a pack here (it's a separate
+          rail that transfers USDC and mints no token). %>
+      <div class="mt-4 flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs text-muted">
+        <span>Pay by card</span>
+        <span aria-hidden="true">&middot;</span>
+        <span>PayPal / Venmo</span>
+      </div>
+      <p class="text-center text-2xs text-muted mt-1">USDC-direct entry is a separate rail — it funds an entry with no token.</p>
+
+      <%# The seam callout — what the engine owns vs what the app owns. %>
+      <div class="mt-4 rounded-lg border border-subtle bg-surface p-3 text-2xs text-secondary leading-snug">
+        <p class="text-heading font-semibold mb-1">App-specific flow, engine chrome</p>
+        <p class="mb-1">
+          The engine supplies only the shell, header, and progress pill. The packs,
+          pricing, payment rails, and the on-chain mint are <strong>app-owned</strong> —
+          this specimen represents them as a demo.
+        </p>
+        <p>
+          On-chain, an entry token is a <strong>prepaid entry credit recorded on-chain</strong>
+          (not a transferable token held in your wallet): minted server-side once payment
+          clears, then <strong>consumed</strong> when the app's hold-to-confirm creates the entry.
+        </p>
+      </div>
+    </div>
+  </template>
+
+  <%# ===== CONFIRMING (mint-at-purchase) ===== %>
+  <template x-if="props.step === 'confirming'">
+    <div x-init="setTimeout(function () { var c = Alpine.store('dsModals').current(); if (c && c.id === 'entry-tokens') Alpine.store('dsModals').advance({ step: 'minted' }); }, 1300)">
+      <%= render "studio/modals/blocks/card_header",
+            spinner: true,
+            title: "Confirming your purchase…",
+            subtitle: "Payment cleared — a server job mints one prepaid entry credit per token on-chain." %>
+    </div>
+  </template>
+
+  <%# ===== MINTED (ready to consume at entry) ===== %>
+  <template x-if="props.step === 'minted'">
+    <div>
+      <%= render "studio/modals/blocks/card_header",
+            icon_color: 'primary',
+            title_key: "(props.mintedCount === 1 ? 'Entry Token Minted' : 'Entry Tokens Minted')" do %>
+        You now have <span class="font-bold text-primary font-mono" x-text="props.mintedBalance"></span> available.
+      <% end %>
+      <p class="text-xs text-secondary text-center mb-4 leading-snug">
+        In the app, holding to confirm now <strong>consumes one token on-chain</strong> to
+        create your contest entry, then resolves to the shared Entry Confirmed card.
+      </p>
+      <button @click="$store.dsModals.close()" class="btn btn-primary btn-lg w-full">Done</button>
+    </div>
+  </template>
+</div>

data/lib/studio/engine.rb

@@ -4,6 +4,8 @@ module Studio
       app.config.assets.precompile += %w[
         studio/sticky_table_header.css
         studio/sticky_table_header.js
+        studio/canvas_confetti.js
+        studio/studio_confetti.js
       ]
     end
 

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.20.0"
+  VERSION = "0.22.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.20.0
+  version: 0.22.0
 platform: ruby
 authors:
 - Alex McRitchie
@@ -170,7 +170,9 @@ files:
 - README.md
 - app/assets/images/resend-favicon.png
 - app/assets/images/ses-favicon.png
+- app/assets/javascripts/studio/canvas_confetti.js
 - app/assets/javascripts/studio/sticky_table_header.js
+- app/assets/javascripts/studio/studio_confetti.js
 - app/assets/stylesheets/studio/sticky_table_header.css
 - app/assets/tailwind/studio_engine/engine-motion.css
 - app/assets/tailwind/studio_engine/engine.css
@@ -243,8 +245,10 @@ files:
 - app/views/schema/index.html.erb
 - app/views/sessions/_sso_continue.html.erb
 - app/views/sessions/new.html.erb
+- app/views/studio/_age_verify_assets.html.erb
 - app/views/studio/_confirm_interstitial.html.erb
 - app/views/studio/_cropper_assets.html.erb
+- app/views/studio/_leveling_activity_assets.html.erb
 - app/views/studio/admin_models/_arenas_table.html.erb
 - app/views/studio/admin_models/_teams_table.html.erb
 - app/views/studio/admin_models/index.html.erb
@@ -263,12 +267,15 @@ files:
 - app/views/studio/modals/_image_upload.html.erb
 - app/views/studio/modals/_saving.html.erb
 - app/views/studio/modals/auth/_resend_footer.html.erb
+- app/views/studio/modals/blocks/_age_verify.html.erb
 - app/views/studio/modals/blocks/_card_header.html.erb
+- app/views/studio/modals/blocks/_change_username.html.erb
 - app/views/studio/modals/blocks/_cta_redirect.html.erb
 - app/views/studio/modals/blocks/_digit_reel.html.erb
 - app/views/studio/modals/blocks/_entry_confirmed.html.erb
 - app/views/studio/modals/blocks/_error_card.html.erb
 - app/views/studio/modals/blocks/_free_entry_earned.html.erb
+- app/views/studio/modals/blocks/_leveling_activity.html.erb
 - app/views/studio/modals/blocks/_onchain_success.html.erb
 - app/views/studio/modals/blocks/_processing_card.html.erb
 - app/views/studio/modals/blocks/_progress_countdown.html.erb
@@ -293,7 +300,9 @@ files:
 - app/views/style/_theme.html.erb
 - app/views/style/_tricks.html.erb
 - app/views/style/index.html.erb
+- app/views/style/modals/_age_verify.html.erb
 - app/views/style/modals/_auth.html.erb
+- app/views/style/modals/_entry_tokens.html.erb
 - app/views/style/modals/_onchain_tx.html.erb
 - app/views/style/modals/_wallet_connect.html.erb
 - app/views/style/modals/_wallet_deposit.html.erb