studio-engine 0.96.2 → 0.97.0.rc1

data/app/views/studio/_hold_button.html.erb

@@ -4,13 +4,27 @@
   A press-and-hold CTA for an action a host does not want taken by accident.
   Ported from turf-monster, where it confirms a contest entry.
 
-  Per-instance config travels with the button as data-* attributes
-  and is evaluated against the surrounding x-data scope at runtime
-  via Alpine.evaluate (with `d` aliased to the scope's $data). This
-  lets a single page host multiple hold buttons with different
-  callbacks — the previous baked-in-ERB approach put callbacks on
-  a window-level handler that the FIRST rendered button populated,
-  silently forcing every later button to inherit those callbacks.
+  The behaviour is studio/hold_button, on the hold-button controller
+  (studio/controllers/hold_button_controller), which arrives with the page. When
+  it does not (a module request failed at page load), the guard in the head
+  (studio/_hold_button_guard) marks the stack, and the button reads as
+  unavailable beside "This button could not load. Reload the page." A page
+  answers a hold through the events the button dispatches, which bubble:
+
+    hold-button:guard     at the press; preventDefault() refuses the hold
+    hold-button:start     the hold began
+    hold-button:validate  at validate_at; $event.detail.waitUntil(answer),
+                          a false or failed answer aborts the hold
+    hold-button:early     at early_action_at; preventDefault() takes the
+                          action over and the hold never completes
+    hold-button:success   at the full duration; preventDefault() leaves the
+                          button's state to the listener
+
+  The JS-expression locals below (guard, on_success, validate, early_action,
+  early_action_guard, on_hold_start) still work: they travel as data-*
+  attributes and are evaluated against the surrounding x-data scope, with `d`
+  and `data` aliased to its data. They stay while a consumer passes them;
+  write new call sites against the events.
 
   Locals:
     default_text       - Button label in idle state (default: "Hold to Confirm")
@@ -21,9 +35,12 @@
     guard              - JS expression that must be truthy to allow hold (default: none = always allow)
     on_success         - JS expression executed on successful hold (default: none)
     validate           - JS expression returning Promise<boolean>, called at validate_at ms (default: none)
-    validate_at        - ms delay before running validation (default: 750)
+    validate_at        - ms into the hold at which validation runs: the validate
+                         string and the hold-button:validate event (default: 750)
     early_action       - JS expression executed early (for Web3 users) (default: none)
-    early_action_at    - ms delay before firing early action (default: 1500)
+    early_action_at    - ms into the hold at which the early action runs: the
+                         early_action string and the hold-button:early event
+                         (default: 1500)
     early_action_guard - JS expression that must be truthy for early action (default: none)
     on_hold_start      - JS expression executed the instant a hold BEGINS, after
                          the guard/submitting checks pass (default: none). Used to
@@ -83,14 +100,14 @@
     transform makes it a stacking context), so the bubbles have to be a
     sibling the button paints over — they only show where they escape its
     edges, like carbonation coming off the sides. %>
-<span class="hold-stack<%= " fizz-lively" if fizz_level.to_s == "lively" %>"<% if fizz_bind %> :style="<%= fizz_bind %>"<% end %><% if fizz_style.present? %> style="<%= fizz_style %>"<% end %><% if fizz_portal %> data-fizz-portal x-init="window.studioFizzPortal && window.studioFizzPortal.mount($el)"<% end %>>
+<span class="hold-stack<%= " fizz-lively" if fizz_level.to_s == "lively" %>"<% if fizz_bind %> :style="<%= fizz_bind %>"<% end %><% if fizz_style.present? %> style="<%= fizz_style %>"<% end %><% if fizz_portal %> data-fizz-portal<% end %> data-studio-controller="hold-button">
   <%# Fizz layer — bubbles that simmer at rest, boil while the button is held,
       and burst outward on success. Purely decorative, so it is aria-hidden and
       pointer-events:none; the table behind it is seeded per hold_id (see Studio::FizzHelper). %>
   <% if fizz %>
-    <%# With fizz_portal the layers ride one wrapper, which the script below
-        moves to <body>. Until it does, the wrapper sits in the stack exactly
-        where the layers would. %>
+    <%# With fizz_portal the layers ride one wrapper, which the hold-button
+        controller moves to <body>. Until it does, the wrapper sits in the stack
+        exactly where the layers would. %>
     <% if fizz_portal %>
     <span class="hold-fizz-portal<%= " fizz-lively" if fizz_level.to_s == "lively" %>" aria-hidden="true">
     <% end %>
@@ -111,12 +128,11 @@
         <% if guard              %>data-guard="<%= guard %>"<% end %>
         <% if on_hold_start      %>data-on-hold-start="<%= on_hold_start %>"<% end %>
         <% if on_success         %>data-on-success="<%= on_success %>"<% end %>
-        <% if validate           %>data-validate="<%= validate %>" data-validate-at="<%= validate_at %>"<% end %>
-        <% if early_action       %>data-early-action="<%= early_action %>" data-early-action-at="<%= early_action_at %>"<% end %>
+        <% if validate           %>data-validate="<%= validate %>" data-validate-at="<%= validate_at %>"<% elsif local_assigns.key?(:validate_at) %>data-validate-at="<%= validate_at %>"<% end %>
+        <% if early_action       %>data-early-action="<%= early_action %>" data-early-action-at="<%= early_action_at %>"<% elsif local_assigns.key?(:early_action_at) %>data-early-action-at="<%= early_action_at %>"<% end %>
         <% if early_action_guard %>data-early-action-guard="<%= early_action_guard %>"<% end %>
         style="--duration: <%= duration %>ms"
-        @mousedown="holdBtnStart($el)" @mouseup="holdBtnEnd($el)" @mouseleave="holdBtnEnd($el)"
-        @touchstart.prevent="holdBtnStart($el)" @touchend="holdBtnEnd($el)" @touchcancel="holdBtnEnd($el)">
+        data-studio-action="mousedown->hold-button#start mouseup->hold-button#end mouseleave->hold-button#end touchstart->hold-button#press touchend->hold-button#end touchcancel->hold-button#end">
   <div class="hold-icon">
     <svg class="progress" viewBox="0 0 32 32"><circle r="8" cx="16" cy="16"/></svg>
     <svg class="tick" viewBox="0 0 24 24"><polyline points="18,7 11,16 6,12"/></svg>
@@ -135,433 +151,10 @@
     <span class="countdown-num"></span>
   </div>
 </button>
+  <%# Empty, and out of the layout, on a button that works. The guard
+      (studio/_hold_button_guard) fills it when the controller never connects,
+      and a live region has to be on the page before its text arrives to be
+      announced. %>
+  <span class="hold-notice" role="status"></span>
 </span>
 
-<script>
-  (function() {
-    if (window._holdBtnInit) return;
-    window._holdBtnInit = true;
-
-    var timers = {};
-    var nudgeTimers = {};
-    var CIRCUMFERENCE = 2 * Math.PI * 9; // ~56.55, matches r=9
-
-    // Evaluate a JS expression string against an x-data scope. Both `d`
-    // and `data` are aliased to the scope's reactive $data so call sites
-    // can use either ("d.runHoldValidations()" or "data.selectionCount").
-    //
-    // Sync only. For async expressions (e.g. validate which calls an
-    // async method), Alpine.evaluate returns SYNCHRONOUSLY — it kicks
-    // the work off via evaluateLater + callback, and returns whatever
-    // is in `result` at return time (still undefined for async). Use
-    // evalInAsync for those.
-    function evalIn(scope, expr) {
-      var d = Alpine.$data(scope);
-      return Alpine.evaluate(scope, expr, { scope: { d: d, data: d } });
-    }
-
-    // Async-aware version — returns a Promise that resolves to the
-    // expression's value. For sync expressions, resolves immediately.
-    // For async ones (Promise-returning methods like
-    // d.runHoldValidations()), the AsyncFunction flattens the Promise
-    // so the resolved value bubbles up cleanly.
-    //
-    // We DON'T use Alpine.evaluateLater here. In Alpine 3.x the
-    // `extras` arg shape is version-dependent — passing
-    // { scope: { d, data } } silently fails to inject those vars in
-    // some builds (the user hit "d is not defined" when we tried
-    // that), and the working shape changes between minor versions.
-    // Compiling our own AsyncFunction with the named params we need
-    // is portable and doesn't depend on Alpine internals.
-    var _AsyncFn = Object.getPrototypeOf(async function() {}).constructor;
-    function evalInAsync(scope, expr) {
-      var d = Alpine.$data(scope);
-      try {
-        var fn = new _AsyncFn('d', 'data', 'Alpine', 'window',
-          '"use strict"; return (' + expr + ');');
-        return fn(d, d, Alpine, window);
-      } catch (e) {
-        return Promise.reject(e);
-      }
-    }
-
-    function updateDebugRing(el, secondsLeft, totalSeconds) {
-      var debug = el.querySelector('.nudge-debug');
-      if (!debug) return;
-      var fill = debug.querySelector('circle.fill');
-      var num = debug.querySelector('.countdown-num');
-      var fraction = secondsLeft / totalSeconds;
-      fill.style.strokeDashoffset = (CIRCUMFERENCE * fraction).toFixed(2);
-      num.textContent = secondsLeft;
-    }
-
-    function triggerNudge(el, cls) {
-      if (el.classList.contains('process') || el.classList.contains('success')) return;
-      el.classList.remove('nudge', 'nudge-soft');
-      void el.offsetWidth;
-      el.classList.add(cls);
-    }
-
-    function startNudgeCycle(el, softOnly) {
-      var id = el.dataset.holdId || 'hold';
-      stopNudgeCycle(id);
-      nudgeTimers[id] = {};
-
-      var firstDelay = softOnly ? 10 : 3;
-      var repeatDelay = 10;
-      var secsLeft = firstDelay;
-      var total = firstDelay;
-      var isFirst = !softOnly;
-
-      updateDebugRing(el, secsLeft, total);
-
-      nudgeTimers[id].tick = setInterval(function() {
-        secsLeft--;
-        if (secsLeft <= 0) {
-          triggerNudge(el, isFirst ? 'nudge' : 'nudge-soft');
-          isFirst = false;
-          total = repeatDelay;
-          secsLeft = repeatDelay;
-        }
-        updateDebugRing(el, secsLeft, total);
-      }, 1000);
-    }
-
-    function stopNudgeCycle(id) {
-      if (nudgeTimers[id]) {
-        clearTimeout(nudgeTimers[id].initial);
-        clearInterval(nudgeTimers[id].interval);
-        clearInterval(nudgeTimers[id].tick);
-        delete nudgeTimers[id];
-      }
-    }
-
-    // Auto-start nudge for any hold buttons already visible
-    document.addEventListener('turbo:load', function() {
-      document.querySelectorAll('.hold-btn').forEach(function(el) {
-        el.addEventListener('animationend', function(e) {
-          if (e.animationName === 'hold-nudge' || e.animationName === 'hold-nudge-soft') {
-            el.classList.remove('nudge', 'nudge-soft');
-          }
-        });
-        startNudgeCycle(el);
-      });
-    });
-
-    // Cleanup nudge timers before Turbo caches the page
-    document.addEventListener('turbo:before-cache', function() {
-      Object.keys(nudgeTimers).forEach(function(id) { stopNudgeCycle(id); });
-    });
-
-    // ── The fizz portal (fizz_portal: true) ─────────────────────────────
-    // Moves a stack's bubble layers to the document body in one fixed box that tracks the
-    // stack's rect, so a card's overflow clip cannot cut them off. The box
-    // mirrors the button's state classes and the stack's palette, because the
-    // CSS can no longer read either through the stack. engine-motion.css,
-    // THE PORTAL, holds the other half.
-    var PORTAL_STATES = ['process', 'loading', 'success', 'error', 'nudge', 'nudge-soft'];
-    var portals = [];
-
-    // One rung above the highest z-index among the stack's ancestors, so the
-    // bubbles clear the card, the panel or the modal the button sits in,
-    // and never below --z-raised.
-    function portalZ(stack) {
-      var floor = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--z-raised'), 10);
-      var top = isNaN(floor) ? 20 : floor;
-      for (var n = stack.parentElement; n && n !== document.body; n = n.parentElement) {
-        var z = parseInt(getComputedStyle(n).zIndex, 10);
-        if (!isNaN(z) && z + 1 > top) top = z + 1;
-      }
-      return top;
-    }
-
-    function syncPortalState(p) {
-      PORTAL_STATES.forEach(function(s) {
-        p.box.classList.toggle('is-' + s, p.button.classList.contains(s));
-      });
-    }
-
-    function syncPortalPalette(p) {
-      var cs = getComputedStyle(p.stack);
-      for (var i = 1; i <= <%= Studio::FizzHelper::SLOTS %>; i++) {
-        var v = cs.getPropertyValue('--fizz-c-' + i).trim();
-        if (v) p.box.style.setProperty('--fizz-c-' + i, v);
-        else p.box.style.removeProperty('--fizz-c-' + i);
-      }
-    }
-
-    function placePortal(p) {
-      if (!p.stack.isConnected) { unmountPortal(p, false); return; }
-      var r = p.stack.getBoundingClientRect();
-      var shown = p.visible && r.width > 0 && r.height > 0;
-      p.box.style.visibility = shown ? '' : 'hidden';
-      if (shown) {
-        p.box.style.transform = 'translate(' + r.left + 'px, ' + r.top + 'px)';
-        p.box.style.width = r.width + 'px';
-        p.box.style.height = r.height + 'px';
-        if (p.parked) { clearInterval(p.parked); p.parked = null; }
-        p.frame = requestAnimationFrame(function() { placePortal(p); });
-      } else {
-        p.frame = null;
-        // Parked: no frames run, so nothing would notice the stack leaving the
-        // DOM (an x-if, a Turbo stream, a closed modal) until the next page
-        // load. A slow check tears the box and its observers down when it does.
-        if (!p.parked) {
-          p.parked = setInterval(function() {
-            if (!p.stack.isConnected) unmountPortal(p, false);
-          }, 1000);
-        }
-      }
-    }
-
-    function unmountPortal(p, restore) {
-      if (p.frame) cancelAnimationFrame(p.frame);
-      if (p.parked) clearInterval(p.parked);
-      p.observers.forEach(function(o) { o.disconnect(); });
-      p.button.removeEventListener('mouseenter', p.enter);
-      p.button.removeEventListener('mouseleave', p.leave);
-      if (restore && p.stack.isConnected) {
-        // Back where the server rendered it, with nothing the script added,
-        // so a cached snapshot restores to the markup it came from.
-        p.box.className = p.box.className.replace(/\s*\bis-[\w-]+/g, '');
-        p.box.removeAttribute('style');
-        p.box.removeAttribute('data-fizz-portal-for');
-        p.stack.insertBefore(p.box, p.stack.firstChild);
-      } else {
-        p.box.remove();
-      }
-      delete p.stack._fizzPortal;
-      portals = portals.filter(function(q) { return q !== p; });
-    }
-
-    function mountPortal(stack) {
-      if (stack._fizzPortal) return stack._fizzPortal;
-      var box = stack.querySelector(':scope > .hold-fizz-portal');
-      var button = stack.querySelector(':scope > .hold-btn');
-      if (!box || !button) return null;
-
-      var p = { stack: stack, box: box, button: button, visible: true, frame: null, parked: null, observers: [] };
-      stack._fizzPortal = p;
-      portals.push(p);
-
-      document.body.appendChild(box);
-      box.classList.add('is-portaled');
-      box.setAttribute('data-fizz-portal-for', button.dataset.holdId || 'hold');
-      box.style.zIndex = portalZ(stack);
-      syncPortalState(p);
-      syncPortalPalette(p);
-
-      p.enter = function() { box.classList.add('is-hover'); };
-      p.leave = function() { box.classList.remove('is-hover'); };
-      button.addEventListener('mouseenter', p.enter);
-      button.addEventListener('mouseleave', p.leave);
-
-      var states = new MutationObserver(function() { syncPortalState(p); });
-      states.observe(button, { attributes: true, attributeFilter: ['class'] });
-      var palette = new MutationObserver(function() { syncPortalPalette(p); });
-      palette.observe(stack, { attributes: true, attributeFilter: ['style'] });
-      p.observers.push(states, palette);
-
-      // Track the rect every frame while the stack is on screen: a visible
-      // portal reads one rect per frame. Park the box while the stack is not
-      // on screen (scrolled away, inside a closed panel, or clipped out of a
-      // scroll container): no frames, only a once-a-second check that the
-      // stack is still in the DOM.
-      if ('IntersectionObserver' in window) {
-        var seen = new IntersectionObserver(function(entries) {
-          p.visible = entries[entries.length - 1].isIntersecting;
-          if (!p.stack.isConnected) { unmountPortal(p, false); return; }
-          if (p.visible && !p.frame) placePortal(p);
-          if (!p.visible) placePortal(p);
-        });
-        seen.observe(stack);
-        p.observers.push(seen);
-      }
-      placePortal(p);
-      return p;
-    }
-
-    function mountAllPortals() {
-      portals.slice().forEach(function(p) { if (!p.stack.isConnected) unmountPortal(p, false); });
-      document.querySelectorAll('.hold-stack[data-fizz-portal]').forEach(mountPortal);
-    }
-
-    window.studioFizzPortal = {
-      mount: mountPortal,
-      mountAll: mountAllPortals,
-      count: function() { return portals.length; }
-    };
-    document.addEventListener('turbo:load', mountAllPortals);
-    document.addEventListener('turbo:before-cache', function() {
-      portals.slice().forEach(function(p) { unmountPortal(p, true); });
-    });
-    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', mountAllPortals);
-    else mountAllPortals();
-
-    window.holdBtnStart = function(el) {
-      var holdId = el.dataset.holdId || 'hold';
-      var scope = el.closest('[x-data]');
-      if (scope) {
-        try {
-          var data = Alpine.$data(scope);
-          // submitting === true means the previous attempt's POST is
-          // still in flight. Refuse to start a second hold so we don't
-          // double-submit and so the spinning button stays visible.
-          if (data && data.submitting) return;
-          var guard = el.dataset.guard;
-          if (guard && !evalIn(scope, guard)) return;
-        } catch(e) {
-          console.warn('[hold:' + holdId + '] guard/submitting check threw:', e);
-        }
-      } else {
-        console.warn('[hold:' + holdId + '] no [x-data] ancestor — evalIn calls will be no-ops');
-      }
-
-      // Hold-START hook (2026-06-13). Fires the instant a hold BEGINS — the
-      // guard + submitting checks above have already passed, so this only runs
-      // for a hold that is actually going to count down. Runs in PARALLEL with
-      // the 2s hold; the board uses it to kick off the authoritative funding
-      // pre-check fetch (beginFundingCheck) so the result is resolved by the
-      // time on_success fires. Wrapped — a throwing hook must never abort the
-      // hold itself.
-      if (scope) {
-        var onHoldStart = el.dataset.onHoldStart;
-        if (onHoldStart) {
-          try { evalIn(scope, onHoldStart); }
-          catch (e) { console.error('[hold:' + holdId + '] on_hold_start threw:', e); }
-        }
-      }
-
-      var id = el.dataset.holdId || 'hold';
-      var duration = parseInt(el.dataset.duration || '2000', 10);
-      var onSuccess = el.dataset.onSuccess;
-      var validate = el.dataset.validate;
-      var validateAt = parseInt(el.dataset.validateAt || '750', 10);
-      var earlyAction = el.dataset.earlyAction;
-      var earlyActionAt = parseInt(el.dataset.earlyActionAt || '1500', 10);
-      var earlyActionGuard = el.dataset.earlyActionGuard;
-
-      var circle = el.querySelector('svg.progress circle');
-
-      // Restart nudge cycle from hold start (suppressed visually by .process)
-      el.classList.remove('nudge', 'nudge-soft');
-      startNudgeCycle(el);
-
-      // Snap progress to 0 instantly before starting
-      if (circle) {
-        circle.style.transition = 'none';
-        el.classList.remove('process', 'success');
-        void circle.offsetWidth; // force reflow
-        circle.style.transition = '';
-      } else {
-        el.classList.remove('process', 'success');
-      }
-
-      el.style.setProperty('--duration', duration + 'ms');
-      el.classList.add('process');
-
-      timers[id] = setTimeout(function() {
-        if (onSuccess) {
-          // Stay in process state briefly while resolving
-          setTimeout(function() {
-            try {
-              var s = el.closest('[x-data]');
-              if (!s) {
-                console.warn('[hold:' + holdId + '] on_success: no [x-data] ancestor at fire time');
-                return;
-              }
-              evalIn(s, onSuccess);
-            } catch(e) {
-              console.error('[hold:' + holdId + '] on_success threw:', e);
-              el.classList.remove('process');
-              el.classList.add('success');
-            }
-          }, 500);
-        } else {
-          el.classList.remove('process');
-          el.classList.add('success');
-        }
-      }, duration);
-
-      if (earlyAction) {
-        timers[id + '_early'] = setTimeout(function() {
-          var s = el.closest('[x-data]');
-          if (s) {
-            if (!earlyActionGuard || evalIn(s, earlyActionGuard)) {
-              clearTimeout(timers[id]);
-              delete timers[id];
-              try { evalIn(s, earlyAction); }
-              catch(e) { console.error('[hold:' + holdId + '] early_action threw:', e); }
-            }
-          }
-        }, earlyActionAt);
-      }
-
-      if (validate) {
-        timers[id + '_val'] = setTimeout(function() {
-          var s = el.closest('[x-data]');
-          if (!s) {
-            console.warn('[hold:' + holdId + '] validate: no [x-data] ancestor');
-            return;
-          }
-          // Helper: abort the in-flight hold cleanly. Clears all timers
-          // for this id and drops the .process class so the user isn't
-          // stranded at "Almost there…" if validate rejects. Caller's
-          // validate is responsible for any setHoldError() if it wants
-          // an explicit error state (e.g. geo block).
-          var abort = function() {
-            clearTimeout(timers[id]); delete timers[id];
-            if (timers[id + '_early']) { clearTimeout(timers[id + '_early']); delete timers[id + '_early']; }
-            el.classList.remove('process');
-            var c = el.querySelector('svg.progress circle');
-            if (c) { c.style.transition = 'none'; void c.offsetWidth; c.style.transition = ''; }
-          };
-          try {
-            evalInAsync(s, validate).then(
-              function(ok) { if (!ok) abort(); },
-              function(err) {
-                console.error('[hold:' + holdId + '] validate rejected:', err);
-                abort();
-              }
-            );
-          } catch(e) {
-            console.error('[hold:' + holdId + '] validate threw synchronously:', e);
-            abort();
-          }
-        }, validateAt);
-      }
-    };
-
-    window.holdBtnEnd = function(el) {
-      if (el.classList.contains('success') || el.classList.contains('error')) return;
-      var id = el.dataset.holdId || 'hold';
-
-      // Snap progress circle back to 0 instantly (no reverse animation)
-      var circle = el.querySelector('svg.progress circle');
-      if (circle) {
-        circle.style.transition = 'none';
-        el.classList.remove('process');
-        void circle.offsetWidth; // force reflow
-        circle.style.transition = '';
-      } else {
-        el.classList.remove('process');
-      }
-
-      if (timers[id]) {
-        clearTimeout(timers[id]);
-        delete timers[id];
-      }
-      if (timers[id + '_val']) {
-        clearTimeout(timers[id + '_val']);
-        delete timers[id + '_val'];
-      }
-      if (timers[id + '_early']) {
-        clearTimeout(timers[id + '_early']);
-        delete timers[id + '_early'];
-      }
-
-      // Restart with soft-only nudges (big nudge already seen)
-      startNudgeCycle(el, true);
-    };
-  })();
-</script>