studio-engine 0.17.0 → 0.18.0

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

@@ -8,6 +8,11 @@
   store registration, and the window.StudioModals.holdAtLeast(ms)
   helper. The animation keyframes ship inline in the style block
   below, so consumers need no extra CSS to get the full behavior.
+  A canonical copy of the SAME keyframes also lives in the shared
+  motion layer (app/assets/tailwind/studio_engine/engine-motion.css)
+  for pages that drive a modal host WITHOUT rendering this partial —
+  e.g. the living style guide's page-scoped dsModals host. The two are
+  byte-identical; keep them in sync if you retune a curve or duration.
   Consumer integration example and API reference: the "Modal host"
   section of the gem README.
 %>

data/app/views/studio/modals/_image_upload.html.erb

@@ -26,6 +26,11 @@
   function cropPhotoModal(opts) {
     opts = opts || {};
     return {
+      // Which Alpine store this modal is mounted in. Defaults to 'modals' (the
+      // shared host); the living style guide passes { store: 'dsModals' } so the
+      // crop-photo modal opens on its page-scoped host without colliding with
+      // the app-level shared host.
+      _storeName: opts.store || 'modals',
       cropper: null,
       imageUrl: null,
       fromParent: false,
@@ -46,7 +51,7 @@
       dispatch: false,
 
       init() {
-        var current = this.$store.modals.current();
+        var current = this.$store[this._storeName].current();
         var props = (current && current.props) || {};
         if (props.aspectRatio) this.aspectRatio = props.aspectRatio;
         if (props.maxWidth) this.maxWidth = props.maxWidth;
@@ -77,8 +82,14 @@
           });
           // Cropping in progress — lock the modal (no click-outside / escape) so
           // an accidental click doesn't discard the crop. Cancel still works.
-          var cur = self.$store.modals.current();
-          if (cur && cur.props) cur.props.dismissible = false;
+          // Also reflect the crop sub-state onto the store entry (cropReady) so
+          // an external observer can tell the picker state apart from the crop
+          // state — the modal's own `imageUrl` is LOCAL x-data and never lands on
+          // props, so props alone can't distinguish them. The living style guide
+          // reads this to move its active-card glow from the Image Upload card to
+          // the Crop Photo card the moment an image is loaded (picker -> cropper).
+          var cur = self.$store[self._storeName].current();
+          if (cur && cur.props) { cur.props.dismissible = false; cur.props.cropReady = true; }
         });
       },
 
@@ -112,7 +123,7 @@
 
       cancel() {
         if (this.cropper) { this.cropper.destroy(); this.cropper = null; }
-        this.$store.modals.close();
+        this.$store[this._storeName].close();
       },
 
       confirm() {
@@ -134,7 +145,7 @@
           // dispatch mode: the opener's host owns the post-confirm flow
           // (processing modal -> success toast), so don't pop the stack here.
           // fromParent (no dispatch): close the modal now.
-          if (!self.dispatch) self.$store.modals.close();
+          if (!self.dispatch) self.$store[self._storeName].close();
         }, "image/png");
       }
     };

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

@@ -1,7 +1,11 @@
 <%# Generic "saving" loading card, opened by window.submitFormWithProgress with
     a { title } prop while a Turbo form uploads. Register it in your modal-host
-    block alongside crop-photo. Single root for the host's <template x-if>. %>
+    block alongside crop-photo. Single root for the host's <template x-if>.
+
+    Local: store — Alpine store name backing the title read. Default "modals".
+    The living style guide passes store: "dsModals" for its page-scoped host. %>
+<% saving_store = local_assigns.fetch(:store, "modals") %>
 <div>
   <%= render "studio/modals/blocks/processing_card",
-        title_key: "$store.modals.current()?.props?.title || 'Saving…'" %>
+        title_key: "$store.#{saving_store}.current()?.props?.title || 'Saving…'" %>
 </div>

data/app/views/studio/modals/auth/_resend_footer.html.erb

@@ -0,0 +1,25 @@
+<%#
+  Resend-link + error + Close footer, shared by the auth modal's
+  magic-link-sent and magic-link-resent steps (identical in both). Ported from
+  turf-monster. Rendered INSIDE each step's root <div> (so the parent
+  <template x-if>'s single-root rule is unaffected) and within the auth modal's
+  x-data scope, so props.* and resendMagicLink() resolve from the host
+  component. Resend is a LINK; disabled during an in-flight resend and the 60s
+  cooldown, which it counts down inline. Keep this free of double-quotes and
+  backticks inside the Alpine expressions.
+
+  Locals:
+    modal_store — Alpine store name backing close(). Default "modals".
+%>
+<%
+  modal_store = local_assigns.fetch(:modal_store, "modals")
+%>
+<button @click="resendMagicLink()" :disabled="props.submitting === 'magic-link' || (props.resendCooldown || 0) > 0"
+        class="block mx-auto text-sm text-primary hover:text-primary-300 underline underline-offset-2 disabled:opacity-50 disabled:no-underline">
+  <span class="inline-flex items-center justify-center gap-1.5">
+    <span x-show="props.submitting === 'magic-link'" class="spinner" aria-hidden="true"></span>
+    <span x-text="props.submitting === 'magic-link' ? 'Resending…' : ((props.resendCooldown || 0) > 0 ? ('Resend available in ' + props.resendCooldown + 's') : 'Resend link')"></span>
+  </span>
+</button>
+<p x-show="props.resendError" x-cloak class="text-xs text-red-400 mt-3 text-center" x-text="props.resendError"></p>
+<button @click="$store.<%= modal_store %>.close()" class="block mx-auto mt-3 text-sm text-secondary hover:text-heading transition">Close</button>

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

@@ -0,0 +1,83 @@
+<%#
+  Shared modal card header — icon pill + title + subtext. Owns the visual top
+  of every success / confirmation / status modal so the header style stays
+  aligned across the family. Each callsite slots its own action area (button,
+  link, hold button) BELOW this header. Ported from turf-monster into the engine
+  (studio-engine v0.18) so the shared modal blocks live in one place.
+
+  Locals (all optional except title/title_key):
+    title:          static title string
+    title_key:      Alpine expression for the title (x-text). Priority over title.
+    subtitle:       static subtext string
+    subtitle_key:   Alpine expression for the subtext (x-text). Priority over subtitle.
+    icon_color:     color token for the default check — 'primary' (default),
+                    'success', 'warning', 'mint'.
+    icon_emoji:     large emoji (text-5xl, no pill) instead of the default check.
+    icon_emoji_key: Alpine expression returning the emoji (x-text). Priority
+                    over icon_emoji.
+    icon:           :error — X mark in a red pill (hard error states).
+                    :external_tab — diagonal arrow pill (action in another tab).
+    spinner:        truthy — three bouncing dots instead of the check pill,
+                    for processing / loading states.
+    size:           :md (default) OR :lg (celebration end-state, text-3xl title).
+
+  Block: if given, the block's content replaces the subtitle area. Explicit
+  subtitle locals are checked BEFORE block_given? — a partial's block_given? can
+  read TRUE off the layout yield even with no block passed (see the engine's
+  Rails-partial block_given? note), so lead with the locals.
+%>
+<%
+  icon_color = local_assigns[:icon_color] || 'primary'
+  size       = local_assigns[:size] || :md
+  pill_class = size == :lg ? 'w-14 h-14' : 'w-12 h-12'
+  svg_class  = size == :lg ? 'w-7 h-7'   : 'w-6 h-6'
+  title_cls  = size == :lg ? 'text-3xl font-bold text-heading mb-2' : 'text-lg font-bold text-heading mb-2'
+  sub_cls    = size == :lg ? 'text-sm text-secondary mb-4'          : 'text-xs text-secondary mb-5'
+%>
+<div class="text-center">
+  <% if local_assigns[:spinner] %>
+    <div class="mx-auto <%= pill_class %> flex items-center justify-center mb-4">
+      <div class="loading-dots">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </div>
+  <% elsif local_assigns[:icon] == :error %>
+    <div class="mx-auto <%= pill_class %> rounded-full bg-red-500/15 flex items-center justify-center mb-4">
+      <svg class="<%= svg_class %> text-red-400" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+      </svg>
+    </div>
+  <% elsif local_assigns[:icon] == :external_tab %>
+    <div class="mx-auto <%= pill_class %> rounded-full bg-<%= icon_color %>/15 flex items-center justify-center mb-4">
+      <svg class="<%= svg_class %> text-<%= icon_color %>" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"/>
+      </svg>
+    </div>
+  <% elsif local_assigns[:icon_emoji_key] %>
+    <div class="text-5xl mb-4 leading-none" x-text="<%= icon_emoji_key %>"></div>
+  <% elsif local_assigns[:icon_emoji] %>
+    <div class="text-5xl mb-4 leading-none"><%= icon_emoji %></div>
+  <% else %>
+    <div class="mx-auto <%= pill_class %> rounded-full bg-<%= icon_color %>/15 flex items-center justify-center mb-4">
+      <svg class="<%= svg_class %> text-<%= icon_color %>" 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>
+  <% end %>
+
+  <% if local_assigns[:title_key] %>
+    <h3 class="<%= title_cls %>" x-text="<%= title_key %>"></h3>
+  <% elsif local_assigns[:title] %>
+    <h3 class="<%= title_cls %>"><%= title %></h3>
+  <% end %>
+
+  <% if local_assigns[:subtitle_key] %>
+    <p class="<%= sub_cls %>" x-text="<%= subtitle_key %>"></p>
+  <% elsif local_assigns[:subtitle] %>
+    <p class="<%= sub_cls %>"><%= subtitle %></p>
+  <% elsif block_given? %>
+    <p class="<%= sub_cls %>"><%= yield %></p>
+  <% end %>
+</div>

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

@@ -0,0 +1,73 @@
+<%#
+  Primary CTA with a drain animation that auto-redirects when the countdown
+  hits zero. Used on celebration cards where the user is leaving the modal
+  anyway — the drain is both a progress bar AND a click-now affordance. Ported
+  from turf-monster.
+
+  The drain always plays. The redirect is gated:
+    - URL truthy → drains, then window.location = URL
+    - URL null   → drains; timer fires a no-op, a click falls through to
+                   closing the modal (so a gallery preview stays alive).
+
+  Locals (optional except href_key):
+    href_key         — Alpine expression: the destination URL or null. Re-read
+                       inside the timer fire so callers can lazy-resolve.
+    label_html       — Button label HTML. Default "Continue".
+    label_key        — Alpine expression returning the label (x-text). Priority
+                       over label_html.
+    duration_seconds — Drain + redirect timer in seconds. Default 5.
+    modal_store      — Alpine store name backing close(). Default "modals".
+
+  Co-located x-data self-manages the timer. Keep the x-data free of
+  double-quotes and backticks — it is a double-quoted HTML attribute.
+%>
+<%
+  href_key         = local_assigns.fetch(:href_key)
+  label_html       = local_assigns.fetch(:label_html, "Continue")
+  duration_seconds = local_assigns.fetch(:duration_seconds, 5)
+  modal_store      = local_assigns.fetch(:modal_store, "modals")
+%>
+<div x-data="{
+       _redirectTimer: null,
+       redirecting: false,
+       go(url) {
+         if (!url) return false;
+         this.redirecting = true;
+         try { window.location.href = url; } catch (_) {}
+         return true;
+       },
+       init() {
+         var self = this;
+         self._redirectTimer = setTimeout(function () {
+           self._redirectTimer = null;
+           self.go(<%= href_key %>);
+         }, <%= duration_seconds * 1000 %>);
+       },
+       destroy() {
+         if (this._redirectTimer) { clearTimeout(this._redirectTimer); this._redirectTimer = null; }
+       }
+     }">
+  <a :href="(<%= href_key %>) || '#'"
+     @click="
+       if (redirecting) { $event.preventDefault(); return; }
+       if ($event.metaKey || $event.ctrlKey || $event.shiftKey) return;
+       $event.preventDefault();
+       var u = (<%= href_key %>);
+       if (u) { go(u); } else { $store.<%= modal_store %>.close(); }
+     "
+     :class="redirecting ? 'pointer-events-none' : ''"
+     :aria-disabled="redirecting ? 'true' : 'false'"
+     class="btn btn-primary btn-lg w-full relative overflow-hidden no-underline">
+    <div class="absolute inset-0 pointer-events-none origin-left"
+         x-show="!redirecting"
+         style="background: rgba(255,255,255,0.18); animation: studio-modal-drain <%= duration_seconds %>s linear forwards;"></div>
+    <% if local_assigns[:label_key] %>
+      <span class="relative z-10" x-show="!redirecting" x-text="<%= label_key %>"></span>
+    <% else %>
+      <span class="relative z-10" x-show="!redirecting"><%= label_html.html_safe %></span>
+    <% end %>
+    <span class="relative z-10 inline-flex items-center justify-center" x-show="redirecting" x-cloak>
+      <span class="spinner" style="--spinner-color: currentColor" aria-hidden="true"></span>
+    </span>
+  </a>
+</div>

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

@@ -0,0 +1,52 @@
+<%#
+  Generic on-chain transaction success card — the default-fallback success
+  state for any Solana transaction that isn't a domain-specific celebration
+  (faucet mint, on-chain rename, contest creation). Ported from turf-monster.
+
+  Same visual spine as a rich entry card (card_header at :lg with the primary
+  check pill + branded Solana tx link) MINUS the enrichments: no seeds bar, no
+  level-up, no auto-redirect drain. The CTA is a plain optional link; when no
+  cta label/href is supplied the card degrades to just the Dismiss link.
+
+  Single root: content lives in one <div> so Alpine's <template x-if> clones it
+  whole.
+
+  Locals:
+    tx_signature_key — Alpine expression returning the tx hash (link mounts when truthy)
+    title_key        — Alpine expression returning the headline
+    subtitle_key     — Alpine expression returning the sub-headline
+    cta_label_key    — Alpine expression returning the CTA label (button mounts when truthy)
+    cta_href_key     — Alpine expression returning the CTA href
+    cluster_param    — explorer cluster query, forwarded to solana_tx_link. Default "".
+    modal_store      — Alpine store name backing close(). Default "modals".
+%>
+<%
+  tx_signature_key = local_assigns.fetch(:tx_signature_key)
+  title_key        = local_assigns.fetch(:title_key)
+  subtitle_key     = local_assigns.fetch(:subtitle_key)
+  cta_label_key    = local_assigns.fetch(:cta_label_key)
+  cta_href_key     = local_assigns.fetch(:cta_href_key)
+  cluster_param    = local_assigns.fetch(:cluster_param, "")
+  modal_store      = local_assigns.fetch(:modal_store, "modals")
+%>
+<div>
+  <%= render "studio/modals/blocks/card_header",
+        size: :lg,
+        icon_color: 'primary',
+        title_key:    title_key,
+        subtitle_key: subtitle_key %>
+
+  <%= render "studio/modals/blocks/solana_tx_link",
+        tx_signature_key: tx_signature_key, cluster_param: cluster_param %>
+
+  <template x-if="(<%= cta_label_key %>)">
+    <a :href="(<%= cta_href_key %>) || '#'"
+       class="btn btn-primary btn-lg w-full no-underline"
+       x-text="<%= cta_label_key %>"></a>
+  </template>
+
+  <button @click="$store.<%= modal_store %>.close()"
+          class="block mx-auto mt-3 text-sm text-secondary hover:text-heading transition">
+    Dismiss
+  </button>
+</div>

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

@@ -0,0 +1,23 @@
+<%#
+  Segmented progress pill — N rounded bars in a row, the first `current`
+  filled in primary, the rest muted outlines. Drops into any wizard-style modal
+  step to show position in a multi-step flow. Ported from turf-monster.
+
+  Locals:
+    current — 1-indexed step number to fill up to (current: 2, total: 3 fills
+              2/3). Required.
+    total   — total segment count. Default 3.
+%>
+<%
+  current = local_assigns.fetch(:current)
+  total   = local_assigns.fetch(:total, 3)
+%>
+<div class="flex items-center justify-center gap-1.5 mx-auto max-w-[200px] mb-4">
+  <% total.times do |i| %>
+    <% if (i + 1) <= current %>
+      <div class="h-1.5 flex-1 rounded-full bg-primary"></div>
+    <% else %>
+      <div class="h-1.5 flex-1 rounded-full bg-inset border border-subtle"></div>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,35 @@
+<%#
+  Shared modal shell — opt-in convenience wrapper for a title row + close ×.
+  Ported from turf-monster. Wrap content with:
+    render layout: "studio/modals/blocks/shell", locals: { title: "…" } do … end
+
+  Locals (all optional):
+    title       — top-row title string.
+    dismissible — default true; suppress the close button when false. (The host
+                  gates escape + click-outside on props.dismissible at open()
+                  time, not this flag.)
+    modal_store — Alpine store name backing close(). Default "modals".
+%>
+<%
+  shell_title       = local_assigns[:title]
+  shell_dismissible = local_assigns.fetch(:dismissible, true)
+  modal_store       = local_assigns.fetch(:modal_store, "modals")
+%>
+<div>
+  <% if shell_title || shell_dismissible %>
+    <div class="flex items-start justify-between gap-3 -mt-2 -mr-2 mb-3">
+      <% if shell_title %>
+        <h3 class="text-heading font-bold text-lg leading-tight pt-1"><%= shell_title %></h3>
+      <% else %>
+        <span></span>
+      <% end %>
+      <% if shell_dismissible %>
+        <button type="button" @click="$store.<%= modal_store %>.close()"
+                class="text-secondary hover:text-heading text-xl leading-none flex-shrink-0"
+                aria-label="Close">&times;</button>
+      <% end %>
+    </div>
+  <% end %>
+
+  <%= yield %>
+</div>

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

@@ -0,0 +1,42 @@
+<%#
+  Branded Solana explorer tx link — gradient Solana mark + truncated signature
+  + external-link glyph in a subtle bordered pill. Shared by the on-chain
+  success cards (studio/modals/blocks/_onchain_success and a consumer's entry
+  card). Mounts only when the signature expression is truthy. Ported from
+  turf-monster; the cluster query is a plain local so the engine partial carries
+  no Solana::Config dependency.
+
+  Only one success card is ever in the DOM at a time, so the fixed gradient id
+  is collision-safe.
+
+  Locals:
+    tx_signature_key — Alpine expression returning the Solana tx hash. Required.
+    cluster_param    — appended to the explorer URL (e.g. "?cluster=devnet").
+                       Default "" (mainnet).
+%>
+<%
+  tx_signature_key = local_assigns.fetch(:tx_signature_key)
+  cluster_param    = local_assigns.fetch(:cluster_param, "")
+%>
+<template x-if="(<%= tx_signature_key %>)">
+  <div class="text-center mb-3 -mt-1">
+    <a :href="'https://explorer.solana.com/tx/' + (<%= tx_signature_key %>) + '<%= cluster_param %>'"
+       target="_blank" rel="noopener"
+       class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border border-subtle hover:border-primary/50 transition group no-underline"
+       style="background: rgb(var(--color-primary-500-rgb) / 0.06);">
+      <svg width="14" height="11" viewBox="0 0 397 311" fill="none">
+        <defs><linearGradient id="tx-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(#tx-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(#tx-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(#tx-solana-grad)"/>
+      </svg>
+      <span class="font-mono text-[11px] text-secondary group-hover:text-primary transition"
+            x-text="(<%= tx_signature_key %>) ? ((<%= tx_signature_key %>).substring(0, 16) + '…') : ''"></span>
+      <svg class="w-3 h-3 text-muted group-hover:text-primary transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+      </svg>
+    </a>
+  </div>
+</template>

data/app/views/studio/modals/shared/_age_attestation.html.erb

@@ -0,0 +1,34 @@
+<%#
+  Legal-age attestation checkbox — underwriting compliance for skill-based
+  contests. Ported from turf-monster into the engine. Binds x-model into the
+  caller's Alpine scope; the caller gates its CTAs on that property. The SERVER
+  is the real boundary — every signup endpoint rejects new account creation
+  without the attestation.
+
+  Unlike the turf-monster original, this engine partial does NOT self-gate on an
+  AppFlags flag — a consumer that wants the attestation renders it; one that
+  doesn't simply omits the render. Callers that omit it initialize their
+  ageAttested Alpine state to true so every CTA gate passes.
+
+  Locals (all optional):
+    x_model     — Alpine model target (default "ageAttested")
+    error_model — Alpine error-flag target (default "ageError")
+%>
+<%
+  x_model     = local_assigns.fetch(:x_model, "ageAttested")
+  error_model = local_assigns.fetch(:error_model, "ageError")
+%>
+<div>
+  <label class="flex items-start gap-2.5 text-xs text-secondary leading-snug cursor-pointer select-none">
+    <input type="checkbox" x-model="<%= x_model %>" @change="<%= error_model %> = false"
+           data-age-attestation
+           class="mt-0.5 w-4 h-4 shrink-0 rounded accent-primary cursor-pointer">
+    <span>
+      I confirm I am of legal age to participate in skill-based contests in my
+      state (18+ in most states; 19+ in AL/NE; 21+ in IA/MA/VA).
+    </span>
+  </label>
+  <p x-show="<%= error_model %>" x-cloak class="text-xs text-red-400 mt-1.5 ml-6">
+    Please confirm you are of legal age to continue.
+  </p>
+</div>

data/app/views/studio/modals/shared/_email_field.html.erb

@@ -0,0 +1,70 @@
+<%#
+  Email input for the modal family — a themed <input type="email"> that either
+  posts through its own `name` or feeds an enclosing x-model. Ported from
+  turf-monster; the live client-side validity decorator (window.emailValidator)
+  is intentionally NOT a dependency here so the engine partial is self-contained
+  — the server stays the real boundary. A consumer that ships emailValidator can
+  pass validator: true to opt back into the right-edge spinner / check / X.
+
+  Locals (all optional, sensible defaults via local_assigns.fetch):
+    name          — input name attr (default "email"; pass nil/false to omit,
+                    e.g. a modal that dispatches its x-model value instead)
+    id            — input id attr (default: the name)
+    value         — prefill value (default "")
+    placeholder   — (default "you@example.com")
+    required      — (default false)
+    autocomplete  — (default "email")
+    autofocus     — (default false)
+    input_class   — base input classes (default "input-field")
+    x_model       — Alpine x-model target resolved in an ENCLOSING scope
+    x_ref         — Alpine x-ref name
+    disabled_expr — Alpine :disabled expression (e.g. "props.submitting")
+    validator     — when true, wraps in x-data="emailValidator()" and paints the
+                    right-edge validity indicator (consumer must ship the factory)
+%>
+<%
+  name          = local_assigns.fetch(:name, "email")
+  field_id      = local_assigns.fetch(:id, name)
+  field_value   = local_assigns.fetch(:value, "")
+  placeholder   = local_assigns.fetch(:placeholder, "you@example.com")
+  required      = local_assigns.fetch(:required, false)
+  autocomplete  = local_assigns.fetch(:autocomplete, "email")
+  autofocus     = local_assigns.fetch(:autofocus, false)
+  input_class   = local_assigns.fetch(:input_class, "input-field")
+  x_model       = local_assigns.fetch(:x_model, nil)
+  x_ref         = local_assigns.fetch(:x_ref, nil)
+  disabled_expr = local_assigns.fetch(:disabled_expr, nil)
+  validator     = local_assigns.fetch(:validator, false)
+%>
+<div class="relative"<%= ' x-data="emailValidator()"'.html_safe if validator %>>
+  <input type="email" inputmode="email"
+         class="<%= input_class %><%= ' pr-10' if validator %>"
+         <% if validator %>:class="{ 'email-reject': _rejecting }"<% end %>
+         placeholder="<%= placeholder %>"
+         autocomplete="<%= autocomplete %>"
+         <%= "required" if required %>
+         <%= "autofocus" if autofocus %>
+         <% if name %>name="<%= name %>"<% end %>
+         <% if field_id %>id="<%= field_id %>"<% end %>
+         value="<%= field_value %>"
+         <% if x_model %>x-model="<%= x_model %>"<% end %>
+         <% if x_ref %>x-ref="<%= x_ref %>"<% end %>
+         <% if disabled_expr %>:disabled="<%= disabled_expr %>"<% end %>
+         <% if validator %>@input="onInput($event)" @change="onInput($event)" @blur="onBlur($event)"<% end %>>
+
+  <% if validator %>
+    <%# Right-edge validity indicator — consumer's emailValidator drives status.
+        pointer-events-none so it never eats a click on the input behind it. %>
+    <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
+      <span x-show="status === 'loading'" x-cloak class="spinner text-secondary" aria-hidden="true"></span>
+      <svg x-show="status === 'valid'" x-cloak xmlns="http://www.w3.org/2000/svg" class="w-5 h-5"
+           style="color: var(--color-success)" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
+      </svg>
+      <svg x-show="status === 'invalid'" x-cloak xmlns="http://www.w3.org/2000/svg" class="w-5 h-5"
+           style="color: var(--color-danger)" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
+      </svg>
+    </div>
+  <% end %>
+</div>

data/app/views/studio/modals/templates/_action.html.erb

@@ -0,0 +1,25 @@
+<%# === Template: ACTION modal ======================================
+    One-question dialog: centered icon pill + title + subtitle + primary /
+    secondary CTAs. Use for confirmations, alerts, destructive prompts.
+    Composes card_header for the top chunk. Ported from turf-monster.
+
+    Variants: pass icon :error / :external_tab / icon_emoji / spinner OR
+    icon_color :primary / :success / :warning to card_header.
+
+    Local: modal_store — Alpine store name backing close(). Default "modals". %>
+<% modal_store = local_assigns.fetch(:modal_store, "modals") %>
+<div x-data>
+  <%= render "studio/modals/blocks/card_header",
+        size: :lg,
+        icon: :error,
+        title: "Action Template",
+        subtitle: "A centered confirmation card with a primary + secondary CTA. Best for one-question dialogs and destructive prompts." %>
+
+  <button @click="$store.<%= modal_store %>.close()" class="btn btn-danger btn-lg w-full">
+    Confirm Action
+  </button>
+  <button @click="$store.<%= modal_store %>.close()"
+          class="block mx-auto mt-3 text-sm text-secondary hover:text-heading transition">
+    Cancel
+  </button>
+</div>

data/app/views/studio/modals/templates/_form.html.erb

@@ -0,0 +1,25 @@
+<%# === Template: FORM modal ======================================
+    Starting point for any modal that captures input — settings, edit forms,
+    rename dialogs. Wraps content in the shared shell for a consistent title row
+    + close ×. Ported from turf-monster.
+
+    Local: modal_store — Alpine store name backing close(). Default "modals". %>
+<% modal_store = local_assigns.fetch(:modal_store, "modals") %>
+<div x-data="{ value: '' }">
+  <%= render layout: "studio/modals/blocks/shell", locals: { title: "Form Template", modal_store: modal_store } do %>
+    <p class="text-sm text-muted mb-4">
+      Title row + close × come from <code class="text-xs bg-inset px-1 rounded">studio/modals/blocks/shell</code>.
+      Slot in whatever inputs + primary CTA your form needs.
+    </p>
+
+    <form @submit.prevent="$store.<%= modal_store %>.close()" class="space-y-4">
+      <textarea x-model="value"
+                rows="3"
+                placeholder="Type something…"
+                class="input-field w-full resize-none"></textarea>
+      <button type="submit" class="btn btn-primary btn-lg w-full" :disabled="!value.trim()">
+        Save
+      </button>
+    </form>
+  <% end %>
+</div>

data/app/views/studio/modals/templates/_status.html.erb

@@ -0,0 +1,45 @@
+<%# === Template: STATUS modal ======================================
+    Small-title in-flight card for short async work — server save, poll,
+    side-effect that finishes in a second or two. card_header default :md keeps
+    the title subordinate to the spinner. For end-state celebrations use the
+    success template. Ported from turf-monster; the demo cycles loading → error
+    at 1.6s so a viewer can step through both states.
+
+    Local: modal_store — Alpine store name backing close(). Default "modals". %>
+<% modal_store = local_assigns.fetch(:modal_store, "modals") %>
+<div x-data="{
+       state: 'loading',
+       start() {
+         this.state = 'loading';
+         var self = this;
+         setTimeout(function() { self.state = 'error'; }, 1600);
+       }
+     }"
+     x-init="start()">
+  <template x-if="state === 'loading'">
+    <div>
+      <%= render "studio/modals/blocks/card_header",
+            spinner: true,
+            title: "Working on it…",
+            subtitle: "Status template — small-title in-flight card for short async work." %>
+      <button @click="$store.<%= modal_store %>.close()"
+              class="block mx-auto mt-3 text-sm text-secondary hover:text-heading transition">
+        Cancel
+      </button>
+    </div>
+  </template>
+
+  <template x-if="state === 'error'">
+    <div>
+      <%= render "studio/modals/blocks/card_header",
+            icon: :error,
+            title: "Something went wrong",
+            subtitle: "Surface the real error message here. Try Again should re-run the failed op." %>
+      <button @click="start()" class="btn btn-primary btn-lg w-full">Try Again</button>
+      <button @click="$store.<%= modal_store %>.close()"
+              class="block mx-auto mt-3 text-sm text-secondary hover:text-heading transition">
+        Cancel
+      </button>
+    </div>
+  </template>
+</div>