studio-engine 0.17.0 → 0.18.0

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

@@ -0,0 +1,323 @@
+<%#  Tricks section of the living style guide (admin/style).
+     A board of style tricks you can SEE rendered live and hand to an agent to use
+     out of the box. Each specimen (via the shared _specimen partial) surfaces the
+     rendered primitive, its class name (one-click copy), and a copyable usage
+     snippet. Every class here is a REAL engine class (engine.css component layer
+     or engine-motion.css motion/effect/leveling layer), so a consumer that
+     bundles both styles the specimens for real.
+
+     The Leveling group renders the REAL .level-badge tiers ported into the engine
+     from Turf Monster, capability-gated by Studio.feature?(:leveling). When a host
+     has leveling OFF (McRitchie Studio's default), its specimens render "disabled
+     but present" via the _specimen `disabled:` local - visible and previewable,
+     but greyed and flagged, never hidden.
+
+     The color tokens/swatches now live in the Theme section (the landing section
+     owns "the colors"); this section is the trick board. %>
+<%
+  button_variants = {
+    "primary"   => "Primary",
+    "secondary" => "Secondary",
+    "success"   => "Success",
+    "danger"    => "Danger",
+    "warning"   => "Warning",
+    "neutral"   => "Neutral",
+    "outline"   => "Outline",
+    "google"    => "Continue with Google"
+  }
+
+  leveling_on = Studio.feature?(:leveling)
+%>
+<section id="tricks" class="space-y-12" style="scroll-margin-top: calc(var(--nav-h, 0px) + 5rem)">
+  <div class="space-y-1">
+    <h2 class="text-2xl font-bold text-heading">Tricks</h2>
+    <p class="text-muted text-sm max-w-2xl">
+      A board of style tricks you can see and hand to an agent to use out of the box.
+      Each specimen surfaces the rendered primitive, its <strong>class name (one-click
+      copy)</strong>, and a copyable usage snippet - the button, surface, motion, effect,
+      and leveling primitives. The color tokens live in <a href="#theme" class="underline">Theme</a>.
+    </p>
+  </div>
+
+  <!-- Buttons -->
+  <section class="space-y-5">
+    <div class="space-y-1">
+      <h3 class="text-xl font-bold text-heading">Buttons</h3>
+      <p class="text-muted text-sm">
+        <code class="font-mono text-2xs">.btn</code> base plus one role variant, and the
+        <code class="font-mono text-2xs">.btn-sm</code> / <code class="font-mono text-2xs">.btn-lg</code> sizes.
+      </p>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <% button_variants.each do |name, label| %>
+        <%= render layout: "style/specimen",
+              locals: { klass: ".btn .btn-#{name}",
+                        usage: %(<button class="btn btn-#{name}">#{label}</button>) } do %>
+          <button type="button" class="btn btn-<%= name %>"><%= label %></button>
+        <% end %>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".btn-sm / .btn (default) / .btn-lg",
+                      usage: %(<button class="btn btn-primary btn-sm">Small</button>\n<button class="btn btn-primary">Default</button>\n<button class="btn btn-primary btn-lg">Large</button>) } do %>
+        <div class="flex flex-wrap items-center justify-center gap-3">
+          <button type="button" class="btn btn-primary btn-sm">Small</button>
+          <button type="button" class="btn btn-primary">Default</button>
+          <button type="button" class="btn btn-primary btn-lg">Large</button>
+        </div>
+      <% end %>
+    </div>
+  </section>
+
+  <!-- Surfaces, text and form -->
+  <section class="space-y-5">
+    <div class="space-y-1">
+      <h3 class="text-xl font-bold text-heading">Surfaces, text &amp; form</h3>
+      <p class="text-muted text-sm">Cards, badges, inputs, the empty state, and the uppercase meta label.</p>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <%= render layout: "style/specimen",
+            locals: { klass: ".card", usage: %(<div class="card p-5">...</div>) } do %>
+        <div class="card p-5 text-sm text-body w-full max-w-xs text-center">Surface card</div>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".card-hover", usage: %(<div class="card-hover p-5">...</div>) } do %>
+        <div class="card-hover p-5 text-sm text-body w-full max-w-xs text-center">Hover me</div>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".badge", usage: %(<span class="badge">Neutral</span>) } do %>
+        <div class="flex flex-wrap items-center justify-center gap-2">
+          <span class="badge text-body">Neutral</span>
+          <span class="badge" style="color: var(--color-success); border-color: var(--color-success)">Success</span>
+          <span class="badge" style="color: var(--color-warning); border-color: var(--color-warning)">Warning</span>
+          <span class="badge" style="color: var(--color-danger); border-color: var(--color-danger)">Danger</span>
+        </div>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".input-field", usage: %(<input class="input-field" placeholder="you@example.com">) } do %>
+        <input type="text" class="input-field" placeholder="you@example.com" aria-label="Sample input">
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".label-upper", usage: %(<p class="label-upper">Section label</p>) } do %>
+        <p class="label-upper">Section label</p>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".empty-state", usage: %(<div class="empty-state">Nothing here yet</div>) } do %>
+        <div class="empty-state w-full max-w-xs text-sm text-muted">Nothing here yet</div>
+      <% end %>
+    </div>
+  </section>
+
+  <!-- Motion primitives -->
+  <section class="space-y-5">
+    <div class="space-y-1">
+      <h3 class="text-xl font-bold text-heading">Motion primitives</h3>
+      <p class="text-muted text-sm">
+        The seven <code class="font-mono text-2xs">engine-motion.css</code> primitives. Each knob is a themeable
+        CSS variable - tune it inline with <code class="font-mono text-2xs">style="--knob: value"</code>.
+      </p>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <%= render layout: "style/specimen",
+            locals: { klass: ".studio-border-glow (rounded-xl wrapper)",
+                      usage: %(<div class="studio-border-glow rounded-xl">...</div>) } do %>
+        <div class="studio-border-glow rounded-xl p-5 bg-surface text-center text-sm text-heading">Border glow</div>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".spinner  (knob: --spinner-size)",
+                      usage: %(<span class="spinner"></span>\n<span class="spinner" style="--spinner-size: 2rem"></span>) } do %>
+        <span class="spinner"></span>
+        <span class="spinner" style="--spinner-size: 1.6rem"></span>
+        <span class="spinner" style="--spinner-size: 2.4rem; --spinner-thickness: 3px"></span>
+        <button type="button" class="btn btn-primary">
+          <span class="spinner" style="--spinner-color: currentColor; --spinner-track: rgba(255,255,255,.35)"></span>
+          <span class="ml-2">Saving</span>
+        </button>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".loading-dots  (3 span children)",
+                      usage: %(<span class="loading-dots"><span></span><span></span><span></span></span>) } do %>
+        <span class="loading-dots"><span></span><span></span><span></span></span>
+        <span class="loading-dots" style="--loading-dots-size: 12px; --loading-dots-color: var(--color-cta)"><span></span><span></span><span></span></span>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".sheen .sheen--loop",
+                      usage: %(<span class="sheen sheen--loop">...</span>) } do %>
+        <span class="sheen sheen--loop badge text-body">Level 5 unlocked</span>
+        <span class="sheen sheen--loop card px-4 py-2 text-sm text-body" style="--sheen-duration: 3s">Sheen sweep</span>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".ping .ping--dot  (knob: --ping-color)",
+                      usage: %(<span class="ping ping--dot"></span>) } do %>
+        <span class="ping ping--dot"></span>
+        <span class="ping ping--dot" style="--ping-color: var(--color-success)"></span>
+        <span class="ping ping--dot" style="--ping-color: var(--color-danger); --ping-size: 0.9rem"></span>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".fade-edge-{t,b,l,r,x,y}  (knob: --fade-edge-size)",
+                      usage: %(<div class="fade-edge-y overflow-y-auto">...long content...</div>) } do %>
+        <div class="fade-edge-y overflow-y-auto h-32 w-full max-w-xs bg-surface rounded-lg p-3 text-sm text-body space-y-2">
+          <p>Scroll me - the top and bottom edges dissolve.</p>
+          <p>The mask softens content near either end of the container.</p>
+          <p>No JavaScript, no gradient overlay - just a mask-image.</p>
+          <p>It masks the element itself, so it works over any background.</p>
+          <p>Keep scrolling to watch the fade track the edge.</p>
+        </div>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".progress-meter  (knob: --progress)",
+                      usage: %(<div class="progress-meter" style="--progress: 62%">\n  <div class="progress-meter-track"><span class="progress-meter-label">62%</span></div>\n  <div class="progress-meter-fill"><span class="progress-meter-label">62%</span></div>\n</div>) } do %>
+        <div class="w-full max-w-xs space-y-3">
+          <div class="progress-meter" style="--progress: 25%">
+            <div class="progress-meter-track"><span class="progress-meter-label">25%</span></div>
+            <div class="progress-meter-fill"><span class="progress-meter-label">25%</span></div>
+          </div>
+          <div class="progress-meter" style="--progress: 62%">
+            <div class="progress-meter-track"><span class="progress-meter-label">62%</span></div>
+            <div class="progress-meter-fill"><span class="progress-meter-label">62%</span></div>
+          </div>
+          <div class="progress-meter" style="--progress: 88%; --progress-fill: var(--color-success)">
+            <div class="progress-meter-track"><span class="progress-meter-label">88% complete</span></div>
+            <div class="progress-meter-fill"><span class="progress-meter-label">88% complete</span></div>
+          </div>
+          <div class="progress-meter progress-meter--indeterminate">
+            <div class="progress-meter-track"></div>
+            <div class="progress-meter-fill"></div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </section>
+
+  <!-- Effects -->
+  <section class="space-y-5">
+    <div class="space-y-1">
+      <h3 class="text-xl font-bold text-heading">Effects</h3>
+      <p class="text-muted text-sm">
+        The <code class="font-mono text-2xs">engine-motion.css</code> visual-effect primitives beyond motion -
+        gradient text, a soft glow halo, a single-color rotating <strong>selection glow</strong>
+        (ported from Turf Monster's selected-team-card ring), frosted glass, and a conic wash. Each is
+        themed through the role tokens and tunable via CSS-var knobs.
+      </p>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <%= render layout: "style/specimen",
+            locals: { klass: ".text-gradient  (knobs: --text-gradient-from / -to / -angle)",
+                      usage: %(<h2 class="text-gradient text-3xl font-extrabold">Level up</h2>) } do %>
+        <div class="text-center space-y-2">
+          <p class="text-gradient text-3xl font-extrabold">Level up</p>
+          <p class="text-gradient text-xl font-bold" style="--text-gradient-from: var(--color-success); --text-gradient-to: var(--color-cta)">Season complete</p>
+        </div>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".studio-glow / .studio-glow--pulse  (knob: --studio-glow-color)",
+                      usage: %(<button class="btn btn-primary studio-glow">Launch</button>) } do %>
+        <div class="flex flex-wrap items-center justify-center gap-6">
+          <button type="button" class="btn btn-primary studio-glow">Launch</button>
+          <span class="studio-glow studio-glow--pulse inline-flex h-12 w-12 items-center justify-center rounded-full text-white font-extrabold"
+                style="background: var(--color-cta); --studio-glow-color: var(--color-success)">10</span>
+        </div>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".studio-team-glow  (knob: --studio-team-glow-color)",
+                      usage: %(<div class="studio-team-glow rounded-xl bg-surface p-5">Selected</div>\n<div class="studio-team-glow rounded-xl bg-surface p-5" style="--studio-team-glow-color: #E11D48">Ravens</div>) } do %>
+        <div class="flex flex-wrap items-center justify-center gap-6">
+          <div class="studio-team-glow rounded-xl bg-surface border border-subtle px-5 py-4 text-sm font-semibold text-heading text-center">Selected</div>
+          <div class="studio-team-glow rounded-xl bg-surface border border-subtle px-5 py-4 text-sm font-semibold text-heading text-center" style="--studio-team-glow-color: #E11D48">Ravens</div>
+        </div>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".surface-glass  (knobs: --surface-glass-opacity / -blur)",
+                      usage: %(<div class="surface-glass rounded-xl p-4">...</div>) } do %>
+        <div class="conic-surface w-full max-w-xs rounded-2xl p-4" style="--conic-surface-duration: 22s">
+          <div class="surface-glass rounded-xl p-4 text-center text-sm text-heading">Frosted panel over a live backdrop</div>
+        </div>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".conic-surface  (knob: --conic-surface-duration)",
+                      usage: %(<div class="conic-surface rounded-2xl p-8">...</div>) } do %>
+        <div class="conic-surface w-full max-w-xs rounded-2xl p-8 text-center">
+          <p class="text-heading font-bold">Ambient wash</p>
+          <p class="text-body text-xs mt-1">Content stays crisp above the rotating gradient.</p>
+        </div>
+      <% end %>
+    </div>
+  </section>
+
+  <!-- Leveling (capability-gated: 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">Leveling</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 max-w-2xl">
+        The real <code class="font-mono text-2xs">.level-badge</code> tiers, gated by
+        <code class="font-mono text-2xs">Studio.feature?(:leveling)</code>. Ported into the engine
+        (<code class="font-mono text-2xs">engine-motion.css</code>) from Turf Monster's leveling - the
+        outline starter through the holographic Level 10 - so any consumer with leveling on ships the
+        polished ladder. The tiers theme off <code class="font-mono text-2xs">--color-primary-*</code>, so
+        they restyle per app. Leveling is <strong><%= leveling_on ? "on" : "off" %></strong> here, so these
+        render <%= leveling_on ? "live" : "disabled-but-present - visible and previewable, but greyed and flagged" %>.
+      </p>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <%= render layout: "style/specimen",
+            locals: { klass: ".level-badge .level-badge-1 … .level-badge-10",
+                      disabled: !leveling_on,
+                      usage: %(<span class="level-badge level-badge-10">Level 10</span>) } do %>
+        <div class="flex flex-wrap items-center justify-center gap-2">
+          <% (1..10).each do |lvl| %>
+            <span class="level-badge level-badge-<%= lvl %>">Level <%= lvl %></span>
+          <% end %>
+        </div>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".level-badge (in a chip context)",
+                      disabled: !leveling_on,
+                      usage: %(<span class="text-heading font-semibold text-sm">Earn a free entry</span>\n<span class="level-badge level-badge-8">Level 8</span>) } do %>
+        <div class="w-full max-w-xs space-y-2">
+          <div class="card flex items-center justify-between gap-3 px-3 py-2">
+            <span class="text-heading font-semibold text-sm">Earn a free entry</span>
+            <span class="level-badge level-badge-8">Level 8</span>
+          </div>
+          <div class="card flex items-center justify-between gap-3 px-3 py-2">
+            <span class="text-heading font-semibold text-sm">Legendary status</span>
+            <span class="level-badge level-badge-10">Level 10</span>
+          </div>
+        </div>
+      <% end %>
+
+      <%= render layout: "style/specimen",
+            locals: { klass: ".level-up-pop  (fires the pop + glow burst)",
+                      disabled: !leveling_on,
+                      usage: %(<span class="level-badge level-badge-10 level-up-pop">Level 10</span>) } do %>
+        <div x-data="{ pop: true }" class="flex flex-col items-center gap-3 py-2">
+          <span class="level-badge level-badge-10" :class="pop && 'level-up-pop'">Level 10</span>
+          <button type="button" class="btn btn-neutral btn-sm"
+                  @click="pop=false; setTimeout(() => pop=true, 30)">Replay pop</button>
+        </div>
+      <% end %>
+    </div>
+  </section>
+</section>

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

@@ -0,0 +1,60 @@
+<%#  admin/style - the living style guide.
+     A bare content wrapper (no `layout` call): it renders inside each host's
+     application.html.erb, inheriting that app's navbar and theme, so every
+     specimen restyles per app and in dark or light automatically.
+
+     Four sections, reached by the sticky section nav below and rendered as
+     sibling partials: Theme is the landing section (the color foundation - it
+     owns the role tokens/swatches, the folded-in /admin/theme editor, and the
+     live preview), then Modals (the shared host + engine card blocks), Tricks
+     (the button/surface/motion/effect/leveling primitives, framed as a board of
+     copy-paste-for-an-agent snippets), and Tasks (the shared board primitive).
+
+     Specimens use ONLY the engine's own classes (engine.css component layer plus
+     engine-motion.css motion/effect/leveling layer), so a consumer that bundles
+     engine.css and imports engine-motion.css styles them for real. The primitive
+     CSS is NOT inlined here - the consumer's Tailwind build provides it. Page
+     chrome uses the engine's own .card / .label-upper / theme tokens. %>
+<%
+  sections = [
+    ["theme",  "Theme"],
+    ["modals", "Modals"],
+    ["tricks", "Tricks"],
+    ["tasks",  "Tasks"]
+  ]
+%>
+<div class="max-w-6xl mx-auto px-4 pb-16">
+  <header class="space-y-2 pt-8 pb-6">
+    <p class="label-upper">studio-engine &middot; v<%= Studio::VERSION %></p>
+    <h1 class="text-3xl font-bold text-heading">Style</h1>
+    <p class="text-body max-w-2xl">
+      A living gallery of the shared UI primitives, rendered live in this app's
+      theme. Everything below is styled by the engine's own
+      <code class="font-mono text-2xs bg-inset px-1.5 py-0.5 rounded">engine.css</code>
+      and
+      <code class="font-mono text-2xs bg-inset px-1.5 py-0.5 rounded">engine-motion.css</code>
+      layers - toggle this app between light and dark and every specimen follows.
+    </p>
+  </header>
+
+  <%# Section nav — sticky under the host navbar (--nav-h, 0 fallback). A pill per
+      section; the row scrolls horizontally on narrow screens, its edges softened
+      by the .fade-edge-x primitive. Order leads with Theme (the color foundation). %>
+  <nav class="sticky z-20 -mx-4 px-4 py-3 bg-surface border-y border-subtle"
+       style="top: var(--nav-h, 0px)" aria-label="Style guide sections">
+    <div class="fade-edge-x overflow-x-auto">
+      <div class="flex items-center gap-2 min-w-max">
+        <% sections.each do |anchor, label| %>
+          <a href="#<%= anchor %>" class="btn btn-neutral btn-sm"><%= label %></a>
+        <% end %>
+      </div>
+    </div>
+  </nav>
+
+  <div class="space-y-16 pt-10">
+    <%= render "style/theme" %>
+    <%= render "style/modals" %>
+    <%= render "style/tricks" %>
+    <%= render "style/tasks" %>
+  </div>
+</div>

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

@@ -0,0 +1,252 @@
+<%#
+  Auth wizard — the design-system port of turf-monster's modals/_auth. The
+  canonical sign-in step machine, faithful to the real modal's UX, wired to the
+  living style guide's page-scoped host ($store.dsModals) so it opens live on any
+  app (including McRitchie Studio) without an auth backend.
+
+  Steps (opened at any step via open('auth', { step, ... })):
+    credentials       — Google + Solana + email magic-link request
+    magic-link-sent   — "check your inbox" after the email request
+    magic-link-resent — success confirmation after a resend (directional slide)
+    redirect          — countdown auto-redirect (drain CTA demo)
+
+  What differs from the production modal: the tokens / USDC funding sub-flow is
+  dropped (that is contest-entry-specific), and every credential CTA runs behind
+  a page stub — window.postMagicLink resolves { success: true } so the magic-link
+  step machine advances for real; Google briefly shows its waiting state then
+  resets; Solana swaps to the wallet-connect picker (a real ported specimen).
+  No real auth happens — the demo shows the real UI.
+
+  CRITICAL: rendered inside <template x-if="id==='auth'"> — Alpine requires a
+  SINGLE root, so everything lives inside the outer <div>. The x-data is a
+  double-quoted attribute: keep it free of double-quotes and backticks.
+%>
+<div x-data="{
+       email: '',
+       ageAttested: false,
+       ageError: false,
+       googleTimer: null,
+       attested() {
+         if (!this.termsOn()) return true;
+         if (this.ageAttested) { this.ageError = false; return true; }
+         this.ageError = true;
+         return false;
+       },
+       get props() {
+         var c = Alpine.store('dsModals').current();
+         return (c && c.props) || {};
+       },
+       // Method configuration — which credential methods render. props.methods
+       // overrides per-key; unset keys fall back to the app's Studio.auth_method?
+       // (wallet also needs the web3 capability). props.terms gates the age
+       // attestation. This standardizes the engine auth modal as method-configurable.
+       _methodDefaults: { magicLink: <%= Studio.auth_method?(:magic_link) %>, google: <%= Studio.auth_method?(:google) %>, wallet: <%= Studio.auth_method?(:wallet) && Studio.feature?(:web3) %> },
+       _termsDefault: true,
+       methodOn(m) {
+         var v = this.props.methods;
+         return (v && typeof v[m] === 'boolean') ? v[m] : !!this._methodDefaults[m];
+       },
+       termsOn() {
+         var t = this.props.terms;
+         return (typeof t === 'boolean') ? t : this._termsDefault;
+       },
+       get isCredentialsStep() {
+         var s = this.props.step;
+         if (!s) return true;
+         if (s === 'redirect' || s === 'magic-link-sent' || s === 'magic-link-resent') return false;
+         return true;
+       },
+       loginGoogle() {
+         if (!this.attested()) return;
+         var p = this.props;
+         if (!p || p.submitting) return;
+         p.googleError = '';
+         p.submitting = 'google';
+         var self = this;
+         this.googleTimer = setTimeout(function () {
+           var pp = self.props;
+           if (pp) pp.submitting = null;
+         }, 1200);
+       },
+       openWalletHub() {
+         if (!this.attested()) return;
+         Alpine.store('dsModals').swap('wallet-connect', { backTo: 'auth', ageAttested: true });
+       },
+       async submitMagicLink() {
+         if (!this.attested()) return;
+         var p = this.props;
+         if (!p || p.submitting) return;
+         p.formError = '';
+         if (!this.email) { p.formError = 'Enter your email.'; return; }
+         p.submitting = 'magic-link';
+         try {
+           var data = await window.postMagicLink(this.email, { ageAttested: true });
+           if (!data || !data.success) { p.formError = (data && data.error) || 'Could not send the link. Try again.'; p.submitting = null; return; }
+           Alpine.store('dsModals').advance({ step: 'magic-link-sent', sentEmail: this.email, submitting: null, formError: '' });
+         } catch (e) {
+           var p2 = this.props;
+           if (p2) { p2.formError = 'Network error. Try again.'; p2.submitting = null; }
+         }
+       },
+       _resendTimer: null,
+       startResendCooldown(seconds) {
+         var self = this;
+         var p = this.props;
+         if (!p) return;
+         p.resendCooldown = seconds || 60;
+         if (this._resendTimer) clearInterval(this._resendTimer);
+         this._resendTimer = setInterval(function () {
+           var pp = self.props;
+           if (!pp) { clearInterval(self._resendTimer); self._resendTimer = null; return; }
+           pp.resendCooldown = (pp.resendCooldown || 0) - 1;
+           if (pp.resendCooldown <= 0) {
+             pp.resendCooldown = 0;
+             clearInterval(self._resendTimer);
+             self._resendTimer = null;
+           }
+         }, 1000);
+       },
+       async resendMagicLink() {
+         var p = this.props;
+         if (!p || p.submitting || (p.resendCooldown || 0) > 0) return;
+         p.resendError = '';
+         p.submitting = 'magic-link';
+         try {
+           var data = await window.postMagicLink(p.sentEmail, { ageAttested: true });
+           if (data && data.success) {
+             Alpine.store('dsModals').advance({ step: 'magic-link-resent' });
+             this.startResendCooldown(60);
+           } else {
+             p.resendError = (data && data.error) || 'Could not resend — wait a moment and try again.';
+           }
+         } catch (e) {
+           p.resendError = 'Could not resend — check your connection and try again.';
+         }
+         p.submitting = null;
+       },
+       destroy() {
+         if (this._resendTimer) { clearInterval(this._resendTimer); this._resendTimer = null; }
+         if (this.googleTimer) { clearTimeout(this.googleTimer); this.googleTimer = null; }
+       }
+     }"
+     class="relative">
+
+  <%# === CREDENTIALS STEP ================================================== %>
+  <div x-show="isCredentialsStep" x-cloak>
+      <div class="relative mb-3 -mt-2">
+        <h3 class="text-heading font-bold text-lg leading-tight text-center pt-1">Sign in</h3>
+        <button @click="$store.dsModals.close()"
+                class="absolute top-0 right-0 -mr-2 text-secondary hover:text-heading text-xl leading-none"
+                aria-label="Close">&times;</button>
+      </div>
+      <%= render "studio/modals/blocks/progress_pill", current: 1, total: 3 %>
+      <p class="text-xs text-secondary mb-4 text-center"
+         x-text="'Your ' + ((props && props.picksRequired) || 6) + ' picks are saved — sign in to submit your lineup.'"></p>
+
+      <div class="mb-4" x-show="termsOn()">
+        <%= render "studio/modals/shared/age_attestation" %>
+      </div>
+
+      <%# The credential CTAs gate on props.submitting. It MUST be coerced with
+          !! — on a fresh open the modal is opened with { step, picksRequired }
+          and no submitting key, and x-bind:disabled on a reactive-undefined value
+          renders as disabled=true (verified live), which would inert the whole
+          form. !!props.submitting yields a real boolean so the form is enabled
+          until a CTA actually sets submitting. Keep the !! on every gate below. %>
+      <%# 1. Google — opens a popup in production; here it shows the waiting state.
+          Gated on methodOn('google') so the specimen's toggles configure it. %>
+      <button @click="loginGoogle()"
+              x-show="methodOn('google')"
+              :disabled="!!props.submitting"
+              class="btn btn-neutral btn-lg w-full gap-3 mb-3 disabled:cursor-wait">
+        <span x-show="props.submitting !== 'google'" class="inline-flex"><%= render "components/google_logo" %></span>
+        <span x-show="props.submitting === 'google'" class="spinner" aria-hidden="true"></span>
+        <span x-text="props.submitting === 'google' ? 'Waiting for Google…' : 'Google'"></span>
+      </button>
+      <template x-if="props.googleError">
+        <p class="text-red-400 text-xs -mt-2 mb-3" x-text="props.googleError"></p>
+      </template>
+
+      <%# 2. Solana — progresses to the Connect Wallet picker modal. Gated on
+          methodOn('wallet') (default OFF where web3 is off, e.g. McRitchie Studio). %>
+      <button @click="openWalletHub()" x-show="methodOn('wallet')" :disabled="!!props.submitting"
+              class="btn btn-neutral btn-lg w-full gap-3 mb-3 disabled:cursor-wait">
+        <svg width="18" height="14" viewBox="0 0 397 311" fill="none" x-show="props.submitting !== 'wallet'" aria-hidden="true">
+          <defs><linearGradient id="auth-solana-grad" x1="361" y1="-9" x2="153" y2="389" gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#00FFA3"/><stop offset="1" stop-color="#DC1FFF"/>
+          </linearGradient></defs>
+          <path d="M65 234c2-2 6-4 9-4h317c6 0 9 7 5 11l-63 63c-2 2-6 4-9 4H6c-6 0-9-7-5-11l64-63z" fill="url(#auth-solana-grad)"/>
+          <path d="M65 4c2-2 6-4 9-4h317c6 0 9 7 5 11l-63 63c-2 2-6 4-9 4H6c-6 0-9-7-5-11L65 4z" fill="url(#auth-solana-grad)"/>
+          <path d="M333 119c-2-2-6-4-9-4H7c-6 0-9 7-5 11l63 63c2 2 6 4 9 4h317c6 0 9-7 5-11l-63-63z" fill="url(#auth-solana-grad)"/>
+        </svg>
+        <span x-show="props.submitting === 'wallet'" class="spinner" aria-hidden="true"></span>
+        <span x-text="props.submitting === 'wallet' ? 'Connecting…' : 'Solana'"></span>
+      </button>
+
+      <%# "or" divider — only when magic-link AND a social method are both on. %>
+      <div class="relative my-4" x-show="methodOn('magicLink') && (methodOn('google') || methodOn('wallet'))">
+        <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-strong"></div></div>
+        <div class="relative flex justify-center text-sm"><span class="bg-surface px-3 text-secondary">or</span></div>
+      </div>
+
+      <%# 3. Email magic link — no password. postMagicLink stub advances the step.
+          Gated on methodOn('magicLink'). %>
+      <form @submit.prevent="submitMagicLink()" novalidate x-show="methodOn('magicLink')">
+        <div class="mb-3">
+          <label class="block text-xs text-secondary mb-1 font-medium">Email</label>
+          <%= render "studio/modals/shared/email_field",
+                name: nil, x_model: "email",
+                placeholder: "you@example.com", required: true,
+                disabled_expr: "!!props.submitting" %>
+        </div>
+        <template x-if="props.formError">
+          <p class="text-red-400 text-xs mb-3" x-text="props.formError"></p>
+        </template>
+        <button type="submit" :disabled="!!props.submitting"
+                class="btn btn-neutral btn-lg w-full gap-2 disabled:cursor-wait">
+          <span x-show="props.submitting === 'magic-link'" class="spinner" aria-hidden="true"></span>
+          <span x-text="props.submitting === 'magic-link' ? 'Sending link…' : 'Email Link'"></span>
+        </button>
+        <p class="text-xs text-muted text-center mt-2">No password needed — we'll email you a one-tap link.</p>
+      </form>
+  </div>
+
+  <%# === MAGIC-LINK-SENT STEP ============================================== %>
+  <template x-if="props.step === 'magic-link-sent'">
+    <div>
+      <%= render "studio/modals/blocks/card_header", icon_emoji: '📬', title: 'Check your inbox' do %>
+        We emailed <span class="text-heading font-medium break-all" x-text="props.sentEmail"></span>
+        a one-tap sign-in link. Check your email and
+        <span class="text-heading font-semibold">Click the Magic Link</span> to continue.
+      <% end %>
+      <%= render "studio/modals/auth/resend_footer", modal_store: "dsModals" %>
+    </div>
+  </template>
+
+  <%# === MAGIC-LINK-RESENT STEP =========================================== %>
+  <template x-if="props.step === 'magic-link-resent'">
+    <div>
+      <%= render "studio/modals/blocks/card_header", icon_color: 'primary', title: 'Link Resent!' do %>
+        We just resent <span class="text-heading font-medium break-all" x-text="props.sentEmail"></span>
+        a one-tap sign-in link. Check your email and
+        <span class="text-heading font-semibold">Click the Magic Link</span> to continue.
+      <% end %>
+      <%= render "studio/modals/auth/resend_footer", modal_store: "dsModals" %>
+    </div>
+  </template>
+
+  <%# === REDIRECT STEP ===================================================== %>
+  <template x-if="props.step === 'redirect'">
+    <div>
+      <%= render "studio/modals/blocks/card_header",
+            icon_emoji_key: "props.icon || '📍'",
+            title_key:      "props.title || 'Heading out'",
+            subtitle_key:   "props.message || 'Taking you to the next step.'" %>
+      <%= render "studio/modals/blocks/cta_redirect",
+            href_key:         "props.url",
+            label_key:        "props.cta || 'Go now'",
+            duration_seconds: 5,
+            modal_store:      "dsModals" %>
+    </div>
+  </template>
+</div>