studio-engine 0.55.0 → 0.56.0

data/app/helpers/studio/fizz_helper.rb

@@ -0,0 +1,125 @@
+# frozen_string_literal: true
+
+module Studio
+  # The bubble table behind the hold-to-confirm button's fizz layers.
+  #
+  # The CodePen this adapts scattered its particles with Sass `random()` at
+  # compile time. There is no Sass here, and a runtime `rand` would re-scatter
+  # the bubbles on every render — which fights Turbo's page cache (a restored
+  # page would not match the one it replaced) and leaves the markup untestable.
+  # So the scatter is SEEDED: stable for a given button across renders, and
+  # different between two buttons on one page.
+  #
+  # ZONES. The button is cut into a 3x2 grid — three zones along the top edge,
+  # three along the bottom, numbered left to right, top row first. A bubble only
+  # ever wears the colours of the zone it sits in, so a six-item palette reads as
+  # six things standing around the button rather than one shaken bag of confetti.
+  # The outer columns also own the spray off the left and right sides, each
+  # within its own half.
+  #
+  # COLOURS. Each zone carries three slots — 1..18 across the six zones — and the
+  # two layers split them: the resting layer wears the FIRST of its zone's three,
+  # and the layer that fades in on hover alternates the second and third. A
+  # caller binds them as `--fizz-c-1..18` on the stack (turf-monster's board maps
+  # the six picked teams' light / dark / alt colours onto them, in pick order);
+  # anything unbound falls back to the bubble's own hue, so the effect is never
+  # colourless.
+  module FizzHelper
+    # Candy hues a bubble falls back to. Deliberately narrow — the source
+    # material spanned the whole wheel and read as confetti.
+    HUES = [ 262, 276, 292, 318, 336, 190, 168, 46 ].freeze
+
+    ZONE_COLUMNS = 3
+    ZONE_ROWS = 2
+    ZONES = ZONE_COLUMNS * ZONE_ROWS
+    COLORS_PER_ZONE = 3
+    SLOTS = ZONES * COLORS_PER_ZONE
+
+    # Which of its zone's three slots a layer's bubbles take.
+    LAYER_OFFSETS = {
+      base: [ 0 ].freeze,     # the first colour
+      hover: [ 1, 2 ].freeze  # the second and third, alternating
+    }.freeze
+
+    # One layer's bubbles. Each is a hash the partial writes out as inline
+    # custom properties: x/y place it (%), dx/dy are the drift it travels before
+    # fading (dy negative = rises off the top edge), size is px, delay and
+    # duration are seconds, hue is its fallback colour, zone and slot are its
+    # place in the palette.
+    def fizz_bits(seed, layer: :base, per_zone: 5)
+      offsets = LAYER_OFFSETS.fetch(layer)
+      prng = Random.new(seed.to_s.each_byte.sum * 7919 + per_zone)
+
+      ZONES.times.flat_map do |zone|
+        Array.new(per_zone) do |i|
+          fizz_zone_bit(prng, zone: zone, index: i).merge(
+            zone: zone + 1,
+            slot: (zone * COLORS_PER_ZONE) + offsets[i % offsets.size] + 1
+          )
+        end
+      end
+    end
+
+    # One bubble's colour: its slot's bound colour, else its own hue.
+    def fizz_color(bit)
+      "var(--fizz-c-#{bit[:slot]}, hsl(#{bit[:hue]} 92% 70%))"
+    end
+
+    # The inline style one bubble carries. Kept here rather than in the partial
+    # so the property names and the CSS that reads them stay in one place.
+    def fizz_bit_style(bit)
+      "left:#{bit[:x]}%;top:#{bit[:y]}%;" \
+        "--fs:#{bit[:size]}px;--fx:#{bit[:dx]}px;--fy:#{bit[:dy]}px;" \
+        "--fd:#{bit[:delay]}s;--ft:#{bit[:duration]}s;--fc:#{fizz_color(bit)}"
+    end
+
+    private
+
+    # Where in its own zone a bubble sits. The outer columns each throw one
+    # bubble off the side of the button, kept in their own half so the top-left
+    # zone never sprays into the bottom-left one.
+    def fizz_zone_bit(prng, zone:, index:)
+      row = zone / ZONE_COLUMNS # 0 = the top edge, 1 = the bottom
+      col = zone % ZONE_COLUMNS
+
+      return fizz_side_bit(prng, :left, row) if index.zero? && col.zero?
+      return fizz_side_bit(prng, :right, row) if index.zero? && col == ZONE_COLUMNS - 1
+
+      x = fizz_zone_x(prng, col)
+      row.zero? ? fizz_top_bit(prng, x) : fizz_bottom_bit(prng, x)
+    end
+
+    def fizz_zone_x(prng, col)
+      span = 100.0 / ZONE_COLUMNS
+      inset = span * 0.06 # breathing room, so neighbouring zones do not touch
+      (col * span + inset + prng.rand(span - (inset * 2))).round(1)
+    end
+
+    def fizz_top_bit(prng, x)
+      fizz_bit(prng, x: x, y: 2 + prng.rand(12),
+                     dx: prng.rand(-8..8), dy: -(12 + prng.rand(24)))
+    end
+
+    def fizz_bottom_bit(prng, x)
+      fizz_bit(prng, x: x, y: 86 + prng.rand(12),
+                     dx: prng.rand(-8..8), dy: 12 + prng.rand(24))
+    end
+
+    def fizz_side_bit(prng, side, row)
+      reach = 10 + prng.rand(18)
+      fizz_bit(prng,
+               x: side == :left ? prng.rand(5) : 95 + prng.rand(5),
+               y: row.zero? ? 14 + prng.rand(30) : 56 + prng.rand(30),
+               dx: side == :left ? -reach : reach,
+               dy: row.zero? ? -(2 + prng.rand(10)) : 2 + prng.rand(10))
+    end
+
+    def fizz_bit(prng, x:, y:, dx:, dy:)
+      { x: x, y: y, dx: dx, dy: dy,
+        size: 2 + prng.rand(5),
+        delay: (prng.rand(180) / 100.0).round(2),
+        duration: (1.4 + prng.rand(120) / 100.0).round(2),
+        hue: HUES[prng.rand(HUES.size)] }
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+<%#
+  One layer of the hold button's fizz (Studio::FizzHelper).
+
+  Locals:
+    seed  - the string the bubble table is seeded from (the button's hold_id,
+            or "<hold_id>~extra" for the second layer, so the two scatters land
+            in each other's gaps rather than on top of each other)
+    extra - true for the hover-only layer, which rests invisible and fades in
+            when the pointer arrives (default: false)
+
+  The two layers also split each zone's three colour slots: the resting one
+  takes the first, the hover one alternates the second and third.
+  Decoration only: aria-hidden here, pointer-events off in CSS.
+%>
+<% extra ||= false %>
+<span class="hold-fizz<%= " hold-fizz-extra" if extra %>" aria-hidden="true"><% fizz_bits(seed, layer: extra ? :hover : :base).each do |bit| %><i class="fizz-bit" style="<%= fizz_bit_style(bit) %>"></i><% end %></span>

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

@@ -0,0 +1,405 @@
+<%#
+  The hold-to-confirm button (Studio::FizzHelper + engine-motion.css).
+
+  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.
+
+  Locals:
+    default_text       - Button label in idle state (default: "Hold to Confirm")
+    hold_text          - Text shown while holding (default: "Almost there...")
+    success_text       - Text shown on completion (default: "Confirmed!")
+    duration           - Hold duration in ms (default: 2000)
+    hold_id            - Unique ID for this button instance (default: "hold")
+    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)
+    early_action       - JS expression executed early (for Web3 users) (default: none)
+    early_action_at    - ms delay before firing early action (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
+                         kick off work that should run in parallel with the hold
+                         (e.g. the board's authoritative funding pre-check fetch,
+                         resolved by the time the hold completes ~2s later).
+    fizz               - Render the fizz particle layer (default: true). Pass
+                         false for a flat button. Specimens: /admin/style.
+    fizz_level         - :lively (default) or :calm. Lively rests at a full
+                         boil, and hovering DOUBLES THE BUBBLE COUNT (a second
+                         layer fades in over the gaps) at the same speed. Calm
+                         simmers at rest and boils on hover instead — one
+                         layer, for a button that should not compete.
+    fizz_colors        - Up to 12 CSS colors the bubbles wear, as a static
+                         array (default: none = the built-in candy palette).
+    fizz_bind          - Alpine expression bound to the stack's :style, for a
+                         palette that changes at runtime (default: none). The
+                         turf-monster's board passes "fizzPalette", mapping
+                         the six picked teams' light / dark / alt colors onto
+                         --fizz-c-1..18, three per zone in pick order.
+%>
+<% default_text       ||= "Hold to Confirm" %>
+<% hold_text          ||= "Almost there..." %>
+<% success_text       ||= "Confirmed!" %>
+<% error_text         ||= "Entry Blocked" %>
+<% duration           ||= 2000 %>
+<% hold_id            ||= "hold" %>
+<% guard              ||= nil %>
+<% on_success         ||= nil %>
+<% validate           ||= nil %>
+<% validate_at        ||= 750 %>
+<% early_action       ||= nil %>
+<% early_action_at    ||= 1500 %>
+<% early_action_guard ||= nil %>
+<% on_hold_start      ||= nil %>
+<%# `fizz ||= true` would coerce an explicit `fizz: false` back to true, so
+    read the key instead of the value. %>
+<% fizz = local_assigns.key?(:fizz) ? local_assigns[:fizz] : true %>
+<% fizz_colors ||= nil %>
+<% fizz_bind ||= nil %>
+<% fizz_level ||= :lively %>
+<%# Static palette (gallery, or any call site with fixed colors). A runtime
+    palette rides fizz_bind instead. %>
+<% fizz_style = Array(fizz_colors).first(Studio::FizzHelper::SLOTS)
+                                  .each_with_index.map { |c, i| "--fizz-c-#{i + 1}:#{c}" }.join(";") %>
+
+<%# The stack exists so the fizz can sit BEHIND the button. Inside the button
+    a negative z-index still paints above its own background (the button's
+    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 %>>
+  <%# 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 %>
+    <%= render "studio/fizz_layer", seed: hold_id %>
+    <%# Lively's hover doubles the COUNT, not the speed: a second scatter that
+        rests invisible, fades in over the gaps in the first, and fades back
+        out when the pointer leaves. %>
+    <% if fizz_level.to_s == "lively" %>
+      <%= render "studio/fizz_layer", seed: "#{hold_id}~extra", extra: true %>
+    <% end %>
+  <% end %>
+<button class="hold-btn"
+        data-hold-id="<%= hold_id %>"
+        data-duration="<%= duration %>"
+        <% 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 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)">
+  <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>
+  </div>
+  <ul class="hold-text">
+    <li><%= default_text %></li>
+    <li><%= hold_text %></li>
+    <li><%= success_text %></li>
+    <li><%= error_text %></li>
+  </ul>
+  <div class="nudge-debug">
+    <svg viewBox="0 0 24 24">
+      <circle class="track" cx="12" cy="12" r="9"/>
+      <circle class="fill" cx="12" cy="12" r="9"/>
+    </svg>
+    <span class="countdown-num"></span>
+  </div>
+</button>
+</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); });
+    });
+
+    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>

data/app/views/studio/profiles/_identity.html.erb

@@ -25,7 +25,7 @@
 
 <%= render "studio/profiles/identity_styles" %>
 
-<%= render "studio/profiles/identity_mini", user: user %>
+<%= render "studio/profiles/identity_mini", user: user, editable: editable %>
 
 <% if editable %>
   <%# `studio-identity-card-editable` is the hover hook: the operator asked for the
@@ -47,10 +47,31 @@
       The button stays for keyboard and assistive tech: a div with a click handler
       is unreachable by either, and this is still the only route to changing the
       photo. %>
+  <%# `relative` positions the save controls, which float in this card's
+      SOUTH-EAST corner while it is on screen (operator's call, 2026-08-15).
+      They are absolutely positioned so they do not push the centred avatar and
+      name off-centre, and so the card does not change height when they appear —
+      a card that grew on the first keystroke would shove the whole form down.
+
+      BELOW 640px THEY GO BACK IN FLOW and the card does grow, because absolute
+      positioning inside a text-center card lands them on the name and the email
+      at every phone width (measured: 106px of the name at 390px). The no-resize
+      guarantee above therefore holds at 640px and up; see the media query in
+      _identity_styles for why that is the right trade at phone widths. %>
   <div data-studio-identity-full
        @click="$refs.filePicker.click()"
-       class="studio-identity-card-editable studio-identity-card-clickable card p-6 mb-6 text-center">
+       class="studio-identity-card-editable studio-identity-card-clickable card p-6 mb-6 text-center relative">
     <%= render "studio/profiles/identity_body", user: user, editable: true, attachable: attachable %>
+
+    <%# `.stop` ON THE WRAPPER, not only on the buttons. Both buttons stop their
+        own clicks, but the 8px GAP between them is still card surface — a click
+        landing there bubbled to the card's handler and opened the file picker.
+        Measured in review: a gap-midpoint click opened it once, a button click
+        zero times. Stopping at the wrapper covers the buttons, the gap, and
+        anything added here later. %>
+    <div class="studio-identity-actions" @click.stop>
+      <%= render "studio/profiles/save_controls" %>
+    </div>
   </div>
 <% else %>
   <%= link_to edit_profile_path,