studio-engine 0.56.0 → 0.56.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2e0f0009a05bd6e06865465368969671524d772ab938b78622539d846532d387
-  data.tar.gz: cf267435b701685424683ce6031948498b52a834551762d6be055cd126b46625
+  metadata.gz: a79e19829850f00a9e8cc9d2957d1de612da3bfbc08729a1326aa42391d2d422
+  data.tar.gz: f81e213a68ac8e8ae4693cc6ace20965df25037f24d4d3173984ddf4c95efab0
 SHA512:
-  metadata.gz: 366f4b22dd590398e706f01b56b75ab5f82a60ca1bd6407f288a3898721cea9ab8914dc9e90c1865028ac3458ed299d9076d3768ae3bb3b86cb51ee26704fa70
-  data.tar.gz: a45734bb24a793ad91620694aa36457ce057ed12c86b1754cc3aa6a1365e552510fcbe2eb28932273a7a41e53c755f457395252d0f014e78ae6207dafd9fb5ee
+  metadata.gz: 99bb6489f03318e771373b6c00514b9cc5199a0182bd1d2a08f8310ea3ee60b1caa102f97f31bc96ee9d004471d77a34d5bb7ebf50a5c76354a4e579cf2abb91
+  data.tar.gz: 6021838ea445cd9bfaec0b6ade383a7e3f6d8bb5597f6fd5a22c415631ce8ca598564e4f5765bcde709f55260dc2b8775cc5e26edf92d08bc0a7a4702cfa731a

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

@@ -85,6 +85,15 @@
     `spin` is kept because it is byte-identical to Tailwind's built-in.
 */
 
+/* CASCADE LAYER — read before removing.
+   Everything below sits in @layer components so a CONSUMER's own utility
+   keeps winning until it deliberately adopts the primitive. Unlayered CSS
+   outranks every layered rule, so an unlayered engine sheet silently
+   overrode a consumer's same-named utility class the moment its lock bumped —
+   nothing in the consumer's own repo had to change for its styling to move.
+   @property blocks stay OUTSIDE: they are global registrations, not rules. */
+
+@layer components {
 /* =============================================================================
    1. studio-border-glow — mask-composite rainbow border glow
    Extracted verbatim from mcritchie-studio app/assets/tailwind/application.css.
@@ -523,7 +532,9 @@
    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
+@layer components {
    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).
@@ -562,11 +573,13 @@
    Tune:   --studio-team-glow-color / -color-b / -opacity / -speed / -thickness /
            -bloom
    ========================================================================== */
+}
 @property --studio-team-glow-angle {
   syntax: "<angle>";
   inherits: false;
   initial-value: 0deg;
 }
+@layer components {
 .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
@@ -701,11 +714,13 @@
    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;
 }
+@layer components {
 .conic-surface {
   position: relative;
   isolation: isolate;
@@ -1039,12 +1054,14 @@
 
 /* Registered custom property — makes --bar-progress interpolatable so a single
    transition animates all five segment widths together (one ease, not five). */
+}
 @property --bar-progress {
   syntax: "<number>";
   initial-value: 0;
   inherits: true;
 }
 
+@layer components {
 /* The motion PROPERTIES (transition / animation) live on these classes — NOT on
    the view's inline style — precisely so the reduced-motion override below can
    reach and cancel them. An inline `style="transition: …"` beats a class rule on
@@ -1563,10 +1580,26 @@ body.modal-open { overflow: hidden; }
 }
 
 .hold-btn.loading > .hold-icon svg.progress {
-  animation: spin 0.8s linear infinite;
+  /* NOT the shared `spin` keyframe. `spin` declares only `to`, so its implicit
+     `from` is whatever the element already carries — and this element carries
+     `rotate(-90deg)` (the ring's 12-o'clock origin, set above). That made the
+     loading icon sweep -90deg -> 360deg, i.e. 450deg per iteration, and snap
+     back across a 90deg seam 1.25x a second. `spin` stays correct for `.spinner`,
+     which has no base transform, so this needs its own keyframe rather than an
+     edit there. The scale is carried through so the animation does not drop it. */
+  animation: hold-spin-progress 0.8s linear infinite;
   transition: none;
 }
 
+@keyframes hold-spin-progress {
+  from {
+    transform: rotate(-90deg) scale(var(--progress-scale, 1));
+  }
+  to {
+    transform: rotate(270deg) scale(var(--progress-scale, 1));
+  }
+}
+
 .hold-btn.loading > .hold-icon svg.progress circle {
   stroke: rgb(var(--color-primary-rgb));
   stroke-width: 3;
@@ -1809,3 +1842,4 @@ body.modal-open { overflow: hidden; }
     transition: none !important;
   }
 }
+}

data/lib/studio/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.56.0
+  version: 0.56.1
 platform: ruby
 authors:
 - Alex McRitchie
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-08-16 00:00:00.000000000 Z
+date: 2026-08-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails