studio-engine 0.54.0 → 0.54.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3419d6ec43e811060b90f6e628feabc249bb6790f9b911c258512ca2fa13f87e
-  data.tar.gz: e91ce80dcd5465ce9660091cb7570327322e1a9aff79d115f4ba0116a7da4a38
+  metadata.gz: b79896d29716fe1408c39d86c9e2d19d4e6dc12dd28749ff85054c29e5ba9a77
+  data.tar.gz: 033a9a7e0e4799ef5ed0522e3fb6b6d1652ab4239d7de625add1e24ac81a5386
 SHA512:
-  metadata.gz: 308d06c9339512b02da78a7c5877134a91b38f20cb89f6e4692b1f734839250a03d15fd1cdea463255ffe49b2e7a675d8f95624cbaf1e4f275ae4ddc83e7b480
-  data.tar.gz: f920799c11d5fdb4ad8757e4afedea52592dcce1d103e7a53f5e666cf62c386994fc9d2d0bb284ea3530840291c5e375fb2f5d279e537b4253c24a60838319e8
+  metadata.gz: dcd13075e85ee744c86ec901f62e749320f916a72c7c04b1530a5715dcdbcec3adcaa39dc1b8236327bc5a2de4238ef1585cf42853444ff92eeae0ff7cfcc702
+  data.tar.gz: 6d242c947ec1d582202bb53652091f6ab4ed111cadfa721aab578df1f89f7b8b9a9bdb4bcd9f57b5b8a15ba9d8c9200b2358668ec2058d59f0c210072e93a79a

data/CHANGELOG.md

@@ -4,6 +4,41 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+### 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,

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

@@ -521,10 +521,22 @@
    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.
-
-   Usage:  <div class="studio-team-glow rounded-xl bg-surface p-5">Selected</div>
+   THE HOST IS A BARE WRAPPER, NOT THE CARD. Both wedge 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 cannot cover the wedges — they wash its whole face, and
+   the ring is gone. What covers the middle is an opaque CHILD in front: in-flow
+   descendants paint later (step 3), leaving only the thickness-wide band around
+   the edge. That is TM's holo-wrap / holo-card split, and it is what both
+   consumers ship — the engine's style/_modal_specimen (bare glow wrapper + the
+   opaque .card article) and the hub's release-phase-meter (bare host + the bar's
+   own fill). Demoing it the other way is what shipped a washed card to
+   admin/style; the host also must NOT be clipped by an overflow-hidden ancestor
+   near its border.
+
+   Usage:  <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"
    Tune:   --studio-team-glow-color / -opacity / -speed / -thickness / -bloom
    ========================================================================== */
@@ -604,12 +616,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 +655,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 +668,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

@@ -297,12 +297,22 @@
         </div>
       <% end %>
 
+      <%# The glow host is a BARE wrapper and the opaque face is a CHILD. The ring
+          pseudos sit at z-index -1/-2, and a negative-z descendant paints ABOVE its
+          host's own background — so a background on the HOST washes the whole card
+          face and there is no ring left. The child in front is what covers the
+          middle, exactly as TM's holo-wrap / holo-card split does. See
+          engine-motion.css §9b. %>
       <%= 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 %>
+                      usage: %(<div class="studio-team-glow rounded-xl">\n  <div class="rounded-xl bg-surface p-5">Selected</div>\n</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">
+            <div class="rounded-xl bg-surface border border-subtle px-5 py-4 text-sm font-semibold text-heading text-center">Selected</div>
+          </div>
+          <div class="studio-team-glow rounded-xl" style="--studio-team-glow-color: #E11D48">
+            <div class="rounded-xl bg-surface border border-subtle px-5 py-4 text-sm font-semibold text-heading text-center">Ravens</div>
+          </div>
         </div>
       <% end %>
 

data/lib/studio/version.rb

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

metadata

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