studio-engine 0.19.0 → 0.21.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f49b9ef9699144b785efbe7d4839261bba26035970a6c411f5cd54d0606ea97c
-  data.tar.gz: 3705abb5871fcfaa48b7c55613b0bc430b275c8bf9eb4c1625e43fcf14cfed32
+  metadata.gz: 14686260b35b4cd72975c3bf156020de61094144f09d8e71f3d6eeb045b5bcc3
+  data.tar.gz: 35b5f1bb5cb7f1236d21baa47c3e28d6d7f00420eb775da0719cd9874b29b4b8
 SHA512:
-  metadata.gz: 584cbbcdeeb388b1a6b0115a790fb6fa3d1c4ce4c69f42e57f7f0985edb4f6338578db04dcfeb5c60bde65aada69509db87c07151a52aab9f9348739a332cdca
-  data.tar.gz: dbbe745f30a632c21d528e336dd323a21224e71d39f97caf6fc43f68f958d1cb78da1a8660d735393847bdfeb67a79d15c1f12c199446f665c0267ff521c19fd
+  metadata.gz: 4a8b31f5f092a8998590c47877fb23631316fbaee2ab8bca2199038d27497775db342a5ba4f2b759bd09b2ae44256ad57b857cea5742731f84c59a8525a3b1e3
+  data.tar.gz: 506f56fbadf51b53c7a1f779678bab0ba1de8fc485493acb4d3ac8aa19ddfd29c4b103d789107d3f4258b381d709fdefdd00fc7ab81dd8cdfffbc59f8baffb88

data/CHANGELOG.md

@@ -2,6 +2,125 @@
 
 The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This project follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html) — `MAJOR.MINOR.PATCH`. Consumer Rails apps install the released RubyGems package with `gem "studio-engine", "~> 0.6"`; bumping the gem version and updating consumer lockfiles is a release.
 
+## 0.21.0 — 2026-07-27
+
+Phase 2 of the studio-engine modal convergence: homes the entry-time age-gate DOB
+modal as a policy-free engine primitive, and documents the app-specific entry-token
+purchase flow as a living-style-guide specimen.
+
+### Added
+
+- **Age-gate DOB modal — `studio/modals/blocks/_age_verify`.** The entry-time
+  date-of-birth gate (Month / Day / Year + a live "too young" hint + submit),
+  homed in the engine as the heavier sibling of the existing
+  `studio/modals/shared/_age_attestation` checkbox. **Run one or the other:** the
+  attestation is a signup-time "I confirm I'm of legal age" checkbox; this is an
+  entry-time DOB gate a server can recompute and stamp.
+
+  **The engine hardcodes NO legal policy** — the whole seam is app-supplied:
+  `min_age` (REQUIRED, with **no engine default** — 18 is itself a policy value),
+  `submit_url` (the app owns the authoritative recompute + DOB persistence),
+  `state` (an optional PASSIVE jurisdiction label — the modal never detects
+  geography and never offers an editable state field, so a spoofed client state
+  can't lower the bar), and `fine_print` (the app's per-jurisdiction legal copy;
+  the engine ships only a neutral, policy-free default). The per-state age table
+  that the app's policy encodes never enters the engine.
+
+- **`ageVerifyModal` factory — `studio/_age_verify_assets`.** The Alpine data for
+  the DOB modal, shipped at page level (a `<script>` cloned out of a modal-host
+  template never runs). A consumer renders it once in its layout, like the shared
+  alpine factories; mirrors how `studio/_cropper_assets` homes `cropPhotoModal`.
+  The factory carries zero policy — no age default, no state table; the client
+  age math is UX only, the server recompute stays authoritative.
+
+- **Living style guide — new "Eligibility & entry" group.** Adds two specimens to
+  the `/admin/style` Modals section:
+  - The **age-gate** specimen, opened with a clearly-labelled DEMO policy (21+ in
+    CA) that documents the app-supplied seam, gated by
+    `Studio.feature?(:age_gate)` — disabled-but-present-yet-openable when off,
+    like the web3 specimens.
+  - The **entry-tokens** specimen — the app-specific purchase flow
+    (picker → confirming → minted) documented by composing engine chrome
+    (`shell`, `card_header`, `progress_pill`) with illustrative demo packs. The
+    engine does NOT own the packs, pricing, rails, or the on-chain mint. The copy
+    reflects the real on-chain model: an entry token is a **prepaid entry credit
+    recorded on-chain** (not a wallet-held SPL token), **minted server-side** once
+    payment clears and **consumed** when the app's hold-to-confirm creates the
+    entry.
+
+### Capability gating
+
+- **`:age_gate`** — a new, independent capability flag gating the age-gate
+  specimen (and the intended consumer mount). Off by default; a consumer opts in
+  via `config.features`.
+
+### Unchanged
+
+- Backward compatible: every addition is additive/optional. Nothing existing
+  changes behaviour, and the lighter `_age_attestation` checkbox is untouched.
+
+## 0.20.0 — 2026-07-27
+
+Phase 1 of the studio-engine modal convergence: the engine now OWNS the wallet
+brand icons, homes the entry-confirmed celebration, and gates the web3/leveling
+enrichments behind the two independent capability flags.
+
+### Added
+
+- **Wallet brand icons ship inline from the engine** — new
+  `studio/modals/blocks/_wallet_brand_sprite` emits a hidden inline-SVG sprite
+  with the Phantom (purple ghost), Solflare (yellow S), and Backpack (red pack)
+  marks as `<symbol>`s. The Connect-wallet picker resolves a mark by name
+  (`brandIcon(name)` → `<use href="#se-wallet-…">`) and falls back to a letter
+  tile only for an unknown wallet. Every consumer inherits crisp brand icons
+  with **zero per-app asset files** — before this, the picker referenced
+  app-served PNGs (`/wallet-phantom.png`, …), so a fresh app that had not copied
+  those into its own `public/` showed 404 letter tiles.
+
+- **Entry-confirmed celebration — `studio/modals/blocks/_entry_confirmed`.** The
+  canonical "you're in" card, homed in the engine and composed via the
+  `_success_card` **yield slot**: `_success_card` owns the web3 spine (the `:lg`
+  check header, branded Solana tx link, drain CTA with auto-redirect, confetti),
+  and `_entry_confirmed` injects the leveling enrichment into its block. All
+  numbers are **app-supplied** via Alpine expressions (default `props.*`):
+  `txSignature`, `lobbyUrl`, `seedsEarned`, `seedsTotal`. Turf-specific copy is
+  parameterized, not baked in.
+
+- **Seeds progress bar — `studio/modals/blocks/_seeds_bar` + `_digit_reel`.**
+  Ported from Turf Monster and generalized: the animated 5-segment fill with a
+  4-phase level-up sequence (fill → level pop → drain → refill) and the
+  rolling-digit counter. The `--bar-progress` registered custom property,
+  `.seeds-bar-continuous`, `.seeds-reel-track`, and the `seedsShimmer` keyframe
+  ship in `engine-motion.css`. Motion is class-owned (timing via a
+  `--seeds-fill-dur` knob) so `prefers-reduced-motion` actually cancels the
+  bar-fill, shimmer, and reel.
+
+- **Free Entry Earned modal — `studio/modals/blocks/_free_entry_earned`.** The
+  standalone level-up reward modal, parameterized (store, icon, title, copy).
+
+- **Living style guide** gains an engine-owned wallet-icon picker, an
+  "Entry confirmed" (web3) specimen, and "Entry + seeds level-up" +
+  "Free Entry Earned" (leveling) specimens, so the gated variants demo correctly
+  (generic-success vs seeds vs free-entry).
+
+### Capability gating
+
+- **`:web3`** gates the generic entry-confirmed success (branded tx link +
+  heading + CTA), alongside the existing wallet / on-chain / deposit modals.
+- **`:leveling`** — independent of `:web3` — gates the seeds bar and the Free
+  Entry Earned reward. `_entry_confirmed` self-gates its block on
+  `Studio.feature?(:leveling)`, so a **web3-only app (leveling off) gets the
+  clean success card automatically** — no seeds, no free entry.
+
+### Unchanged
+
+- Backward compatible: every addition is additive/optional (new locals default
+  to today's behavior). The shared `_success_card`, `_card_header`,
+  `_cta_redirect`, and the other blocks are untouched in default behavior, so
+  existing McRitchie Studio and Turf Monster consumers render identically. No
+  engine view-primitive gains any signing / key material — signing stays an
+  app-supplied callback seam.
+
 ## 0.19.0 — 2026-07-27
 
 ### Added

data/app/assets/tailwind/studio_engine/engine-motion.css

@@ -27,6 +27,7 @@
     .level-up-pop         level-up pop + glow burst           (ported, TM)
     .nav-level-pop        nav level-up bounce                 (ported, TM)
     .badge-with-sheen     one-shot diagonal sheen wrapper     (ported, TM)
+    .seeds-bar-continuous 5-segment lockstep progress fill    (ported, TM)
 
   ─────────────────────────────────────────────────────────────────────────────
   OPT-IN — this layer does NOT auto-bundle.
@@ -927,6 +928,63 @@
   }
 }
 
+/* =============================================================================
+   SEEDS BAR — the continuous 5-segment progress fill behind the leveling
+   entry-confirmed celebration (studio/modals/blocks/_seeds_bar). Ported from
+   turf-monster. ONE registered custom property (--bar-progress) drives all five
+   segment clip-paths in lockstep off a SINGLE transition curve, instead of five
+   chained ones. .seeds-bar-continuous parks it at 0 and eases changes;
+   seedsShimmer is the light sweep that rides across the filled bar. The whole
+   family is capability-gated at the view layer by Studio.feature?(:leveling), so
+   an app with leveling off never renders a bar and these classes idle unused.
+   ========================================================================== */
+
+/* Registered custom property — makes --bar-progress interpolatable so a single
+   transition animates all five segment widths together (one ease, not five). */
+@property --bar-progress {
+  syntax: "<number>";
+  initial-value: 0;
+  inherits: true;
+}
+
+/* The motion PROPERTIES (transition / animation) live on these classes — NOT on
+   the view's inline style — precisely so the reduced-motion override below can
+   reach and cancel them. An inline `style="transition: …"` beats a class rule on
+   specificity, so a class-based @media override could never win against it; the
+   view keeps only the dynamic values inline (the Alpine-bound transform /
+   --bar-progress, and the fill duration knob --seeds-fill-dur). */
+.seeds-bar-continuous {
+  --bar-progress: 0;
+  transition: --bar-progress var(--seeds-fill-dur, 1.2s) cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* The rolling digit reel's slide — same fill duration as the bar (via the shared
+   --seeds-fill-dur knob) so the counter tracks the fill. Class-based so
+   reduced-motion can cancel it (the view binds only the transform inline). */
+.seeds-reel-track {
+  transition: transform var(--seeds-fill-dur, 1.2s) cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Light sweep across a filled segment. The five segments stagger a shared band
+   (via per-segment offsets in the view) so it reads as one continuous wave. */
+.seeds-shimmer {
+  animation: seedsShimmer 2.5s ease-in-out 0.4s 1 both;
+}
+
+@keyframes seedsShimmer {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(200%); }
+}
+
+/* Reduced-motion: drop the interpolation + shimmer; the bar, reel, and shimmer
+   all snap to their resting value. Reachable because the motion lives on the
+   classes above, not on inline styles. */
+@media (prefers-reduced-motion: reduce) {
+  .seeds-bar-continuous { transition: none; }
+  .seeds-reel-track { transition: none; }
+  .seeds-shimmer { animation: none; }
+}
+
 /* =============================================================================
    Reduced-motion: honor the user preference. Animated primitives settle into a
    sensible static resting state; the static primitives (fade-edge, text-gradient,

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

@@ -0,0 +1,120 @@
+<%#
+  ageVerifyModal factory — the Alpine data for the engine age-gate DOB modal
+  (studio/modals/blocks/_age_verify). Ships here, at PAGE level, on purpose: the
+  modal partial mounts inside a modal host's single-root template, and a script
+  cloned out of a template never runs. So a consumer renders THIS once in its
+  layout (like the shared alpine factories), and the modal partial anywhere below
+  just references window.ageVerifyModal. Mirrors how studio/_cropper_assets homes
+  the cropPhotoModal factory for the crop modal.
+
+  The factory holds ZERO legal policy — no age default, no state table. minAge is
+  whatever the app hands it (a required prop upstream); the client "too young"
+  hint is UX only, and the server recompute at submit_url stays authoritative.
+
+  opts: { minAge, state, url, store, demo }.
+    minAge  app-supplied minimum age (no engine fallback — 0 means unsupplied).
+    state   passive jurisdiction label (server-detected upstream; never editable).
+    url     app endpoint the DOB POSTs to (the app owns the authoritative check).
+    store   Alpine modal store name backing close() (default "modals").
+    demo    style-guide preview: resolve locally, skip the network POST.
+%>
+<script>
+  (function () {
+    if (window.ageVerifyModal) return;
+    window.ageVerifyModal = function (opts) {
+      opts = opts || {};
+      var now = new Date();
+      return {
+        month: "", day: "", year: "",
+        submitting: false,
+        error: "",
+        // No engine age default: 18 is itself a policy value. The app supplies it.
+        minAge: parseInt(opts.minAge, 10) || 0,
+        stateCode: opts.state || "",
+        url: opts.url || "",
+        store: opts.store || "modals",
+        demo: !!opts.demo,
+        months: [
+          { n: 1, label: "January" }, { n: 2, label: "February" }, { n: 3, label: "March" },
+          { n: 4, label: "April" }, { n: 5, label: "May" }, { n: 6, label: "June" },
+          { n: 7, label: "July" }, { n: 8, label: "August" }, { n: 9, label: "September" },
+          { n: 10, label: "October" }, { n: 11, label: "November" }, { n: 12, label: "December" }
+        ],
+        // Year range: 13 years ago (youngest plausible) back 100 years. This is a
+        // sane input range, not an age bar — the app's minAge decides eligibility.
+        years: (function () {
+          var ys = [], top = now.getFullYear() - 13, bottom = now.getFullYear() - 100;
+          for (var y = top; y >= bottom; y--) ys.push(y);
+          return ys;
+        })(),
+        // Days available for the chosen month/year (handles 28/29/30/31).
+        get dayOptions() {
+          var m = parseInt(this.month, 10), y = parseInt(this.year, 10);
+          var max = 31;
+          if (m) max = new Date(y || 2000, m, 0).getDate();
+          var ds = [];
+          for (var d = 1; d <= max; d++) ds.push(d);
+          return ds;
+        },
+        get complete() {
+          return !!(this.month && this.day && this.year);
+        },
+        get computedAge() {
+          if (!this.complete) return null;
+          var dob = new Date(parseInt(this.year, 10), parseInt(this.month, 10) - 1, parseInt(this.day, 10));
+          var age = now.getFullYear() - dob.getFullYear();
+          var hadBirthday = (now.getMonth() > dob.getMonth()) ||
+            (now.getMonth() === dob.getMonth() && now.getDate() >= dob.getDate());
+          if (!hadBirthday) age -= 1;
+          return age;
+        },
+        // Clamp an out-of-range day when the month changes (e.g. Feb after 31).
+        onMonthChange() {
+          if (this.day && parseInt(this.day, 10) > this.dayOptions.length) this.day = "";
+          this.error = "";
+        },
+        // Success path: flip a session flag if present, close via the app's store,
+        // and let the app resume its own flow (the entry gate listens for this).
+        _finish() {
+          try {
+            var sess = window.Alpine && Alpine.store && Alpine.store("session");
+            if (sess) sess.ageVerified = true;
+          } catch (e) {}
+          try { Alpine.store(this.store).close(); } catch (e) {}
+          window.dispatchEvent(new CustomEvent("age-verified"));
+        },
+        submit() {
+          if (!this.complete || this.submitting) return;
+          this.error = "";
+          // Client courtesy gate only — the server recompute is authoritative.
+          if (this.computedAge !== null && this.minAge && this.computedAge < this.minAge) return;
+          this.submitting = true;
+          var self = this;
+          if (this.demo) {
+            // Style-guide preview: no backend, resolve locally so the modal
+            // demonstrates the success handoff without an endpoint.
+            setTimeout(function () { self.submitting = false; self._finish(); }, 450);
+            return;
+          }
+          var csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content || "";
+          fetch(this.url, {
+            method: "POST",
+            headers: { "Content-Type": "application/json", "X-CSRF-Token": csrf, "Accept": "application/json" },
+            body: JSON.stringify({ year: this.year, month: this.month, day: this.day })
+          })
+            .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
+            .then(function (res) {
+              self.submitting = false;
+              if (res.ok && res.body && res.body.verified) { self._finish(); return; }
+              self.error = (res.body && res.body.error) ||
+                "We couldn't verify your age. Please check the date and try again.";
+            })
+            .catch(function () {
+              self.submitting = false;
+              self.error = "Network error — please try again.";
+            });
+        }
+      };
+    };
+  })();
+</script>

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

@@ -0,0 +1,106 @@
+<%#
+  Age-gate DOB modal — engine primitive. Collects a real date of birth
+  (Month / Day / Year), shows a live "too young" hint, and submits. Homed in the
+  engine as the heavier sibling of studio/modals/shared/_age_attestation (the
+  lighter one-checkbox legal attestation). RUN ONE OR THE OTHER, not both: the
+  attestation is a signup-time "I confirm I'm of legal age" checkbox; this is an
+  entry-time DOB gate that a server can recompute and stamp.
+
+  CRITICAL — the engine hardcodes NO legal policy. It renders the modal UI, the
+  DOB fields, and the submit; everything legal is app-supplied:
+
+    min_age     (Integer, REQUIRED) — the app's minimum age. There is NO engine
+                default (18 is itself a policy value); the app resolves it from
+                its own policy against its own server-detected jurisdiction.
+    submit_url  (String, REQUIRED)  — the app endpoint the DOB POSTs to. The
+                app owns the authoritative recompute + DOB persistence; the modal
+                only shows the response.
+    state       (String, optional)  — a PASSIVE jurisdiction label for the copy
+                (e.g. "CA"). Server-detected upstream; the modal never detects
+                geography and never offers an editable state field (a spoofable
+                client state must not be able to lower the bar). Blank => the
+                jurisdiction clause is dropped.
+    title       (String, optional)  — modal title. Default "Verify your age".
+    intro       (String, optional)  — the lead sentence after the age line.
+    fine_print  (String, optional)  — the app's legal / jurisdiction copy (e.g.
+                its per-state age table). The engine ships only a neutral,
+                policy-free default; the app passes its real copy here.
+    modal_store (String, optional)  — Alpine store backing close(). Default "modals".
+    demo        (Boolean, optional) — style-guide preview: resolve locally, no POST.
+
+  Requires window.ageVerifyModal — render studio/_age_verify_assets once at
+  layout level (the factory can't ship inside this template; a cloned script
+  never runs). Single root element (modal-host template mount rule).
+%>
+<%
+  min_age     = local_assigns.fetch(:min_age)
+  submit_url  = local_assigns.fetch(:submit_url)
+  state       = local_assigns[:state].to_s.strip
+  title       = local_assigns.fetch(:title, "Verify your age")
+  intro       = local_assigns.fetch(:intro, "Enter your date of birth to confirm you're eligible — we only ask once.")
+  fine_print  = local_assigns.fetch(:fine_print, "We use your date of birth only to confirm eligibility.")
+  modal_store = local_assigns.fetch(:modal_store, "modals")
+  demo        = local_assigns.fetch(:demo, false)
+%>
+<div x-data="ageVerifyModal({ minAge: <%= min_age.to_i %>, state: '<%= j state %>', url: '<%= j submit_url %>', store: '<%= j modal_store %>', demo: <%= demo ? 'true' : 'false' %> })">
+  <%= render layout: "studio/modals/blocks/shell", locals: { title: title, modal_store: modal_store } do %>
+    <p class="text-sm text-muted mb-4">
+      You must be <span class="text-heading font-semibold"><%= min_age %>+</span><%= state.present? ? " in #{state}" : "" %>.
+      <%= intro %>
+    </p>
+
+    <%# Month / Day / Year selectors %>
+    <div class="grid grid-cols-3 gap-2 mb-4">
+      <div>
+        <label class="label-upper block mb-1">Month</label>
+        <select x-model="month" @change="onMonthChange()" class="input-field !px-3 !py-2.5 text-sm appearance-none cursor-pointer">
+          <option value="" disabled>Month</option>
+          <template x-for="m in months" :key="m.n">
+            <option :value="m.n" x-text="m.label"></option>
+          </template>
+        </select>
+      </div>
+      <div>
+        <label class="label-upper block mb-1">Day</label>
+        <select x-model="day" @change="error = ''" class="input-field !px-3 !py-2.5 text-sm appearance-none cursor-pointer">
+          <option value="" disabled>Day</option>
+          <template x-for="d in dayOptions" :key="d">
+            <option :value="d" x-text="d"></option>
+          </template>
+        </select>
+      </div>
+      <div>
+        <label class="label-upper block mb-1">Year</label>
+        <select x-model="year" @change="onMonthChange()" class="input-field !px-3 !py-2.5 text-sm appearance-none cursor-pointer">
+          <option value="" disabled>Year</option>
+          <template x-for="y in years" :key="y">
+            <option :value="y" x-text="y"></option>
+          </template>
+        </select>
+      </div>
+    </div>
+
+    <%# Live too-young hint — shown once a full date is picked and it fails the
+        app-supplied bar, so the user sees the problem before submitting. %>
+    <template x-if="complete && computedAge !== null && minAge && computedAge < minAge">
+      <p class="text-red-400 text-sm mb-3" x-text="'You must be ' + minAge + '+' + (stateCode ? ' in ' + stateCode : '') + '.'"></p>
+    </template>
+
+    <%# Server error (invalid date, or the authoritative too-young check). %>
+    <template x-if="error">
+      <p class="text-red-400 text-sm mb-3" x-text="error"></p>
+    </template>
+
+    <button type="button" @click="submit()"
+            class="btn btn-primary btn-lg w-full"
+            :disabled="!complete || submitting || (computedAge !== null && minAge && computedAge < minAge)">
+      <span x-show="!submitting">Confirm &amp; Continue</span>
+      <span x-show="submitting" class="inline-flex items-center justify-center gap-2" style="display: none;">
+        <span class="cta-spinner" aria-hidden="true"></span>
+        Verifying…
+      </span>
+    </button>
+
+    <p class="text-[11px] text-muted text-center mt-3 leading-snug"><%= fine_print %></p>
+  <% end %>
+</div>

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

@@ -0,0 +1,41 @@
+<%#
+  Rolling-digit reel — a vertical stack of the values 0..max clipped to a single
+  cell, translated by -(value * cell_em)em so it slides as `value` changes. The
+  shared core behind rotating counters (a single 0–100 reel for the seeds bar,
+  per-unit em cells for countdowns). Ported from turf-monster; app-agnostic (only
+  Alpine expressions + locals — no app models or helpers).
+
+  Renders INSIDE a parent Alpine x-data scope: `value` and `transition` are Alpine
+  *expressions* evaluated there (e.g. "displaySeeds"; "'transform 1.9s ...'"). This
+  owns only the clip window + reel mechanics — colour, font, and any unit letter
+  live on the caller's wrapper.
+
+  Cells are em-sized, so the reel scales with the inherited font size; cell_em is
+  both the cell height (em) and the translate multiplier, so a value of N lands
+  cell N exactly under the window.
+
+  Locals:
+    value      (String)   — Alpine expr for the current value (drives translate)
+    max        (Integer)  — highest cell; renders cells 0..max
+    transition (String)   — Alpine expr for the CSS transition (or "'none'")
+    width      (String)   — CSS width of the clip window, e.g. "2ch" / "3.2ch"
+    cell_em    (Numeric?) — cell height in em + translate multiplier (default 1)
+    pad        (Bool?)    — zero-pad cell numbers to 2 digits (default false)
+    transition (String?)  — Alpine expr for the slide transition when track_class
+                            is NOT used (default "'none'"). Inline, so a caller can
+                            snap on rollover; NOT reachable by reduced-motion CSS.
+    track_class(String?)  — a CSS class that owns the slide transition. When set,
+                            the reel binds ONLY the transform inline and the class
+                            supplies the transition — so a reduced-motion @media
+                            rule can cancel it (the seeds bar uses this). %>
+<%
+  cell_em     = local_assigns.fetch(:cell_em, 1)
+  pad         = local_assigns.fetch(:pad, false)
+  track_class = local_assigns[:track_class]
+  transition  = local_assigns.fetch(:transition, "'none'")
+%>
+<span style="display:inline-block;overflow:hidden;height:<%= cell_em %>em;line-height:<%= cell_em %>em;width:<%= width %>;text-align:right;">
+  <span class="block<%= " #{track_class}" if track_class %>" :style="{ transform: 'translateY(-' + (<%= value %> * <%= cell_em %>) + 'em)'<%= track_class ? "" : ", transition: #{transition}" %> }">
+    <% (0..max).each do |n| %><span class="block" style="height:<%= cell_em %>em;line-height:<%= cell_em %>em;"><%= pad ? format("%02d", n) : n %></span><% end %>
+  </span>
+</span>

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

@@ -0,0 +1,86 @@
+<%#
+  Entry-confirmed celebration — the canonical "you're in" card for an on-chain
+  (or entry-token-funded) entry. Homed in the engine and composed via the
+  _success_card YIELD SLOT (its documented purpose): _success_card owns the web3
+  spine — the :lg check header, the branded Solana tx link, the drain CTA with
+  auto-redirect, and the confetti — and this partial injects the LEVELING
+  enrichment (the seeds bar + level-up reward) into its block.
+
+  Capability gating (the two flags are independent):
+    * The generic success (heading + branded tx link + CTA) is a web3 celebration;
+      a caller renders this only in a :web3 context.
+    * The seeds bar + "Free Entry Earned" reward render ONLY under
+      Studio.feature?(:leveling). A web3-only app (leveling OFF) gets the clean
+      success card — no seeds, no free entry — automatically, because this partial
+      self-gates the block on the flag.
+
+  All numbers are APP-SUPPLIED via Alpine expressions (defaulting to props.*): the
+  engine renders the card, the app feeds txSignature / lobbyUrl / seedsEarned /
+  seedsTotal. The reward copy + CTA label + seeds-per-level are parameters, so no
+  Turf-specific string is baked in.
+
+  Single root: the outer <div> is one element so a <template x-if> clones it whole.
+
+  Locals (all optional; sensible props.* / static defaults):
+    modal_store      — Alpine store name backing props/close. Default "modals".
+    title_key        — Alpine expr for the headline. Default "props.title || 'Good Luck'".
+    subtitle         — static sub-headline. Default "Entry Confirmed".
+    subtitle_key     — Alpine expr for the sub-headline (priority over subtitle).
+    tx_signature_key — Alpine expr for the Solana tx hash. Default "props.txSignature".
+    cluster_param    — explorer cluster query (e.g. "?cluster=devnet"). Default "".
+    lobby_url_key    — Alpine expr for the CTA href + auto-redirect. Default "props.lobbyUrl".
+    cta_label        — primary CTA text. Default "Continue".
+    seeds_earned_key — Alpine expr: seeds awarded this entry. Default "props.seedsEarned".
+    seeds_total_key  — Alpine expr: new seeds total. Default "props.seedsTotal".
+    seeds_per_level  — Integer seeds per level. Default 100.
+    free_entry_label — reward copy on a level-up. Default "Free Entry Earned 🎟️".
+%>
+<%
+  modal_store      = local_assigns.fetch(:modal_store, "modals")
+  title_key        = local_assigns.fetch(:title_key, "props.title || 'Good Luck'")
+  subtitle         = local_assigns.fetch(:subtitle, "Entry Confirmed")
+  subtitle_key     = local_assigns[:subtitle_key]
+  tx_signature_key = local_assigns.fetch(:tx_signature_key, "props.txSignature")
+  cluster_param    = local_assigns.fetch(:cluster_param, "")
+  lobby_url_key    = local_assigns.fetch(:lobby_url_key, "props.lobbyUrl")
+  cta_label        = local_assigns.fetch(:cta_label, "Continue")
+  seeds_earned_key = local_assigns.fetch(:seeds_earned_key, "props.seedsEarned")
+  seeds_total_key  = local_assigns.fetch(:seeds_total_key, "props.seedsTotal")
+  seeds_per_level  = local_assigns.fetch(:seeds_per_level, 100)
+  free_entry_label = local_assigns.fetch(:free_entry_label, "Free Entry Earned 🎟️")
+
+  sc_locals = {
+    large_title:           true,
+    icon_color:            "primary",
+    title_key:             title_key,
+    tx_signature_key:      tx_signature_key,
+    tx_solana:             true,
+    cta_label:             cta_label,
+    cta_href_key:          lobby_url_key,
+    cta_drain:             true,
+    auto_redirect_url_key: lobby_url_key,
+    confetti:              true
+  }
+  if subtitle_key
+    sc_locals[:message_key] = subtitle_key
+  else
+    sc_locals[:message] = subtitle
+  end
+%>
+<%# props getter + clusterParam live on the root scope so _success_card's nested
+    Alpine expressions (props.txSignature, props.lobbyUrl, clusterParam) resolve up
+    the scope chain. clusterParam feeds _success_card's branded tx-link URL. %>
+<div x-data="{ get props() { var c = $store.<%= modal_store %>.current(); return (c && c.props) || {}; }, clusterParam: '<%= cluster_param %>' }">
+  <%= render "studio/modals/blocks/success_card", sc_locals do %>
+    <% if Studio.feature?(:leveling) %>
+      <%# Leveling enrichment — mounts only when this entry awarded seeds. %>
+      <template x-if="(<%= seeds_earned_key %>) > 0">
+        <%= render "studio/modals/blocks/seeds_bar",
+              seeds_earned_key: seeds_earned_key,
+              seeds_total_key:  seeds_total_key,
+              seeds_per_level:  seeds_per_level,
+              free_entry_label: free_entry_label %>
+      </template>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,46 @@
+<%#
+  Free-entry-earned — the standalone level-up celebration modal. Pops when a user
+  crosses a seed level (the reward for leveling). Ported from turf-monster and
+  generalized: the store, icon, title, and reward copy are all parameters, so no
+  app-specific string is baked in.
+
+  Capability: a :leveling primitive — a caller opens it only under
+  Studio.feature?(:leveling).
+
+  Single root: the outer <div> is one element so a <template x-if> clones it whole.
+
+  Locals (all optional):
+    modal_store  — Alpine store name backing props/close. Default "modals".
+    icon_emoji   — celebration glyph. Default "🎉".
+    title_key    — Alpine expr for the headline. Default shows "Level N" from
+                   props.level, else "Free Entry Earned".
+    subtitle     — static reward copy. Default a generic level-up line.
+    subtitle_key — Alpine expr for the reward copy (priority over subtitle).
+    close_label  — dismiss link text. Default "Close".
+%>
+<%
+  modal_store  = local_assigns.fetch(:modal_store, "modals")
+  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.")
+  subtitle_key = local_assigns[:subtitle_key]
+  close_label  = local_assigns.fetch(:close_label, "Close")
+
+  ch_locals = { size: :lg, icon_emoji: icon_emoji, title_key: title_key }
+  if subtitle_key
+    ch_locals[:subtitle_key] = subtitle_key
+  else
+    ch_locals[:subtitle] = subtitle
+  end
+%>
+<%# Confetti on mount — prefer a free-entry-specific burst if the host defined one,
+    else the shared success confetti; both are optional (guarded). %>
+<div x-data="{ get props() { var c = $store.<%= modal_store %>.current(); return (c && c.props) || {}; } }"
+     x-init="setTimeout(function () { try { (window.fireFreeEntryConfetti || window.fireSuccessConfetti || function(){})(); } catch (e) {} }, 120)">
+  <%= render "studio/modals/blocks/card_header", ch_locals %>
+
+  <button type="button" @click="$store.<%= modal_store %>.close()"
+          class="block mx-auto mt-4 text-sm text-secondary hover:text-heading transition">
+    <%= close_label %>
+  </button>
+</div>