studio-engine 0.17.0 → 0.18.0

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

@@ -0,0 +1,690 @@
+<%#  Modals section of the living style guide (admin/style).
+
+     The REAL Turf Monster modal system, ported into the engine and made
+     live-openable. A page-scoped host (dsModals) mirrors the shared host's full
+     API — open / swap / advance / close / current + the enter-animation
+     registry — so every specimen opens the genuine full-size modal built from
+     the engine partials, without colliding with the app-level shared host that
+     application.html.erb already mounts on $store.modals.
+
+     Why page-scoped (dsModals) and not $store.modals: both MS and TM render the
+     shared studio/modals/host once at layout level with an unconditional x-if on
+     $store.modals.current(), registering ONLY that app's own modal ids. Pushing
+     a novel specimen id onto $store.modals would make that host paint an empty
+     card behind ours. So this section owns a tiny, self-contained store + overlay
+     and registers all specimen content itself.
+
+     Groups: Auth (the sign-in step machine), Profile (crop / upload, opened
+     through studio/cropper_assets), Web3 (wallet-connect / on-chain-tx / deposit,
+     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).
+
+     The modal motion (modal-card-* / modal-backdrop-* keyframes + studio-modal-
+     drain + body.modal-open) ships in engine-motion.css, so a consumer that
+     bundles it animates these for real. %>
+<%
+  web3_on     = Studio.feature?(:web3)
+  leveling_on = Studio.feature?(:leveling)
+
+  # Auth method-toggle defaults — mirror the app's Studio.auth_method? config;
+  # Solana Wallet also needs the web3 capability, so it defaults OFF on an app
+  # (like McRitchie Studio) that ships web3 off.
+  ml_default = Studio.auth_method?(:magic_link)
+  g_default  = Studio.auth_method?(:google)
+  w_default  = Studio.auth_method?(:wallet) && web3_on
+
+  # 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|
+    cur  = "$store.dsModals.current()"
+    expr = "#{cur} && #{cur}.id === '#{id}'"
+    expr += " && (#{cur}.props.step || 'credentials') === '#{step}'" if step
+    expr += (crop == :crop ? " && !!#{cur}.props.cropReady" : " && !#{cur}.props.cropReady") unless crop.nil?
+    expr
+  end
+%>
+<section id="modals" class="space-y-10" style="scroll-margin-top: calc(var(--nav-h, 0px) + 5rem)"
+         x-data="{}" @ds-modal-close.window="$store.dsModals.close()">
+  <div class="space-y-1">
+    <h2 class="text-2xl font-bold text-heading">Modals</h2>
+    <p class="text-muted text-sm">
+      The shared modal host and the reusable modal partials, ported from Turf
+      Monster into the engine. Each tile is a <strong>visual representation, not
+      to scale</strong> &mdash; <strong>click a whole card</strong> to open the real
+      modal (Enter/Space work too). The header <strong>Copy</strong> yields an
+      agent-ready reference you can paste into a chat; option <strong>toggles</strong>
+      configure the modal before you open it; and the card that matches the open
+      modal + step <strong>glows</strong>, following the step machine as it advances.
+    </p>
+  </div>
+
+  <%# ---- Page-scoped modal host (dsModals) --------------------------------
+      The full store API — open(id, props, opts) LIFO stack, swap() directional
+      slide, advance(patch, opts) in-modal step change, close / closeAll,
+      current(), cardClasses() driving the enter/exit animation registry, and
+      body.modal-open scroll lock. Plus the dsSolanaModal proxy over the store
+      (stable show/success/error/close API for the on-chain-tx modal) and the
+      credential stubs (postMagicLink / walletProvider / solanaWalletConnect) so
+      the auth + wallet specimens run without an auth backend. Defined in a plain
+      inline script (no importmap dependency) so Alpine's defer finds it. %>
+  <script>
+    (function () {
+      // === Credential stubs — never clobber a real one an app already ships. ==
+      window.postMagicLink = window.postMagicLink || function () {
+        return Promise.resolve({ success: true });
+      };
+      window.solanaWalletConnect = window.solanaWalletConnect || function () {
+        return { connecting: false, error: null, statusText: 'Connect Wallet',
+                 walletAvailable: false, isMobile: false, connect: function () {} };
+      };
+      window.walletProvider = window.walletProvider || {
+        available: function () { return [{ name: 'Phantom' }, { name: 'Solflare' }]; },
+        isMobile: function () { return false; },
+        isAvailable: function () { return false; }
+      };
+
+      document.addEventListener('alpine:init', function () {
+        if (Alpine.store('dsModals')) return;
+
+        // Enter/exit animation registry — keys map to a CSS class (engine-
+        // motion.css) plus its duration in ms. Open a modal with
+        // { enterAnim: 'shake' } / { exitAnim: 'slide' } to pick one; omitted
+        // uses 'pop' (the spring bounce). The directional swap()/advance()
+        // slide uses the modal-card-swap-* classes regardless of these keys.
+        var CLOSE_ANIM_MS = 220;
+        var SWAP_IN_MS    = 220;
+        var Anim = {
+          enter: {
+            pop:   { cls: 'modal-card-mount',    ms: 320 },
+            shake: { cls: 'modal-card-shake-in', ms: 600 },
+            slide: { cls: 'modal-card-swap-in',  ms: 220 }
+          },
+          exit: {
+            pop:   { cls: 'modal-card-unmount',  ms: 220 },
+            slide: { cls: 'modal-card-swap-out', ms: 220 }
+          }
+        };
+        function modalAnim(channel, key) {
+          var table = Anim[channel] || {};
+          return table[key] || table.pop;
+        }
+
+        Alpine.store('dsModals', {
+          stack: [],
+          current: function () { return this.stack.length ? this.stack[this.stack.length - 1] : null; },
+          isOpen: function (id) {
+            for (var i = 0; i < this.stack.length; i++) { if (this.stack[i].id === id) return true; }
+            return false;
+          },
+          // open(id, props, opts) — opts.replace swaps the top entry with a
+          // directional slide (forward = exit right / enter left); otherwise
+          // push (stacking — closing reveals the entry underneath).
+          open: function (id, props, opts) {
+            props = props || {}; opts = opts || {};
+            var self = this;
+            if (opts.replace && this.stack.length > 0) {
+              var current = this.current();
+              if (current && !current._closing) {
+                var dir = (opts.direction === 'back') ? 'back' : 'forward';
+                current._swapDir = dir;
+                current._swappingOut = true;
+                current._closing = true;
+                setTimeout(function () {
+                  var idx = self.stack.indexOf(current);
+                  var newEntry = { id: id, props: props, _swappingIn: true, _swapDir: dir };
+                  if (idx >= 0) { self.stack[idx] = newEntry; } else { self.stack.push(newEntry); }
+                  self._sync();
+                  setTimeout(function () {
+                    newEntry._swappingIn = false; newEntry._swapDir = null; newEntry._settled = true;
+                  }, SWAP_IN_MS);
+                }, CLOSE_ANIM_MS);
+                return;
+              }
+              this.stack[this.stack.length - 1] = { id: id, props: props };
+            } else {
+              this.stack.push({ id: id, props: props });
+            }
+            this._sync();
+          },
+          // swap(id, props, opts) ≡ open with { replace: true }.
+          swap: function (id, props, opts) {
+            return this.open(id, props, Object.assign({ replace: true }, opts || {}));
+          },
+          // advance(patch, opts) — in-flow step change: same directional slide as
+          // swap() but WITHOUT replacing the stack entry, so the modal's outer
+          // x-data scope survives (the auth step machine relies on this).
+          advance: function (propsPatch, opts) {
+            opts = opts || {};
+            var cur = this.current();
+            if (!cur || cur._closing || cur._swappingOut) return;
+            var self = this;
+            cur._swapDir = (opts.direction === 'back') ? 'back' : 'forward';
+            cur._swappingOut = true;
+            setTimeout(function () {
+              if (self.stack.indexOf(cur) < 0) return;
+              if (propsPatch) Object.assign(cur.props, propsPatch);
+              cur._swappingOut = false;
+              cur._swappingIn = true;
+              setTimeout(function () {
+                cur._swappingIn = false; cur._swapDir = null; cur._settled = true;
+              }, SWAP_IN_MS);
+            }, CLOSE_ANIM_MS);
+          },
+          close: function () {
+            var self = this;
+            var entry = this.current();
+            if (!entry || entry._closing) return;
+            entry._closing = true;
+            setTimeout(function () {
+              var idx = self.stack.indexOf(entry);
+              if (idx >= 0) { self.stack.splice(idx, 1); self._sync(); }
+            }, modalAnim('exit', entry.props && entry.props.exitAnim).ms);
+          },
+          closeAll: function () { this.stack = []; this._sync(); },
+          cardClasses: function () {
+            var c = this.current();
+            if (!c) return {};
+            var o = {};
+            if (!c._settled && !c._swappingIn && !c._swappingOut && !c._closing) {
+              o[modalAnim('enter', c.props && c.props.enterAnim).cls] = true;
+            }
+            if (c._closing && !c._swappingOut) {
+              o[modalAnim('exit', c.props && c.props.exitAnim).cls] = true;
+            }
+            o['modal-card-swap-in']       = !!(c._swappingIn  && c._swapDir !== 'back');
+            o['modal-card-swap-out']      = !!(c._swappingOut && c._swapDir !== 'back');
+            o['modal-card-swap-in-back']  = !!(c._swappingIn  && c._swapDir === 'back');
+            o['modal-card-swap-out-back'] = !!(c._swappingOut && c._swapDir === 'back');
+            return o;
+          },
+          _sync: function () {
+            if (this.stack.length) { document.body.classList.add('modal-open'); }
+            else { document.body.classList.remove('modal-open'); }
+          }
+        });
+
+        // dsSolanaModal — stateless proxy over dsModals for the on-chain-tx
+        // modal. Reads the current 'onchain-tx' entry's props so the partial's
+        // $store.dsSolanaModal.{state,title,txSignature,...} reads stay stable.
+        Alpine.store('dsSolanaModal', {
+          _cur: function () { var c = Alpine.store('dsModals').current(); return (c && c.id === 'onchain-tx') ? c : null; },
+          _read: function (k, fb) { var c = this._cur(); return c ? (c.props[k] !== undefined ? c.props[k] : fb) : fb; },
+          close: function () { if (this._cur()) Alpine.store('dsModals').close(); },
+          get state()           { return this._read('state', null); },
+          get title()           { return this._read('title', ''); },
+          get message()         { return this._read('message', ''); },
+          get txSignature()     { return this._read('txSignature', null); },
+          get errorMessage()    { return this._read('errorMessage', ''); },
+          get successTitle()    { return this._read('successTitle', ''); },
+          get successSubtitle() { return this._read('successSubtitle', ''); },
+          get ctaLabel()        { return this._read('ctaLabel', ''); },
+          get ctaHref()         { return this._read('ctaHref', ''); }
+        });
+      });
+    })();
+  </script>
+
+  <%# 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). %>
+  <%= render "studio/cropper_assets" %>
+
+  <%# ---- The overlay: one backdrop + card; every specimen's real content is a
+      single-root <template x-if> gated on the current modal id. Faithful to the
+      shared host — backdrop fade, scroll lock, escape + click-self dismissal
+      gated on props.dismissible (never @click.outside, so a hold modal can't
+      close itself on the button release). %>
+  <template x-if="$store.dsModals.current()">
+    <div class="fixed inset-0 z-[120] flex items-center justify-center p-4 modal-backdrop-mount"
+         :class="$store.dsModals.current()?._closing && 'modal-backdrop-unmount'"
+         style="background: rgba(0,0,0,0.6)"
+         role="dialog" aria-modal="true"
+         @keydown.escape.window="$store.dsModals.current() && $store.dsModals.current().props.dismissible !== false && $store.dsModals.close()"
+         @click.self="$store.dsModals.current() && $store.dsModals.current().props.dismissible !== false && $store.dsModals.close()">
+      <div class="bg-surface rounded-xl border border-subtle shadow-2xl p-6 max-w-sm w-full"
+           :class="$store.dsModals.cardClasses()">
+
+        <%# --- Auth suite --- %>
+        <template x-if="$store.dsModals.current().id === 'auth'">
+          <div><%= render "style/modals/auth" %></div>
+        </template>
+
+        <%# --- Profile (real engine partials, opened on dsModals) --- %>
+        <template x-if="$store.dsModals.current().id === 'crop-photo'">
+          <div><%= render "studio/modals/crop_photo", store: "dsModals" %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'saving'">
+          <div><%= render "studio/modals/saving", store: "dsModals" %></div>
+        </template>
+
+        <%# --- Web3 --- %>
+        <template x-if="$store.dsModals.current().id === 'wallet-connect'">
+          <div><%= render "style/modals/wallet_connect" %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'onchain-tx'">
+          <div><%= render "style/modals/onchain_tx" %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'wallet-deposit'">
+          <div><%= render "style/modals/wallet_deposit" %></div>
+        </template>
+
+        <%# --- System and status (reusable card blocks) --- %>
+        <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>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'ds-success'">
+          <div><%= render "studio/modals/blocks/success_card",
+                    title: "Entry confirmed", message: "You're in — good luck!",
+                    icon_color: "success", cta_label: "Continue", cta_event: "ds-modal-close" do %><% end %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'ds-error'">
+          <div><%= render "studio/modals/blocks/error_card",
+                    title: "Couldn't connect", icon_emoji: "⚠️",
+                    message: "Something went wrong. Give it another try.",
+                    cta_label: "Try again", cta_event: "ds-modal-close",
+                    secondary_label: "Dismiss", secondary_event: "ds-modal-close" %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'ds-countdown'">
+          <div x-data="{ n: 5, t: 5, timer: null }"
+               x-init="timer = setInterval(() => { if (n > 0) { n--; } else { clearInterval(timer); } }, 1000)">
+            <div class="text-center mb-4">
+              <p class="text-heading font-bold text-lg mb-1">Heading to the lobby</p>
+              <p class="text-secondary text-xs">Sit tight — this happens automatically.</p>
+            </div>
+            <%= render "studio/modals/blocks/progress_countdown", current_key: "n", total_key: "t" %>
+            <button type="button" class="btn btn-outline btn-sm w-full mt-4"
+                    @click="$store.dsModals.close()">Cancel</button>
+          </div>
+        </template>
+
+        <%# --- Templates (copy-from archetypes) --- %>
+        <template x-if="$store.dsModals.current().id === 'template-wizard'">
+          <div><%= render "studio/modals/templates/wizard", modal_store: "dsModals" %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'template-form'">
+          <div><%= render "studio/modals/templates/form", modal_store: "dsModals" %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'template-action'">
+          <div><%= render "studio/modals/templates/action", modal_store: "dsModals" %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'template-status'">
+          <div><%= render "studio/modals/templates/status", modal_store: "dsModals" %></div>
+        </template>
+        <template x-if="$store.dsModals.current().id === 'template-success'">
+          <div><%= render "studio/modals/templates/success", modal_store: "dsModals" %></div>
+        </template>
+
+        <%# --- Rewards / leveling --- %>
+        <template x-if="$store.dsModals.current().id === 'levelup'">
+          <div><%= render "studio/modals/blocks/success_card",
+                    title: "Level 10!", message: "You leveled up.", icon_emoji: "🎉",
+                    large_title: true, cta_label: "Nice", cta_event: "ds-modal-close" do %>
+            <div class="flex items-center justify-center">
+              <span class="sheen sheen--loop studio-glow studio-glow--pulse inline-flex h-14 w-14 items-center justify-center rounded-full text-white text-lg font-extrabold"
+                    style="background: var(--color-cta); --studio-glow-color: var(--color-success)">10</span>
+            </div>
+          <% end %></div>
+        </template>
+
+      </div>
+    </div>
+  </template>
+
+  <%# ===================================================================== %>
+  <%# 1. AUTH suite %>
+  <%# ===================================================================== %>
+  <section class="space-y-5">
+    <div class="space-y-1">
+      <h3 class="text-xl font-bold text-heading">Auth</h3>
+      <p class="text-muted text-sm">
+        The sign-in step machine
+        (<code class="font-mono text-2xs">style/modals/_auth</code>) — one modal,
+        internal steps <code class="font-mono text-2xs">credentials &rarr;
+        magic-link-sent &rarr; magic-link-resent</code>. Toggle the methods below a
+        card, then open it to watch them gate the modal. The live card
+        <strong>glows</strong>, and the glow follows the step machine as you advance.
+      </p>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <%# Sign in — method toggles + the credentials-step glow. %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Sign in",
+            reference: %(the Auth "Sign in" modal (studio-engine style/modals/_auth, step 'credentials') — open with $store.dsModals.open('auth', { step: 'credentials', picksRequired: 6 }); toggle methods via props.methods { magicLink, google, wallet } + props.terms),
+            card_data: "opts: { magicLink: #{ml_default}, google: #{g_default}, wallet: #{w_default}, terms: true }",
+            open_expr: "$store.dsModals.open('auth', { step: 'credentials', picksRequired: 6, methods: { magicLink: opts.magicLink, google: opts.google, wallet: opts.wallet }, terms: opts.terms })",
+            glow_when: ds_glow.call("auth", step: "credentials"),
+            toggles: [
+              { model: "opts.magicLink", label: "Magic Link" },
+              { model: "opts.google",    label: "Google" },
+              { model: "opts.wallet",    label: "Solana Wallet" },
+              { model: "opts.terms",     label: "Terms" }
+            ] } 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-16 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-border-strong)"></span>
+          <span class="block h-6 w-full rounded" style="background: var(--color-cta); opacity: .5"></span>
+        </div>
+      <% end %>
+
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Magic link sent",
+            reference: %(the Auth "Magic link sent" step (style/modals/_auth, step 'magic-link-sent') — open with $store.dsModals.open('auth', { step: 'magic-link-sent', sentEmail: 'you@example.com' })),
+            open_expr: "$store.dsModals.open('auth', { step: 'magic-link-sent', sentEmail: 'you@example.com' })",
+            glow_when: ds_glow.call("auth", step: "magic-link-sent") } 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-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 %>
+
+      <%# NEW — the magic-link-resent step (the resend confirmation slide). %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Magic link resent",
+            reference: %(the Auth "Magic link resent" step (style/modals/_auth, step 'magic-link-resent') — open with $store.dsModals.open('auth', { step: 'magic-link-resent', sentEmail: 'you@example.com' })),
+            open_expr: "$store.dsModals.open('auth', { step: 'magic-link-resent', sentEmail: 'you@example.com' })",
+            glow_when: ds_glow.call("auth", step: "magic-link-resent") } 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-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 %>
+
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Redirect (drain)",
+            reference: %(the Auth "Redirect" step (style/modals/_auth, step 'redirect', drain CTA) — open with $store.dsModals.open('auth', { step: 'redirect', icon: '📍', title: 'One more step', message: 'Taking you there.', url: null })),
+            open_expr: "$store.dsModals.open('auth', { step: 'redirect', icon: '📍', title: 'One more step', message: 'Taking you there.', url: null })",
+            glow_when: ds_glow.call("auth", step: "redirect") } 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-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 %>
+    </div>
+  </section>
+
+  <%# ===================================================================== %>
+  <%# 2. PROFILE — crop / upload, live via cropper_assets %>
+  <%# ===================================================================== %>
+  <section class="space-y-5">
+    <div class="space-y-1">
+      <h3 class="text-xl font-bold text-heading">Profile</h3>
+      <p class="text-muted text-sm">
+        The avatar / photo modals ship from the engine
+        (<code class="font-mono text-2xs">studio/modals/_crop_photo</code>,
+        <code class="font-mono text-2xs">studio/modals/_image_upload</code>) and
+        open live here — <code class="font-mono text-2xs">studio/cropper_assets</code>
+        is rendered above, so cropper.js loads and the modals mount on this page's
+        host.
+      </p>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <%# Image upload FIRST — the empty picker (crop-photo opened with no imageUrl).
+          cropReady: false is the defined starting sub-state; the crop factory
+          flips it true once an image is picked, moving the glow to Crop photo. %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Image upload",
+            reference: %(the Profile "Image upload" modal (studio-engine studio/modals/_crop_photo as the empty picker) — open with $store.dsModals.open('crop-photo', {})),
+            open_expr: "$store.dsModals.open('crop-photo', { cropReady: false })",
+            glow_when: ds_glow.call("crop-photo", crop: :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-20 h-20 rounded-lg border-2 border-dashed flex items-center justify-center" style="border-color: var(--color-border-strong)">
+            <span class="text-2xl leading-none">⬆️</span>
+          </div>
+          <span class="block h-1.5 w-20 mx-auto rounded" style="background: var(--color-text); opacity: .12"></span>
+        </div>
+      <% end %>
+
+      <%# Crop photo SECOND — the cropper mounted on a chosen image. cropReady:
+          true glows this card immediately on a direct open (the factory also sets
+          it when the cropper mounts). %>
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Crop photo",
+            reference: %(the Profile "Crop photo" modal (studio/modals/_crop_photo + studio/_cropper_assets) — open with $store.dsModals.open('crop-photo', { imageUrl: '/icon.png', aspectRatio: 1 })),
+            open_expr: "$store.dsModals.open('crop-photo', { imageUrl: '/icon.png', aspectRatio: 1, cropReady: true })",
+            glow_when: ds_glow.call("crop-photo", crop: :crop) } 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-20 h-20 rounded-lg border-2 flex items-center justify-center" style="border-color: var(--color-cta)">
+            <span class="text-muted text-2xs">Crop area</span>
+          </div>
+          <span class="block h-4 w-full rounded" style="background: var(--color-cta)"></span>
+        </div>
+      <% end %>
+
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Saving card",
+            reference: %(the Profile "Saving" card (studio/modals/_saving loading state) — open with $store.dsModals.open('saving', { title: 'Saving…' })),
+            open_expr: "$store.dsModals.open('saving', { title: 'Saving…' })",
+            glow_when: ds_glow.call("saving") } 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-8 h-8 rounded-full border-4 animate-spin" style="border-color: color-mix(in srgb, var(--color-cta) 30%, transparent); border-top-color: var(--color-cta)"></div>
+          <span class="block h-2 w-20 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+        </div>
+      <% end %>
+    </div>
+  </section>
+
+  <%# ===================================================================== %>
+  <%# 3. WEB3 — gated by Studio.feature?(: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>
+        <% if web3_on %>
+          <span class="badge" style="color: var(--color-success); border-color: var(--color-success)">enabled on this app</span>
+        <% else %>
+          <span class="badge" style="color: var(--color-warning); border-color: var(--color-warning)">disabled on this app</span>
+        <% end %>
+      </div>
+      <p class="text-muted text-sm">
+        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." %>
+      </p>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <%= 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')),
+            open_expr: "$store.dsModals.open('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>
+          <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-border-strong)"></span>
+        </div>
+      <% end %>
+
+      <%= 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…' })",
+            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>
+          <span class="block h-2 w-24 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+        </div>
+      <% end %>
+
+      <%= 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' })),
+            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 })",
+            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)">
+            <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-24 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+        </div>
+      <% end %>
+
+      <%= 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.' })),
+            open_expr: "$store.dsModals.open('onchain-tx', { state: 'error', title: 'Could not confirm', errorMessage: 'The transaction was rejected. Give it another try.' })",
+            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>
+          <span class="block h-2 w-24 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+        </div>
+      <% end %>
+
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Wallet deposit",
+            reference: %(the Web3 "Wallet deposit" top-up card (style/modals/_wallet_deposit) — open with $store.dsModals.open('wallet-deposit', { neededCents: 500, usdcCents: 120, usdtCents: 0, address: 'Fo1L5…' })),
+            open_expr: "$store.dsModals.open('wallet-deposit', { neededCents: 500, usdcCents: 120, usdtCents: 0, address: 'Fo1L5demoWALLETaddr9xQ2' })",
+            disabled: !web3_on, openable: true } do %>
+        <div class="pointer-events-none w-40 rounded-lg bg-surface border border-subtle shadow p-4 text-center space-y-2">
+          <span class="block h-2 w-24 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+          <span class="block h-5 w-full rounded" style="background: var(--color-cta)"></span>
+          <span class="block h-5 w-full rounded border" style="border-color: var(--color-border-strong)"></span>
+        </div>
+      <% end %>
+    </div>
+  </section>
+
+  <%# ===================================================================== %>
+  <%# 4. SYSTEM AND STATUS (reusable card blocks) %>
+  <%# ===================================================================== %>
+  <section class="space-y-5">
+    <div class="space-y-1">
+      <h3 class="text-xl font-bold text-heading">System &amp; status</h3>
+      <p class="text-muted text-sm">
+        The reusable card blocks under <code class="font-mono text-2xs">studio/modals/blocks/</code> &mdash;
+        the studio-canonical processing, success, error, and countdown states.
+      </p>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Processing",
+            reference: %(the "Processing" card block (studio/modals/blocks/_processing_card) — open with $store.dsModals.open('ds-processing')),
+            open_expr: "$store.dsModals.open('ds-processing')" } 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-6 h-6 rounded-full border-2 animate-spin" style="border-color: color-mix(in srgb, var(--color-cta) 30%, transparent); border-top-color: var(--color-cta)"></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 %>
+
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Success",
+            reference: %(the "Success" card block (studio/modals/blocks/_success_card, entry-confirmed style) — open with $store.dsModals.open('ds-success')),
+            open_expr: "$store.dsModals.open('ds-success')" } do %>
+        <div class="pointer-events-none w-40 rounded-lg bg-surface border border-subtle shadow p-4 text-center space-y-2">
+          <div class="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-24 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 %>
+
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Error / retry",
+            reference: %(the "Error" card block (studio/modals/blocks/_error_card) — open with $store.dsModals.open('ds-error')),
+            open_expr: "$store.dsModals.open('ds-error')" } 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-24 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+          <span class="block h-4 w-20 mx-auto rounded border" style="border-color: var(--color-border-strong)"></span>
+        </div>
+      <% end %>
+
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Countdown",
+            reference: %(the "Countdown" progress block (studio/modals/blocks/_progress_countdown) — open with $store.dsModals.open('ds-countdown')),
+            open_expr: "$store.dsModals.open('ds-countdown')" } do %>
+        <div class="pointer-events-none w-40 rounded-lg bg-surface border border-subtle shadow p-4 text-center space-y-2">
+          <span class="block h-2 w-24 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
+          <div class="w-full rounded-full overflow-hidden" style="height: 6px; background: rgba(128,128,128,0.2)">
+            <div style="height: 100%; width: 60%; border-radius: 9999px; background: var(--color-cta)"></div>
+          </div>
+          <span class="block h-1.5 w-16 mx-auto rounded" style="background: var(--color-text); opacity: .12"></span>
+        </div>
+      <% end %>
+    </div>
+  </section>
+
+  <%# ===================================================================== %>
+  <%# 5. TEMPLATES (copy-from archetypes) %>
+  <%# ===================================================================== %>
+  <section class="space-y-5">
+    <div class="space-y-1">
+      <h3 class="text-xl font-bold text-heading">Templates</h3>
+      <p class="text-muted text-sm">
+        Reusable archetypes under <code class="font-mono text-2xs">studio/modals/templates/</code> &mdash;
+        the copy-from reference cards for a new modal (wizard, form, action,
+        status, success).
+      </p>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
+      <% [
+           ["template-wizard",  "Wizard",  "🧭", "studio/modals/templates/_wizard"],
+           ["template-form",    "Form",    "📝", "studio/modals/templates/_form"],
+           ["template-action",  "Action",  "❓", "studio/modals/templates/_action"],
+           ["template-status",  "Status",  "⏳", "studio/modals/templates/_status"],
+           ["template-success", "Success", "✅", "studio/modals/templates/_success"]
+         ].each do |id, label, glyph, partial| %>
+        <%= render layout: "style/modal_specimen", locals: {
+              label:     label,
+              reference: %(the "#{label}" modal template (#{partial}) — open with $store.dsModals.open('#{id}')),
+              open_expr: "$store.dsModals.open('#{id}')" } do %>
+          <div class="pointer-events-none w-32 rounded-lg bg-surface border border-subtle shadow p-4 text-center space-y-2">
+            <div class="text-2xl leading-none"><%= glyph %></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); opacity: .6"></span>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+  </section>
+
+  <%# ===================================================================== %>
+  <%# 6. REWARDS / leveling (gated by Studio.feature?(:leveling)) %>
+  <%# ===================================================================== %>
+  <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">Rewards</h3>
+        <% if leveling_on %>
+          <span class="badge" style="color: var(--color-success); border-color: var(--color-success)">enabled on this app</span>
+        <% else %>
+          <span class="badge" style="color: var(--color-warning); border-color: var(--color-warning)">disabled on this app</span>
+        <% 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
+        <%= leveling_on ? "live." : "greyed and badged — but STILL openable as a preview." %>
+      </p>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <%= render layout: "style/modal_specimen", locals: {
+            label:     "Level up",
+            reference: %(the Rewards "Level up" celebration (studio/modals/blocks/_success_card with the sheen + studio-glow badge) — open with $store.dsModals.open('levelup')),
+            open_expr: "$store.dsModals.open('levelup')",
+            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="inline-flex h-8 w-8 items-center justify-center rounded-full text-white text-sm font-extrabold" style="background: var(--color-cta)">10</span>
+          <span class="block h-4 w-full rounded" style="background: var(--color-cta)"></span>
+        </div>
+      <% end %>
+    </div>
+  </section>
+</section>