studio-engine 0.142.0 → 0.143.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9778730aefa3dc031248a8ff2535362cfb258443e2e10d8ded26997417720ef1
-  data.tar.gz: db87fa943c1ca9c97fa0323144dc7d395478e69788ad6bc248d669fb8c68323b
+  metadata.gz: 4d62fbddea6a9c5e292f2f8d56849b87817e6f8ad2291bfae07e694018ecbd9f
+  data.tar.gz: 845b1121620e936c87cee20fbeabdce6c4da5db6b8460d3cd0cbf2b8397f443a
 SHA512:
-  metadata.gz: 31af4a95d22ab3a24a72e97cccda1670d061e1287bf9c8146fadba9b1c399720729f364a13188669827fa7623bbd61bf558f1e79c8aa235bac73e1e8a3454109
-  data.tar.gz: 66fb861fb188b09e76f5bfb068947d46a28bfc2ab1add0f4605b8315edfc4faa8cd2426356d23ab764324a51e811f9055bc6d4a61a41a8f850845aecfde5c5bd
+  metadata.gz: 1df9ec21d9280b70635da28104416490dc798db689709d0e831e08410ed3a1070860611c359ee7be54f5ea3eaa76053b5886c48fc764e8beab33b0e9a8c83037
+  data.tar.gz: 1c2394ffa46070b4dd647d2e440a574ceff00f619f21ef9544ba7c6c87a2535a886cd9745e5859635f8e9aa334235f18129fa4c93e5f2e27ce0cda4ca52b598f

data/CHANGELOG.md

@@ -4,6 +4,12 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.143.0 — 2026-11-10
+
+### Fixed
+
+- **`.edge-rotate-glow` no longer widens a phone page.** The bloom layer (its `::after`) carried a transparent border of 2 x bloom so its mask had room for the blur, which put its box 28px past the host on every side. That box is layout: at 390px the living style guide measured 402px wide, from glow cards in a 16px gutter, also at opacity 0. The bloom is now cut by an evenodd `clip-path` (drawn after the filter, but not layout), so its box stops 8px past the host and the blur spreads past it as ink. The halo looks the same on desktop, except that its corners now follow the host's radius. Keep a glow host 8px or more from the viewport edge. A consumer that overrides the bloom's `inset` (as the glass button rule does) uses `calc(-1 * (var(--edge-rotate-glow-thickness) + 4px))`. The deprecated `.studio-team-glow` alias gets the same fix.
+
 ## 0.142.0 — 2026-11-09
 
 ### Added

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

@@ -573,6 +573,10 @@
    The host must still NOT be clipped by an overflow-hidden ancestor near its
    border, or the ring is cut off with it.
 
+   ON A PHONE the bloom does not widen the page: its blur reaches past its box as
+   ink, and a clip-path (not a mask) cuts it, so only 8px past the host is layout.
+   Keep a glow host 8px or more from the viewport edge. The bloom rule says why.
+
    Usage:  <button class="btn btn-primary edge-rotate-glow">Save</button>
            wrapper shape, when the face is its own element:
              <div class="edge-rotate-glow rounded-xl">
@@ -678,20 +682,41 @@
   /* Blurred bloom twin, a touch larger: its wedges reach 4px PAST the ring, which
      is what makes the bloom read as a halo, not a soft edge on the ring. Drop the
      4px and every WRAPPER consumer's ring visibly lightens (measured: 26% of the
-     pixels on style/_modal_specimen, 13% on the hub's release-phase-meter). The
-     box then carries a transparent BORDER of bloom-reach on top of that, and the
-     mask still holes out the host's box — so the blur
-     spreads outward into that reach and is cut where it has already faded, while
-     the inward half is cut at the host's edge (invisible: that edge is either the
-     card's own or the wrapper child's). Mask applies AFTER filter, which is why
-     the reach has to out-measure the blur — without it the halo ends on a hard
-     line at the layer's own box. */
-  inset: calc(-1 * (var(--edge-rotate-glow-thickness) + 4px + var(--edge-rotate-glow-bloom) * 2));
+     pixels on style/_modal_specimen, 13% on the hub's release-phase-meter).
+
+     THE BOX STOPS THERE, and the blur spreads past it. A filter's spread is ink
+     overflow, which never widens a page. A box is layout, and it does. This layer
+     used to carry a transparent border of 2 x bloom so the mask (clipped to the
+     border box) had room for the blur: 28px past the host on every side, and that
+     box widened a 390px phone page to 402px wherever a glow host sat in a 16px
+     gutter, at opacity 0 too (task edge-glow-phone-overflow).
+
+     So the cut is a clip-path, not a mask. clip-path also applies AFTER filter,
+     but its shape may reach past the box and it is not layout. The shape is the
+     same region the mask cut: out to 2 x bloom past this box, where the blur has
+     faded, minus the host's own box (the hole; the inward half of the blur is cut
+     at the host's edge, invisible because that edge is the card's own or the
+     wrapper child's). evenodd makes the inner rectangle a hole. Measured at
+     1280px against the mask version: the same halo, except that the bloom's
+     corners now follow the host's radius.
+
+     What is still layout: this box, 8px past the host (4px ring + 4px), and the
+     ring, 4px. Keep a glow host 8px or more from the viewport edge. */
+  inset: calc(-1 * (var(--edge-rotate-glow-thickness) + 4px));
   padding: calc(var(--edge-rotate-glow-thickness) + 4px);
-  border: calc(var(--edge-rotate-glow-bloom) * 2) solid transparent;
-  /* The wedges stop at the padding box (host + ring + the 4px); the border is empty
-     room the blur is allowed to spread into. */
-  background-clip: padding-box;
+  -webkit-mask: none;
+  mask: none;
+  clip-path: polygon(evenodd,
+    calc(var(--edge-rotate-glow-bloom) * -2) calc(var(--edge-rotate-glow-bloom) * -2),
+    calc(100% + var(--edge-rotate-glow-bloom) * 2) calc(var(--edge-rotate-glow-bloom) * -2),
+    calc(100% + var(--edge-rotate-glow-bloom) * 2) calc(100% + var(--edge-rotate-glow-bloom) * 2),
+    calc(var(--edge-rotate-glow-bloom) * -2) calc(100% + var(--edge-rotate-glow-bloom) * 2),
+    calc(var(--edge-rotate-glow-bloom) * -2) calc(var(--edge-rotate-glow-bloom) * -2),
+    calc(var(--edge-rotate-glow-thickness) + 4px) calc(var(--edge-rotate-glow-thickness) + 4px),
+    calc(var(--edge-rotate-glow-thickness) + 4px) calc(100% - var(--edge-rotate-glow-thickness) - 4px),
+    calc(100% - var(--edge-rotate-glow-thickness) - 4px) calc(100% - var(--edge-rotate-glow-thickness) - 4px),
+    calc(100% - var(--edge-rotate-glow-thickness) - 4px) calc(var(--edge-rotate-glow-thickness) + 4px),
+    calc(var(--edge-rotate-glow-thickness) + 4px) calc(var(--edge-rotate-glow-thickness) + 4px));
   z-index: -2;
   filter: blur(var(--edge-rotate-glow-bloom)) saturate(1.35);
 }

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

@@ -2852,7 +2852,7 @@ html[data-theme-flip]::view-transition-new(*) {
       box-shadow: var(--lit-inset-pressed);
     }
     html[data-surface-style="glass"] .btn:is(.edge-rotate-glow, .studio-team-glow):not(.btn-outline, :disabled, [aria-disabled="true"])::after {
-      inset: calc(-1 * (var(--edge-rotate-glow-thickness) + 4px + var(--edge-rotate-glow-bloom) * 2));
+      inset: calc(-1 * (var(--edge-rotate-glow-thickness) + 4px));
       box-shadow: none;
     }
     html[data-surface-style="glass"] .btn.studio-border-glow:not(.btn-outline, :disabled, [aria-disabled="true"])::after {

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.142.0"
+  VERSION = "0.143.0"
 end

metadata

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