studio-engine 0.17.0 → 0.18.0

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

@@ -1,8 +1,13 @@
 /*
-  studio-engine MOTION / EFFECT primitives — the shared animation + visual-effect
-  layer. Seven reusable primitives, consolidated from the per-app copies that
-  drifted across mcritchie-studio (MS) and turf-monster (TM):
+  studio-engine MOTION / EFFECT / LEVELING primitives — the shared animation,
+  visual-effect, and leveling layer. Reusable primitives in three families. The
+  MOTION seven were consolidated from the per-app copies that drifted across
+  mcritchie-studio (MS) and turf-monster (TM); the EFFECT four are the reusable
+  visual treatments the admin/style page showcases beyond motion; the LEVELING
+  ladder is TM's polished .level-badge tiers, lifted verbatim so any consumer with
+  Studio.feature?(:leveling) ships them.
 
+  Motion:
     .studio-border-glow   mask-composite rainbow border glow  (extracted, MS)
     .spinner              one canonical border spinner        (reconciled, MS+TM)
     .loading-dots         three bouncing dots                 (extracted, TM)
@@ -11,6 +16,18 @@
     .fade-edge            static mask-image edge fade         (authored fresh)
     .progress-meter       dual-layer color-flip progress bar  (authored fresh)
 
+  Effect:
+    .text-gradient        gradient-clipped text fill          (authored fresh)
+    .studio-glow          soft themed glow halo               (authored fresh)
+    .surface-glass        frosted translucent glass panel     (authored fresh)
+    .conic-surface        slow rotating conic-gradient wash   (authored fresh)
+
+  Leveling:
+    .level-badge(-1..-10) progressive level pill ladder       (ported, TM)
+    .level-up-pop         level-up pop + glow burst           (ported, TM)
+    .nav-level-pop        nav level-up bounce                 (ported, TM)
+    .badge-with-sheen     one-shot diagonal sheen wrapper     (ported, TM)
+
   ─────────────────────────────────────────────────────────────────────────────
   OPT-IN — this layer does NOT auto-bundle.
 
@@ -419,9 +436,501 @@
   100% { transform: translateX(250%); }
 }
 
+/* =============================================================================
+   EFFECT family — static (and one slow-animated) visual treatments, beyond the
+   seven motion primitives above. Same design rules: plain classes, themed knobs
+   with sensible defaults, namespaced keyframes.
+   ========================================================================== */
+
+/* =============================================================================
+   8. text-gradient — gradient-clipped text fill (authored fresh)
+   Paints text with a themed gradient instead of a flat color via
+   background-clip: text. Defaults to a CTA -> danger sweep; retune the two stops
+   or replace the whole gradient image. Static — no animation. Apply to the text
+   element itself (a heading, a span); it needs a bold/large glyph to read well.
+
+   Usage:  <h1 class="text-gradient">Headline</h1>
+   Tune:   --text-gradient-from / --text-gradient-to / --text-gradient-angle /
+           --text-gradient-image (override the whole gradient)
+   ========================================================================== */
+.text-gradient {
+  --text-gradient-from: var(--color-cta);
+  --text-gradient-to: var(--color-danger);
+  --text-gradient-angle: 90deg;
+  --text-gradient-image: linear-gradient(
+    var(--text-gradient-angle),
+    var(--text-gradient-from),
+    var(--text-gradient-to)
+  );
+  background-image: var(--text-gradient-image);
+  -webkit-background-clip: text;
+          background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+/* =============================================================================
+   9. studio-glow — soft themed glow halo (authored fresh)
+   A single-color bloom around any element via box-shadow, tinted with the CTA
+   role by default. Static; add .studio-glow--pulse to breathe. Distinct from
+   .studio-border-glow (an animated rainbow BORDER ring) — this is a plain halo
+   for emphasis on a button, avatar, or card.
+
+   Usage:  <button class="btn btn-primary studio-glow">Launch</button>
+   Tune:   --studio-glow-color / --studio-glow-size / --studio-glow-spread /
+           --studio-glow-opacity / --studio-glow-speed (pulse only)
+   ========================================================================== */
+.studio-glow {
+  --studio-glow-color: var(--color-cta);
+  --studio-glow-size: 1.4rem;
+  --studio-glow-spread: -0.2rem;
+  --studio-glow-opacity: 0.6;
+  box-shadow: 0 0 var(--studio-glow-size) var(--studio-glow-spread)
+    color-mix(in srgb, var(--studio-glow-color) calc(var(--studio-glow-opacity) * 100%), transparent);
+}
+
+.studio-glow--pulse {
+  animation: studio-glow-pulse var(--studio-glow-speed, 2.4s) ease-in-out infinite;
+}
+
+@keyframes studio-glow-pulse {
+  0%, 100% {
+    box-shadow: 0 0 var(--studio-glow-size) var(--studio-glow-spread)
+      color-mix(in srgb, var(--studio-glow-color) calc(var(--studio-glow-opacity) * 100%), transparent);
+  }
+  50% {
+    box-shadow: 0 0 calc(var(--studio-glow-size) * 2) calc(var(--studio-glow-spread) + 0.2rem)
+      color-mix(in srgb, var(--studio-glow-color) calc(var(--studio-glow-opacity) * 100%), transparent);
+  }
+}
+
+/* =============================================================================
+   9b. studio-team-glow — single-color rotating "selected card" ring glow
+   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.
+
+   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
+   @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.
+
+   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
+   ========================================================================== */
+@property --studio-team-glow-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+.studio-team-glow {
+  --studio-team-glow-color: var(--color-cta);
+  --studio-team-glow-opacity: 1;
+  --studio-team-glow-speed: 4s;
+  --studio-team-glow-thickness: 4px;
+  --studio-team-glow-bloom: 10px;
+  position: relative;
+  isolation: isolate;
+}
+.studio-team-glow::before,
+.studio-team-glow::after {
+  content: "";
+  position: absolute;
+  inset: calc(-1 * var(--studio-team-glow-thickness));
+  border-radius: inherit;
+  z-index: -1;
+  pointer-events: none;
+  opacity: var(--studio-team-glow-opacity);
+  transition: opacity 0.4s ease;
+  /* Two opposed wedges so two stretches of the ring glow at once. */
+  background: conic-gradient(
+    from var(--studio-team-glow-angle),
+    transparent 0%,
+    var(--studio-team-glow-color) 12%,
+    transparent 33%,
+    transparent 50%,
+    var(--studio-team-glow-color) 62%,
+    transparent 83%
+  );
+  animation: studio-team-glow-spin var(--studio-team-glow-speed) linear infinite;
+}
+.studio-team-glow::after {
+  /* Blurred bloom twin, a touch larger. */
+  inset: calc(-1 * (var(--studio-team-glow-thickness) + 4px));
+  z-index: -2;
+  filter: blur(var(--studio-team-glow-bloom)) saturate(1.35);
+}
+@keyframes studio-team-glow-spin {
+  to { --studio-team-glow-angle: 360deg; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .studio-team-glow::before,
+  .studio-team-glow::after { animation: none; }
+}
+
+/* =============================================================================
+   10. surface-glass — frosted translucent glass panel (authored fresh)
+   A translucent, blurred surface for overlay chrome (modal shells, sticky bars,
+   toasts floated over content). The tint is the surface role mixed toward
+   transparent, so it reads in dark AND light; backdrop-filter blurs whatever
+   sits behind it. Give it a radius + padding at the call site.
+
+   Usage:  <div class="surface-glass rounded-xl p-4"> ... </div>
+   Tune:   --surface-glass-tint / --surface-glass-opacity / --surface-glass-blur /
+           --surface-glass-saturate / --surface-glass-border
+   ========================================================================== */
+.surface-glass {
+  --surface-glass-tint: var(--color-surface);
+  --surface-glass-opacity: 0.6;
+  --surface-glass-blur: 12px;
+  --surface-glass-saturate: 1.4;
+  background: color-mix(in srgb, var(--surface-glass-tint) calc(var(--surface-glass-opacity) * 100%), transparent);
+  -webkit-backdrop-filter: blur(var(--surface-glass-blur)) saturate(var(--surface-glass-saturate));
+          backdrop-filter: blur(var(--surface-glass-blur)) saturate(var(--surface-glass-saturate));
+  border: 1px solid var(--surface-glass-border, color-mix(in srgb, var(--color-border-strong) 70%, transparent));
+}
+
+/* =============================================================================
+   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.
+
+   Usage:  <div class="conic-surface rounded-2xl p-8"> ...content... </div>
+   Tune:   --conic-surface-from / --conic-surface-to / --conic-surface-duration
+   ========================================================================== */
+.conic-surface {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+}
+
+.conic-surface::before {
+  content: "";
+  position: absolute;
+  inset: -50%;
+  z-index: -1;
+  background: conic-gradient(
+    from 0deg,
+    var(--conic-surface-from, var(--color-cta)),
+    var(--conic-surface-to, var(--color-surface)),
+    var(--conic-surface-from, var(--color-cta))
+  );
+  animation: conic-surface-spin var(--conic-surface-duration, 16s) linear infinite;
+}
+
+@keyframes conic-surface-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* =============================================================================
+   LEVELING family — the .level-badge tier ladder (1–10) + the level-up burst.
+   Ported from turf-monster's application.css so the ENGINE ships the polished
+   leveling badges (was app-provided). Gate the surface with
+   Studio.feature?(:leveling); the admin/style Tricks section renders every tier
+   disabled-but-present when the host has leveling off.
+
+   Tiers:  L1 outline starter · L2–3 filled green · L4–6 lifted/glowed/beveled ·
+           L7 two-tone green→mint · L8 mint · L9 animated mint · L10 holographic.
+
+   Tokens:
+     --color-primary-500-rgb   the engine primary scale (emitted by
+                               studio_theme_css_tag), space-separated "R G B", so
+                               the badges restyle per app. ALWAYS the modern slash
+                               form rgb(var(...) / A) — never legacy
+                               rgba(var(...), A), which browsers silently drop for
+                               a space-separated var. (TM's levelGlow shipped the
+                               broken comma form; this port fixes it to slash.)
+     --level-mint / --level-mint-rgb   the fixed mint accent (#06d6a0) the green→
+                               mint arc lands on — a knob with a sensible default
+                               so a consumer can retune the arc without forking.
+   ========================================================================== */
+.level-badge {
+  --level-mint: #06d6a0;
+  --level-mint-rgb: 6 214 160;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 10px;
+  border-radius: 9999px;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1.4;
+  letter-spacing: 0.02em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  white-space: nowrap;
+  border: 1px solid transparent;
+}
+
+.level-badge-1 {
+  background: rgb(var(--color-primary-500-rgb) / 0.15);
+  color: var(--color-cta);
+  border-color: rgb(var(--color-primary-500-rgb) / 0.3);
+}
+
+.level-badge-2 {
+  background: linear-gradient(
+    180deg,
+    rgb(var(--color-primary-500-rgb) / 0.55),
+    rgb(var(--color-primary-500-rgb) / 0.35)
+  );
+  color: #fff;
+  border-color: rgb(var(--color-primary-500-rgb) / 0.6);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+}
+
+.level-badge-3 {
+  /* L2 fill plus inset top highlight + inset bottom shadow line ("polished pin"). */
+  background: linear-gradient(
+    180deg,
+    rgb(var(--color-primary-500-rgb) / 0.6),
+    rgb(var(--color-primary-500-rgb) / 0.4)
+  );
+  color: #fff;
+  border-color: rgb(var(--color-primary-500-rgb) / 0.7);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.4),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+}
+
+.level-badge-4 {
+  /* L2 fill plus an outer drop shadow — lifted off the surface. */
+  background: linear-gradient(
+    180deg,
+    rgb(var(--color-primary-500-rgb) / 0.6),
+    rgb(var(--color-primary-500-rgb) / 0.4)
+  );
+  color: #fff;
+  border-color: rgb(var(--color-primary-500-rgb) / 0.7);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+}
+
+.level-badge-5 {
+  /* L4 fill with a static medium green glow around the perimeter. */
+  background: linear-gradient(
+    180deg,
+    rgb(var(--color-primary-500-rgb) / 0.6),
+    rgb(var(--color-primary-500-rgb) / 0.4)
+  );
+  color: #fff;
+  border-color: rgb(var(--color-primary-500-rgb) / 0.85);
+  box-shadow:
+    0 0 8px rgb(var(--color-primary-500-rgb) / 0.7),
+    0 0 16px rgb(var(--color-primary-500-rgb) / 0.4);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+}
+
+.level-badge-6 {
+  /* L5's glow plus a beveled-coin treatment (inset highlight/shadow + drop). */
+  background: linear-gradient(
+    180deg,
+    rgb(var(--color-primary-500-rgb) / 0.7),
+    rgb(var(--color-primary-500-rgb) / 0.45)
+  );
+  color: #fff;
+  border-color: rgb(var(--color-primary-500-rgb) / 0.85);
+  box-shadow:
+    inset 0 2px 0 rgba(255, 255, 255, 0.5),
+    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
+    0 1px 2px rgba(0, 0, 0, 0.35),
+    0 0 8px rgb(var(--color-primary-500-rgb) / 0.7),
+    0 0 16px rgb(var(--color-primary-500-rgb) / 0.4);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+}
+
+.level-badge-7 {
+  /* L6's beveled face with the fill swapped to a diagonal primary → mint gradient. */
+  background: linear-gradient(
+    135deg,
+    rgb(var(--color-primary-500-rgb) / 0.8),
+    rgb(var(--level-mint-rgb, 6 214 160) / 0.7)
+  );
+  color: #fff;
+  border-color: rgb(var(--color-primary-500-rgb) / 0.85);
+  box-shadow:
+    inset 0 2px 0 rgba(255, 255, 255, 0.5),
+    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
+    0 1px 2px rgba(0, 0, 0, 0.35),
+    0 0 8px rgb(var(--color-primary-500-rgb) / 0.7),
+    0 0 16px rgb(var(--color-primary-500-rgb) / 0.4);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+}
+
+.level-badge-8 {
+  /* Full transition to mint — the green-family arc's destination color. */
+  background: linear-gradient(135deg, #16e5b6, var(--level-mint, #06d6a0) 60%, #028a6f);
+  color: #fff;
+  border-color: rgb(var(--level-mint-rgb, 6 214 160) / 0.85);
+  box-shadow:
+    inset 0 2px 0 rgba(255, 255, 255, 0.5),
+    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
+    0 1px 2px rgba(0, 0, 0, 0.35),
+    0 0 10px rgb(var(--level-mint-rgb, 6 214 160) / 0.7),
+    0 0 20px rgb(var(--level-mint-rgb, 6 214 160) / 0.4);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+  font-weight: 800;
+}
+
+.level-badge-9 {
+  /* Animated green ↔ mint gradient (level-shimmer sweeps the mint peak across). */
+  background: linear-gradient(
+    135deg,
+    rgb(var(--color-primary-500-rgb) / 0.9),
+    rgb(var(--level-mint-rgb, 6 214 160) / 0.9) 50%,
+    rgb(var(--color-primary-500-rgb) / 0.9)
+  );
+  background-size: 200% 200%;
+  color: #fff;
+  border-color: rgb(var(--level-mint-rgb, 6 214 160) / 0.85);
+  box-shadow:
+    inset 0 2px 0 rgba(255, 255, 255, 0.5),
+    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
+    0 1px 2px rgba(0, 0, 0, 0.35),
+    0 0 10px rgb(var(--level-mint-rgb, 6 214 160) / 0.7),
+    0 0 20px rgb(var(--level-mint-rgb, 6 214 160) / 0.4);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  animation: level-shimmer 2.5s ease-in-out infinite;
+  font-weight: 800;
+}
+
+.level-badge-10 {
+  /* Legendary — holographic 8-stop spectrum on a 400% pan. The rainbow is a fixed
+     decorative spectrum (not theme-driven), so its stops stay literal. */
+  background: linear-gradient(
+    135deg,
+    #ff0080,
+    #ff8c00,
+    #ffd700,
+    #06d6a0,
+    #4baf50,
+    #00d4ff,
+    #8e82fe,
+    #ff0080
+  );
+  background-size: 400% 400%;
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.5);
+  box-shadow:
+    0 0 24px rgba(255, 255, 255, 0.55),
+    0 0 48px rgba(255, 215, 0, 0.35),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-shadow:
+    0 0 6px rgba(255, 255, 255, 0.85),
+    0 1px 2px rgba(0, 0, 0, 0.5);
+  animation: level-holographic 4s ease infinite;
+  font-weight: 900;
+  letter-spacing: 0.04em;
+}
+
+@keyframes level-shimmer {
+  0%, 100% { background-position: 0% 50%; }
+  50%      { background-position: 100% 50%; }
+}
+
+@keyframes level-holographic {
+  0%, 100% { background-position: 0% 50%; }
+  50%      { background-position: 100% 50%; }
+}
+
+/* level-up-pop — the composite pop + glow burst fired when a user levels up.
+   Apply to the badge (or its wrapper); one-shot on add. */
+.level-up-pop {
+  animation: levelPop 1.1s cubic-bezier(0.34, 1.56, 0.64, 1), levelGlow 1.4s ease-out;
+  z-index: 10;
+}
+
+/* nav-level-pop — the smaller nav level-up bounce (shared by the nav seeds bar). */
+.nav-level-pop {
+  animation: navLevelPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes levelPop {
+  0%   { transform: scale(1)   rotate(0deg); }
+  12%  { transform: scale(3.2) rotate(-4deg); }
+  28%  { transform: scale(2.4) rotate(3deg); }
+  42%  { transform: scale(2.8) rotate(-1.5deg); }
+  60%  { transform: scale(2.2) rotate(1deg); }
+  78%  { transform: scale(1.3) rotate(0deg); }
+  100% { transform: scale(1)   rotate(0deg); }
+}
+
+@keyframes levelGlow {
+  /* Modern slash form — a space-separated --color-*-rgb var is invalid inside
+     legacy rgba(var(...), A) and silently drops (TM's original bug). */
+  0%   { box-shadow: 0 0 0 0    rgb(var(--color-primary-500-rgb) / 0.9); }
+  25%  { box-shadow: 0 0 40px 16px rgb(var(--color-primary-500-rgb) / 0.7); }
+  50%  { box-shadow: 0 0 25px 10px rgb(var(--color-primary-500-rgb) / 0.4); }
+  100% { box-shadow: 0 0 0 0    rgb(var(--color-primary-500-rgb) / 0); }
+}
+
+@keyframes navLevelPop {
+  0%   { transform: scale(1); }
+  15%  { transform: scale(1.5); }
+  35%  { transform: scale(1.2); }
+  50%  { transform: scale(1.4); }
+  70%  { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}
+
+/* badge-with-sheen — wrap any pill to fire a one-shot diagonal white sheen on
+   render. Ported from TM's Tailwind utility as a plain class (this layer's
+   convention). Tune the fire time with --sheen-delay to sync to nearby motion. */
+.badge-with-sheen {
+  position: relative;
+  display: inline-block;
+  border-radius: 9999px;
+}
+
+.badge-with-sheen::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 35%,
+    rgba(255, 255, 255, 0.45) 50%,
+    transparent 65%
+  );
+  background-size: 250% 100%;
+  background-repeat: no-repeat;
+  background-position: 200% 0;
+  border-radius: inherit;
+  pointer-events: none;
+  animation: badge-sheen-sweep 2.5s ease-in-out var(--sheen-delay, 0s) 1 both;
+}
+
+@keyframes badge-sheen-sweep {
+  from { background-position:  200% 0; }
+  to   { background-position: -100% 0; }
+}
+
+/* Leveling honors reduced-motion: the animated tiers settle to a static gradient
+   and the bursts/sheen do not fire. */
+@media (prefers-reduced-motion: reduce) {
+  .level-badge-9,
+  .level-badge-10,
+  .level-up-pop,
+  .nav-level-pop,
+  .badge-with-sheen::after {
+    animation: none;
+  }
+}
+
 /* =============================================================================
    Reduced-motion: honor the user preference. Animated primitives settle into a
-   sensible static resting state; the static primitives (fade-edge) are unaffected.
+   sensible static resting state; the static primitives (fade-edge, text-gradient,
+   surface-glass) are unaffected.
    ========================================================================== */
 @media (prefers-reduced-motion: reduce) {
   .studio-border-glow::before,
@@ -431,10 +940,116 @@
   .sheen::after,
   .ping,
   .ping.ping--dot::after,
-  .progress-meter--indeterminate .progress-meter-fill {
+  .progress-meter--indeterminate .progress-meter-fill,
+  .studio-glow--pulse,
+  .conic-surface::before {
     animation: none;
   }
 
   .loading-dots span { opacity: 0.85; }
   .sheen::after { display: none; }
 }
+
+/* =============================================================================
+   8. Modal host motion — the studio modal card + backdrop animation layer.
+   Ported verbatim from turf-monster app/assets/tailwind/application.css (the
+   modal system migrated into the engine). Drives the shared modal host and the
+   living style guide's page-scoped host (dsModals): the store binds the
+   .modal-card-{mount,unmount,shake-in,swap-*} + .modal-backdrop-{mount,unmount}
+   classes; the card open/close use spring curves so the modal POPS in with a
+   small overshoot and POPS out with a tiny anticipation windup. Backdrop stays
+   a clean fade. Durations are synchronized with the store's close/swap timeouts
+   (CLOSE_ANIM_MS 220, SWAP_IN_MS 220) so a keyframe plays fully before the DOM
+   unmounts. Bump both together if you retune.
+   ========================================================================== */
+
+/* Scroll lock applied by the store's _sync() when the stack is non-empty. */
+body.modal-open { overflow: hidden; }
+
+/* Drain-bar keyframe — a translucent overlay sweeping a CTA button over its
+   countdown (studio/modals/blocks/_cta_redirect + _success_card cta_drain). */
+@keyframes studio-modal-drain {
+  from { transform: scaleX(1); }
+  to   { transform: scaleX(0); }
+}
+
+/* Card mount / unmount + backdrop fade. */
+@keyframes modal-card-in {
+  0%   { opacity: 0; transform: scale(0.86) translateY(12px); }
+  55%  { opacity: 1; transform: scale(1.04) translateY(-3px); }
+  80%  {              transform: scale(0.99) translateY(1px);  }
+  100% { opacity: 1; transform: scale(1) translateY(0);        }
+}
+@keyframes modal-card-out {
+  0%   { opacity: 1; transform: scale(1) translateY(0);       }
+  25%  { opacity: 1; transform: scale(1.03) translateY(-2px); }
+  100% { opacity: 0; transform: scale(0.92) translateY(4px);  }
+}
+@keyframes modal-backdrop-in  { from { opacity: 0; } to { opacity: 1; } }
+@keyframes modal-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
+
+.modal-card-mount       { animation: modal-card-in     320ms cubic-bezier(0.34, 1.4, 0.5, 1) both; }
+.modal-card-unmount     { animation: modal-card-out    220ms cubic-bezier(0.6, -0.2, 0.7, 0.4) forwards; }
+.modal-backdrop-mount   { animation: modal-backdrop-in 180ms ease-out both; }
+.modal-backdrop-unmount { animation: modal-backdrop-out 200ms ease-in forwards; }
+
+/* Named entrance "shake" — Discord-style "not quite yet" nope. Registered as
+   enterAnim: 'shake'; duration MUST match the store registry ms (600). */
+@keyframes modal-card-shake-in {
+  0%   { opacity: 0; transform: scale(0.92) translateX(0);    }
+  22%  { opacity: 1; transform: scale(1)    translateX(-11px); }
+  37%  {             transform: scale(1)    translateX(9px);   }
+  52%  {             transform: scale(1)    translateX(-7px);  }
+  67%  {             transform: scale(1)    translateX(5px);   }
+  82%  {             transform: scale(1)    translateX(-3px);  }
+  100% { opacity: 1; transform: scale(1)    translateX(0);    }
+}
+.modal-card-shake-in { animation: modal-card-shake-in 600ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
+
+/* Inter-modal swap — directional slide for wizard forward-flow feel. Forward:
+   leaving card exits stage-right, new one enters from the left. */
+@keyframes modal-card-slide-out-right {
+  from { opacity: 1; transform: translateX(0) scale(1); }
+  to   { opacity: 0; transform: translateX(48px) scale(0.98); }
+}
+@keyframes modal-card-slide-in-left {
+  from { opacity: 0; transform: translateX(-48px) scale(0.98); }
+  to   { opacity: 1; transform: translateX(0) scale(1); }
+}
+.modal-card-swap-out { animation: modal-card-slide-out-right 220ms cubic-bezier(0.4, 0, 1, 1) forwards; }
+.modal-card-swap-in  { animation: modal-card-slide-in-left   220ms cubic-bezier(0, 0, 0.2, 1) both; }
+
+/* Back-direction pair — exits stage-left, enters from the right. */
+@keyframes modal-card-slide-out-left {
+  from { opacity: 1; transform: translateX(0) scale(1); }
+  to   { opacity: 0; transform: translateX(-48px) scale(0.98); }
+}
+@keyframes modal-card-slide-in-right {
+  from { opacity: 0; transform: translateX(48px) scale(0.98); }
+  to   { opacity: 1; transform: translateX(0) scale(1); }
+}
+.modal-card-swap-out-back { animation: modal-card-slide-out-left 220ms cubic-bezier(0.4, 0, 1, 1) forwards; }
+.modal-card-swap-in-back  { animation: modal-card-slide-in-right 220ms cubic-bezier(0, 0, 0.2, 1) both; }
+
+/* Vestibular safety — drop the spring/slide, just fade fast. */
+@media (prefers-reduced-motion: reduce) {
+  .modal-card-mount,
+  .modal-card-unmount,
+  .modal-card-shake-in,
+  .modal-card-swap-out,
+  .modal-card-swap-in,
+  .modal-card-swap-out-back,
+  .modal-card-swap-in-back,
+  .modal-backdrop-mount,
+  .modal-backdrop-unmount {
+    animation-duration: 80ms;
+    animation-timing-function: linear;
+  }
+  @keyframes modal-card-shake-in { from { opacity: 0; } to { opacity: 1; } }
+  @keyframes modal-card-in  { from { opacity: 0; } to { opacity: 1; } }
+  @keyframes modal-card-out { from { opacity: 1; } to { opacity: 0; } }
+  @keyframes modal-card-slide-out-right { from { opacity: 1; } to { opacity: 0; } }
+  @keyframes modal-card-slide-in-left   { from { opacity: 0; } to { opacity: 1; } }
+  @keyframes modal-card-slide-out-left  { from { opacity: 1; } to { opacity: 0; } }
+  @keyframes modal-card-slide-in-right  { from { opacity: 0; } to { opacity: 1; } }
+}

data/app/controllers/style_controller.rb

@@ -0,0 +1,25 @@
+# The living style guide — a single admin-gated page (/admin/style) that renders
+# the engine's shared UI primitives (buttons, surfaces, the seven motion
+# primitives, the leveling badges, and the theme role tokens) live in the host
+# app's theme. Mirrors ThemeSettingsController: a plain host-inherited controller,
+# gated by `require_admin` from the already-included Studio::ErrorHandling concern.
+# The view is a bare content wrapper that renders inside each host's
+# application.html.erb, so it inherits that app's navbar + theme automatically.
+#
+# Reached at /admin/style (helper admin_style_path). The legacy /admin/design_system
+# route redirects here and keeps its admin_design_system_path helper resolving, so a
+# shipped host sidebar link that still points at the old helper keeps working.
+class StyleController < ApplicationController
+  before_action :require_admin
+
+  # Load the live theme so the Theme section (the landing section, folded in from
+  # /admin/theme) shows this app's saved colors + the CSRF-protected editor.
+  # Best-effort: the section renders from Studio.theme_config defaults when no
+  # ThemeSetting row exists, so a load hiccup must not take the whole page down.
+  def index
+    @theme_setting  = ThemeSetting.current if defined?(ThemeSetting)
+    @theme_defaults = Studio.theme_config  if Studio.respond_to?(:theme_config)
+  rescue StandardError => e
+    Rails.logger.warn("[style] theme preload skipped: #{e.message}")
+  end
+end

data/app/views/studio/modals/_crop_photo.html.erb

@@ -21,8 +21,12 @@
 
   Single root: lives inside the host's <template x-if>, so only the outer
   div is the top-level element here.
+
+  Local: store — Alpine store name this modal is mounted in. Default "modals".
+  The living style guide passes store: "dsModals" for its page-scoped host.
 %>
-<div x-data="cropPhotoModal()">
+<% crop_store = local_assigns.fetch(:store, "modals") %>
+<div x-data="cropPhotoModal({ store: '<%= crop_store %>' })">
   <h3 class="text-heading font-bold text-lg text-center mb-4">Crop Photo</h3>
 
   <template x-if="error">