studio-engine 0.17.0 → 0.19.0

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>

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

@@ -0,0 +1,23 @@
+<%# === Template: SUCCESS modal ======================================
+    Large-title celebration for end states — action completed, item created.
+    card_header at :lg gives a text-3xl title; the primary CTA pulls the user
+    forward. For a success that warrants a Solana tx link / auto-redirect drain,
+    use studio/modals/blocks/_onchain_success instead. 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>
+  <%= render "studio/modals/blocks/card_header",
+        size: :lg,
+        icon_color: 'primary',
+        title: "Done!",
+        subtitle: "Operation completed. Swap in the real success copy + CTA destination." %>
+
+  <button @click="$store.<%= modal_store %>.close()" class="btn btn-primary btn-lg w-full">
+    Continue
+  </button>
+  <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/templates/_wizard.html.erb

@@ -0,0 +1,75 @@
+<%# === Template: WIZARD modal ======================================
+    Multi-step flow with a segmented progress pill + centered header. Use for
+    onboarding, checkout journeys, anything that breaks into 2-4 screens. Ported
+    from turf-monster.
+
+    Visual identity (distinct from form/action/status): centered title above the
+    pill; N-segment pill (filled = primary, upcoming = inset+subtle); single
+    primary CTA pulling forward; Back as a subtle link, hidden on step 1.
+
+    Local: modal_store — Alpine store name backing close(). Default "modals". %>
+<% modal_store = local_assigns.fetch(:modal_store, "modals") %>
+<div x-data="{ step: 1, total: 3 }">
+  <div class="relative mb-3 -mt-2">
+    <h3 class="text-heading font-bold text-lg leading-tight text-center pt-1">Wizard Template</h3>
+    <button type="button" @click="$store.<%= modal_store %>.close()"
+            class="absolute top-0 right-0 -mr-2 text-secondary hover:text-heading text-xl leading-none"
+            aria-label="Close">&times;</button>
+  </div>
+
+  <%# Inline x-for pill — the demo's step counter lives in local x-data, so the
+      static-ERB progress_pill block doesn't fit. Real wizards driven by props
+      can render studio/modals/blocks/progress_pill directly. %>
+  <div class="flex items-center justify-center gap-1.5 mx-auto max-w-[200px] mb-6">
+    <template x-for="i in total" :key="i">
+      <div class="h-1.5 flex-1 rounded-full transition-colors duration-300"
+           :class="step >= i ? 'bg-primary' : 'bg-inset border border-subtle'"></div>
+    </template>
+  </div>
+
+  <template x-if="step === 1">
+    <div class="text-center space-y-3 min-h-[120px]">
+      <h4 class="text-heading font-semibold text-base">Welcome</h4>
+      <p class="text-sm text-secondary">
+        First step — collect any prerequisites or intro context here. Replace this
+        block with whatever your wizard's opening screen needs.
+      </p>
+    </div>
+  </template>
+
+  <template x-if="step === 2">
+    <div class="text-center space-y-3 min-h-[120px]">
+      <h4 class="text-heading font-semibold text-base">Configure</h4>
+      <p class="text-sm text-secondary">
+        Middle step(s) — forms, selections, anything that needs user input. Each step
+        gets its own <code class="text-xs bg-inset px-1 rounded">&lt;template x-if&gt;</code> block.
+      </p>
+    </div>
+  </template>
+
+  <template x-if="step === 3">
+    <div class="text-center space-y-3 min-h-[120px]">
+      <h4 class="text-heading font-semibold text-base">Confirm</h4>
+      <p class="text-sm text-secondary">
+        Final step — show the summary + primary commit action. The Finish button
+        below typically calls your real submit handler then closes the modal.
+      </p>
+    </div>
+  </template>
+
+  <button type="button"
+          @click="step < total ? step++ : $store.<%= modal_store %>.close()"
+          class="btn btn-primary btn-lg w-full mt-2"
+          x-text="step === total ? 'Finish' : 'Next'"></button>
+  <button type="button"
+          x-show="step > 1"
+          @click="step--"
+          class="block mx-auto mt-3 text-sm text-secondary hover:text-heading transition">
+    &larr; Back
+  </button>
+  <button type="button"
+          @click="$store.<%= modal_store %>.close()"
+          class="block mx-auto mt-2 text-xs text-muted hover:text-heading transition">
+    Close
+  </button>
+</div>

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

@@ -0,0 +1,120 @@
+<%#  Modal specimen card for the living style guide (admin/style) Modals section.
+
+     Unlike the generic style/_specimen (Tricks), a modal specimen is INTERACTIVE:
+
+       - the WHOLE card is the trigger (role=button, Enter/Space) — click it to
+         open the real modal with the current toggle config (item 3).
+       - the header carries a small Copy that yields a CONVERSATIONAL reference
+         an agent can act on (not a raw JS blob) — the operator references this
+         page when chatting (item 1).
+       - an optional row of option toggles lets the user configure the modal
+         before opening; their clicks/keys do NOT bubble to the card open (item 2).
+       - an optional active-card GLOW (.studio-team-glow) that reactively lights
+         when this card represents the currently-open modal + step, and slides to
+         the next card as the step machine advances (items 5/6). The glow rides an
+         un-clipped wrapper (the card itself is overflow-hidden), mirroring TM's
+         holo-wrap / holo-card split, and fades via --studio-team-glow-opacity so
+         it transitions smoothly between cards.
+
+     Locals:
+       label      (String, required) - the specimen name (header, uppercase).
+       reference  (String, required) - the conversational copy text.
+       open_expr  (String, required) - Alpine expression run to open the modal.
+                  May read `opts.*` from card_data (the toggle state).
+       card_data  (String, optional) - INNER x-data (no braces), merged after
+                  copiedRef. E.g. "opts: { magicLink: true, google: true }".
+       glow_when  (String, optional) - Alpine boolean expr; truthy => active glow.
+       toggles    (Array<Hash{model:,label:}>, optional) - option checkboxes bound
+                  into the card x-data (e.g. { model: 'opts.google', label: 'Google' }).
+       disabled   (Boolean, optional) - capability off: greyed + badged.
+       openable   (Boolean, optional) - with disabled, keep it clickable (preview).
+       disabled_label (String, optional) - the flag text.
+     Block: the mini-mock stage (a not-to-scale visual representation). %>
+<%
+  label          = local_assigns.fetch(:label)
+  # Developer-authored reference sentence, rendered as hidden text content (the
+  # Copy button reads textContent). html_safe keeps its quotes literal in the
+  # markup; it holds no HTML-special chars.
+  reference      = local_assigns.fetch(:reference).to_s.html_safe
+  # open_expr / glow_when are developer-authored Alpine expressions (not user
+  # input); mark html_safe so their single quotes render literally into the
+  # attribute rather than as &#39; (cleaner HTML; the browser decodes either way).
+  open_expr      = local_assigns.fetch(:open_expr).to_s.html_safe
+  card_data      = local_assigns.fetch(:card_data, "").to_s.strip
+  glow_when      = local_assigns[:glow_when]&.to_s&.html_safe
+  toggles        = local_assigns[:toggles] || []
+  disabled       = local_assigns[:disabled]
+  openable       = local_assigns[:openable]
+  disabled_label = local_assigns[:disabled_label].presence || "disabled on this app"
+  clickable      = !(disabled && !openable)
+  inner_cls      = openable ? "opacity-60 grayscale" : "opacity-40 grayscale select-none pointer-events-none"
+  card_x_data    = "{ copiedRef: false#{card_data.present? ? ", #{card_data}" : ''} }"
+%>
+<%# Wrapper — carries the active-card glow (un-clipped) + the shared x-data. %>
+<%# h-full so the card stretches to its grid row's tallest (per-row equal
+    height via the grid's default align-items: stretch). %>
+<div class="relative h-full<%= " studio-team-glow rounded-xl" if glow_when %>"
+     x-data="<%= card_x_data %>"
+     <% if glow_when %>:style="{ '--studio-team-glow-opacity': (<%= glow_when %>) ? '0.95' : '0' }"<% end %>>
+  <article
+      class="card overflow-hidden flex flex-col h-full<%= " opacity-95" if disabled %><%= " cursor-pointer" if clickable %>"
+      <%= 'aria-disabled="true"'.html_safe if disabled %>
+      <% if clickable %>
+        role="button" tabindex="0"
+        @click="<%= open_expr %>"
+        @keydown.enter.prevent="<%= open_expr %>"
+        @keydown.space.prevent="<%= open_expr %>"
+        aria-label="Open the <%= label %> modal"
+      <% end %>>
+
+    <%# Header — the centered TITLE is itself the copy control (a button + a small
+        clipboard icon that flips to a check). @click.stop + @keydown.stop keep the
+        copy from bubbling to the card's open handler: clicking the title copies
+        and does NOT open; clicking anywhere else on the card still opens. The
+        button activates on Enter/Space natively (firing @click.stop = copy). %>
+    <div class="flex items-center justify-center px-3 pt-3">
+      <button type="button"
+              class="inline-flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wider text-muted hover:text-heading transition"
+              title="Copy an agent-ready reference to this modal"
+              aria-label="Copy an agent-ready reference to this modal"
+              @click.stop="navigator.clipboard?.writeText($refs.ref.textContent.trim()); copiedRef = true; setTimeout(() => copiedRef = false, 1400)"
+              @keydown.stop>
+        <span><%= label %></span>
+        <svg x-show="!copiedRef" class="w-3 h-3 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
+        </svg>
+        <svg x-show="copiedRef" x-cloak class="w-3 h-3 shrink-0" style="color: var(--color-success)" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
+        </svg>
+        <span class="sr-only" x-text="copiedRef ? 'Copied' : ''"></span>
+      </button>
+    </div>
+    <span x-ref="ref" class="hidden"><%= reference %></span>
+
+    <%# Stage — the not-to-scale mini-mock. %>
+    <div class="relative flex flex-1 flex-wrap items-center justify-center gap-4 p-6 min-h-32">
+      <% if disabled %>
+        <span class="absolute top-2 right-2 badge z-10" style="color: var(--color-warning); border-color: var(--color-warning)"><%= disabled_label %></span>
+        <div class="flex flex-wrap items-center justify-center gap-4 <%= inner_cls %>"><%= yield %></div>
+      <% else %>
+        <%= yield %>
+      <% end %>
+      <% if clickable %>
+        <span class="pointer-events-none absolute bottom-2 right-2 text-2xs text-secondary opacity-70">Open &nearr;</span>
+      <% end %>
+    </div>
+
+    <%# Toggles — configure the modal before opening (clicks/keys stay local). %>
+    <% if toggles.any? %>
+      <div class="border-t border-subtle px-3 py-2.5 flex flex-wrap gap-x-4 gap-y-1.5"
+           @click.stop @keydown.stop>
+        <% toggles.each do |tg| %>
+          <label class="flex items-center gap-1.5 text-2xs text-secondary cursor-pointer select-none">
+            <input type="checkbox" x-model="<%= tg[:model] %>" class="w-3.5 h-3.5 rounded accent-primary cursor-pointer">
+            <span><%= tg[:label] %></span>
+          </label>
+        <% end %>
+      </div>
+    <% end %>
+  </article>
+</div>