studio-engine 0.65.0 → 0.65.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8914b74430f105820bbc5a41f44d6c573ff88492bcd882534f769fa2c2a11608
-  data.tar.gz: f3d1ffbec8dcb09ef354d21ab3786d2d5b9b0590a665ac95a949e7282668a66b
+  metadata.gz: 7389678882ebbd2bba6a35738f330283a2e5a226e68009a76b83f0c14b0e1351
+  data.tar.gz: de1b1a74888a3c2e47cc39da0377323c1b51c04d1aa718de9826fc338aff13a8
 SHA512:
-  metadata.gz: d52952922f19f864f97fd09297d8711c246ba54415bd40d60682569cbdfe0d51ccf7fb7673e7d921a361ab3657b35871f4999aad0baa80374dd3098cd3c267b2
-  data.tar.gz: 82afd75d6a4e57bfbe3708b59c1c1e7eec188cf2bcfd5921e3eeb50e006090d1f0839e5fc280be8ee60c8d6dc999bb07bb148e7e2220b7d061559048e14b6225
+  metadata.gz: f2c671579063631d50ac0298f2812ccde9a32a4554cc85ecf2b23368a8f51d2027f4eb03ed748c87104b7b68c9150d4fa7accec288d6b1a545ddf6233c755847
+  data.tar.gz: f2a53ef58b2bc5959d3a0c420f0cb8619b448caf496b9b437cd70e4f79ca5d8652e482338f2472ad3fd3f4b2609c0e5c47e8f0c7da3ca44d4d7b9e9828cb4f80

data/CHANGELOG.md

@@ -119,6 +119,60 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
   guard on the read-before-write order.
 
 
+### Fixed
+
+- **A toast with buttons could not be dismissed while a modal was open.** The
+  layer scale put `--z-banner` (500) above `--z-toast` (400), and `body.modal-open`
+  lifts the environment bar stack to that tier at `position: sticky; top: 0`.
+  `#toast-container` is fixed at top 0 with `1rem` of padding, so the two land on
+  the same pixels: measured in a browser, the bars own y0-47 while the toast's
+  Dismiss button runs y28-40 — an 8-14px overlap at every viewport tested.
+  `elementFromPoint` at that button returned the **banner**, and a real click left
+  the toast on the page. Because the toast manager gives any toast carrying
+  buttons `duration: 0`, that X was the toast's **only** exit: it was stuck for
+  the rest of the session.
+
+  **The tiers are reordered** — `--z-banner` 400, `--z-toast-blur` 499, `--z-toast`
+  500 — and that is a semantic decision rather than a nudge around the geometry: a
+  toast is transient and demands interaction, a banner is persistent chrome that
+  will still be there afterwards. `--z-banner` still clears `--z-modal` (200), so
+  the property the lift exists for — DEV MODE and the email chip stay lit and
+  clickable over a modal — is unchanged and now has its own spec.
+
+  **One measured cost.** A banner button's tooltip is a descendant of the bar
+  stack, and the modal-open lift makes that stack a stacking context, so the
+  tooltip composites at `--z-banner` rather than at its own `--z-tooltip` (600).
+  At 1440x900 the tooltip and the toast card never meet; at 390x844 they overlap
+  by 260x45px, so a banner tooltip opened with both a modal and a toast up is
+  drawn under the toast. Hover/focus-only, purely visual, and recorded beside the
+  scale.
+
+  **Consumers that redefine these tokens in their own `:root` after the engine
+  import still win**, as they always have, so an app carrying a local copy of the
+  scale keeps the old order (and the bug) until it drops the copy.
+
+  Two literals moved with the tiers: `#toast-container` and `.toast-page-blur` in
+  `layouts/studio/_flash` carry `var(--studio-toast-z, var(--z-toast, …))`
+  fallbacks, and a fallback that disagreed with the scale would hand the bug to
+  any app rendering the partial without the engine sheet.
+
+  **The existing test could not have caught this and still cannot on its own.**
+  `layer_scale_contract_test` asserted `--z-toast > --z-modal`, which was true the
+  entire time the toast was unusable — both tiers cleared the modal, which says
+  nothing about which of *them* wins. It now names the banner, and pins the halo
+  directly beneath its own toast so no tier can settle between them. The property
+  is also asserted where the defect lives, in `e2e/toast_over_banner.spec.js`: a
+  hit test and a real mouse click at the Dismiss button, at desktop and phone
+  widths, at scroll-top and at an offset. And once more on the artifact a
+  consumer is actually served — `test/integration/layer_scale_build_test.rb`
+  runs the real Tailwind binary over the engine's entry point and reads the
+  tiers out of the COMPILED bundle, where `@import` resolution, layer ordering
+  and a shadowing `:root` are all in play and a source read sees none of them. One trap is recorded there — at 390px
+  the point under that button is the banner's Email link, so on the broken build a
+  click *navigated* and the toast count on the new page was zero; asserting the
+  count alone passes over the bug.
+
+
 ### Breaking
 
 - **The age-gate DOB modal is renamed, and the refusal moved to its own card.**

data/app/assets/tailwind/studio_engine/engine.css

@@ -63,12 +63,51 @@
   --z-modal:       200;  /* modal backdrop + card — THE app blocker */
   --z-lightbox:    210;  /* a lightbox opened from inside a modal */
   --z-alert:       300;  /* transient overlays that must not be missed */
-  --z-toast-blur:  399;  /* the frosted halo behind the toasts */
-  --z-toast:       400;  /* toasts */
-  --z-banner:      500;  /* environment / DEV MODE — reachable mid-modal */
+  --z-banner:      400;  /* environment / DEV MODE — reachable mid-modal */
+  --z-toast-blur:  499;  /* the frosted halo behind the toasts */
+  --z-toast:       500;  /* toasts — ABOVE the banner; see below */
   --z-tooltip:     600;  /* tooltips on the banner, so they clear it */
 }
 
+/* WHY THE TOAST OUTRANKS THE BANNER, and why it did not used to.
+
+   The first cut of this scale put --z-banner (500) over --z-toast (400) on the
+   reasoning that the environment bars must stay reachable mid-modal. They must
+   — but so must a toast, and the two claims collided the moment BOTH were true
+   at once, because they occupy the same corner of the viewport.
+
+   THE DEFECT, MEASURED on mcritchie-studio at 1440x900 and 390x844, dark and
+   light, scrollY 0 and 900. #toast-container is fixed at top 0 with 1rem of
+   padding, so a toast card sits at roughly y16-92. With a modal open, the rule
+   below lifts the bar stack to sticky top 0 at --z-banner, so it owns y0-47 —
+   overlapping the toast's top edge, which is where the Dismiss button lives.
+   `document.elementFromPoint` at that button returned the BANNER div, and a
+   real click left the toast count at 1. With no modal open it returned the
+   button's own SVG and the count dropped to 0.
+
+   That is not a cosmetic overlap. A toast carrying action buttons is given
+   `duration: 0` by the toast manager (layouts/studio/_flash), so it never
+   auto-dismisses — the Dismiss button is its ONLY exit, and under a lifted
+   banner the toast is stuck on the page for the rest of the session.
+
+   SO THE ORDER IS A SEMANTIC DECISION, not a workaround for the geometry: a
+   TOAST IS TRANSIENT AND DEMANDS INTERACTION; a BANNER IS PERSISTENT CHROME
+   that will still be there afterwards. The thing asking to be dealt with wins.
+   Two alternatives were considered and rejected — lowering the modal-open lift
+   below the toast (narrower blast radius, but leaves the scale saying something
+   nobody believes) and offsetting #toast-container while modal-open (treats the
+   symptom; the toast goes back under the banner the day either one grows).
+
+   WHAT THIS COSTS, MEASURED RATHER THAN ASSUMED. --z-tooltip (600) still clears
+   both tiers, but a banner button's tooltip is a DESCENDANT of the bar stack —
+   and while a modal is open the rule below gives that stack a z-index, which
+   makes it a stacking context and clamps every descendant inside it. So the
+   tooltip now composites at --z-banner rather than at 600. At 1440x900 the two
+   never meet (tooltip x1083-1343, toast card x496-944); at 390x844 they overlap
+   by 260x45px, so a banner tooltip opened with a modal AND a toast up is drawn
+   under the toast card. It is hover/focus-only, purely visual (the tooltip is
+   pointer-events:none), and it is the accepted cost of this ordering. */
+
 /* The environment / impersonation bars stay in NORMAL FLOW at rest
    (banners/_stack records why: pinning them in the RESTING state needs one
    pinned sibling to measure the other, and the measured version visibly
@@ -110,7 +149,7 @@ body.modal-open .studio-bar-stack,
 body.modal-open .studio-app-banner {
   position: sticky;
   top: 0;
-  z-index: var(--z-banner, 500);
+  z-index: var(--z-banner, 400);
 }
 
 /* -- Surfaces -------------------------------------------------------------- */
@@ -395,6 +434,28 @@ body.modal-open .studio-app-banner {
    x-data="navCollapse()" on it, and override only the endpoints that differ
    from the defaults below.
 
+   ADOPTING IT IN A FORK COSTS MORE THAN THE OPT-IN, corrected 2026-08-28 after
+   checking against a real forked header. Two attributes is what it takes to opt
+   IN; it is not the job. mcritchie-studio's inlined header needs, at minimum:
+
+     REMOVE the bindings that fight the primitive —
+       :class="scrolled ? 'py-2' : 'py-6'"        on the row
+       x-bind:class="scrolled ? 'w-5 h-5' : …"    on the logo
+       x-bind:class="scrolled ? 'text-base' : …"  on the h1, which is a DISCRETE
+         swap and therefore the exact 1px reverse lurch this primitive exists to
+         remove — a fork that keeps it reproduces the bug it is adopting to fix
+       transition-all duration-300                in three places
+     ADD the hooks the band table actually keys on —
+       nav-row, nav-logo, nav-title, nav-logo-link
+       (nav-logo-link is MOBILE-ONLY: omit it and a desktop check still passes,
+        which is how an adoption ships half-done)
+     WRAP the h1's bare text node in a span so there is an element to size.
+
+   That is roughly fourteen edits across five elements. The SIZING LAYER does
+   reach every app — that is the win this block delivers and it is unaffected.
+   Only the cost sentence was wrong, and an understated cost is how an adoption
+   gets started and abandoned half-done.
+
    LAYERED ON PURPOSE. These are DEFAULTS, so a consuming app has to be able to
    beat them, and unlayered CSS beats every layered rule regardless of
    specificity — shipping them bare would make the engine's numbers

data/app/views/layouts/_navbar.html.erb

@@ -74,8 +74,17 @@
        rendering THIS partial got it. Three of six apps fork the navbar, so each
        was left to hand-write its own — the way four independent copies happened
        in the first place. It ships from engine.css now (every consuming app
-       imports it), so a forking app adopts the collapse with `nav-shell` +
-       x-data="navCollapse()" and overrides only the endpoints that differ. */
+       imports it), so a forking app OPTS IN with `nav-shell` +
+       x-data="navCollapse()" and overrides only the endpoints that differ.
+
+       THE OPT-IN IS NOT THE WHOLE JOB — this is the partial a forker actually
+       reads, so the caveat belongs here too rather than only beside the band
+       table. A hand-written header must also REMOVE the bindings that fight the
+       primitive (a :class size swap on the row, x-bind:class on the logo AND on
+       the title, transition-all alongside) and ADD the hooks the table keys on
+       (nav-row, nav-logo, nav-title, and the mobile-only nav-logo-link). The
+       title swap matters most: it is DISCRETE, which is the 1px reverse lurch
+       the primitive exists to delete. Full accounting in engine.css. */
   </style>
   <div class="nav-row flex items-center">
     <%# Left side: logo + nav %>

data/app/views/layouts/studio/_flash.html.erb

@@ -17,8 +17,18 @@
      bare 60/55 that sat below every app navbar. A toast is the one thing that
      must surface over an open modal, so --z-toast is above --z-modal and an app
      that never overrides gets that for free. Apps that DO override should set
-     the tier (--z-toast) instead, and drop the per-component name. */
-  #toast-container { z-index: var(--studio-toast-z, var(--z-toast, 400)); }
+     the tier (--z-toast) instead, and drop the per-component name.
+
+     ABOVE THE BANNER TOO, and the fallbacks below have to say so. A toast and
+     the environment bars share the top of the viewport, and with a modal open
+     engine.css lifts those bars to --z-banner at top 0 — which used to sit at
+     500, over the toast's 400, so the toast's Dismiss button was covered and a
+     click landed on the banner. A toast carrying buttons is given duration 0 by
+     the manager below, so that button is its only exit: covered, the toast was
+     stuck forever. The tiers were reordered (engine.css carries the argument);
+     these literals are what an app gets when the engine sheet is absent, so
+     they must carry the SAME order or that app keeps the bug. */
+  #toast-container { z-index: var(--studio-toast-z, var(--z-toast, 500)); }
   .toast-shadow-all {
     box-shadow: 0 0 30px rgba(0,0,0,0.4), 0 0 10px rgba(0,0,0,0.2);
   }
@@ -65,7 +75,7 @@
     mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0) 100%);
     -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0) 100%);
     pointer-events: none;
-    z-index: var(--studio-toast-blur-z, var(--z-toast-blur, 399));
+    z-index: var(--studio-toast-blur-z, var(--z-toast-blur, 499));
     transition: opacity 0.5s ease;
     background: rgba(255, 255, 255, 0.15);
   }

data/app/views/layouts/studio/_head.html.erb

@@ -541,9 +541,10 @@
           // KEEP FRAMES COMING WHILE CATCHING UP. Nothing else will schedule
           // one: the finger is off, so no more scroll events arrive, and
           // without this the collapse freezes wherever the clamp left it. It
-          // converges LINEARLY and lands exactly — about 4 frames (~67ms) from
-          // a hard flick — rather than crawling asymptotically the way the
-          // 300ms ease this replaced did.
+          // converges LINEARLY and lands exactly — about 8 frames (~133ms) at
+          // the mobile --nav-ramp of 120, and about 10 (~167ms) at the default
+          // 144, from a hard flick — rather than crawling asymptotically the
+          // way the 300ms ease this replaced did.
           if (!snap && p !== target) {
             queued = true;
             requestAnimationFrame(apply);

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.65.0"
+  VERSION = "0.65.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.65.0
+  version: 0.65.2
 platform: ruby
 authors:
 - Alex McRitchie