studio-engine 0.17.0 → 0.19.0

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

@@ -0,0 +1,62 @@
+<%#
+  On-chain transaction modal — design-system port of turf-monster's
+  modals/_onchain_tx, wired to the living style guide's page-scoped host. Reads
+  display state from $store.dsSolanaModal (a stateless proxy over $store.dsModals
+  that keeps the show/success/error API stable — the same façade shape the real
+  app ships). The proxy's methods push/pop the dsModals stack so this partial
+  renders when opened.
+
+  Three states — processing / success / error — cover the whole non-domain-
+  specific tx flow. The DS preview always uses the GENERIC success card
+  (studio/modals/blocks/_onchain_success); the rich contest-entry celebration
+  (seeds bar + level-up + lobby drain) is turf-specific and stays in the
+  consumer app.
+
+  Single root: content lives inside one <div> so Alpine's <template x-if> clones
+  it whole.
+%>
+<div x-data="{
+       init() {
+         this.$watch('$store.dsSolanaModal.state', function(val) {
+           if (val === 'success') {
+             setTimeout(function() {
+               try { if (window.fireSuccessConfetti) window.fireSuccessConfetti(); } catch (_) {}
+             }, 100);
+           }
+         });
+       }
+     }">
+
+  <%# === PROCESSING ====================================================== %>
+  <template x-if="$store.dsSolanaModal.state === 'processing'">
+    <%= render "studio/modals/blocks/card_header",
+          spinner: true,
+          title_key:    "$store.dsSolanaModal.title",
+          subtitle_key: "$store.dsSolanaModal.message" %>
+  </template>
+
+  <%# === SUCCESS (generic) =============================================== %>
+  <template x-if="$store.dsSolanaModal.state === 'success'">
+    <%= render "studio/modals/blocks/onchain_success",
+        tx_signature_key: "$store.dsSolanaModal.txSignature",
+        title_key:        "$store.dsSolanaModal.successTitle",
+        subtitle_key:     "$store.dsSolanaModal.successSubtitle",
+        cta_label_key:    "$store.dsSolanaModal.ctaLabel",
+        cta_href_key:     "$store.dsSolanaModal.ctaHref",
+        modal_store:      "dsModals" %>
+  </template>
+
+  <%# === ERROR =========================================================== %>
+  <template x-if="$store.dsSolanaModal.state === 'error'">
+    <div>
+      <%= render "studio/modals/blocks/card_header",
+            icon: :error,
+            title_key:    "$store.dsSolanaModal.title",
+            subtitle_key: "$store.dsSolanaModal.errorMessage" %>
+      <button @click="$store.dsSolanaModal.close()"
+              class="block mx-auto mt-3 text-sm text-secondary hover:text-heading transition">
+        Close
+      </button>
+    </div>
+  </template>
+</div>

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

@@ -0,0 +1,138 @@
+<%#
+  "Connect Wallet" picker — design-system port of turf-monster's
+  modals/_wallet_connect, wired to the living style guide's page-scoped host
+  ($store.dsModals). Faithful reown-style picker: detected wallets on top
+  (click to connect), featured-but-missing wallets below (install links), a
+  mobile deep-link row, and the legal-age attestation for guests.
+
+  Self-contained: window.walletProvider (a page stub) supplies the detected
+  wallet list; pick() runs a brief connecting state then closes (no real
+  connect). Opened via open('wallet-connect', {...}) or swap()ed to from auth.
+
+  Single root: the outer <div> is the host's required root.
+%>
+<div x-data="{
+       get props() { var c = Alpine.store('dsModals').current(); return (c && c.props) || {}; },
+       wallets: [],
+       installs: [
+         { name: 'Phantom',  url: 'https://phantom.app/download',  icon: '/wallet-phantom.png' },
+         { name: 'Solflare', url: 'https://solflare.com/download', icon: '/wallet-solflare.png' },
+         { name: 'Backpack', url: 'https://backpack.app/downloads', icon: '/wallet-backpack.png' }
+       ],
+       connecting: false,
+       picking: '',
+       error: '',
+       ageAttested: false,
+       ageError: false,
+       get needsAttestation() { return !this.props.linkMode; },
+       attested() {
+         if (!this.needsAttestation) return true;
+         if (this.ageAttested) return true;
+         this.ageError = true;
+         return false;
+       },
+       init() {
+         this.ageAttested = this.props.ageAttested === true;
+         this.refresh();
+       },
+       refresh() {
+         this.wallets = (window.walletProvider && window.walletProvider.available && window.walletProvider.available()) || [];
+       },
+       get isMobile() { return !!(window.walletProvider && window.walletProvider.isMobile && window.walletProvider.isMobile()); },
+       hasWallet(name) {
+         var n = ('' + name).toLowerCase();
+         return (this.wallets || []).some(function(w) { return w.name && w.name.toLowerCase() === n; });
+       },
+       get missingInstalls() {
+         var self = this;
+         return this.installs.filter(function(i) { return !self.hasWallet(i.name); });
+       },
+       pick(name) {
+         if (this.connecting) return;
+         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);
+       },
+       deepLink() {
+         if (!this.attested()) return;
+         this.pick('Phantom');
+       },
+       back() {
+         if (this.connecting) return;
+         if (this.props.backTo === 'auth') {
+           Alpine.store('dsModals').swap('auth',
+             { step: 'credentials', submitting: null, formError: '' },
+             { direction: 'back' });
+         } else {
+           Alpine.store('dsModals').close();
+         }
+       }
+     }"
+     class="relative">
+
+  <div class="relative mb-4">
+    <h3 class="text-heading font-bold text-lg text-center pt-1">Connect Wallet</h3>
+    <button @click="$store.dsModals.close()"
+            class="absolute top-0 right-0 -mr-1 text-secondary hover:text-heading text-xl leading-none"
+            aria-label="Close">&times;</button>
+  </div>
+
+  <template x-if="needsAttestation">
+    <div class="mb-3">
+      <%= render "studio/modals/shared/age_attestation" %>
+    </div>
+  </template>
+
+  <div class="space-y-2">
+    <%# Detected wallets — click to connect. %>
+    <template x-for="w in wallets" :key="w.name">
+      <button type="button" @click="pick(w.name)" :disabled="connecting"
+              class="w-full flex items-center gap-3 p-3 rounded-xl bg-surface-alt border border-strong hover:bg-surface transition text-left disabled:opacity-60 disabled:cursor-wait">
+        <span class="w-9 h-9 rounded-lg bg-inset flex items-center justify-center text-sm font-bold text-heading" x-text="w.name.slice(0,1)"></span>
+        <span class="font-semibold text-heading" x-text="w.name"></span>
+        <span class="ml-auto flex items-center gap-2">
+          <span x-show="picking === w.name" class="inline-flex items-center gap-1.5 text-xs text-secondary"><span class="spinner" aria-hidden="true"></span>Connecting…</span>
+          <span x-show="picking !== w.name" class="badge border-primary text-primary">Installed</span>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-muted">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+          </svg>
+        </span>
+      </button>
+    </template>
+
+    <%# Featured wallets that aren't installed — open the install page. %>
+    <template x-for="i in missingInstalls" :key="i.name">
+      <a :href="i.url" target="_blank" rel="noopener noreferrer"
+         class="w-full flex items-center gap-3 p-3 rounded-xl bg-surface-alt border border-strong hover:bg-surface transition no-underline">
+        <span class="w-9 h-9 rounded-lg bg-inset flex items-center justify-center text-sm font-bold text-muted" x-text="i.name.slice(0,1)"></span>
+        <span class="font-semibold text-heading" x-text="i.name"></span>
+        <span class="ml-auto flex items-center gap-2">
+          <span class="text-xs text-muted uppercase tracking-wide">Install</span>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-muted">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+          </svg>
+        </span>
+      </a>
+    </template>
+
+    <%# Mobile (no extension) — deep-link into the Phantom app. %>
+    <button x-show="isMobile" type="button" @click="deepLink()"
+            class="w-full flex items-center gap-3 p-3 rounded-xl bg-surface-alt border border-strong hover:bg-surface transition text-left">
+      <span class="w-9 h-9 rounded-lg bg-inset flex items-center justify-center text-sm font-bold text-heading">P</span>
+      <span class="font-semibold text-heading">Open in Phantom app</span>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="ml-auto w-4 h-4 text-muted">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+      </svg>
+    </button>
+  </div>
+
+  <template x-if="error">
+    <p class="text-red-400 text-sm mt-3 text-center" x-text="error"></p>
+  </template>
+
+  <button type="button" @click="back()" :disabled="connecting"
+          class="mt-4 w-full text-center text-sm text-secondary hover:text-heading disabled:opacity-50">
+    &larr; Back
+  </button>
+</div>

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

@@ -0,0 +1,56 @@
+<%#
+  Wallet deposit / top-up modal — design-system port of turf-monster's
+  modals/_wallet_deposit, wired to the living style guide's page-scoped host
+  ($store.dsModals). Single-card design (no step machinery): the shortfall
+  math, a "Pay with Card" CTA, and a copy-your-address self-fund row.
+
+  Self-contained: the production Stripe form + CDP onramp button are replaced
+  with a neutral demo CTA, and the wallet address reads from props (a demo
+  value) rather than $store.session. Opened via
+  open('wallet-deposit', { neededCents, usdcCents, usdtCents, address }).
+
+  Single root: the outer <div> is the host's required root.
+%>
+<div x-data="{ get props() { return (Alpine.store('dsModals').current() || {}).props || {} } }"
+     class="relative">
+
+  <button @click="$store.dsModals.close()"
+          class="absolute top-0 right-0 -mt-2 -mr-2 text-secondary hover:text-heading text-xl leading-none z-10"
+          aria-label="Close">&times;</button>
+
+  <div class="text-center pt-1 mb-3">
+    <h3 class="text-heading font-bold text-lg leading-tight">Top Up Your Wallet</h3>
+  </div>
+  <p class="text-xs text-secondary mb-4 text-center">
+    You need $<span class="font-mono" x-text="((props.neededCents || 0) / 100).toFixed(2)"></span>
+    to enter.
+    You have $<span class="font-mono" x-text="((props.usdcCents || 0) / 100).toFixed(2)"></span> USDC
+    + $<span class="font-mono" x-text="((props.usdtCents || 0) / 100).toFixed(2)"></span> USDT.
+  </p>
+
+  <div class="space-y-3">
+    <%# Demo pay CTA — the production modal posts to Stripe checkout in a new
+        tab; here it just closes (no real payment). %>
+    <button type="button" @click="$store.dsModals.close()" class="btn btn-primary btn-lg w-full">
+      Pay with Card
+    </button>
+
+    <%# Send-to-address — self-fund from another wallet. Address from props. %>
+    <div class="border-t border-strong pt-3" x-data="{ copied: false }">
+      <p class="text-xs text-secondary text-center mb-2">Or send USDC/USDT to your wallet:</p>
+      <div class="flex items-center gap-2">
+        <code class="flex-1 px-2 py-1 bg-surface rounded text-xs font-mono truncate"
+              x-text="props.address || 'Fo1L5…demo…9xQ2'"></code>
+        <button type="button"
+                @click="navigator.clipboard && navigator.clipboard.writeText(props.address || ''); copied = true; setTimeout(() => copied = false, 1500)"
+                class="btn btn-sm">
+          <span x-text="copied ? 'Copied' : 'Copy'"></span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <p class="text-center text-xs text-muted mt-4">
+    Come back here once your deposit lands &mdash; we'll refresh the balance.
+  </p>
+</div>

data/lib/studio/version.rb

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

data/lib/studio.rb

@@ -33,6 +33,20 @@ module Studio
   # contract check — see validate_user_contract!).
   mattr_accessor :auth_methods, default: %i[magic_link google wallet]
 
+  # ---- Capability features --------------------------------------------------
+  # Coarse app-level capability switches an app opts into. Distinct from
+  # auth_methods (which sign-in methods the login views render) — these gate
+  # whole product surfaces (e.g. :web3 on-chain features, :leveling XP/levels).
+  # Default [] means every capability is OFF; an app turns on what it ships in
+  # config/initializers/studio.rb:
+  #
+  #   Studio.configure { |config| config.features = %i[leveling web3] }
+  #
+  # Gate a surface with Studio.feature?(:leveling). The admin/style page uses this
+  # to render capability-gated specimens "disabled but present" on apps with the
+  # feature off (e.g. McRitchie Studio, which ships neither).
+  mattr_accessor :features, default: []
+
   # Magic-link (passwordless email) tuning. token_name keys the MessageVerifier
   # purpose; bump it to invalidate every outstanding link. See MagicLink service.
   mattr_accessor :magic_link_ttl,        default: 15.minutes
@@ -152,6 +166,14 @@ module Studio
     auth_methods.include?(method.to_sym)
   end
 
+  # True when the given capability feature is enabled for this app. Mirrors
+  # auth_method? — apps opt in via config.features in their initializer (see the
+  # Studio.features accessor). Tolerates String or Symbol entries and any
+  # Enumerable (Array or Set), so `feature?("web3")` and `feature?(:web3)` agree.
+  def self.feature?(name)
+    features.any? { |f| f.to_sym == name.to_sym }
+  end
+
   # True when the engine login should render a PASSWORD field/form: passwords are enabled
   # (`:password` in auth_methods) AND the host User model actually supports them (responds to
   # `authenticate` — i.e. `has_secure_password`). Both are required, and the second is the
@@ -183,6 +205,18 @@ module Studio
     magic_link_store == :database && draw_link_routes
   end
 
+  # The floor every developer-desk tool sits on: the local email inbox
+  # (Studio::LocalEmailsController) and the local-review mint
+  # (Studio::LocalReviewsController). Both hand out sign-in material without
+  # authenticating anyone, so both are OFF in production and OFF for any request
+  # that did not come from the loopback interface. One spelling, so a tool added
+  # later cannot quietly ship a weaker gate. Pass request.local? in.
+  def self.local_tool_enabled?(request_local:)
+    return false if defined?(Rails) && Rails.respond_to?(:env) && Rails.env.production?
+
+    !!request_local
+  end
+
   def self.local_email_capture?
     return false if defined?(Rails) && Rails.respond_to?(:env) && Rails.env.production?
     return !!local_email_capture unless local_email_capture.nil?
@@ -277,8 +311,12 @@ module Studio
       get  "auth/:provider/callback", to: "omniauth_callbacks#create"
       get  "auth/failure", to: "omniauth_callbacks#failure"
 
+      # Developer-desk tools. Drawn outside production, and each controller
+      # re-checks Studio.local_tool_enabled? per request (loopback only) — the
+      # route being absent is the outer gate, not the only one.
       unless defined?(Rails) && Rails.env.production?
         get "_studio/local_emails", to: "studio/local_emails#index", as: :studio_local_emails
+        get "_studio/local_review", to: "studio/local_reviews#show",  as: :studio_local_review
       end
 
       # Passwordless email (magic link). Helpers: magic_link_request_path (POST
@@ -324,7 +362,11 @@ module Studio
       patch "admin/theme",            to: "theme_settings#update",     as: :admin_theme_update
       post  "admin/theme/regenerate", to: "theme_settings#regenerate", as: :admin_theme_regenerate
       get   "admin/schema",           to: "schema#index",              as: :admin_schema
-      get   "admin/design_system",    to: "design_system#index",       as: :admin_design_system
+      # The living style guide. Canonical at /admin/style (StyleController#index);
+      # /admin/design_system redirects here but KEEPS its admin_design_system_path
+      # helper so a shipped host sidebar link on the old helper still resolves.
+      get   "admin/style",            to: "style#index",               as: :admin_style
+      get   "admin/design_system",    to: redirect("/admin/style"),    as: :admin_design_system
 
       # Admin-managed transactional-email banner images (Studio::EmailImage).
       # index lists each managed email variant + its current banner; update

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.17.0
+  version: 0.19.0
 platform: ruby
 authors:
 - Alex McRitchie
@@ -178,7 +178,7 @@ files:
 - app/controllers/concerns/studio/error_handling.rb
 - app/controllers/concerns/studio/impersonation.rb
 - app/controllers/concerns/studio/link_consumption.rb
-- app/controllers/design_system_controller.rb
+- app/controllers/concerns/studio/magic_link_issuing.rb
 - app/controllers/error_logs_controller.rb
 - app/controllers/magic_links_controller.rb
 - app/controllers/navbar_controller.rb
@@ -190,7 +190,9 @@ files:
 - app/controllers/studio/email_images_controller.rb
 - app/controllers/studio/links_controller.rb
 - app/controllers/studio/local_emails_controller.rb
+- app/controllers/studio/local_reviews_controller.rb
 - app/controllers/studio/models_controller.rb
+- app/controllers/style_controller.rb
 - app/controllers/theme_settings_controller.rb
 - app/helpers/studio/admin_models_table_helper.rb
 - app/helpers/studio_email_delivery_helper.rb
@@ -228,8 +230,6 @@ files:
 - app/views/components/_theme_toggle.html.erb
 - app/views/components/_theme_toggle_morph.html.erb
 - app/views/components/_user_nav.html.erb
-- app/views/design_system/_specimen.html.erb
-- app/views/design_system/index.html.erb
 - app/views/error_logs/index.html.erb
 - app/views/error_logs/show.html.erb
 - app/views/layouts/_navbar.html.erb
@@ -261,11 +261,36 @@ files:
 - app/views/studio/modals/_host.html.erb
 - app/views/studio/modals/_image_upload.html.erb
 - app/views/studio/modals/_saving.html.erb
+- app/views/studio/modals/auth/_resend_footer.html.erb
+- app/views/studio/modals/blocks/_card_header.html.erb
+- app/views/studio/modals/blocks/_cta_redirect.html.erb
 - app/views/studio/modals/blocks/_error_card.html.erb
+- app/views/studio/modals/blocks/_onchain_success.html.erb
 - app/views/studio/modals/blocks/_processing_card.html.erb
 - app/views/studio/modals/blocks/_progress_countdown.html.erb
+- app/views/studio/modals/blocks/_progress_pill.html.erb
+- app/views/studio/modals/blocks/_shell.html.erb
+- app/views/studio/modals/blocks/_solana_tx_link.html.erb
 - app/views/studio/modals/blocks/_success_card.html.erb
+- app/views/studio/modals/shared/_age_attestation.html.erb
+- app/views/studio/modals/shared/_email_field.html.erb
+- app/views/studio/modals/templates/_action.html.erb
+- app/views/studio/modals/templates/_form.html.erb
+- app/views/studio/modals/templates/_status.html.erb
+- app/views/studio/modals/templates/_success.html.erb
+- app/views/studio/modals/templates/_wizard.html.erb
 - app/views/studio/models/show.html.erb
+- app/views/style/_modal_specimen.html.erb
+- app/views/style/_modals.html.erb
+- app/views/style/_specimen.html.erb
+- app/views/style/_tasks.html.erb
+- app/views/style/_theme.html.erb
+- app/views/style/_tricks.html.erb
+- app/views/style/index.html.erb
+- app/views/style/modals/_auth.html.erb
+- app/views/style/modals/_onchain_tx.html.erb
+- app/views/style/modals/_wallet_connect.html.erb
+- app/views/style/modals/_wallet_deposit.html.erb
 - app/views/theme_settings/edit.html.erb
 - app/views/user_mailer/magic_link.html.erb
 - app/views/user_mailer/magic_link.text.erb

data/app/controllers/design_system_controller.rb

@@ -1,12 +0,0 @@
-# The living style guide — a single admin-gated page that renders the engine's
-# shared UI primitives (buttons, surfaces, the seven motion primitives, and the
-# theme role tokens) live in the host app's theme. Mirrors ThemeSettingsController:
-# a plain host-inherited controller, gated by `require_admin` from the already-
-# included Studio::ErrorHandling concern. The view is a bare content wrapper that
-# renders inside each host's application.html.erb, so it inherits that app's
-# navbar + theme automatically.
-class DesignSystemController < ApplicationController
-  before_action :require_admin
-
-  def index; end
-end

data/app/views/design_system/_specimen.html.erb

@@ -1,27 +0,0 @@
-<%#  Specimen card for the living style guide (admin/design_system).
-     Reusable chrome around ONE primitive:
-       stage - the rendered primitive (yielded from the caller block)
-       meta  - its class name and a copyable usage snippet
-     locals: klass (String, required) and usage (String, optional).
-     Rendered via `render layout: "design_system/specimen"` so the caller's
-     block becomes the staged primitive. Checks local_assigns (never
-     block_given?) so a shared partial does not inherit the host layout yield. %>
-<article class="card overflow-hidden flex flex-col">
-  <div class="flex flex-1 flex-wrap items-center justify-center gap-4 p-6 bg-surface-alt min-h-32">
-    <%= yield %>
-  </div>
-  <div class="border-t border-subtle p-3 space-y-2">
-    <code class="block font-mono text-2xs text-heading break-all"><%= local_assigns[:klass] %></code>
-    <% snippet = local_assigns[:usage] %>
-    <% if snippet.present? %>
-      <div class="relative" x-data="{ copied: false }">
-        <pre class="bg-inset text-body text-2xs rounded-lg px-3 py-2 pr-16 overflow-x-auto"><code x-ref="snippet"><%= snippet %></code></pre>
-        <button type="button"
-                class="btn btn-neutral btn-sm absolute top-2 right-2"
-                @click="navigator.clipboard?.writeText($refs.snippet.innerText); copied = true; setTimeout(() => copied = false, 1200)">
-          <span x-text="copied ? 'Copied' : 'Copy'">Copy</span>
-        </button>
-      </div>
-    <% end %>
-  </div>
-</article>