studio-engine 0.55.0 → 0.56.0

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

@@ -1,7 +1,5 @@
 <%# The compact identity that takes over when the full card scrolls away.
 
-    Locals: user (required).
-
     WHY IT EXISTS: on a long profile the header is the thing that tells you whose
     page you are on, and it is the first thing to disappear. This keeps that
     answer on screen — the same move the navbar makes when it shrinks on scroll.
@@ -16,33 +14,82 @@
     app that publishes nothing gets a bar at the top of the viewport rather than
     a broken one.
 
-    NOT INTERACTIVE, and aria-hidden. It duplicates content that is already on
-    the page and already reachable: the full card above is the link to editing.
-    A second link here would be a duplicate tab stop and a second announcement of
-    the same name for no gain — this is an orientation aid for people who can see
-    the screen, so it says so.
+    THE IDENTITY HALF IS aria-hidden, and only that half. It duplicates content
+    that is already on the page and already reachable: the full card above is the
+    link to editing. A second link here would be a duplicate tab stop and a
+    second announcement of the same name for no gain — this is an orientation aid
+    for people who can see the screen, so it says so.
+
+    THE aria-hidden USED TO SIT ON THE WHOLE BAR, and it had to come down one
+    level when the save controls moved in (operator's call, 2026-08-15). A
+    focusable control inside an aria-hidden subtree is a WCAG failure and a
+    practical one: screen-reader users get a button they can tab to and cannot
+    hear. The duplicated name and picture are still hidden; the controls are not.
+
+    Locals:
+      user      (required)
+      editable  (Boolean) — true on the edit page, where this bar carries the
+                save controls once the full card has scrolled away. On the read
+                page there is nothing to save and the bar stays as it was.
 %>
+<% editable = local_assigns.fetch(:editable, false) %>
+
+<%# `inert` SHIPS ON, and comes off only when the bar is actually showing.
+
+    THE BUG IT CLOSES. This bar hides itself with opacity: 0 and
+    pointer-events: none, and NEITHER of those takes an element out of the tab
+    order or the accessibility tree. That was harmless for as long as the bar
+    held a picture and a name — this change is the first to put BUTTONS in it.
+    The result: on /profile/edit with unsaved changes and the page NOT scrolled,
+    the first two tab stops were an invisible Discard and Save, because this
+    partial renders before the card. Tab, Enter, and the edits were gone with
+    nothing on screen to explain it.
+
+    IT IS THE SAME OBSERVATION THIS CHANGE ALREADY MADE FOR THE MOUSE. The bar
+    was dead to clicks while hidden, which `pointer-events: auto` on .is-visible
+    fixed; the keyboard half of the identical problem was left open. A spec now
+    covers it, because the browser lane had no focus assertions at all.
+
+    ON BY DEFAULT rather than set only in the observer's callback, so the
+    early return for a browser without IntersectionObserver — which leaves the
+    bar hidden forever — leaves it inert forever too. %>
 <div data-studio-identity-mini
      class="studio-identity-mini"
-     aria-hidden="true">
+     inert>
   <div class="px-4">
-    <div class="flex items-center gap-3 py-2">
-      <% if user.respond_to?(:avatar) && user.avatar.respond_to?(:attached?) && user.avatar.attached? %>
-        <%= image_tag user.avatar, class: "rounded-full object-cover flex-shrink-0",
-                      style: "width: 32px; height: 32px;", alt: "" %>
-      <% else %>
-        <div class="rounded-full flex items-center justify-center font-bold text-white text-xs flex-shrink-0"
-             style="width: 32px; height: 32px; background-color: <%= user.avatar_color %>">
-          <%= user.avatar_initials %>
-        </div>
-      <% end %>
-
-      <div class="min-w-0">
-        <p class="text-sm font-bold text-heading truncate"><%= user.display_name %></p>
-        <% if user.respond_to?(:email) && user.email.present? %>
-          <p class="text-xs text-muted truncate"><%= user.email %></p>
+    <div class="studio-identity-mini-row flex items-center gap-3 py-2">
+      <div class="flex items-center gap-3 min-w-0 flex-1" aria-hidden="true">
+        <% if user.respond_to?(:avatar) && user.avatar.respond_to?(:attached?) && user.avatar.attached? %>
+          <%= image_tag user.avatar, class: "rounded-full object-cover flex-shrink-0",
+                        style: "width: 32px; height: 32px;", alt: "" %>
+        <% else %>
+          <div class="rounded-full flex items-center justify-center font-bold text-white text-xs flex-shrink-0"
+               style="width: 32px; height: 32px; background-color: <%= user.avatar_color %>">
+            <%= user.avatar_initials %>
+          </div>
         <% end %>
+
+        <div class="min-w-0">
+          <p class="text-sm font-bold text-heading truncate"><%= user.display_name %></p>
+          <% if user.respond_to?(:email) && user.email.present? %>
+            <%# THE ADDRESS YIELDS FIRST on a narrow screen. This bar is a strip,
+                and once it carries Save and Discard there is not room for an
+                avatar, two lines of text and two buttons: at 320px the name
+                measured 13px of clientWidth against 71px of content and rendered
+                as "P.", the address as "p..". Neither told anyone whose page
+                they were on, which is the only reason this bar exists.
+
+                Dropping the address gives the NAME that space back. It is the
+                line that identifies the account, and it is already on the page
+                above in full. %>
+            <p class="text-xs text-muted truncate"><%= user.email %></p>
+          <% end %>
+        </div>
       </div>
+
+      <% if editable %>
+        <%= render "studio/profiles/save_controls", compact: true %>
+      <% end %>
     </div>
   </div>
 </div>
@@ -78,6 +125,9 @@
         // intersecting at all" has to count as gone in its own right.
         var gone = !entry.isIntersecting || entry.intersectionRatio < SHOW_BELOW_RATIO;
         mini.classList.toggle(CLASS, gone);
+        // The tab order and the accessibility tree follow the same decision the
+        // class does. opacity and pointer-events cannot express "not here".
+        mini.inert = !gone;
       }, {
         // The navbar covers the top of the viewport, so pixels behind it are not
         // visible pixels — without this the card reads as on-screen while it is
@@ -97,6 +147,7 @@
       var mini = document.querySelector("[data-studio-identity-mini]");
       if (mini) {
         mini.classList.remove(CLASS);
+        mini.inert = true;
         if (mini._studioObserver) mini._studioObserver.disconnect();
       }
     });

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

@@ -146,6 +146,150 @@
   .studio-identity-mini.is-visible {
     opacity: 1;
     transform: translateX(-50%);
+    /* POINTER EVENTS BACK ON, and this line is newer than it looks. The bar is
+       `pointer-events: none` while hidden so an invisible strip cannot swallow
+       clicks meant for the page under it — correct, and harmless for as long as
+       the bar held nothing but a picture and a name. It now carries Save and
+       Discard, and without this they are visible, focusable, and completely
+       dead to the mouse. */
+    pointer-events: auto;
+  }
+
+  /* THE SAVE CONTROLS' CORNER (operator's call, 2026-08-15). Absolute, so the
+     card keeps its height and its centred avatar keeps its centre when they
+     appear — a card that grew on the first keystroke would shove every row below
+     it down the page.
+
+     The offsets match the card's own `p-6` padding, so the controls line up with
+     its content rather than floating at an unrelated inset. */
+  .studio-identity-actions {
+    position: absolute;
+    right: 1.5rem;
+    bottom: 1.5rem;
+  }
+
+  /* THE TEXT MAY NOT REACH THE CONTROLS — the gate is TEXT LENGTH, not viewport
+     width, and getting that wrong is how this shipped twice.
+
+     The first fix was a 639px media query, written against review's measurements
+     at 320/375/390/480. It closed those widths and left the PROPERTY open: the
+     overlap was never about the viewport, it was about whether the centred text
+     is long enough to reach into the corner. Measured at 1280px WITH that fix in
+     place: a 30-character display name lost 27px to the controls, a
+     33-character one 51px, and a 64-character email 19px — with
+     elementFromPoint over the email returning the Discard button. Every spec
+     stayed green because the lab fixture is "Pat Studio".
+
+     THE GUTTER IS THE FIX. The name and the email are centred full-width
+     paragraphs, so padding them symmetrically keeps them centred while making it
+     ARITHMETICALLY impossible for either to enter the controls' column: the text
+     box is now 2 x gutter narrower than the card, and the controls are 107px
+     wide against a 128px gutter.
+
+     TIED TO A MEASUREMENT, NOT GUESSED. The value is a custom property so
+     e2e/profile_chrome.spec.js can assert it stays >= the controls' RENDERED
+     width — otherwise a longer button label ("Save all changes") would silently
+     reopen the overlap, which is exactly the class of regression that put this
+     card through two review rounds.
+
+     THE COST, WHICH IS THE OPERATOR'S CALL (2026-08-16): a long name now wraps a
+     line earlier, so the card is taller for those accounts — on a resting page as
+     well as a dirty one. Chosen over putting the controls in flow because it
+     keeps BOTH guarantees this card was asked for: the south-east corner, and a
+     card that does not change height when the controls appear.
+
+     SCOPED TO THE EDITABLE CARD. The read page renders the same body through
+     .studio-identity-card and has no controls to avoid, so it keeps the full
+     width. */
+  .studio-identity-card-editable {
+    --studio-actions-gutter: 8rem;
+  }
+
+  @media (min-width: 640px) {
+    .studio-identity-card-editable > p {
+      padding-inline: var(--studio-actions-gutter);
+    }
+  }
+
+  /* NARROW SCREENS PUT THEM BACK IN FLOW, because absolute positioning inside a
+     text-center card lands the controls ON the name and the email.
+
+     Measured on the rendered glyphs, before this rule existed: at 320px the
+     block covered 57px of the name and 99px of the email; at 390px, 106px and
+     64px; at 480px, 61px and 19px. elementFromPoint along the email line
+     returned the Discard button — the controls were the topmost paint over the
+     user's own address. It reached 0px only at 640px, which is exactly the width
+     the browser lane happens to run at, which is why every spec stayed green.
+
+     THE TRADE, STATED PLAINLY: below 640px the card DOES grow when the form goes
+     dirty, which is the thing absolute positioning was chosen to avoid. Text you
+     cannot read is worse than a card that changes height, and at this width the
+     card is the whole screen — there is nothing below it to shove out of view.
+     Above 640px the corner arrangement and its no-resize guarantee both hold.
+
+     OWNED CSS, NOT a `sm:` variant: `sm:` utilities are absent from every
+     consumer bundle (see the note in _save_controls and the guard in
+     test/views/profile_partial_utility_guard_test.rb). */
+  @media (max-width: 639px) {
+    .studio-identity-actions {
+      position: static;
+      margin-top: 1rem;
+    }
+
+    /* THE COMPACT BAR WRAPS instead. That bar is not inside
+       .studio-identity-actions, so the in-flow rule above never reached it, and
+       it kept the corner arrangement's assumptions in a strip with no room for
+       them: at 320px, scrolled and dirty, the name had 13px of clientWidth
+       against 244px of content and rendered as "P.".
+
+       HIDING THE ADDRESS WAS THE FIRST ATTEMPT AND DID NOT WORK, which is worth
+       recording because it looked obvious. Measured at 320px: the bar is 288px,
+       the avatar 32px — and the two side-by-side buttons are 187px. The text was
+       never the thing taking the room. Removing a 100px line to recover space in
+       a 49px gap fixed nothing, and the spec written for it passed only because
+       it had inherited a 390px viewport where the problem does not exist.
+
+       Wrapping gives the identity a whole line and puts the controls on their
+       own. The bar is taller for it, but only while the form is dirty — the
+       controls do not render otherwise — and a bar that says "P." is not worth
+       the height it saves. */
+    .studio-identity-mini-row {
+      flex-wrap: wrap;
+    }
+
+    .studio-identity-mini-row > [data-studio-save-controls] {
+      width: 100%;
+      justify-content: flex-end;
+    }
+  }
+
+  /* THE TWO ARRANGEMENTS OF THE SAVE CONTROLS.
+
+     STACKED in the card, Save on top of Discard (operator's call, 2026-08-15) —
+     the primary action goes first in a vertical stack the same way it goes last
+     in a horizontal row.
+
+     `stretch` rather than a right-alignment so both buttons take the width of
+     the wider one and the stack reads as a block rather than a ragged edge. The
+     container is absolutely positioned, so it shrinks to that width by itself.
+
+     OWNED, NOT `flex-col items-end`. `items-end` is absent from
+     mcritchie-industries' compiled bundle (measured 2026-08-15), and the engine
+     ships a PREBUILT bundle — so that class would do nothing in that app while
+     working here. Same failure as `sm:block` and `grid-cols-7`; same answer. */
+  .studio-save-controls {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+
+  /* The compact bar has width rather than height, so the same two buttons sit in
+     a row there — Discard first, Save last. */
+  .studio-save-controls--compact {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
   }
 
   @media (prefers-reduced-motion: reduce) {

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

@@ -0,0 +1,79 @@
+<%# The edit form's save controls — the unsaved-change count, Discard, and Save.
+
+    Locals:
+      compact (Boolean, default false) — the tighter arrangement for the compact
+              identity bar, which has a strip of width rather than a card.
+
+    ONE PARTIAL, TWO HOMES (operator's call, 2026-08-15). These used to live in a
+    fixed bar across the bottom of the viewport. They now sit in the identity
+    chrome instead: the full card's south-east corner while it is on screen, and
+    the compact bar once it has scrolled away. Whichever surface is showing
+    carries them, so they are still always reachable — that was the fixed bar's
+    only real job — with one fixed element on the page instead of two.
+
+    Extracted rather than written twice because the two copies would drift on the
+    thing that matters least to look at and most to get wrong: which form the
+    Save button submits.
+
+    THE `form` ATTRIBUTE IS LOAD-BEARING. Both identity surfaces render OUTSIDE
+    the profile form — editable_identity comes before form_with, and the avatar
+    has a form of its own because nesting them is invalid HTML. A bare
+    type="submit" here would therefore submit the nearest ancestor form, which is
+    the AVATAR form, and an attachment param submitted empty PURGES the
+    attachment: saving a name would delete the photo. `form=` names the target
+    explicitly and works from anywhere in the document.
+
+    $refs.form is NOT the answer, and looks like it: inside editable_identity's
+    imageUploadHost that ref resolves to the avatar form. Two scopes, same ref
+    name, silently the wrong one.
+
+    BOTH BUTTONS STOP PROPAGATION. On the edit page the whole identity card is a
+    click target for the file picker, so a click that reached the card would open
+    a file dialog on its way to saving.
+%>
+<% compact = local_assigns.fetch(:compact, false) %>
+
+<%# ONE LIVE REGION, NOT TWO. Both copies of these controls are in the document
+    at once, so declaring role="status" on both announced "1 unsaved change"
+    twice — once from a copy sitting at opacity 0. The CARD's copy keeps it: it
+    is the one that exists on an unscrolled page, which is where an edit is made.
+    The compact copy is the same information for a reader who has scrolled, and
+    the announcement has already happened by then. %>
+<div x-show="dirty" x-cloak x-transition.opacity
+     data-studio-save-controls="<%= compact ? "compact" : "card" %>"
+     <%= 'role="status" aria-live="polite"'.html_safe unless compact %>
+     class="studio-save-controls<%= " studio-save-controls--compact" if compact %>">
+  <%# THE COUNT IS NOW SCREEN-READER ONLY (operator's call, 2026-08-15): "1
+      unsaved change  Discard" became a simple "Discard". The number was telling
+      people something the buttons already imply — they only exist when there is
+      something to save.
+
+      IT IS KEPT FOR ASSISTIVE TECH RATHER THAN DELETED, because the visual and
+      the audible cue are not the same cue. Seeing two buttons appear IS the
+      notification; a screen-reader user gets no such moment, and this live region
+      is the whole of what they get. Simplifying the visible UI is not a reason to
+      take the announcement away.
+
+      `sr-only` rather than owned CSS here, unusually: it is in ALL THREE consumer
+      bundles (measured 2026-08-15) and the engine already uses it in
+      style/_modal_specimen. %>
+  <p class="sr-only">
+    <span x-text="changeCount"></span>
+    <span x-text="changeCount === 1 ? 'unsaved change' : 'unsaved changes'"></span>
+  </p>
+
+  <%# ORDER IS PER-ARRANGEMENT, and deliberately so — the primary action goes
+      LAST in a row and FIRST in a stack, which is where the eye and the
+      convention both put it. Writing it out twice keeps the DOM order equal to
+      the VISUAL order in both, which a `row-reverse` or `column-reverse` would
+      break: the tab order would then run backwards through what is on screen. %>
+  <% if compact %>
+    <button type="button" @click.stop="discard()" class="btn btn-outline btn-sm">Discard</button>
+    <button type="submit" form="studio-profile-form" @click.stop
+            class="btn btn-primary btn-sm">Save changes</button>
+  <% else %>
+    <button type="submit" form="studio-profile-form" @click.stop
+            class="btn btn-primary btn-sm">Save changes</button>
+    <button type="button" @click.stop="discard()" class="btn btn-outline btn-sm">Discard</button>
+  <% end %>
+</div>

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

@@ -1,28 +1,44 @@
-<%# /profile/edit — ONE form, one Save, and a save bar that does not depend on
-    where you are in the page.
-
-    THE SAVE BAR is fixed to the viewport bottom and exists only while the form
-    is dirty. Rejected alternatives, so nobody re-litigates them: a sticky TOP bar
-    stacks under the navbar and eats mobile viewport; a floating button has no
-    room for a Discard or a change count; an always-present footer costs vertical
-    space permanently on a page that is usually short.
-
-    Four details that make or break it, all present below:
-
-      * the form carries bottom padding while the bar is up, so the bar never
-        covers the last field;
-      * env(safe-area-inset-bottom), or it sits under the iPhone home indicator;
-      * role="status" + aria-live="polite" announces "unsaved changes" without
-        stealing focus;
+<%# /profile/edit — ONE form, one Save, and controls that do not depend on where
+    you are in the page.
+
+    THE SAVE CONTROLS LIVE IN THE IDENTITY CHROME (operator's call, 2026-08-15):
+    the full card's south-east corner while it is on screen, and the compact bar
+    once the card has scrolled away. Whichever surface is showing carries them.
+
+    THIS REPLACED A BAR FIXED TO THE VIEWPORT BOTTOM, and the requirement did not
+    change with it — a save control that does not depend on the scroll position.
+    The old design met it by pinning to the bottom edge; this one meets it by
+    riding a bar already fixed under the navbar, which is one fixed element on the
+    page instead of two.
+
+    Rejected alternatives, so nobody re-litigates them: a sticky TOP bar stacks
+    under the navbar and eats mobile viewport; a floating button has no room for a
+    Discard; an always-present footer costs vertical space permanently on a page
+    that is usually short.
+
+    Details that make or break it, all present below:
+
+      * the controls are absolute in the card, so it does not change height when
+        they appear and the centred avatar stays centred — and the name and email
+        are padded past them, because the overlap gate is TEXT LENGTH, not
+        viewport width (see _identity_styles);
+      * below 640px they return to normal flow, where the card is the whole
+        screen and unreadable text is the worse trade;
+      * the compact bar ships `inert` and drops it only while it is showing —
+        opacity and pointer-events do not remove an element from the tab order,
+        so without it the first two tab stops on an unscrolled dirty page are an
+        INVISIBLE Discard and Save;
+      * role="status" + aria-live="polite" on the CARD's copy only, so "unsaved
+        changes" is announced once rather than twice;
       * beforeunload AND turbo:before-visit guard the exit, so navigating away
         does not silently drop edits.
 
     THE DIRTY CHECK compares against what the server rendered, trimmed on both
     sides — whitespace is not a change, and the controller trims on the way in
-    too, so the bar agrees with what saving would actually do.
+    too, so the controls agree with what saving would actually do.
 
     NO-JS FALLBACK: the form has a plain submit at the end. A page whose JS never
-    ran still saves; it simply never gets the bar.
+    ran still saves; it simply never gets the controls.
 %>
 <% content_for(:title, "Edit profile") %>
 
@@ -48,14 +64,17 @@
   <%= render "studio/cropper_assets" %>
 <% end %>
 
-<div x-data="studioProfileForm(<%= initial.to_json %>)"
-     x-bind:style="dirty ? 'padding-bottom: 96px' : ''">
+<%# NO BOTTOM PADDING ANY MORE. This reserved 96px for a save bar fixed across
+    the bottom of the viewport; the save controls now live in the identity card
+    and its compact bar, so nothing covers the last field and nothing needs to
+    make room (operator's call, 2026-08-15). %>
+<div x-data="studioProfileForm(<%= initial.to_json %>)">
   <div class="max-w-2xl mx-auto py-8">
     <%# The way back. The page heading and the Done button came off on the
         operator's call, which left browser-back as the only exit for someone who
         opened this and changed nothing — so a small explicit one goes here.
-        Deliberately quiet: it is an escape hatch, not an action, and the save bar
-        owns the bottom of the screen when there is anything to save. %>
+        Deliberately quiet: it is an escape hatch, not an action, and the save controls
+        take the identity card's corner when there is anything to save. %>
     <%= link_to profile_path,
                 class: "inline-flex items-center gap-1 text-sm text-secondary hover:text-heading transition mb-4",
                 aria: { label: "Back to your profile" } do %>
@@ -70,8 +89,17 @@
         and refs do not cross components. %>
     <%= render "studio/profiles/editable_identity", user: current_user %>
 
+    <%# THE id IS LOAD-BEARING, not decoration. The Save button lives in the
+        identity card, which renders ABOVE this form and outside it — so it
+        reaches this form by `form="studio-profile-form"`. Rename the id and the
+        button silently submits the avatar form instead, which purges the photo.
+        test/views/profile_page_render_test.rb pins the two together, in
+        test_the_edit_page_renders_whole. (This named a profile_save_controls_test
+        that does not exist — a false coverage claim inside the comment warning
+        that a rename purges the photo.) %>
     <%= form_with url: profile_path, method: :patch, scope: :profile,
-                  data: { turbo: false }, html: { "x-ref": "form" } do %>
+                  data: { turbo: false },
+                  html: { "x-ref": "form", id: "studio-profile-form" } do %>
       <%# ONE CARD PER ROW — see show.html.erb. The merged wrapper also carried
           `overflow-hidden`, which is worth naming as it goes: the birthday
           popover is `position: fixed` and placed from the trigger's rect, so it
@@ -91,8 +119,6 @@
       <div class="mt-6" x-show="!alpine" x-cloak>
         <button type="submit" class="btn btn-primary">Save changes</button>
       </div>
-
-      <%= render "studio/profiles/save_bar" %>
     <% end %>
   </div>
 </div>

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

@@ -331,6 +331,65 @@
     </div>
   </section>
 
+  <!-- Hold to confirm -->
+  <section class="space-y-5">
+    <div class="space-y-1">
+      <h3 class="text-xl font-bold text-heading">Hold to confirm</h3>
+      <p class="text-muted text-sm max-w-2xl">
+        A press-and-hold CTA for an action you do not want taken by accident, and the
+        carbonation behind it. Ported from Turf Monster, where it confirms a contest entry.
+        The bubbles sit <em>behind</em> the button and show only where they escape its edges;
+        they simmer at rest, boil on hover and through the hold, then burst outward on
+        success. The whole thing themes off the primary role token, so it wears this app&rsquo;s
+        brand — and every color also reads a <code class="font-mono text-2xs">--hold-*</code>
+        input, so one instance can be re-themed from any ancestor.
+        <code class="font-mono text-2xs">prefers-reduced-motion</code> switches the bubbles off.
+      </p>
+    </div>
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <%# 1. The fizz on its own: no button, just the layers. %>
+      <%= render layout: "style/specimen",
+            locals: { klass: ".hold-stack > .hold-fizz  (.fizz-bit)",
+                      usage: %(render "studio/fizz_layer", seed: "demo") } do %>
+        <div class="w-full max-w-xs">
+          <span class="hold-stack fizz-lively" style="height:3rem;--fizz-c-1:#8b5cf6;--fizz-c-4:#22d3ee;--fizz-c-7:#f59e0b;--fizz-c-10:#ef4444;--fizz-c-13:#10b981;--fizz-c-16:#ec4899">
+            <%= render "studio/fizz_layer", seed: "style-fizz" %>
+            <%= render "studio/fizz_layer", seed: "style-fizz~extra", extra: true %>
+            <span class="flex items-center justify-center h-12 text-xs text-muted">six zones, six colors</span>
+          </span>
+        </div>
+      <% end %>
+
+      <%# 2. The button itself, live: press and hold for two seconds. %>
+      <%= render layout: "style/specimen",
+            locals: { klass: ".hold-btn  (studio/hold_button)",
+                      usage: %(render "studio/hold_button", hold_id: "confirm", duration: 2000) } do %>
+        <div class="w-full max-w-xs" x-data="{ submitting: false }">
+          <%= render "studio/hold_button", hold_id: "style-hold", duration: 2000,
+                default_text: "Hold to Confirm", hold_text: "Almost there…", success_text: "Confirmed!" %>
+          <button type="button" class="btn btn-neutral btn-sm mt-3 mx-auto block"
+                  @click="document.querySelector('.hold-btn[data-hold-id=style-hold]').classList.remove('process','success','error','loading')">Reset</button>
+        </div>
+      <% end %>
+
+      <%# 3. The same button, re-themed from an ancestor — no new CSS. %>
+      <%= render layout: "style/specimen",
+            locals: { klass: ".hold-btn  (--hold-* overrides)",
+                      usage: %(<div style="--hold-bg-from:#f0abfc;--hold-success-to:#4c1d95">…</div>) } do %>
+        <div class="w-full max-w-xs" x-data="{ submitting: false }"
+             style="--hold-bg-from:#f0abfc;--hold-bg-mid:#a855f7;--hold-bg-to:#6b21a8;
+                    --hold-success-from:#c4b5fd;--hold-success-to:#4c1d95;--hold-success-glow-rgb:139 92 246">
+          <%= render "studio/hold_button", hold_id: "style-hold-custom", duration: 2000,
+                default_text: "Hold to Confirm", success_text: "Confirmed!",
+                fizz_colors: %w[#f0abfc #6b21a8 #a855f7 #a5b4fc #312e81 #6366f1 #fbcfe8 #831843 #ec4899
+                                #bae6fd #0c4a6e #0ea5e9 #ddd6fe #4c1d95 #8b5cf6 #fde68a #78350f #f59e0b] %>
+          <button type="button" class="btn btn-neutral btn-sm mt-3 mx-auto block"
+                  @click="document.querySelector('.hold-btn[data-hold-id=style-hold-custom]').classList.remove('process','success','error','loading')">Reset</button>
+        </div>
+      <% end %>
+    </div>
+  </section>
+
   <!-- Confetti & pulse -->
   <section class="space-y-5">
     <div class="space-y-1">

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.55.0"
+  VERSION = "0.56.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.55.0
+  version: 0.56.0
 platform: ruby
 authors:
 - Alex McRitchie
@@ -210,6 +210,7 @@ files:
 - app/controllers/theme_settings_controller.rb
 - app/helpers/studio/admin_models_table_helper.rb
 - app/helpers/studio/at_time_helper.rb
+- app/helpers/studio/fizz_helper.rb
 - app/helpers/studio_email_delivery_helper.rb
 - app/helpers/studio_sidebar_helper.rb
 - app/helpers/studio_theme_helper.rb
@@ -273,6 +274,8 @@ files:
 - app/views/studio/_board_assets.html.erb
 - app/views/studio/_confirm_interstitial.html.erb
 - app/views/studio/_cropper_assets.html.erb
+- app/views/studio/_fizz_layer.html.erb
+- app/views/studio/_hold_button.html.erb
 - app/views/studio/_leveling_activity_assets.html.erb
 - app/views/studio/admin_models/_arenas_table.html.erb
 - app/views/studio/admin_models/_teams_table.html.erb
@@ -354,7 +357,7 @@ files:
 - app/views/studio/profiles/_newsletter_modals.html.erb
 - app/views/studio/profiles/_newsletter_section.html.erb
 - app/views/studio/profiles/_pencil_icon.html.erb
-- app/views/studio/profiles/_save_bar.html.erb
+- app/views/studio/profiles/_save_controls.html.erb
 - app/views/studio/profiles/edit.html.erb
 - app/views/studio/profiles/show.html.erb
 - app/views/style/_modal_specimen.html.erb

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

@@ -1,39 +0,0 @@
-<%# The edit form's save bar — fixed to the viewport bottom, present only while
-    the form is dirty.
-
-    No locals. It reads `dirty` and `changeCount` off the enclosing
-    studioProfileForm component, so it must be rendered INSIDE that x-data scope.
-
-    ITS OWN PARTIAL so the browser lane can mount it. The lab page that drives
-    this in a real browser may set up a partial's locals and nothing else — it may
-    not hand-roll the markup — and while this lived inline in edit.html.erb there
-    was no name for it to render. A template needs a controller, a session and a
-    user; a partial needs none of those. See test/lib/e2e_lane_contract_test.rb.
-
-    Four details that make or break it:
-
-      * fixed, not sticky — it must not reserve height while it is hidden;
-      * env(safe-area-inset-bottom), or it sits under the iPhone home indicator;
-      * role="status" + aria-live="polite" announces "unsaved changes" without
-        stealing focus;
-      * the enclosing form carries bottom padding while the bar is up, so the bar
-        never covers the last field. That padding lives on the x-data element in
-        edit.html.erb, because it is the scroll container's business, not the
-        bar's.
-%>
-<div x-show="dirty" x-cloak x-transition.opacity
-     data-studio-save-bar
-     role="status" aria-live="polite"
-     class="fixed inset-x-0 bottom-0 z-40 border-t border-subtle"
-     style="background: var(--color-surface); padding-bottom: env(safe-area-inset-bottom);">
-  <div class="max-w-2xl mx-auto px-4 py-3 flex items-center justify-between gap-4">
-    <p class="text-sm text-secondary">
-      <span class="font-semibold text-heading" x-text="changeCount"></span>
-      <span x-text="changeCount === 1 ? 'unsaved change' : 'unsaved changes'"></span>
-    </p>
-    <div class="flex items-center gap-2">
-      <button type="button" @click="discard()" class="btn btn-outline btn-sm">Discard</button>
-      <button type="submit" class="btn btn-primary btn-sm">Save changes</button>
-    </div>
-  </div>
-</div>