studio-engine 0.19.0 → 0.20.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f49b9ef9699144b785efbe7d4839261bba26035970a6c411f5cd54d0606ea97c
-  data.tar.gz: 3705abb5871fcfaa48b7c55613b0bc430b275c8bf9eb4c1625e43fcf14cfed32
+  metadata.gz: e3b84a5d11a22ad89cdbf077ba91c6d35374ba8a956c2fdc1207eb7033ec15c5
+  data.tar.gz: 510f09d35fb5dd3562c9435c1df1f5cf8001b9a34dd12678eb32822f91ded766
 SHA512:
-  metadata.gz: 584cbbcdeeb388b1a6b0115a790fb6fa3d1c4ce4c69f42e57f7f0985edb4f6338578db04dcfeb5c60bde65aada69509db87c07151a52aab9f9348739a332cdca
-  data.tar.gz: dbbe745f30a632c21d528e336dd323a21224e71d39f97caf6fc43f68f958d1cb78da1a8660d735393847bdfeb67a79d15c1f12c199446f665c0267ff521c19fd
+  metadata.gz: 4f6da2882ad34a600e5855c659ba525bda3d191737389d1b8348e0eca8eb01b1da2a48d7df55dec5b5072879acf6ba236439c1ac99fac2c82216ac68b8df6af3
+  data.tar.gz: dbe6979e76badd522119308b4c459b1ebd5a246fa549364b2b78d7ca86e8b828c93523899aaa0813f874d1bb95be37e4c6cd32dab492c60988dbae84051d9ceb

data/CHANGELOG.md

@@ -2,6 +2,68 @@
 
 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.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/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>

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

@@ -0,0 +1,125 @@
+<%#
+  Seeds progress bar — the leveling celebration's animated 5-segment fill + rolling
+  digit reel, with a 4-phase level-up sequence (fill to full → level pop → drain to
+  empty → refill toward the next level). Ported from turf-monster's entry-confirmed
+  inline bar and generalized: seed counts / level are APP-SUPPLIED (Alpine
+  expressions), and Turf-specific copy is a parameter. The engine renders the bar;
+  the app feeds the numbers.
+
+  Capability: this is a :leveling primitive. Callers render it only under
+  Studio.feature?(:leveling) (the engine's _entry_confirmed does exactly that), so
+  a web3-only app (leveling off) never mounts it.
+
+  Single root: the outer <div> is one element so a <template x-if> clones it whole.
+
+  Locals:
+    seeds_earned_key — Alpine expr: seeds awarded this event (drives whether a
+                       level was crossed). Required.
+    seeds_total_key  — Alpine expr: the user's new total seeds. Required.
+    seeds_per_level  — Integer: seeds per level (default 100). The bar fills to
+                       (total % per_level) / per_level; a crossed multiple triggers
+                       the level-up flourish.
+    free_entry_label — String shown when a level is crossed (default
+                       "Free Entry Earned 🎟️"). Parameterized so the reward copy
+                       is not hardcoded to any one app.
+
+  The co-located x-data owns its own _timers array; destroy() clears every pending
+  setTimeout so a mid-celebration modal close leaks nothing.
+%>
+<%
+  seeds_earned_key = local_assigns.fetch(:seeds_earned_key)
+  seeds_total_key  = local_assigns.fetch(:seeds_total_key)
+  seeds_per_level  = local_assigns.fetch(:seeds_per_level, 100)
+  free_entry_label = local_assigns.fetch(:free_entry_label, "Free Entry Earned 🎟️")
+%>
+<div x-data="{
+       displaySeeds: 0,
+       displayLevel: 1,
+       levelingUp: false,
+       showFreeEntryBadge: false,
+       _timers: [],
+       init() {
+         var self = this;
+         var perLevel = <%= seeds_per_level %>;
+         var total = (<%= seeds_total_key %>) || 0;
+         var earned = (<%= seeds_earned_key %>) || 0;
+         var oldSeeds = Math.max(0, total - earned);
+         var oldLevel = Math.floor(oldSeeds / perLevel) + 1;
+         var newLevel = Math.floor(total / perLevel) + 1;
+         var oldToward = oldSeeds % perLevel;
+         var newToward = total % perLevel;
+         self.displaySeeds = oldToward;
+         self.displayLevel = oldLevel;
+         var schedule = function (fn, ms) { self._timers.push(setTimeout(fn, ms)); };
+         schedule(function () {
+           if (newLevel > oldLevel) {
+             self.levelingUp = true;
+             self.displaySeeds = perLevel;
+             schedule(function () {
+               self.displayLevel = newLevel;
+               self.showFreeEntryBadge = true;
+             }, 1900);
+             schedule(function () { self.displaySeeds = 0; }, 3400);
+             schedule(function () {
+               self.displaySeeds = newToward;
+               self.levelingUp = false;
+             }, 3600);
+           } else {
+             self.displaySeeds = newToward;
+           }
+         }, 2000);
+       },
+       destroy() {
+         this._timers.forEach(clearTimeout);
+         this._timers = [];
+       }
+     }"
+     class="mx-auto mb-1" style="max-width: 100%;">
+
+  <%# The bar (hidden once the level-up swaps to the reward line). Single root. %>
+  <template x-if="!showFreeEntryBadge">
+    <%# --seeds-fill-dur cascades to the bar (.seeds-bar-continuous) AND the reel
+        (.seeds-reel-track) so both share the exact 1.9s fill; the transition
+        PROPERTY itself lives on the classes so reduced-motion can cancel it. %>
+    <div class="relative" style="--seeds-fill-dur: 1.9s;">
+      <div class="seeds-bar-continuous flex gap-1.5"
+           style="height: 22px;"
+           :style="{ '--bar-progress': (displaySeeds / <%= seeds_per_level %> * 100) }">
+        <template x-for="i in 5" :key="i">
+          <div class="flex-1 relative overflow-hidden rounded-md"
+               style="background: rgb(var(--color-primary-500-rgb) / 0.06); border: 1.5px solid rgb(var(--color-primary-500-rgb) / 0.2);">
+            <div class="absolute inset-0 pointer-events-none"
+                 :style="{
+                   backgroundPosition: ((i - 1) * 25) + '% 0',
+                   clipPath: 'inset(0 calc(100% - clamp(0%, calc((var(--bar-progress) - ' + ((i - 1) * 20) + ') * 5%), 100%)) 0 0)'
+                 }"
+                 style="background-image: linear-gradient(90deg, color-mix(in srgb, var(--color-cta) 30%, transparent), color-mix(in srgb, var(--color-cta) 60%, transparent)); background-size: 500% 100%; background-repeat: no-repeat;"></div>
+            <div class="seeds-shimmer absolute top-0 bottom-0 pointer-events-none"
+                 :style="{ left: -(i - 1) * 100 + '%', width: '500%' }"
+                 style="background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);"></div>
+          </div>
+        </template>
+      </div>
+      <div class="absolute inset-y-0 right-2 flex items-center pointer-events-none">
+        <span class="inline-flex items-baseline gap-1 font-mono font-bold text-sm" style="color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.7);">
+          <%# track_class hands the reel a class-based transition (reduced-motion
+              reachable) instead of an inline one; duration via --seeds-fill-dur. %>
+          <%= render "studio/modals/blocks/digit_reel",
+                value: "displaySeeds", max: seeds_per_level, width: "3.2ch", cell_em: 1.25,
+                track_class: "seeds-reel-track" %>
+          <span class="text-[10px] font-normal opacity-90">seeds</span>
+        </span>
+      </div>
+    </div>
+  </template>
+
+  <%# Level-up reward — a plain text line sized to the same 22px height as the bar
+      it replaces, so the card does not shift when the bar swaps to this. Single
+      root. Copy is caller-parameterized (free_entry_label). %>
+  <template x-if="showFreeEntryBadge">
+    <div class="level-up-pop flex items-center justify-center w-full font-bold text-sm"
+         style="height: 22px; color: var(--color-cta);">
+      <span><%= free_entry_label %></span>
+    </div>
+  </template>
+</div>

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

@@ -0,0 +1,51 @@
+<%#
+  Wallet brand-icon sprite — inline SVG marks for the wallets the Connect-Wallet
+  picker knows about (Phantom, Solflare, Backpack), OWNED BY THE ENGINE so 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 (P/S/B).
+
+  Render this ONCE inside a picker's single root, then reference a mark by name:
+
+    <svg class="w-9 h-9"><use href="#se-wallet-phantom"></use></svg>
+
+  or, in an Alpine x-for over detected wallets, resolve the id from the name:
+
+    <use :href="'#se-wallet-' + brandIcon(w.name)"></use>   (brandIcon() lowercases
+    the name and returns it only for a known brand, else null → letter fallback).
+
+  The sprite is visually hidden (zero-box, absolute) and aria-hidden; only the
+  <use> references paint. Each <symbol> carries its own viewBox + brand fills, so
+  a <use> scales into whatever box the outer <svg> sizes. Marks are geometric
+  interpretations of the official brand icons (Phantom purple ghost, Solflare
+  yellow S, Backpack red pack); the letter tile stays the fallback for any wallet
+  not in this set.
+%>
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"
+     style="position:absolute;width:0;height:0;overflow:hidden" data-wallet-brand-sprite>
+  <%# Phantom — light-purple tile, cream ghost with two purple eye holes (the
+      official ghost path; fill-rule evenodd cuts the eyes so the tile shows). %>
+  <symbol id="se-wallet-phantom" viewBox="0 0 128 128">
+    <rect width="128" height="128" rx="28" fill="#AB9FF2"/>
+    <path fill="#FFFDF8" fill-rule="evenodd" d="M110.584 64.9142H99.142C99.142 41.7651 80.173 23 56.7724 23C33.6612 23 14.8716 41.3057 14.4118 64.0583C13.936 87.577 36.2456 108 60.0197 108H63.0263C83.9754 108 112.069 91.6259 116.459 71.7107C117.27 68.033 114.351 64.9142 110.584 64.9142ZM39.7689 65.9482C39.7689 69.0453 37.2384 71.5758 34.1413 71.5758C31.0442 71.5758 28.5137 69.0453 28.5137 65.9482V56.8554C28.5137 53.7583 31.0442 51.2278 34.1413 51.2278C37.2384 51.2278 39.7689 53.7583 39.7689 56.8554V65.9482ZM59.3312 65.9482C59.3312 69.0453 56.8007 71.5758 53.7036 71.5758C50.6065 71.5758 48.076 69.0453 48.076 65.9482V56.8554C48.076 53.7583 50.6065 51.2278 53.7036 51.2278C56.8007 51.2278 59.3312 53.7583 59.3312 56.8554V65.9482Z"/>
+  </symbol>
+
+  <%# Solflare — bright-yellow tile, bold black S crossed by a diagonal slash. %>
+  <symbol id="se-wallet-solflare" viewBox="0 0 100 100">
+    <rect width="100" height="100" rx="24" fill="#FFEC1F"/>
+    <path d="M67 37c-3-7-11-11-20-11-10 0-17 5-17 13 0 7 5 11 16 14l8 2c9 2 13 5 13 11 0 8-8 13-18 13-9 0-16-3-19-10"
+          fill="none" stroke="#131313" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M27 76 73 24" fill="none" stroke="#131313" stroke-width="8" stroke-linecap="round"/>
+  </symbol>
+
+  <%# Backpack — red tile, white pack: handle arch, rounded body with a red buckle
+      ring, and a rounded lower pocket band. %>
+  <symbol id="se-wallet-backpack" viewBox="0 0 100 100">
+    <rect width="100" height="100" rx="24" fill="#E33E3F"/>
+    <path d="M39 32v-3a11 11 0 0 1 22 0v3" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round"/>
+    <rect x="23" y="31" width="54" height="31" rx="15" fill="#fff"/>
+    <circle cx="50" cy="46" r="8" fill="#E33E3F"/>
+    <circle cx="50" cy="46" r="3.5" fill="#fff"/>
+    <rect x="23" y="66" width="54" height="13" rx="6.5" fill="#fff"/>
+  </symbol>
+</svg>

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

@@ -15,10 +15,12 @@
      and registers all specimen content itself.
 
      Groups: Auth (the sign-in step machine), Profile (crop / upload, opened
-     through studio/cropper_assets), Web3 (wallet-connect / on-chain-tx / deposit,
+     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),
      System and status (the reusable card blocks), Templates (the copy-from
-     archetypes), and Rewards (level-up, gated by :leveling).
+     archetypes), and Rewards (level-up + the entry-confirmed seeds bar + the
+     Free Entry Earned reward, gated by :leveling).
 
      The modal motion (modal-card-* / modal-backdrop-* keyframes + studio-modal-
      drain + body.modal-open) ships in engine-motion.css, so a consumer that
@@ -273,6 +275,15 @@
         <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). %>
+        <template x-if="$store.dsModals.current().id === 'entry-confirmed'">
+          <div><%= render "studio/modals/blocks/entry_confirmed",
+                    modal_store: "dsModals",
+                    cta_label: "Contest Lobby ⚔️",
+                    free_entry_label: "Free Entry Earned 🎟️" %></div>
+        </template>
 
         <%# --- System and status (reusable card blocks) --- %>
         <template x-if="$store.dsModals.current().id === 'ds-processing'">
@@ -332,6 +343,12 @@
             </div>
           <% end %></div>
         </template>
+        <%# free-entry-earned — the standalone level-up reward modal (:leveling). %>
+        <template x-if="$store.dsModals.current().id === 'free-entry-earned'">
+          <div><%= render "studio/modals/blocks/free_entry_earned",
+                    modal_store: "dsModals",
+                    subtitle: "You leveled up! A Free Entry lands in your account soon. Keep leveling for more." %></div>
+        </template>
 
       </div>
     </div>
@@ -494,6 +511,10 @@
         <code class="font-mono text-2xs">Studio.feature?(:web3)</code>. Web3 is
         <strong><%= web3_on ? "on" : "off" %></strong> here, so these render
         <%= web3_on ? "live." : "greyed and badged — but STILL openable as a preview." %>
+        The Connect-wallet picker ships its <strong>Phantom / Solflare / Backpack
+        brand marks inline from the engine</strong>
+        (<code class="font-mono text-2xs">studio/modals/blocks/_wallet_brand_sprite</code>),
+        so every app inherits them with no per-app icon files.
       </p>
     </div>
     <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -555,6 +576,25 @@
           <span class="block h-5 w-full rounded border" style="border-color: var(--color-border-strong)"></span>
         </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
+          Rewards below (gated by :leveling). %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Entry confirmed",
+            reference: %(the Web3 "Entry confirmed" celebration (studio/modals/blocks/_entry_confirmed, composed via _success_card's yield — branded tx link + heading + drain CTA; the seeds bar is gated off by :leveling and stays hidden here) — open with $store.dsModals.open('entry-confirmed', { txSignature: '…', lobbyUrl: null, seedsEarned: 0 })),
+            open_expr: "$store.dsModals.open('entry-confirmed', { txSignature: '5xTrDemoSignature1234567890abcXYZ', lobbyUrl: null, seedsEarned: 0, seedsTotal: 40 })",
+            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="mx-auto w-7 h-7 rounded-full flex items-center justify-center" style="background: color-mix(in srgb, var(--color-primary) 15%, transparent)">
+            <svg class="w-4 h-4" style="color: var(--color-primary)" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
+          </div>
+          <span class="block h-2 w-20 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+          <span class="block h-1.5 w-14 mx-auto rounded" style="background: var(--color-text); opacity: .12"></span>
+          <span class="block h-4 w-full rounded" style="background: var(--color-cta)"></span>
+        </div>
+      <% end %>
     </div>
   </section>
 
@@ -668,9 +708,16 @@
         <% end %>
       </div>
       <p class="text-muted text-sm">
-        The level-up celebration, gated by <code class="font-mono text-2xs">Studio.feature?(:leveling)</code>.
-        Leveling is <strong><%= leveling_on ? "on" : "off" %></strong> here, so this renders
+        The seeds bar + level-up celebrations, gated by
+        <code class="font-mono text-2xs">Studio.feature?(:leveling)</code> — an
+        app-level setting <strong>independent of :web3</strong> (some apps have
+        Solana but no leveling). Leveling is <strong><%= leveling_on ? "on" : "off" %></strong>
+        here, so these render
         <%= leveling_on ? "live." : "greyed and badged — but STILL openable as a preview." %>
+        The seed counts, level, and free entry are <strong>app-supplied props</strong>
+        (<code class="font-mono text-2xs">seedsEarned</code>,
+        <code class="font-mono text-2xs">seedsTotal</code>, …) — the engine renders
+        the bar, the app feeds the numbers.
       </p>
     </div>
     <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -685,6 +732,43 @@
           <span class="block h-4 w-full rounded" style="background: var(--color-cta)"></span>
         </div>
       <% end %>
+
+      <%# Entry + seeds — the SAME _entry_confirmed card, now with seedsEarned
+          crossing a level so the :leveling seeds bar mounts in the _success_card
+          yield and plays the 4-phase level-up (fill → pop → drain → refill), then
+          swaps to the Free Entry Earned reward line. %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Entry + seeds level-up",
+            reference: %(the Rewards "Entry + seeds" celebration (studio/modals/blocks/_entry_confirmed — the :leveling seeds bar + Free Entry Earned reward injected into _success_card's yield) — open with $store.dsModals.open('entry-confirmed', { txSignature: '…', lobbyUrl: null, seedsEarned: 30, seedsTotal: 100 })),
+            open_expr: "$store.dsModals.open('entry-confirmed', { txSignature: '5xTrDemoSignature1234567890abcXYZ', lobbyUrl: null, seedsEarned: 30, seedsTotal: 100 })",
+            disabled: !leveling_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="mx-auto w-7 h-7 rounded-full flex items-center justify-center" style="background: color-mix(in srgb, var(--color-primary) 15%, transparent)">
+            <svg class="w-4 h-4" style="color: var(--color-primary)" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
+          </div>
+          <div class="flex gap-1">
+            <span class="flex-1 h-2.5 rounded" style="background: var(--color-cta)"></span>
+            <span class="flex-1 h-2.5 rounded" style="background: var(--color-cta); opacity:.6"></span>
+            <span class="flex-1 h-2.5 rounded" style="background: var(--color-cta); opacity:.25"></span>
+            <span class="flex-1 h-2.5 rounded" style="background: var(--color-text); opacity:.12"></span>
+            <span class="flex-1 h-2.5 rounded" style="background: var(--color-text); opacity:.12"></span>
+          </div>
+          <span class="block h-4 w-full rounded" style="background: var(--color-cta)"></span>
+        </div>
+      <% end %>
+
+      <%# Free Entry Earned — the standalone level-up reward modal (:leveling). %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Free Entry Earned",
+            reference: %(the Rewards "Free Entry Earned" level-up modal (studio/modals/blocks/_free_entry_earned) — open with $store.dsModals.open('free-entry-earned', { level: 3 })),
+            open_expr: "$store.dsModals.open('free-entry-earned', { level: 3 })",
+            disabled: !leveling_on, openable: true } do %>
+        <div class="pointer-events-none w-40 rounded-lg bg-surface border border-subtle shadow p-4 text-center space-y-2">
+          <div class="text-2xl leading-none">🎉</div>
+          <span class="block h-2 w-20 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+          <span class="block h-1.5 w-24 mx-auto rounded" style="background: var(--color-text); opacity: .12"></span>
+        </div>
+      <% end %>
     </div>
   </section>
 </section>

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

@@ -9,15 +9,19 @@
   wallet list; pick() runs a brief connecting state then closes (no real
   connect). Opened via open('wallet-connect', {...}) or swap()ed to from auth.
 
+  Brand icons ship inline from the engine (studio/modals/blocks/_wallet_brand_sprite,
+  rendered once below): brandIcon(name) resolves a known wallet to its <symbol>
+  id, and an unknown wallet falls back to a letter tile. No per-app PNG files.
+
   Single root: the outer <div> is the host's required root.
 %>
 <div x-data="{
        get props() { var c = Alpine.store('dsModals').current(); return (c && c.props) || {}; },
        wallets: [],
        installs: [
-         { name: 'Phantom',  url: 'https://phantom.app/download',  icon: '/wallet-phantom.png' },
-         { name: 'Solflare', url: 'https://solflare.com/download', icon: '/wallet-solflare.png' },
-         { name: 'Backpack', url: 'https://backpack.app/downloads', icon: '/wallet-backpack.png' }
+         { name: 'Phantom',  url: 'https://phantom.app/download' },
+         { name: 'Solflare', url: 'https://solflare.com/download' },
+         { name: 'Backpack', url: 'https://backpack.app/downloads' }
        ],
        connecting: false,
        picking: '',
@@ -38,6 +42,10 @@
        refresh() {
          this.wallets = (window.walletProvider && window.walletProvider.available && window.walletProvider.available()) || [];
        },
+       brandIcon(name) {
+         var n = ('' + name).toLowerCase();
+         return ['phantom', 'solflare', 'backpack'].indexOf(n) >= 0 ? n : null;
+       },
        get isMobile() { return !!(window.walletProvider && window.walletProvider.isMobile && window.walletProvider.isMobile()); },
        hasWallet(name) {
          var n = ('' + name).toLowerCase();
@@ -71,6 +79,9 @@
      }"
      class="relative">
 
+  <%# Engine-owned brand-icon sprite — one copy; the <use> refs below paint it. %>
+  <%= render "studio/modals/blocks/wallet_brand_sprite" %>
+
   <div class="relative mb-4">
     <h3 class="text-heading font-bold text-lg text-center pt-1">Connect Wallet</h3>
     <button @click="$store.dsModals.close()"
@@ -89,7 +100,14 @@
     <template x-for="w in wallets" :key="w.name">
       <button type="button" @click="pick(w.name)" :disabled="connecting"
               class="w-full flex items-center gap-3 p-3 rounded-xl bg-surface-alt border border-strong hover:bg-surface transition text-left disabled:opacity-60 disabled:cursor-wait">
-        <span class="w-9 h-9 rounded-lg bg-inset flex items-center justify-center text-sm font-bold text-heading" x-text="w.name.slice(0,1)"></span>
+        <template x-if="brandIcon(w.name)">
+          <span class="w-9 h-9 rounded-lg overflow-hidden flex items-center justify-center shrink-0">
+            <svg class="w-9 h-9" aria-hidden="true"><use :href="'#se-wallet-' + brandIcon(w.name)"></use></svg>
+          </span>
+        </template>
+        <template x-if="!brandIcon(w.name)">
+          <span class="w-9 h-9 rounded-lg bg-inset flex items-center justify-center text-sm font-bold text-heading shrink-0" x-text="w.name.slice(0,1)"></span>
+        </template>
         <span class="font-semibold text-heading" x-text="w.name"></span>
         <span class="ml-auto flex items-center gap-2">
           <span x-show="picking === w.name" class="inline-flex items-center gap-1.5 text-xs text-secondary"><span class="spinner" aria-hidden="true"></span>Connecting…</span>
@@ -105,7 +123,14 @@
     <template x-for="i in missingInstalls" :key="i.name">
       <a :href="i.url" target="_blank" rel="noopener noreferrer"
          class="w-full flex items-center gap-3 p-3 rounded-xl bg-surface-alt border border-strong hover:bg-surface transition no-underline">
-        <span class="w-9 h-9 rounded-lg bg-inset flex items-center justify-center text-sm font-bold text-muted" x-text="i.name.slice(0,1)"></span>
+        <template x-if="brandIcon(i.name)">
+          <span class="w-9 h-9 rounded-lg overflow-hidden flex items-center justify-center shrink-0">
+            <svg class="w-9 h-9" aria-hidden="true"><use :href="'#se-wallet-' + brandIcon(i.name)"></use></svg>
+          </span>
+        </template>
+        <template x-if="!brandIcon(i.name)">
+          <span class="w-9 h-9 rounded-lg bg-inset flex items-center justify-center text-sm font-bold text-muted shrink-0" x-text="i.name.slice(0,1)"></span>
+        </template>
         <span class="font-semibold text-heading" x-text="i.name"></span>
         <span class="ml-auto flex items-center gap-2">
           <span class="text-xs text-muted uppercase tracking-wide">Install</span>
@@ -119,7 +144,9 @@
     <%# Mobile (no extension) — deep-link into the Phantom app. %>
     <button x-show="isMobile" type="button" @click="deepLink()"
             class="w-full flex items-center gap-3 p-3 rounded-xl bg-surface-alt border border-strong hover:bg-surface transition text-left">
-      <span class="w-9 h-9 rounded-lg bg-inset flex items-center justify-center text-sm font-bold text-heading">P</span>
+      <span class="w-9 h-9 rounded-lg overflow-hidden flex items-center justify-center shrink-0">
+        <svg class="w-9 h-9" aria-hidden="true"><use href="#se-wallet-phantom"></use></svg>
+      </span>
       <span class="font-semibold text-heading">Open in Phantom app</span>
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="ml-auto w-4 h-4 text-muted">
         <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />

data/lib/studio/version.rb

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

metadata

@@ -1,13 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.19.0
+  version: 0.20.0
 platform: ruby
 authors:
 - Alex McRitchie
+autorequire:
 bindir: bin
 cert_chain: []
-date: 1980-01-02 00:00:00.000000000 Z
+date: 2026-07-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -264,14 +265,19 @@ files:
 - app/views/studio/modals/auth/_resend_footer.html.erb
 - app/views/studio/modals/blocks/_card_header.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/_onchain_success.html.erb
 - app/views/studio/modals/blocks/_processing_card.html.erb
 - app/views/studio/modals/blocks/_progress_countdown.html.erb
 - app/views/studio/modals/blocks/_progress_pill.html.erb
+- app/views/studio/modals/blocks/_seeds_bar.html.erb
 - app/views/studio/modals/blocks/_shell.html.erb
 - app/views/studio/modals/blocks/_solana_tx_link.html.erb
 - app/views/studio/modals/blocks/_success_card.html.erb
+- app/views/studio/modals/blocks/_wallet_brand_sprite.html.erb
 - app/views/studio/modals/shared/_age_attestation.html.erb
 - app/views/studio/modals/shared/_email_field.html.erb
 - app/views/studio/modals/templates/_action.html.erb
@@ -326,6 +332,7 @@ metadata:
   source_code_uri: https://github.com/amcritchie/studio-engine/tree/main
   bug_tracker_uri: https://github.com/amcritchie/studio-engine/issues
   changelog_uri: https://github.com/amcritchie/studio-engine/blob/main/CHANGELOG.md
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -340,7 +347,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.9
+rubygems_version: 3.5.22
+signing_key:
 specification_version: 4
 summary: Shared Rails engine providing auth, SSO, error logging, theming, and S3-backed
   image caching