studio-engine 0.54.0 → 0.55.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3419d6ec43e811060b90f6e628feabc249bb6790f9b911c258512ca2fa13f87e
-  data.tar.gz: e91ce80dcd5465ce9660091cb7570327322e1a9aff79d115f4ba0116a7da4a38
+  metadata.gz: 203b2f8cf1001d19c7ffb24c778ab0f1bdcb0b9aafa59762ded0ea5689eb2423
+  data.tar.gz: a6dbf4164a79cd6b5de2a9cbee178e5455e55c619dfa7197f0db08ba398aaf5b
 SHA512:
-  metadata.gz: 308d06c9339512b02da78a7c5877134a91b38f20cb89f6e4692b1f734839250a03d15fd1cdea463255ffe49b2e7a675d8f95624cbaf1e4f275ae4ddc83e7b480
-  data.tar.gz: f920799c11d5fdb4ad8757e4afedea52592dcce1d103e7a53f5e666cf62c386994fc9d2d0bb284ea3530840291c5e375fb2f5d279e537b4253c24a60838319e8
+  metadata.gz: 0bb5c9bebe4977fef13ab139729ebbc5c560b52f31e573d153e63a00a8a40b970519ac783ad51b45773661e182f5dc848e424b4922e5748117c29560fdfc2b20
+  data.tar.gz: 4e16f3663bb43a61139cac420af9a2c265f91c5c5a6f708c32edf1ad5d1e92c6a559b545b148b4e134afe90d614a81de527906988a122b8326b9ae9ef881e6be

data/CHANGELOG.md

@@ -6,6 +6,68 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ### Added
 
+- **`.studio-team-glow` rings a host that paints its own background**, and can
+  carry **two colors**.
+
+  The ring previously needed an opaque CHILD in front to cover its middle,
+  because both wedge layers are pseudo-elements at `z-index: -1 / -2` and CSS
+  paints an element's background BEFORE its negative-z descendants. A live board
+  card cannot supply that child: Turbo targets the card element itself for
+  replace and remove, so a wrapper host is orphaned every time a card leaves the
+  board. The primitive now cuts the host's own box out of both layers
+  (`padding` + `mask-composite`, the trick §1's `.studio-border-glow` already
+  used), so the ring works on the card directly.
+
+  **No-op for the wrapper shape** — its child was already covering that
+  interior. Verified side by side against both live consumers
+  (`style/_modal_specimen` and the hub's release-phase-meter): pixel-equivalent
+  before and after.
+
+  `--studio-team-glow-color-b` colors the SECOND of the two opposed wedges and
+  defaults to the first, so one-color callers see no change and a caller with a
+  pair to show — a Pokémon's two types — gets one per wedge.
+
+  The bloom twin needed care: a mask applies AFTER a filter, so its box carries a
+  transparent border twice the blur radius and its wedges stop at the padding
+  box. Without that room the halo ends on a hard line at its own edge.
+
+### Fixed
+
+- **`.conic-surface` keeps its wash inside its own box.** The wash was an
+  OVERSIZED pseudo (`inset: -50%`) spun by a `transform` keyframe, cut back to
+  the element by the host's `overflow: hidden`. That clip is not dependable: the
+  rotating child is composited, and a `backdrop-filter` in its compositing path
+  drops it. The `.surface-glass` specimen — a backdrop-filter child of the wash
+  itself — is exactly that path, and on admin/style in Chromium the wash escaped
+  as a rotated slab across BOTH conic specimens.
+
+  The element no longer moves. The pseudo sits at `inset: 0` with
+  `border-radius: inherit`, and the sweep animates a registered
+  `--conic-surface-angle` inside the gradient — the technique §9b already used.
+  Nothing extends past the box, the rounded corners come from the pseudo, and no
+  clip has to hold. Same picture, one fewer thing that can fail.
+  `overflow: hidden` stays for the host's CONTENT.
+
+  The trade, stated: a registered-property animation repaints on the main thread
+  where a transform rode the compositor. At the default 16s sweep that is cheap,
+  and §9b already pays it at 4s.
+
+- **`.studio-team-glow` is demoed and documented as the wrapper it is.** Its two
+  wedge layers are pseudos at z-index -1/-2, and CSS paints an element's own
+  background BEFORE its negative-z descendants — so a background on the glow HOST
+  is covered BY the wedges, not the other way round, and the ring becomes a wash
+  across the whole card face. What covers the middle is an opaque CHILD, which
+  paints later; that is TM's `holo-wrap` / `holo-card` split, and what both real
+  consumers already ship.
+
+  The §9b comment claimed the opposite ("host needs an opaque background"), and
+  the Effects specimen followed it, so the style guide showed two washed slabs
+  where the selection ring belongs. The specimen, its copyable snippet, and the
+  contract comment now all state the same thing. The primitive's geometry is
+  unchanged — the consumers tuned against it are untouched.
+
+### Added
+
 - **`studio/fields/_date_of_birth`** — the engine's one date-of-birth field,
   three selects (Month / Day / Year). Rendered by
   `studio/modals/blocks/_age_verify` and by `/profile/edit`'s birthday row.

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

@@ -507,26 +507,56 @@
 }
 
 /* =============================================================================
-   9b. studio-team-glow — single-color rotating "selected card" ring glow
+   9b. studio-team-glow — rotating "selected card" ring glow, one or two colors
    Ported from turf-monster's per-team selected-card glow (.holo-border-glow):
-   a single-color conic-gradient ring rotates around the element's edge, with a
-   blurred bloom twin behind it. DISTINCT from .studio-border-glow (an animated
-   RAINBOW border) and .studio-glow (a static soft box-shadow halo) — this is the
-   "this card is selected / live" ring, tinted one color.
+   a conic-gradient ring rotates around the element's edge, with a blurred bloom
+   twin behind it. DISTINCT from .studio-border-glow (an animated RAINBOW border)
+   and .studio-glow (a static soft box-shadow halo) — this is the "this card is
+   selected / live" ring.
 
    The color is a CSS var (default the CTA role, so purple on McRitchie Studio),
-   just like TM's per-team --glow-c. The wedge is swept by animating a registered
+   just like TM's per-team --glow-c. TWO opposed wedges travel the edge, and they
+   can carry two colors: --studio-team-glow-color-b defaults to the first, so a
+   one-color caller sees no change, and a caller with a pair to show (a Pokémon's
+   two types) gets one per wedge. The wedges are swept by animating a registered
    @property angle (rotating the GRADIENT, not the element — so no oversized-child
    clipping trick is needed). Opacity is a var (--studio-team-glow-opacity) with a
    transition, so a consumer can fade the glow in/out (the living style guide
    slides it between step cards as a modal's step machine advances).
 
-   Host needs an opaque background (the ring shows only around the edge) and must
-   NOT be clipped by an overflow-hidden ancestor near its border.
+   THE HOST MAY CARRY ITS OWN BACKGROUND — the ring cuts the host's box out of
+   both wedge layers, so only the band around the edge paints. That hole is what
+   makes the primitive work in the two shapes its consumers need:
+
+     · the WRAPPER shape (TM's holo-wrap / holo-card split) — a bare host with an
+       opaque child in front. The engine's style/_modal_specimen and the hub's
+       release-phase-meter both ship this. Unchanged by the hole: the child was
+       already covering that interior.
+     · the CARD shape — the host IS the opaque surface. This is what a live board
+       card needs, because it cannot take a wrapper at all: Turbo targets the card
+       element for both replace and remove, so a wrapper is orphaned every time a
+       card leaves the board.
+
+   Without the hole the card shape is impossible, and not for a tunable reason:
+   both layers are pseudo-elements at z-index -1 / -2, and CSS paints an element's
+   own background FIRST, then its negative-z descendants ON TOP of it (CSS 2.1
+   Appendix E, steps 1 and 2) — so a background on the host is covered BY the
+   wedges, and the ring becomes a wash across the whole face. Only a child, or
+   this hole, can cover the middle.
+
+   The host must still NOT be clipped by an overflow-hidden ancestor near its
+   border, or the ring is cut off with it.
 
    Usage:  <div class="studio-team-glow rounded-xl bg-surface p-5">Selected</div>
-           red glow:  style="--studio-team-glow-color: #E11D48"
-   Tune:   --studio-team-glow-color / -opacity / -speed / -thickness / -bloom
+           wrapper shape, when the face is its own element:
+             <div class="studio-team-glow rounded-xl">
+               <div class="rounded-xl bg-surface p-5">Selected</div>
+             </div>
+           red glow:   style="--studio-team-glow-color: #E11D48"
+           two types:  style="--studio-team-glow-color: #F08030;
+                              --studio-team-glow-color-b: #6890F0"
+   Tune:   --studio-team-glow-color / -color-b / -opacity / -speed / -thickness /
+           -bloom
    ========================================================================== */
 @property --studio-team-glow-angle {
   syntax: "<angle>";
@@ -535,6 +565,11 @@
 }
 .studio-team-glow {
   --studio-team-glow-color: var(--color-cta);
+  /* The SECOND wedge's color. Defaults to the first, so a one-color caller sees
+     no change; a caller with two colors to show (a Pokémon's two types, a pair of
+     brand colors) gets one per wedge. Resolved on this element, so an inline
+     --studio-team-glow-color override feeds this default too. */
+  --studio-team-glow-color-b: var(--studio-team-glow-color);
   --studio-team-glow-opacity: 1;
   --studio-team-glow-speed: 4s;
   --studio-team-glow-thickness: 4px;
@@ -559,14 +594,47 @@
     var(--studio-team-glow-color) 12%,
     transparent 33%,
     transparent 50%,
-    var(--studio-team-glow-color) 62%,
+    var(--studio-team-glow-color-b) 62%,
     transparent 83%
   );
   animation: studio-team-glow-spin var(--studio-team-glow-speed) linear infinite;
+  /* THE HOST'S OWN BOX IS PUNCHED OUT of both wedge layers, so what paints is the
+     band around the edge and nothing else. `padding` makes each layer's CONTENT
+     box exactly the host's box; mask-composite then removes that box from the
+     layer — the same mask trick §1's .studio-border-glow uses.
+     Why it is here: an opaque child in front covers the middle only when the host
+     CAN take a child. A live board card cannot — Turbo targets the card element
+     itself for replace and remove, so a wrapper is orphaned on every remove. With
+     the hole cut here the ring rides the card directly. For a wrapper host this
+     changes nothing visible: the child was already covering that interior. */
+  padding: var(--studio-team-glow-thickness);
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
 }
 .studio-team-glow::after {
-  /* Blurred bloom twin, a touch larger. */
-  inset: calc(-1 * (var(--studio-team-glow-thickness) + 4px));
+  /* 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(--studio-team-glow-thickness) + 4px + var(--studio-team-glow-bloom) * 2));
+  padding: calc(var(--studio-team-glow-thickness) + 4px);
+  border: calc(var(--studio-team-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;
   z-index: -2;
   filter: blur(var(--studio-team-glow-bloom)) saturate(1.35);
 }
@@ -604,12 +672,36 @@
    11. conic-surface — slow rotating conic-gradient wash (authored fresh)
    A subtle animated ambient background for hero panels / empty states: a conic
    gradient sweeps between two themed stops (CTA -> surface by default) on a slow
-   rotation. The gradient lives on a ::before that rotates, so content kept above
-   it stays crisp. The element's radius clips the wash; give it one.
+   rotation. The gradient lives on a ::before behind the content, so content kept
+   above it stays crisp.
+
+   THE WASH IS CONTAINED BY CONSTRUCTION, NOT BY A CLIP. The first cut rotated an
+   OVERSIZED child (`inset: -50%` + `transform: rotate`) and leaned on the host's
+   `overflow: hidden` to cut it back to the box. That clip is not dependable: the
+   rotating child is composited, and a `backdrop-filter` anywhere in its
+   compositing path (its OWN .surface-glass child on the style guide, or an
+   unrelated overlay elsewhere on the page) drops the clip — the wash then paints
+   outside the box as a rotated slab. Observed on admin/style in Chromium, on both
+   conic specimens, with the .surface-glass demo the reliable trigger.
+
+   So the element never moves. The ::before sits at `inset: 0` with
+   `border-radius: inherit`, and the sweep animates a registered @property angle
+   inside the gradient — the same technique §9b uses. Nothing extends past the
+   box, the rounded corners come from the pseudo itself, and no clip has to hold.
+   `overflow: hidden` stays for the host's CONTENT, not for the wash.
+
+   The cost of the trade, stated: a registered-property animation repaints the
+   gradient on the main thread each frame, where a transform rode the compositor.
+   At the default 16s sweep that is cheap, and §9b already pays it at 4s.
 
    Usage:  <div class="conic-surface rounded-2xl p-8"> ...content... </div>
    Tune:   --conic-surface-from / --conic-surface-to / --conic-surface-duration
    ========================================================================== */
+@property --conic-surface-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
 .conic-surface {
   position: relative;
   isolation: isolate;
@@ -619,10 +711,11 @@
 .conic-surface::before {
   content: "";
   position: absolute;
-  inset: -50%;
+  inset: 0;
+  border-radius: inherit;
   z-index: -1;
   background: conic-gradient(
-    from 0deg,
+    from var(--conic-surface-angle),
     var(--conic-surface-from, var(--color-cta)),
     var(--conic-surface-to, var(--color-surface)),
     var(--conic-surface-from, var(--color-cta))
@@ -631,7 +724,7 @@
 }
 
 @keyframes conic-surface-spin {
-  to { transform: rotate(360deg); }
+  to { --conic-surface-angle: 360deg; }
 }
 
 /* =============================================================================

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

@@ -27,8 +27,11 @@
       JS     — the three selects. `alpine` comes from the enclosing
                studioProfileForm and is true only once that component has booted.
 %>
-<label class="block text-sm text-secondary mb-2 font-medium" for="profile_birthday">Date of birth</label>
-
+<%# NO FIELD LABEL HERE, deliberately (operator's call, 2026-08-15). The row is
+    already titled "Birthday" by the section wrapper, and the three selects carry
+    their own MONTH / DAY / YEAR labels — a "Date of birth" line between the two
+    said the same thing a third time. The no-JS <input type="date"> keeps its id
+    so a label elsewhere could still point at it. %>
 <%
   y = user.birth_year
   m = user.birth_month
@@ -48,8 +51,27 @@
   <template x-if="alpine">
     <div>
       <%# The value the form actually submits. The selects write here; nothing
-          types into it. %>
-      <input type="hidden" name="profile[birthday]" :value="isoValue">
+          types into it.
+
+          THE NAME IS BOUND, AND THAT IS THE WHOLE POINT. A partly-filled date
+          has no ISO value, and submitting a BLANK birthday is not "no change" to
+          this controller — it is DELETE, and it clears all three columns on
+          purpose (see #birthday_attributes: someone deleting their birthday
+          means it). Those two facts met in a data-loss bug: a stored Jan 31,
+          switch the month to February, onMonthChange blanks the 31st because
+          February has no 31st, and the form is now one Save away from wiping a
+          birthday the person never asked to delete.
+
+          On THIS path a blank is always an edit in progress and never an
+          intentional clear, because the selects offer no empty option — once a
+          part is set the user cannot unset it. The intentional clear lives on
+          the no-JS <input type="date"> above, where it is a real gesture.
+
+          So while the date is incomplete the field submits NOTHING: Alpine
+          removes an attribute bound to false, an input with no name is not
+          submitted, and the controller's `return {} if raw.nil?` makes an absent
+          param a no-op. The birthday is left exactly as it was. %>
+      <input type="hidden" :name="complete ? 'profile[birthday]' : false" :value="isoValue">
 
       <%= render "studio/fields/date_of_birth" %>
     </div>

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

@@ -82,12 +82,64 @@
         this.publish();
       },
 
-      // `fields` belongs to the enclosing studioProfileForm. Alpine's scope chain
-      // makes it reachable and it is the SAME object, so assigning through it is
-      // what raises the save bar. Without this the field would set a value the
-      // dirty check never notices.
+      // WHAT THE DIRTY CHECK IS SHOWN, and why it is not isoValue.
+      //
+      // isoValue is "" for EVERY incomplete date, so publishing it made a whole
+      // class of edit invisible: on an empty birthday, choosing a month wrote ""
+      // over "" and the save bar never appeared. The operator reported exactly
+      // that. Choosing a month IS a change — the form just had no way to see it.
+      //
+      // So the signal is the three parts, which differ whenever any one of them
+      // does. It stays equal to isoValue for a COMPLETE date (same string, same
+      // shape) so a finished edit compares correctly against the value the page
+      // loaded with, and Discard restores it to that same string.
+      //
+      // `fields` belongs to the enclosing studioProfileForm — Alpine's scope
+      // chain makes it reachable and it is the SAME object, so assigning through
+      // it is what raises the save bar.
+      // THE EMPTY CASE IS NOT A PARTIAL ONE, and conflating them makes the page
+      // arrive already dirty. studioProfileForm's initial.birthday is "" for a
+      // person with no birthday on file, so an untouched empty field must also
+      // read "" — joining three blanks gives "--", which compares as a change and
+      // would raise the save bar on load, before anyone touched anything.
+      get signature() {
+        if (this.complete) return this.isoValue;
+        if (!this.year && !this.month && !this.day) return "";
+        return [this.year, this.month, this.day].join("-");
+      },
+
       publish() {
-        if (this.fields) this.fields.birthday = this.isoValue;
+        if (this.fields) this.fields.birthday = this.signature;
+      },
+
+      // DISCARD MUST REACH THE SELECTS. studioProfileForm#discard reassigns its
+      // `fields` object, which restores every input bound with x-model — and the
+      // three selects are not, because they are bound to THIS component's own
+      // month/day/year. So Discard used to leave them showing the abandoned edit
+      // while the bar disappeared, and the hidden input went on carrying it: the
+      // next save would write the change the user had just discarded.
+      //
+      // Watching `fields.birthday` is what joins them. Discard sets it back to
+      // the initial string, this fires, and the selects follow — and because the
+      // guard below returns early when the value already matches, the publish →
+      // watch → publish path cannot loop.
+      init() {
+        var self = this;
+        this.publish();
+        this.$watch("fields.birthday", function (value) {
+          if (value === self.signature) return;
+          self.adopt(value);
+        });
+      },
+
+      // Takes an ISO date (or a blank) and puts the selects on it. Anything that
+      // is not a full date empties all three, which is what an initial blank and
+      // a cleared birthday both mean.
+      adopt(value) {
+        var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(value || ""));
+        this.year  = m ? String(+m[1]) : "";
+        this.month = m ? String(+m[2]) : "";
+        this.day   = m ? String(+m[3]) : "";
       }
     };
   };

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

@@ -272,7 +272,7 @@
       <h3 class="text-xl font-bold text-heading">Effects</h3>
       <p class="text-muted text-sm">
         The <code class="font-mono text-2xs">engine-motion.css</code> visual-effect primitives beyond motion -
-        gradient text, a soft glow halo, a single-color rotating <strong>selection glow</strong>
+        gradient text, a soft glow halo, a one- or two-color rotating <strong>selection glow</strong>
         (ported from Turf Monster's selected-team-card ring), frosted glass, and a conic wash. Each is
         themed through the role tokens and tunable via CSS-var knobs.
       </p>
@@ -297,12 +297,18 @@
         </div>
       <% end %>
 
+      <%# The CARD shape: the host carries its own background and the ring still
+          rings, because the primitive punches the host's box out of both wedge
+          layers. The WRAPPER shape (bare host + opaque child) is staged by the
+          Modals section's glow cards — both are documented in engine-motion.css
+          §9b. Two wedges travel the edge, so a pair of colors reads as a pair. %>
       <%= render layout: "style/specimen",
-            locals: { klass: ".studio-team-glow  (knob: --studio-team-glow-color)",
-                      usage: %(<div class="studio-team-glow rounded-xl bg-surface p-5">Selected</div>\n<div class="studio-team-glow rounded-xl bg-surface p-5" style="--studio-team-glow-color: #E11D48">Ravens</div>) } do %>
+            locals: { klass: ".studio-team-glow  (knobs: --studio-team-glow-color / -color-b)",
+                      usage: %(<div class="studio-team-glow rounded-xl bg-surface p-5">Selected</div>\n<div class="studio-team-glow rounded-xl bg-surface p-5"\n     style="--studio-team-glow-color: #F08030; --studio-team-glow-color-b: #6890F0">Fire / Flying</div>) } do %>
         <div class="flex flex-wrap items-center justify-center gap-6">
           <div class="studio-team-glow rounded-xl bg-surface border border-subtle px-5 py-4 text-sm font-semibold text-heading text-center">Selected</div>
-          <div class="studio-team-glow rounded-xl bg-surface border border-subtle px-5 py-4 text-sm font-semibold text-heading text-center" style="--studio-team-glow-color: #E11D48">Ravens</div>
+          <div class="studio-team-glow rounded-xl bg-surface border border-subtle px-5 py-4 text-sm font-semibold text-heading text-center"
+               style="--studio-team-glow-color: #F08030; --studio-team-glow-color-b: #6890F0">Fire / Flying</div>
         </div>
       <% end %>
 

data/lib/studio/version.rb

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

metadata

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