RubyGems - studio-engine - Versions diffs - 0.26.1 → 0.28.0 - Mend

studio-engine 0.26.1 → 0.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

checksums.yaml +4 -4
data/CHANGELOG.md +49 -0
data/app/views/studio/_board_assets.html.erb +54 -1
data/app/views/studio/board/_board.html.erb +28 -2
data/app/views/studio/board/_column.html.erb +37 -3
data/app/views/studio/modals/_host.html.erb +8 -18
data/app/views/studio/modals/_load_convention.html.erb +55 -0
data/app/views/studio/modals/_saving.html.erb +10 -3
data/app/views/studio/modals/blocks/_processing_card.html.erb +20 -6
data/app/views/style/_modals.html.erb +201 -88
data/app/views/style/_tasks.html.erb +67 -2
data/app/views/style/modals/_entry_tokens.html.erb +97 -32
data/app/views/style/modals/_onchain_tx.html.erb +24 -0
data/app/views/style/modals/_wallet_connect.html.erb +12 -1
data/lib/studio/version.rb +1 -1
metadata +2 -1

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d1e665b17a360de65ba411842a7c8368e8077160cf34e4a218ebbe1857d0988
-  data.tar.gz: 1b9ebc66583eeacb8c65d97f4ec1eb90b0451829cf7ed263d0a5cd8895b96b88
+  metadata.gz: 79aac649d7403deadeaa9f055762802f111b7082865398432753dfdd93b998e0
+  data.tar.gz: 80307a1b7077886c9853ad5a6ab7f2dc79a9d7bf6d4db7aa883f5eb6162a77bb
 SHA512:
-  metadata.gz: 61d7d9f100144b0683bfa27a12a86ad4b0cac8cc3280c067c9f016a99edf98b0c28f73cf38e2f212d26183336f519d03f633970b15381ebcf165ba9ee143997b
-  data.tar.gz: 56b58a13c533dd060fd5d8313987735123e6ed1bd1f148d15ef51ea7306815f365dabf900770f0b8de84fc81b6588bf80e61545ba5a8440b49243a3db7883f52
+  metadata.gz: 8fb8f96918656e88d2d8cc3379716d544afd461bdaa19205c480e273ab71199c25cede8c7b729f9b6cf3400388a7976ac34f4135d96fd60b3e8e4083969f360e
+  data.tar.gz: 2f329ab8c0c240cf56e11e2e9d7bc1c3c6711e24dcb52ee82a2de2785c1697cf333e3bcc17f056db22400e4e606d6c30108565502bd8a6119e2d7b50e18a1a64

data/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,55 @@
 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.27.0 — 2026-07-28
+**Two coordinated modal flows on the `/admin/style` Design System page — a walked
+"Web3 Contest" wallet → on-chain flow and an extended "Contest entry & eligibility"
+flow — plus a reusable minimum-visible-duration convention for load modals.** All
+specimens are DEMO chrome (`demo: true`, no real signing); the engine gains only
+view/chrome primitives and keeps custodial keys, wallet/multisig signing,
+`Solana::Config`, and every on-chain write app-side.
+### Added
+- **Minimum-visible-duration convention** — `studio/modals/_load_convention`
+  ships `window.StudioModals.holdAtLeast(minMs)` + a standard
+  `MIN_LOAD_MS` (1400) as a SINGLE definition, rendered by both the shared modal
+  host (`studio/modals/_host`, which drops its inline copy) and the style page.
+  A load spinner holds for at least `min_duration`, longer if the real async runs
+  longer — `resolveAt = max(min_duration, actual_completion)`; in demo mode
+  `min_duration` doubles as the auto-resolve timer. `_processing_card` gains
+  `min_duration` + `resolve_expr` locals so a demo load card self-advances.
+- **Web3 Contest** section (renamed from "Web3") — a walked flow with
+  glow-follows-the-flow continuity: Connect Wallet → Processing on-chain
+  transaction → On-chain success. The Processing card is a load modal with a demo
+  success/error toggle (unchecked resolves to success, checked to error), both
+  resolved states built. Picking a wallet swaps to Processing, which auto-resolves
+  after the min-load duration.
+- **Contest entry & eligibility** section (renamed from "Eligibility & entry",
+  moved directly under Web3 Contest) — the entry flow extended to
+  Entry tokens → Payment processing → Entry Tokens Minted → Contest enter
+  processing → Contest entered, with the glow following the step machine. Keeps
+  the Age gate + Entry tokens cards. The section states the honest web2/web3 map:
+  the token mint is web2-only (web3 funds USDC on-chain directly, no token); the
+  paths diverge at the funding front-end and the entry-submit endpoint, then
+  converge on the same on-chain Entry PDA and the same "Entry Confirmed" card.
+### Changed
+- **`studio/modals/_host`** — the `holdAtLeast` helper now lives in the shared
+  `_load_convention` partial (same API, byte-identical behavior) so the host and
+  the DS page share one definition instead of drifting copies.
+- **`style/modals/_entry_tokens`** — the confirming step uses the min-load
+  convention instead of a hardcoded timeout, and the step machine gains
+  `entering` + `entered` so hold-to-confirm walks through the on-chain consume to
+  the shared Entry Confirmed finish.
+- **`style/modals/_onchain_tx`** — a processing modal opened with `demoResolve`
+  auto-resolves to success (or error when `demoError`) after the min-load
+  duration, honoring the convention.
+- The Modals-section glow helper discriminates the on-chain-tx `state` and a
+  configurable step default, so the glow tracks a walked flow across modal ids.
 ## 0.26.1 — 2026-07-28
 **Fix the `/admin/style` Design System page breaking when reached via Turbo Drive

data/app/views/studio/_board_assets.html.erb CHANGED Viewed

@@ -48,9 +48,16 @@
         onMoveHook:     opts.onMoveHook || null,
         onDropHook:     opts.onDropHook || null,
         labels:         opts.labels || {},
+        // gap 3: the column key a data-exit-action="archive" remove re-parents INTO
+        // (its #dropzone-<key>) rather than deleting the card. null ⇒ 0.27.0 removal.
+        archiveZone:    opts.archiveZone || null,
         // --- state ---------------------------------------------------------
         toasts: [],
+        // gap 1: board-level chrome state lives HERE, on the studioBoard scope, so a
+        // board's header_slot controls + column show_expr bind to it directly — no
+        // bespoke outer Alpine wrapper. Seeded from board_state; {} when omitted.
+        state: (opts.state && typeof opts.state === "object") ? opts.state : {},
         // --- init ----------------------------------------------------------
         init: function () {
@@ -75,6 +82,19 @@
         zoneKey: function (el) { return el ? el.getAttribute("data-" + this.zoneAttr) : null; },
         label: function (zone) { return this.labels[zone] || zone; },
+        // --- board-chrome state helpers (gap 1) ----------------------------
+        // Generic, domain-free operations over `state` so a board's header_slot /
+        // column show_expr drive filters + toggles without a bespoke wrapper.
+        toggleState: function (key) { this.state[key] = !this.state[key]; },
+        listHas: function (key, val) {
+          return Array.isArray(this.state[key]) && this.state[key].indexOf(val) !== -1;
+        },
+        toggleInState: function (key, val) {
+          if (!Array.isArray(this.state[key])) this.state[key] = [];
+          var i = this.state[key].indexOf(val);
+          if (i === -1) { this.state[key].push(val); } else { this.state[key].splice(i, 1); }
+        },
         // --- SortableJS wiring ---------------------------------------------
         initSortables: function () {
           if (typeof Sortable === "undefined") return;
@@ -271,6 +291,21 @@
               var card = document.getElementById(target);
               if (!card) { renderNow(el); return; }
               self.animateCardExit(card, exitAction).then(function () {
+                // gap 3: an `archive` exit RE-PARENTS the card into the archive
+                // column (#dropzone-<archiveZone>) instead of vanishing, when the
+                // board named one and it exists. Everything else falls through to
+                // Turbo's remove (the 0.27.0 behavior).
+                if (exitAction === "archive" && self.archiveZone) {
+                  var zone = document.getElementById("dropzone-" + self.archiveZone);
+                  if (zone) {
+                    var anchor = self.emptySelector ? zone.querySelector(self.emptySelector) : null;
+                    zone.insertBefore(card, anchor);
+                    self.setCardZone(card, self.archiveZone);
+                    self.resetCardExit(card);
+                    self.updateCounts();
+                    return; // keep the card in the archive column — do NOT remove it
+                  }
+                }
                 renderNow(el);
                 self.updateCounts();
               });
@@ -279,7 +314,13 @@
         },
         animateCardExit: function (card, kind) {
-          if (!card || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return Promise.resolve();
+          if (!card) return Promise.resolve();
+          // gap 4: stamp an observable marker for WHICH exit is running (archive vs
+          // delete). Set before the reduced-motion guard so the marker is present
+          // even when the animation itself is skipped — the re-parent branch and any
+          // e2e both key off it.
+          card.dataset.exitAction = kind;
+          if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return Promise.resolve();
           card.style.pointerEvents = "none";
           var frames = kind === "archive"
             ? [{ opacity: 1, transform: "translateY(0) scale(1)" }, { opacity: 0, transform: "translateY(18px) scale(0.86)" }]
@@ -292,6 +333,18 @@
           return anim.finished.catch(function () {});
         },
+        // Clear an exit animation + its marker so a re-parented card is fully
+        // visible again in the archive column (used by the gap-3 re-parent path).
+        resetCardExit: function (card) {
+          if (!card) return;
+          card.getAnimations({ subtree: false }).forEach(function (a) { a.cancel(); });
+          delete card.dataset.exitAction;
+          card.style.pointerEvents = "";
+          card.style.opacity = "";
+          card.style.transform = "";
+          card.style.filter = "";
+        },
         // --- toasts --------------------------------------------------------
         toast: function (message, type) {
           if (!this.toastsEnabled) {

data/app/views/studio/board/_board.html.erb CHANGED Viewed

@@ -19,10 +19,27 @@
   studio/board/_column (the `.kanban-dropzone`) and studio/board/_card_shell (the
   `.kanban-card`) — an app may hand-roll a bespoke card as long as it matches.
+  CHROME COMPOSITION (the recipe that replaces a bespoke outer Alpine wrapper) —
+  a board with filters / toggles no longer needs to wrap this primitive in its own
+  x-data component. Everything the chrome needs lives ON the studioBoard scope:
+    1. `board_state:` seeds a reactive bag on the factory (`state`). Pass the
+       chrome's flags/lists, e.g. { showArchived: false, hiddenApps: [] }.
+    2. `header_slot:` (and `above_board_slot:`) render INSIDE the studioBoard
+       section, so their controls bind straight to that state and the generic
+       helpers the factory exposes: `toggleState('showArchived')`,
+       `toggleInState('hiddenApps', repo)`, `listHas('hiddenApps', repo)`.
+    3. A toggle-able column reads the same state via its `show_expr:`
+       (e.g. show_expr: "state.showArchived"); cards x-show off `listHas(...)`.
+    4. An Archived column that a stage→archived broadcast should re-parent INTO
+       (not delete) is named by the board's `archive_zone:`.
   locals:
     columns:          (req) [{ key:, label:, cards:, count:, badge_class:,
-                      collapsible:, hidden:, header_extra: }]. `cards` are records
-                      passed to `card_partial`; `count` defaults to cards.size.
+                      count_class:, collapsible:, hidden:, show_expr:, min_width:,
+                      kickoff:, header_extra: }]. `cards` are records passed to
+                      `card_partial`; `count` defaults to cards.size. See
+                      studio/board/_column for the additive per-column hooks
+                      (count_class / show_expr / min_width / kickoff).
     card_partial:     (req) partial rendered per card (e.g. "tasks/task_card").
     card_as:          local the record binds to in card_partial. Default :card.
     card_locals:      per-card extra locals — a Proc ->(record){ Hash } or a Hash.
@@ -50,6 +67,11 @@
     empty_label:      empty-zone text. Default "Drop here".
     header_slot:      raw HTML rendered above the columns (pass html_safe content).
     above_board_slot: raw HTML rendered between the header and the columns.
+    board_state:      Hash seeding the factory's reactive `state` bag (board-level
+                      chrome: filter/toggle flags + lists). nil ⇒ empty {}.
+    archive_zone:     column key a `remove` exit-stream marked data-exit-action=
+                      "archive" RE-PARENTS the card into (its #dropzone-<key>),
+                      instead of deleting it. nil ⇒ the card is removed (0.27.0).
     fx:               window[<name>] module the factory defers add/exit anims to.
     on_move_hook:     window[<name>] opaque fn, called with { record, from, to }.
     on_drop_hook:     window[<name>] opaque fn, called with { ids, zone }.
@@ -79,6 +101,8 @@
   empty_label      = local_assigns.fetch(:empty_label, "Drop here")
   header_slot      = local_assigns.fetch(:header_slot, nil)
   above_board_slot = local_assigns.fetch(:above_board_slot, nil)
+  board_state      = local_assigns.fetch(:board_state, nil)   # gap 1: chrome-state home
+  archive_zone     = local_assigns.fetch(:archive_zone, nil)  # gap 3: exit re-parent target
   fx               = local_assigns.fetch(:fx, nil)
   on_move_hook     = local_assigns.fetch(:on_move_hook, nil)
   on_drop_hook     = local_assigns.fetch(:on_drop_hook, nil)
@@ -102,6 +126,8 @@
     toasts:         !!toasts,
     live:           live_channel.present?,
     demo:           !!demo,
+    state:          (board_state.is_a?(Hash) ? board_state : nil),
+    archiveZone:    (archive_zone ? archive_zone.to_s : nil),
     fx:             fx,
     onMoveHook:     on_move_hook,
     onDropHook:     on_drop_hook,

data/app/views/studio/board/_column.html.erb CHANGED Viewed

@@ -12,10 +12,25 @@
   locals:
     column:               (req) { key:, label:, cards:, count:, badge_class:,
-                          collapsible:, hidden:, header_extra: }. `cards` are the
+                          count_class:, collapsible:, hidden:, show_expr:,
+                          min_width:, kickoff:, header_extra: }. `cards` are the
                           records passed to the card partial; `count` defaults to
                           cards.size; `badge_class` picks a components/_badge scheme
                           for the count (else a plain neutral count chip).
+                          Additive board-chrome hooks (all opt-in, all default to
+                          the 0.27.0 rendering when omitted):
+                            count_class: raw class string colouring the neutral
+                              count chip (e.g. a task_stage_count_classes value).
+                              Ignored when badge_class is set. Default neutral chip.
+                            show_expr:   Alpine x-show expression for a toggle-able
+                              column (binds against the board's studioBoard scope,
+                              e.g. "state.showArchived"). Adds x-cloak so it can't
+                              flash before Alpine boots. Independent of `hidden:`.
+                            min_width:   the column's sm min-width utility class.
+                              Default "sm:min-w-[190px]".
+                            kickoff:     raw HTML rendered in a fixed-height slot
+                              under the header row (a per-column kickoff chip);
+                              nil renders nothing.
     zone_attr:            data-attr name for the zone. Default "stage".
     dom_id_prefix:        card dom-id prefix, forwarded to the cards. Default "card-".
     zone_selector_class:  the drop-zone class. Default "kanban-dropzone".
@@ -41,9 +56,20 @@
   cards        = column[:cards] || []
   count        = column.fetch(:count) { cards.size }
   badge_class  = column[:badge_class]
+  # gap 2: an opt-in raw class colouring the neutral count chip; nil keeps the
+  # exact 0.27.0 neutral chip classes.
+  count_class  = column[:count_class]
   collapsible  = column[:collapsible]
   hidden       = column[:hidden]
+  # gap 5: a bindable visibility expr (x-show), a per-board min-width, and a
+  # per-column kickoff slot — each nil/absent renders identically to 0.27.0.
+  show_expr    = column[:show_expr]
+  min_width    = column[:min_width] || "sm:min-w-[190px]"
+  kickoff      = column[:kickoff]
   header_extra = column[:header_extra]
+  # The neutral count chip's colour classes: an opt-in raw class, else the 0.27.0
+  # neutral default. The layout classes are shared; only the colour band varies.
+  count_color  = count_class || "bg-surface-alt text-secondary border border-subtle"
   # Merge the per-card hook (Proc or Hash) with the record binding.
   resolve_locals = lambda do |record|
@@ -51,21 +77,29 @@
     { card_as => record }.merge(extra || {})
   end
 %>
-<div class="studio-board-column w-full flex-none sm:flex-1 sm:min-w-[190px]"
+<div class="studio-board-column w-full flex-none sm:flex-1 <%= min_width %>"
      data-board-column="<%= key %>"
      <% if collapsible %>data-board-collapsible="true"<% end %>
+     <% if show_expr %>x-show="<%= show_expr %>" x-cloak<% end %>
      <% if hidden %>x-cloak style="display:none"<% end %>>
   <div class="mb-3 px-1 flex items-center gap-2">
     <h3 class="text-sm font-bold text-heading uppercase tracking-wider"><%= label %></h3>
     <% if badge_class %>
       <%= render "components/badge", text: count.to_s, scheme: badge_class, data_board_count: key %>
     <% else %>
-      <span class="stage-count inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-xs font-bold bg-surface-alt text-secondary border border-subtle"
+      <span class="stage-count inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-xs font-bold <%= count_color %>"
             data-board-count="<%= key %>"><%= count %></span>
     <% end %>
     <% if header_extra %><%= header_extra %><% end %>
   </div>
+  <%# gap 5: per-column kickoff slot — a fixed-height row under the header so every
+      column's dropzone starts at the same y (no height jog) when only some carry a
+      chip. Renders nothing when the column passes no kickoff. %>
+  <% if kickoff %>
+    <div class="studio-board-kickoff mt-2 min-h-[26px]"><%= kickoff %></div>
+  <% end %>
   <div id="dropzone-<%= key %>"
        data-<%= zone_attr %>="<%= key %>"
        class="<%= zone_selector_class %> rounded-xl border-2 border-dashed border-subtle min-h-40 p-2 space-y-2 transition-colors duration-150 sm:min-h-[calc(100vh-220px)]">

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

@@ -153,24 +153,6 @@
 <script>
   (function() {
-    // === StudioModals helpers ===========================================
-    //
-    // holdAtLeast(ms) — pair with the _processing_card block. Stamp the
-    // moment a loading view becomes visible, then await the minimum
-    // before swapping to success so the spinner doesn't flash past the
-    // user when the operation finishes fast.
-    window.StudioModals = window.StudioModals || {};
-    window.StudioModals.holdAtLeast = function(minMs) {
-      var startedAt = Date.now();
-      return {
-        then: function(callback) {
-          var remaining = Math.max(0, minMs - (Date.now() - startedAt));
-          if (remaining === 0) { callback(); return; }
-          setTimeout(callback, remaining);
-        }
-      };
-    };
     // === Modal animation registry ======================================
     //
     // The single place to define + tune named entrance / exit animations
@@ -490,6 +472,14 @@
   })();
 </script>
+<%# The minimum-visible-duration convention (window.StudioModals.holdAtLeast +
+    MIN_LOAD_MS) — the SINGLE source, shared with the /admin/style demo page.
+    Pair it with the _processing_card block so a load spinner never flashes past
+    the user. Rendered AFTER the store <script> above so the store stays the
+    host's first <script> (a Node behavior harness extracts that first script).
+    See studio/modals/_load_convention for the full contract. %>
+<%= render "studio/modals/load_convention" %>
 <template x-if="$store.modals.current()">
   <%# Backdrop + card use CSS keyframe animations (NOT Alpine
       x-transition), all shipped in the inline style block above. On

data/app/views/studio/modals/_load_convention.html.erb ADDED Viewed

@@ -0,0 +1,55 @@
+<%#
+  Minimum-visible-duration convention for load / processing modals.
+  A load modal shows its spinner for AT LEAST a minimum duration so it never
+  flashes past the user (registering "did anything happen?" instead of
+  "processing → done"), but LONGER whenever the real async takes longer:
+      resolveAt = max(min_duration, actual_completion)
+  This ships the convention on window.StudioModals, defined ONCE here and
+  rendered by BOTH the shared modal host (studio/modals/_host) and the living
+  style guide (style/_modals) — so every consumer app and the /admin/style demo
+  page share a single definition:
+    MIN_LOAD_MS  — the standard default minimum (1400 ms). A caller may pass its
+                   own, but reach for this so every load modal feels consistent.
+    holdAtLeast(minMs) — returns a thenable whose .then(cb) fires cb at
+                   max(minMs, elapsed-since-this-call). Two usages:
+                     REAL async — stamp the moment the loading view appears, then
+                     resolve in the async completion, so a slow op is never cut
+                     short and a fast one still honors the spinner:
+                       var hold = StudioModals.holdAtLeast(StudioModals.MIN_LOAD_MS);
+                       doWork().then(function () { hold.then(showSuccess); });
+                     DEMO (no real work) — call .then immediately and minMs
+                     DOUBLES as the auto-resolve timer: the demo advances after
+                     min_duration exactly:
+                       StudioModals.holdAtLeast(StudioModals.MIN_LOAD_MS).then(advance);
+  Idempotent (|| guards): never clobber a definition an app already shipped, and
+  safe to render more than once on a page.
+%>
+<script>
+  (function () {
+    window.StudioModals = window.StudioModals || {};
+    // Standard minimum-visible duration for a load spinner, in ms. ~1200–1500
+    // reads as "processing → done"; below ~1s the spinner flashes and reads as a
+    // glitch. Callers may override per-modal, but default to this for consistency.
+    window.StudioModals.MIN_LOAD_MS = window.StudioModals.MIN_LOAD_MS || 1400;
+    // holdAtLeast(minMs).then(cb) — cb fires at max(minMs, elapsed-since-call).
+    // Stamp the moment a loading view becomes visible; the anti-flicker floor.
+    window.StudioModals.holdAtLeast = window.StudioModals.holdAtLeast || function (minMs) {
+      var startedAt = Date.now();
+      return {
+        then: function (callback) {
+          var remaining = Math.max(0, minMs - (Date.now() - startedAt));
+          if (remaining === 0) { callback(); return; }
+          setTimeout(callback, remaining);
+        }
+      };
+    };
+  })();
+</script>

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

@@ -2,10 +2,17 @@
     a { title } prop while a Turbo form uploads. Register it in your modal-host
     block alongside crop-photo. Single root for the host's <template x-if>.
-    Local: store — Alpine store name backing the title read. Default "modals".
-    The living style guide passes store: "dsModals" for its page-scoped host. %>
+    Locals:
+      store        — Alpine store name backing the title read. Default "modals".
+                     The living style guide passes store: "dsModals".
+      resolve_expr — optional demo auto-resolve (min-load convention). The real
+                     Turbo submit drives the spinner and closes on completion, so
+                     apps omit this; the /admin/style demo passes an expression
+                     (e.g. close) so the specimen self-terminates after min_duration
+                     instead of spinning forever. %>
 <% saving_store = local_assigns.fetch(:store, "modals") %>
 <div>
   <%= render "studio/modals/blocks/processing_card",
-        title_key: "$store.#{saving_store}.current()?.props?.title || 'Saving…'" %>
+        title_key: "$store.#{saving_store}.current()?.props?.title || 'Saving…'",
+        resolve_expr: local_assigns[:resolve_expr] %>
 </div>

data/app/views/studio/modals/blocks/_processing_card.html.erb CHANGED Viewed

@@ -1,10 +1,16 @@
 <%#
   Reusable processing / loading card. Spinner + title + optional message.
-  Pair with window.StudioModals.holdAtLeast(ms) on the caller side to
-  enforce a minimum visible duration — without that the spinner can
-  flash by when the operation finishes faster than ~1s and the user
-  registers "did anything happen?" instead of "ok, processing →
-  success".
+  Minimum-visible-duration convention (studio/modals/_load_convention):
+  a load spinner must show for AT LEAST a floor, but longer if the real async
+  runs longer — resolveAt = max(min_duration, actual_completion) — so it never
+  flashes past the user ("did anything happen?") yet never cuts a slow op short.
+  Two ways to honor it:
+    • REAL async — the caller stamps window.StudioModals.holdAtLeast(min_duration)
+      when this card appears, then resolves in its completion callback.
+    • DEMO / auto-resolve — pass `resolve_expr`: this card self-schedules that
+      Alpine expression after `min_duration` (min_duration doubles as the demo's
+      auto-resolve timer), via the same holdAtLeast floor.
   Locals — pass static strings OR `_key` variants for Alpine-driven
   text that updates as state mutates (e.g. live store reads):
@@ -15,6 +21,10 @@
     size:          spinner size — 'sm', 'md' (default), 'lg'
     color:         color token for the spinner — 'primary' (default),
                    'success', 'warning'
+    min_duration:  minimum visible ms (default 1400, mirrors
+                   StudioModals.MIN_LOAD_MS). The convention's floor.
+    resolve_expr:  Alpine expression run after min_duration to advance the flow
+                   (demo auto-resolve). Omit for a real spinner the caller drives.
   One of `title` or `title_key` is required.
 %>
@@ -27,8 +37,12 @@
     'lg' => 'w-16 h-16 border-4'
   }
   spinner_class = sizes[size] || sizes['md']
+  # min_duration mirrors StudioModals.MIN_LOAD_MS (the JS default) so the Ruby and
+  # JS sides of the convention agree on the same floor.
+  min_duration = local_assigns[:min_duration] || 1400
+  resolve_expr = local_assigns[:resolve_expr]
 %>
-<div class="text-center py-6">
+<div class="text-center py-6"<%= " x-data=\"{}\" x-init=\"window.StudioModals.holdAtLeast(#{min_duration}).then(() => { #{resolve_expr} })\"".html_safe if resolve_expr %>>
   <div class="mx-auto <%= spinner_class %> rounded-full border-<%= color %>/30 border-t-<%= color %> animate-spin mb-5"></div>
   <% if local_assigns[:title_key] %>
     <p class="text-base font-bold text-heading mb-1" x-text="<%= title_key %>"></p>

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

@@ -42,18 +42,22 @@
   # Active-card glow-match expression builder: yields an Alpine boolean that is
   # true when $store.dsModals.current() is THIS specimen's modal. It discriminates
-  # by sub-state so two specimens that open the SAME modal id still glow the right
-  # card: `step:` for the auth step machine, and `crop:` for the two crop-photo
-  # variants (:picker vs :crop). The crop sub-state rides props.cropReady — the
-  # crop factory sets it true when the cropper mounts (on a direct image OR after
-  # an in-modal pick), so the glow moves picker -> cropper as the flow advances.
-  ds_glow = lambda do |id, step: nil, crop: nil, celebrate: nil|
+  # by sub-state so specimens that open the SAME modal id still glow the right
+  # card, and so the glow FOLLOWS a walked flow as the step machine advances:
+  #   step:         the auth / entry-tokens step machine (step_default is the
+  #                 modal's own default step — 'credentials' for auth, 'picker'
+  #                 for entry-tokens).
+  #   state:        the on-chain-tx state (processing / success / error) — lets the
+  #                 glow track Connect Wallet -> Processing -> On-chain success.
+  #   crop:         the two crop-photo variants (:picker vs :crop), on props.cropReady.
+  #   celebrate:    the input specimen (form) vs the "updated" (celebrate) specimen
+  #                 of the SAME leveling modal id.
+  ds_glow = lambda do |id, step: nil, step_default: "credentials", crop: nil, celebrate: nil, state: nil|
     cur  = "$store.dsModals.current()"
     expr = "#{cur} && #{cur}.id === '#{id}'"
-    expr += " && (#{cur}.props.step || 'credentials') === '#{step}'" if step
+    expr += " && (#{cur}.props.step || '#{step_default}') === '#{step}'" if step
+    expr += " && #{cur}.props.state === '#{state}'" if state
     expr += (crop == :crop ? " && !!#{cur}.props.cropReady" : " && !#{cur}.props.cropReady") unless crop.nil?
-    # celebrate discriminates the input specimen (form) from the "updated" specimen
-    # (celebrate) of the SAME leveling modal id, mirroring the step/crop sub-states.
     expr += (celebrate ? " && !!#{cur}.props.celebrate" : " && !#{cur}.props.celebrate") unless celebrate.nil?
     expr
   end
@@ -263,6 +267,13 @@
     })();
   </script>
+  <%# The minimum-visible-duration convention (window.StudioModals.holdAtLeast +
+      MIN_LOAD_MS) — the SAME single definition the shared modal host renders, so
+      the demo load modals here (payment/entry processing, on-chain tx, saving)
+      honor resolveAt = max(min_duration, actual) and auto-resolve after
+      min_duration in demo mode. A consumer app already has it via the host. %>
+  <%= render "studio/modals/load_convention" %>
   <%# Cropper.js + the cropPhotoModal factory — makes the Profile crop / upload
       modals openable on this page (loads cropper.js via <script defer> and
       defines the factory inline; no importmap change). %>
@@ -310,8 +321,11 @@
         <template x-if="$store.dsModals.current().id === 'crop-photo'">
           <div><%= render "studio/modals/crop_photo", store: "dsModals" %></div>
         </template>
+        <%# saving — the demo passes resolve_expr so the spinner self-terminates
+            after min_duration (a real app's Turbo submit drives + closes it). %>
         <template x-if="$store.dsModals.current().id === 'saving'">
-          <div><%= render "studio/modals/saving", store: "dsModals" %></div>
+          <div><%= render "studio/modals/saving", store: "dsModals",
+                    resolve_expr: "$store.dsModals.close()" %></div>
         </template>
         <%# --- Web3 --- %>
@@ -335,9 +349,12 @@
         </template>
         <%# --- System and status (reusable card blocks) --- %>
+        <%# ds-processing demos the min-duration convention on the canonical block:
+            resolve_expr auto-swaps to the success card after min_duration. %>
         <template x-if="$store.dsModals.current().id === 'ds-processing'">
           <div><%= render "studio/modals/blocks/processing_card",
-                    title: "Confirming entry", message: "Talking to the server…" %></div>
+                    title: "Confirming entry", message: "Talking to the server…",
+                    resolve_expr: "$store.dsModals.swap('ds-success')" %></div>
         </template>
         <template x-if="$store.dsModals.current().id === 'ds-success'">
           <div><%= render "studio/modals/blocks/success_card",
@@ -523,68 +540,6 @@
     </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 %>
   <%# ===================================================================== %>
@@ -766,12 +721,13 @@
   </section>
   <%# ===================================================================== %>
-  <%# 4. WEB3 — gated by Studio.feature?(:web3); off = disabled-but-present-yet-openable %>
+  <%# 2. WEB3 CONTEST — the walked wallet -> on-chain flow (glow follows it). %>
+  <%# Gated by :web3; off = disabled-but-present-yet-openable. %>
   <%# ===================================================================== %>
   <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">Web3</h3>
+        <h3 class="text-xl font-bold text-heading">Web3 Contest</h3>
         <% if web3_on %>
           <span class="badge" style="color: var(--color-success); border-color: var(--color-success)">enabled on this app</span>
         <% else %>
@@ -779,21 +735,31 @@
         <% end %>
       </div>
       <p class="text-muted text-sm">
-        Wallet + on-chain modals, ported into the engine and gated by
+        The wallet + on-chain modals, ported into the engine and gated by
         <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>
+        The first three cards are a <strong>walked flow</strong> &mdash;
+        <strong>Connect Wallet &rarr; Processing on-chain transaction &rarr; On-chain
+        success</strong> &mdash; and the live card <strong>glows</strong>, following the
+        flow as it advances (open Connect Wallet and pick a wallet to watch it walk).
+        The <strong>Processing</strong> card is a load modal: its
+        <strong>success/error toggle</strong> chooses whether it resolves to success
+        or the error state, after the <strong>minimum-visible duration</strong>
+        (<code class="font-mono text-2xs">studio/modals/_load_convention</code>). 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">
+      <%# 1. Connect wallet — the walk's entry; picking a wallet swaps to Processing. %>
       <%= render layout: "style/modal_specimen", locals: {
             label:     "Connect wallet",
-            reference: %(the Web3 "Connect wallet" picker (studio-engine style/modals/_wallet_connect) — open with $store.dsModals.open('wallet-connect')),
+            reference: %(the Web3 Contest "Connect wallet" picker (studio-engine style/modals/_wallet_connect) — the walk's entry: picking a wallet runs a brief connecting state then swaps to the on-chain Processing modal. Open with $store.dsModals.open('wallet-connect')),
             open_expr: "$store.dsModals.open('wallet-connect')",
+            glow_when: ds_glow.call("wallet-connect"),
             disabled: !web3_on, openable: true } 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 rounded" style="background: var(--color-text); opacity: .18"></span>
@@ -802,10 +768,14 @@
         </div>
       <% end %>
+      <%# 2. Processing — the load modal; the success/error toggle picks the resolution. %>
       <%= render layout: "style/modal_specimen", locals: {
-            label:     "On-chain tx · processing",
-            reference: %(the Web3 "On-chain tx" modal, processing state (style/modals/_onchain_tx via $store.dsSolanaModal) — open with $store.dsModals.open('onchain-tx', { state: 'processing', title: 'Confirming on-chain', message: 'Waiting for the wallet signature…' })),
-            open_expr: "$store.dsModals.open('onchain-tx', { state: 'processing', title: 'Confirming on-chain', message: 'Waiting for the wallet signature…' })",
+            label:     "Processing on-chain tx",
+            reference: %(the Web3 Contest "Processing" on-chain load modal (style/modals/_onchain_tx via $store.dsSolanaModal) — holds the spinner at least MIN_LOAD_MS, then auto-resolves to success (or the error state when the toggle is set). Open with $store.dsModals.open('onchain-tx', { state: 'processing', demoResolve: true, demoError: false })),
+            card_data: "opts: { demoError: false }",
+            toggles:   [{ model: "opts.demoError", label: "Resolve to error" }],
+            open_expr: "$store.dsModals.open('onchain-tx', { state: 'processing', title: 'Confirming on-chain', message: 'Waiting for the wallet signature…', demoResolve: true, demoError: opts.demoError })",
+            glow_when: ds_glow.call("onchain-tx", state: "processing"),
             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="loading-dots mx-auto"><span></span><span></span><span></span></div>
@@ -813,10 +783,12 @@
         </div>
       <% end %>
+      <%# 3. On-chain success — the resolved success end-state (the walk's finish). %>
       <%= render layout: "style/modal_specimen", locals: {
-            label:     "On-chain tx · success",
-            reference: %(the Web3 "On-chain tx" modal, generic-success state (style/modals/_onchain_tx + studio/modals/blocks/_onchain_success) — open with $store.dsModals.open('onchain-tx', { state: 'success', txSignature: '…', successTitle: 'Mint complete' })),
+            label:     "On-chain success",
+            reference: %(the Web3 Contest "On-chain success" state (style/modals/_onchain_tx + studio/modals/blocks/_onchain_success) — the resolved success card the walk lands on. Open with $store.dsModals.open('onchain-tx', { state: 'success', txSignature: '…', successTitle: 'Mint complete' })),
             open_expr: "$store.dsModals.open('onchain-tx', { state: 'success', txSignature: '5xTrDemoSignature1234567890', successTitle: 'Mint complete', successSubtitle: 'Your on-chain action confirmed.', ctaLabel: 'View wallet', ctaHref: null })",
+            glow_when: ds_glow.call("onchain-tx", state: "success"),
             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-success) 15%, transparent)">
@@ -826,10 +798,12 @@
         </div>
       <% end %>
+      <%# On-chain error — the resolved error end-state (the toggle's other branch). %>
       <%= render layout: "style/modal_specimen", locals: {
-            label:     "On-chain tx · error",
-            reference: %(the Web3 "On-chain tx" modal, error state (style/modals/_onchain_tx) — open with $store.dsModals.open('onchain-tx', { state: 'error', title: "Couldn't confirm", errorMessage: 'The transaction was rejected. Give it another try.' })),
+            label:     "On-chain error",
+            reference: %(the Web3 Contest "On-chain error" state (style/modals/_onchain_tx) — the resolved error card the Processing toggle resolves to. Open with $store.dsModals.open('onchain-tx', { state: 'error', title: "Couldn't confirm", errorMessage: 'The transaction was rejected. Give it another try.' })),
             open_expr: "$store.dsModals.open('onchain-tx', { state: 'error', title: 'Could not confirm', errorMessage: 'The transaction was rejected. Give it another try.' })",
+            glow_when: ds_glow.call("onchain-tx", state: "error"),
             disabled: !web3_on, openable: true } do %>
         <div class="pointer-events-none w-40 rounded-lg bg-surface border border-subtle shadow p-4 text-center space-y-2">
           <div class="text-2xl leading-none">⚠️</div>
@@ -837,9 +811,10 @@
         </div>
       <% end %>
+      <%# Wallet deposit — standalone top-up card (not part of the walk). %>
       <%= render layout: "style/modal_specimen", locals: {
             label:     "Wallet deposit",
-            reference: %(the Web3 "Wallet deposit" top-up card (style/modals/_wallet_deposit) — open with $store.dsModals.open('wallet-deposit', { neededCents: 500, usdcCents: 120, usdtCents: 0, address: 'Fo1L5…' })),
+            reference: %(the Web3 Contest "Wallet deposit" top-up card (style/modals/_wallet_deposit) — open with $store.dsModals.open('wallet-deposit', { neededCents: 500, usdcCents: 120, usdtCents: 0, address: 'Fo1L5…' })),
             open_expr: "$store.dsModals.open('wallet-deposit', { neededCents: 500, usdcCents: 120, usdtCents: 0, address: 'Fo1L5demoWALLETaddr9xQ2' })",
             disabled: !web3_on, openable: true } do %>
         <div class="pointer-events-none w-40 rounded-lg bg-surface border border-subtle shadow p-4 text-center space-y-2">
@@ -855,7 +830,7 @@
           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 })),
+            reference: %(the Web3 Contest "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">
@@ -870,6 +845,144 @@
     </div>
   </section>
+  <%# ===================================================================== %>
+  <%# 3. CONTEST ENTRY & ELIGIBILITY — moved directly under Web3 Contest. The %>
+  <%# walked entry flow (glow follows), plus the honest web2/web3 map. %>
+  <%# ===================================================================== %>
+  <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">Contest entry &amp; eligibility</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 full entry flow. The <strong>age gate</strong>
+        (<code class="font-mono text-2xs">studio/modals/blocks/_age_verify</code>) is an
+        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). The entry flow is
+        a <strong>walked sequence</strong> &mdash; <strong>Entry tokens &rarr; Payment
+        processing &rarr; Entry Tokens Minted &rarr; Contest enter processing &rarr;
+        Contest entered</strong> &mdash; and the live card <strong>glows</strong>,
+        following the step machine (the two load steps honor the same min-duration
+        convention as Web3 Contest above).
+      </p>
+      <%# The web2/web3 finding — a real divergence, stated honestly, not invented. %>
+      <div class="mt-2 rounded-lg border border-subtle bg-surface p-3 text-xs text-secondary leading-snug">
+        <p class="text-heading font-semibold mb-1">Web2 vs web3 — the honest map</p>
+        <p class="mb-1">
+          The two funding paths <strong>diverge at the front-end and the entry-submit
+          endpoint, then converge</strong>. <strong>Web2</strong> (card / Stripe /
+          Coinflow / PayPal) mints one prepaid entry token per credit on-chain after
+          payment clears, then <strong>consumes</strong> one token to enter.
+          <strong>Web3</strong> (wallet / USDC on-chain) funds USDC directly and
+          <strong>mints no token</strong> &mdash; the mint&nbsp;&rarr;&nbsp;consume prelude
+          is web2-only.
+        </p>
+        <p>
+          Both create the <strong>same on-chain Entry PDA</strong> and resolve to the
+          <strong>same “Entry Confirmed” card</strong>. The walk below demos the web2
+          path end-to-end; web3 skips the mint and joins at
+          <strong>enter&nbsp;&rarr;&nbsp;entered</strong>.
+        </p>
+      </div>
+    </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) — an 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 %>
+      <%# 1. Entry tokens — the picker (walk's entry). Picking a pack advances. %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Entry tokens",
+            reference: %(the "Entry tokens" picker (app-specific — documented composing studio/modals/blocks chrome). The packs, pricing, rails, and on-chain mint stay app-owned. Picking a pack walks Payment processing -> Minted -> enter -> entered. 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", step: "picker", step_default: "picker") } 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 %>
+      <%# 2. Payment processing — the mint-at-purchase load step (web2). %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Payment processing",
+            reference: %(the "Payment processing" step (entry-tokens step 'confirming') — "Confirming your purchase…" over "Payment cleared — a server job mints one prepaid entry credit per token on-chain." A load modal; honors the min-duration convention then auto-advances to Entry Tokens Minted. Open with $store.dsModals.open('entry-tokens', { step: 'confirming', mintedCount: 3, mintedBalance: '3' })),
+            open_expr: "$store.dsModals.open('entry-tokens', { step: 'confirming', mintedCount: 3, mintedBalance: '3' })",
+            glow_when: ds_glow.call("entry-tokens", step: "confirming", step_default: "picker") } 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="loading-dots mx-auto"><span></span><span></span><span></span></div>
+          <span class="block h-2 w-24 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+          <span class="block h-1.5 w-16 mx-auto rounded" style="background: var(--color-text); opacity: .12"></span>
+        </div>
+      <% end %>
+      <%# 3. Entry Tokens Minted — ready to consume at entry (hold to confirm). %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Entry Tokens Minted",
+            reference: %(the "Entry Tokens Minted" step (entry-tokens step 'minted') — "You now have N available." Holding to confirm consumes one token on-chain to create the contest entry (advances to Contest enter processing). Open with $store.dsModals.open('entry-tokens', { step: 'minted', mintedCount: 3, mintedBalance: '3' })),
+            open_expr: "$store.dsModals.open('entry-tokens', { step: 'minted', mintedCount: 3, mintedBalance: '3' })",
+            glow_when: ds_glow.call("entry-tokens", step: "minted", step_default: "picker") } 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)">
+            <span class="text-sm font-bold" style="color: var(--color-primary)">3</span>
+          </div>
+          <span class="block h-2 w-24 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+          <span class="block h-5 w-full rounded" style="background: var(--color-cta)"></span>
+        </div>
+      <% end %>
+      <%# 4. Contest enter processing — the on-chain consume load step. %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Contest enter processing",
+            reference: %(the "Contest enter processing" step (entry-tokens step 'entering') — "Confirming your entry…" over "Consuming one token on-chain to create your contest entry." A load modal; honors the min-duration convention then auto-advances to Contest entered. Open with $store.dsModals.open('entry-tokens', { step: 'entering' })),
+            open_expr: "$store.dsModals.open('entry-tokens', { step: 'entering' })",
+            glow_when: ds_glow.call("entry-tokens", step: "entering", step_default: "picker") } 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="loading-dots mx-auto"><span></span><span></span><span></span></div>
+          <span class="block h-2 w-24 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+          <span class="block h-1.5 w-16 mx-auto rounded" style="background: var(--color-text); opacity: .12"></span>
+        </div>
+      <% end %>
+      <%# 5. Contest entered — the shared Entry Confirmed finish (web2 + web3 converge). %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Contest entered",
+            reference: %(the "Contest entered" success (entry-tokens step 'entered') — "Good Luck / Entry Confirmed" with the branded on-chain tx link and a Contest Lobby CTA. The SAME finish both web2 and web3 entries converge on. Open with $store.dsModals.open('entry-tokens', { step: 'entered', txSignature: '…' })),
+            open_expr: "$store.dsModals.open('entry-tokens', { step: 'entered', txSignature: '5xTrDemoEntrySignature1234567890abc' })",
+            glow_when: ds_glow.call("entry-tokens", step: "entered", step_default: "picker") } 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-success) 15%, transparent)">
+            <svg class="w-4 h-4" style="color: var(--color-success)" 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-4 w-full rounded" style="background: var(--color-cta)"></span>
+        </div>
+      <% end %>
+    </div>
+  </section>
   <%# ===================================================================== %>
   <%# 5. SYSTEM AND STATUS (reusable card blocks) %>
   <%# ===================================================================== %>

data/app/views/style/_tasks.html.erb CHANGED Viewed

@@ -109,6 +109,69 @@
     </div>
   </div>
+  <%# ---- The ENRICHED board chrome (0.28.0) ------------------------------ %>
+  <%# One specimen that exercises the five additive hooks the /tasks pilot surfaced,
+      all opt-in: (1) board_state + header_slot chrome home, (2) a coloured count
+      chip via count_class, (3) archive_zone exit re-parent, (4) the exit marker,
+      (5) a toggle-able column (show_expr) + a per-column kickoff slot + min_width.
+      No outer Alpine wrapper: the Show/Hide-archived toggle in header_slot and the
+      archived column's show_expr both bind to the SAME studioBoard state. %>
+  <% chrome_header = capture do %>
+    <div class="flex items-center gap-3 flex-wrap">
+      <button type="button"
+              class="px-3 py-1.5 rounded-lg text-sm font-medium transition border border-subtle"
+              :class="state.showArchived ? 'bg-primary text-white border-primary' : 'bg-surface text-secondary hover:text-heading'"
+              @click="toggleState('showArchived')"
+              data-test="chrome-archived-toggle">
+        <span x-text="state.showArchived ? 'Hide archived' : 'Show archived'">Show archived</span>
+      </button>
+      <span class="label-upper"><code class="font-mono text-2xs">header_slot</code> chrome &middot; binds to <code class="font-mono text-2xs">state.showArchived</code> &mdash; no outer wrapper</span>
+    </div>
+  <% end %>
+  <% chrome_kickoff = capture do %>
+    <span class="inline-flex items-center gap-1 rounded border border-primary/30 bg-primary/10 px-1.5 py-0.5 text-2xs font-semibold uppercase tracking-wide text-primary">kickoff slot</span>
+  <% end %>
+  <%
+    # Per-column count_class colours (raw classes, the task_stage_count_classes shape),
+    # a kickoff chip + widened min_width on Designed, and a toggle-able Archived column
+    # (show_expr) the board re-parents into (archive_zone).
+    chrome_columns = [
+      { key: "designed", label: "Designed",
+        count_class: "bg-blue-500/10 text-blue-500 border border-blue-500/30",
+        kickoff: chrome_kickoff, min_width: "sm:min-w-[15rem]",
+        cards: [{ id: "chrome-count-color", zone: "designed", title: "Coloured count chip", repo: "studio-engine", who: "SH" }] },
+      { key: "building", label: "Building",
+        count_class: "bg-yellow-500/10 text-yellow-400 border border-yellow-500/30",
+        cards: [{ id: "chrome-bindable-col", zone: "building", title: "Bindable columns", repo: "turf-monster", who: "CA" }] },
+      { key: "shipped", label: "Shipped",
+        count_class: "bg-emerald-500/10 text-emerald-500 border border-emerald-500/30",
+        cards: [{ id: "chrome-exit-marker", zone: "shipped", title: "Exit re-parent marker", repo: "mcritchie", who: "ST" }] },
+      { key: "archived", label: "Archived",
+        count_class: "bg-gray-500/10 text-gray-400 border border-gray-500/30",
+        show_expr: "state.showArchived",
+        cards: [{ id: "chrome-archived-card", zone: "archived", title: "Archived (re-parent target)", repo: "mcritchie", who: "ST" }] }
+    ]
+  %>
+  <div class="space-y-3">
+    <div class="flex items-center gap-2">
+      <span class="badge" style="color: var(--color-primary); border-color: var(--color-primary)">Enriched</span>
+      <p class="label-upper"><code class="font-mono text-2xs">studio/board/board</code> &middot; 0.28.0 chrome &mdash; coloured counts, toggle-able column, archive re-parent</p>
+    </div>
+    <%= render "studio/board/board",
+          demo: true,
+          columns: chrome_columns,
+          card_partial: "style/board/demo_card",
+          card_as: :card,
+          reorder_url: "#",
+          move_url: "#",
+          move_param: { resource: "task", attr: "stage" },
+          group: "studio-board-chrome",
+          board_state: { showArchived: false },
+          archive_zone: "archived",
+          header_slot: chrome_header,
+          empty_label: "Drop tasks here" %>
+  </div>
   <%# ---- The static reference sketch ------------------------------------- %>
   <div class="fade-edge-x overflow-x-auto pb-2">
     <div class="flex gap-4 min-w-max">
@@ -162,9 +225,11 @@
       </div>
       <ul class="text-secondary text-sm space-y-1 list-disc list-inside">
         <li>Column layout + horizontal scroll with faded edges</li>
-        <li>The <code class="font-mono text-2xs">stage-*</code> badge palette + count chips</li>
+        <li>The <code class="font-mono text-2xs">stage-*</code> badge palette + count chips (colour via <code class="font-mono text-2xs">count_class</code>)</li>
         <li>Card chrome (<code class="font-mono text-2xs">.card</code>) and the drag / rank handle</li>
         <li>Empty-column drop state</li>
+        <li>Chrome-state home (<code class="font-mono text-2xs">board_state</code> + <code class="font-mono text-2xs">header_slot</code>) &mdash; filters/toggles without an outer wrapper</li>
+        <li>Toggle-able columns (<code class="font-mono text-2xs">show_expr</code>), a kickoff slot, and archive re-parent (<code class="font-mono text-2xs">archive_zone</code>)</li>
       </ul>
     </div>
     <div class="card p-5 space-y-2">
@@ -175,7 +240,7 @@
       <ul class="text-secondary text-sm space-y-1 list-disc list-inside">
         <li>Which stages become columns</li>
         <li>The card body — fields, chips, avatars, live timers</li>
-        <li>Filters (agent, app) and header actions</li>
+        <li>Filter/toggle logic + header actions, composed onto the shared chrome state</li>
         <li>Live-update wiring (Turbo Streams on the deploy board)</li>
       </ul>
     </div>

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

@@ -1,20 +1,30 @@
 <%#
-  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.
+  Living style guide specimen — the contest entry & eligibility flow. This
+  documents an APP-SPECIFIC flow (Turf Monster's "Get Entry Tokens" → enter);
+  the engine deliberately does NOT own the packs, pricing, payment rails, or any
+  on-chain write. The specimen composes only engine CHROME (studio/modals/blocks/
+  shell, card_header, progress_pill, solana_tx_link) and represents the packs and
+  the on-chain moments as an illustrative demo — the app owns the money + signing.
   Opened on the page-scoped dsModals host with an internal step machine on
-  props.step: picker -> confirming -> minted. Single-root templates throughout.
+  props.step, the full web2 walk:
-  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.
+    picker -> confirming -> minted -> entering -> entered
+  Single-root templates throughout. The two load steps (confirming, entering)
+  honor the minimum-visible-duration convention (studio/modals/_load_convention):
+  the spinner holds at least MIN_LOAD_MS, then auto-advances (demo mode) —
+  resolveAt = max(min_duration, actual_completion).
+  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 in the user's wallet. WEB2 (card / Stripe / Coinflow / PayPal) has two
+  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 hold-to-confirm gesture
+  spends one token to create the contest entry. WEB3 (wallet / USDC on-chain)
+  funds USDC directly and mints NO token — so the mint→consume prelude is
+  web2-only. Both paths converge at the SAME on-chain Entry PDA and the SAME
+  "Entry Confirmed" card.
 %>
 <%
   # Illustrative packs only — a real app reads these from its own config
@@ -29,10 +39,20 @@
        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 () {
+       },
+       confirmEntry() {
+         Alpine.store('dsModals').advance({ step: 'entering' });
+       },
+       // Demo auto-resolve honoring the min-load convention: hold the spinner at
+       // least MIN_LOAD_MS, then advance — but only while this modal is still on
+       // the given step (guards against an early close / manual advance).
+       autoAdvance(fromStep, patch) {
+         window.StudioModals.holdAtLeast(window.StudioModals.MIN_LOAD_MS).then(function () {
            var c = Alpine.store('dsModals').current();
-           if (c && c.id === 'entry-tokens') Alpine.store('dsModals').advance({ step: 'minted' });
-         }, 1300);
+           if (c && c.id === 'entry-tokens' && c.props.step === fromStep) {
+             Alpine.store('dsModals').advance(patch);
+           }
+         });
        }
      }" class="relative">
@@ -68,36 +88,52 @@
         <% 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). %>
+      <%# Rails — which funding path mints tokens vs funds an entry directly. %>
       <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>
+        <span aria-hidden="true">&middot;</span>
+        <span>Coinflow</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>
+      <p class="text-center text-2xs text-muted mt-1">
+        These are the <strong>web2</strong> rails — they mint prepaid entry tokens.
+        The <strong>web3</strong> path funds USDC on-chain directly and mints no token.
+      </p>
-      <%# The seam callout — what the engine owns vs what the app owns. %>
+      <%# The seam callout — what the engine owns vs the app, plus the honest
+          web2/web3 map (a real divergence, not invented). %>
       <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-2">
+          The engine supplies only the shell, header, progress pill, and tx link. The
+          packs, pricing, payment rails, and every on-chain write are
+          <strong>app-owned</strong> — this specimen represents them as a demo. On-chain,
+          an entry token is a <strong>prepaid entry credit recorded on-chain</strong>
+          (a per-token account), not a wallet-held token.
+        </p>
+        <p class="text-heading font-semibold mb-1">Web2 vs web3 — where they diverge and converge</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.
+          <strong>Web2</strong> (card / Stripe / Coinflow / PayPal): a server job mints
+          one prepaid entry credit per token on-chain once payment clears, then
+          hold-to-confirm <strong>consumes</strong> one token to create the entry.
+        </p>
+        <p class="mb-1">
+          <strong>Web3</strong> (wallet / USDC on-chain): funds USDC directly and
+          <strong>mints no token</strong> — the mint → consume prelude is web2-only.
         </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.
+          Both paths converge on the <strong>same on-chain Entry PDA</strong> and the
+          <strong>same “Entry Confirmed” card</strong> — divergent funding front-end,
+          one shared entry → entered finish.
         </p>
       </div>
     </div>
   </template>
-  <%# ===== CONFIRMING (mint-at-purchase) ===== %>
+  <%# ===== CONFIRMING (payment processing — 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)">
+    <div x-init="autoAdvance('confirming', { step: 'minted' })">
       <%= render "studio/modals/blocks/card_header",
             spinner: true,
             title: "Confirming your purchase…",
@@ -114,10 +150,39 @@
         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.
+        Holding to confirm now <strong>consumes one token on-chain</strong> to create
+        your contest entry.
       </p>
-      <button @click="$store.dsModals.close()" class="btn btn-primary btn-lg w-full">Done</button>
+      <button @click="confirmEntry()" class="btn btn-primary btn-lg w-full">Hold to Confirm Entry</button>
+      <button @click="$store.dsModals.close()"
+              class="block mx-auto mt-3 text-xs text-secondary hover:text-heading underline underline-offset-2">
+        I&rsquo;ll confirm later
+      </button>
+    </div>
+  </template>
+  <%# ===== ENTERING (contest enter processing — the on-chain consume) ===== %>
+  <template x-if="props.step === 'entering'">
+    <div x-init="autoAdvance('entering', { step: 'entered', txSignature: '5xTrDemoEntrySignature1234567890abc' })">
+      <%= render "studio/modals/blocks/card_header",
+            spinner: true,
+            title: "Confirming your entry…",
+            subtitle: "Consuming one token on-chain to create your contest entry." %>
+    </div>
+  </template>
+  <%# ===== ENTERED (contest entered — the shared Entry Confirmed finish) ===== %>
+  <template x-if="props.step === 'entered'">
+    <div>
+      <%= render "studio/modals/blocks/card_header",
+            size: :lg, icon_color: 'primary',
+            title: "Good Luck", subtitle: "Entry Confirmed" %>
+      <%= render "studio/modals/blocks/solana_tx_link", tx_signature_key: "props.txSignature" %>
+      <button @click="$store.dsModals.close()" class="btn btn-primary btn-lg w-full">Contest Lobby &#x2694;&#xFE0F;</button>
+      <button @click="$store.dsModals.close()"
+              class="block mx-auto mt-3 text-sm text-secondary hover:text-heading transition">
+        Dismiss
+      </button>
     </div>
   </template>
 </div>

data/app/views/style/modals/_onchain_tx.html.erb CHANGED Viewed

@@ -24,6 +24,30 @@
              }, 100);
            }
          });
+         // Demo auto-resolve (min-load convention): a processing modal opened with
+         // demoResolve holds its spinner at least MIN_LOAD_MS, then advances to
+         // success — or to error when demoError is set (the Processing specimen's
+         // success/error toggle). Guarded to the still-open, still-processing modal.
+         var entry = Alpine.store('dsModals').current();
+         if (!entry || entry.id !== 'onchain-tx' || !entry.props ||
+             entry.props.state !== 'processing' || !entry.props.demoResolve) return;
+         var minMs = entry.props.minDuration ||
+                     (window.StudioModals && window.StudioModals.MIN_LOAD_MS) || 1400;
+         window.StudioModals.holdAtLeast(minMs).then(function () {
+           var cur = Alpine.store('dsModals').current();
+           if (!cur || cur.id !== 'onchain-tx' || cur.props.state !== 'processing') return;
+           if (entry.props.demoError) {
+             Alpine.store('dsModals').advance({ state: 'error',
+               title: 'Could not confirm',
+               errorMessage: 'The transaction was rejected. Give it another try.' });
+           } else {
+             Alpine.store('dsModals').advance({ state: 'success',
+               txSignature: '5xTrDemoSignature1234567890abcXYZ',
+               successTitle: 'Mint complete',
+               successSubtitle: 'Your on-chain action confirmed.',
+               ctaLabel: 'View wallet', ctaHref: null });
+           }
+         });
        }
      }">

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

@@ -60,7 +60,18 @@
          if (!this.attested()) return;
          this.connecting = true; this.picking = name; this.error = '';
          var self = this;
-         setTimeout(function () { self.connecting = false; self.picking = ''; Alpine.store('dsModals').close(); }, 1100);
+         // DEMO walk continuity: a picked wallet runs a brief connecting state,
+         // then swaps to the on-chain tx modal in its processing state, which
+         // auto-resolves to on-chain success (demoResolve). So the glow follows
+         // Connect Wallet -> Processing -> On-chain success. (No real connect.)
+         setTimeout(function () {
+           self.connecting = false; self.picking = '';
+           Alpine.store('dsModals').swap('onchain-tx', {
+             state: 'processing', demoResolve: true, demoError: false,
+             title: 'Confirming on-chain',
+             message: 'Waiting for the wallet signature…'
+           });
+         }, 1100);
        },
        deepLink() {
          if (!this.attested()) return;

data/lib/studio/version.rb CHANGED Viewed

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.26.1"
+  VERSION = "0.28.0"
 end

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.26.1
+  version: 0.28.0
 platform: ruby
 authors:
 - Alex McRitchie
@@ -273,6 +273,7 @@ files:
 - app/views/studio/modals/_crop_photo.html.erb
 - app/views/studio/modals/_host.html.erb
 - app/views/studio/modals/_image_upload.html.erb
+- app/views/studio/modals/_load_convention.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